diff --git a/components/media-toolbar/index.tsx b/components/media-toolbar/index.tsx index 55d9d715..12adb23e 100644 --- a/components/media-toolbar/index.tsx +++ b/components/media-toolbar/index.tsx @@ -36,6 +36,12 @@ interface MediaToolbarProps { }; } +const DEFAULT_LABELS = { + add: __('Add Image', '10up-block-components'), + remove: __('Remove Image', '10up-block-components'), + replace: __('Replace Image', '10up-block-components'), +}; + /* * MediaToolbar * @@ -49,14 +55,11 @@ export const MediaToolbar: React.FC = ({ onRemove, isOptional = false, id, - labels = { - add: __('Add Image', '10up-block-components'), - remove: __('Remove Image', '10up-block-components'), - replace: __('Replace Image', '10up-block-components'), - }, + labels = {}, }) => { const hasImage = !!id; const { media } = useMedia(id); + const mergedLabels = { ...DEFAULT_LABELS, ...labels }; return ( @@ -65,11 +68,11 @@ export const MediaToolbar: React.FC = ({ {!!isOptional && ( - {labels.remove} + {mergedLabels.remove} )} @@ -79,7 +82,7 @@ export const MediaToolbar: React.FC = ({ onSelect={onSelect} render={({ open }) => ( - {labels.add} + {mergedLabels.add} )} />