Feature: Allow passing custom labels to MediaToolbar component

components/media-toolbar/index.tsx

@@ -25,6 +25,15 @@ interface MediaToolbarProps {
 	 * The ID of the media, in this case the image.
 	 */
 	id: number;
+
+	/**
+	 * Labels for the buttons.
+	 */
+	labels?: {
+		replace?: string;
+		remove?: string;
+		add?: string;
+	};
 }
 
 /*
@@ -40,6 +49,11 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 	onRemove,
 	isOptional = false,
 	id,
+	labels = {
+		add: __('Add Image', '10up-block-components'),
+		remove: __('Remove Image', '10up-block-components'),
+		replace: __('Replace Image', '10up-block-components'),
+	},
 }) => {
 	const hasImage = !!id;
 	const { media } = useMedia(id);
@@ -51,11 +65,11 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 					<MediaReplaceFlow
 						mediaUrl={media?.source_url}
 						onSelect={onSelect}
-						name={__('Replace Image', '10up-block-components')}
+						name={labels.replace}
 					/>
 					{!!isOptional && (
 						<ToolbarButton onClick={onRemove}>
-							{__('Remove Image', '10up-block-components')}
+							{labels.remove}
 						</ToolbarButton>
 					)}
 				</>
@@ -65,7 +79,7 @@ export const MediaToolbar: React.FC<MediaToolbarProps> = ({
 						onSelect={onSelect}
 						render={({ open }) => (
 							<ToolbarButton onClick={open}>
-								{__('Add Image', '10up-block-components')}
+								{labels.add}
 							</ToolbarButton>
 						)}
 					/>

components/media-toolbar/readme.md

@@ -5,6 +5,7 @@ The MediaToolbar component is build to quickly add a complete media editing expe
 ## Usage
 
 ```js
+import { __ } from '@wordpress/i18n';
 import { BlockControls } from '@wordpress/block-editor';
 import { MediaToolbar } from '@10up/block-components';
 
@@ -28,6 +29,11 @@ function BlockEdit(props) {
                     id={ imageId }
                     onSelect={ handleImageSelect }
                     onRemove={ handleImageRemove }
+                    labels={{
+                        add: __('Custom add label'),
+                        remove: __('Custom remove label'),
+                        replace: __('Custom replace label'), 
+                    }}
                 />
             </BlockControls>
             ...
@@ -43,4 +49,5 @@ function BlockEdit(props) {
 | `id` | `number`    | `null`   | image id          |
 | `onSelect` | `Function` | `null` | Callback that gets called with the new image when one is selected |
 | `onRemove` | `Function` | `null` | Callback that gets called when the remove image button is clicked |
-| `isOptional` | `boolean` | `false` | Wether or not the Remove Image button should be shown |
+| `isOptional` | `boolean` | `false` | Whether or not the Remove Image button should be shown |
+| `labels`     | `object` | `{}` | Custom labels prop. Used to override default labels for better UX when using different media types. Allows the sub properties `add`, `remove`, and `replace`. |

example/src/blocks/custom-media-example/block.json

@@ -0,0 +1,18 @@
+{
+	"name": "example/custom-media-example",
+	"apiVersion": 3,
+	"title": "Custom Media Example",
+	"description": "Example Block to show the custom media toolbar in usage",
+	"icon": "smiley",
+	"category": "common",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"imageId": {
+			"type": "number"
+		}
+	},
+	"editorScript": "file:./index.ts"
+}

example/src/blocks/custom-media-example/edit.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import { BlockControls, useBlockProps } from '@wordpress/block-editor';
+
+import { Image, MediaToolbar } from '@10up/block-components';
+
+export function BlockEdit(props) {
+    const {
+        attributes,
+        setAttributes
+    } = props;
+
+    const { imageId, focalPoint } = attributes;
+    const blockProps = useBlockProps();
+
+    const handleImageSelection = value => {
+        setAttributes({imageId: value.id })
+    };
+    const removeImage = () => setAttributes({imageId: null});
+
+	const handleFocalPointChange = value => {
+		setAttributes({focalPoint: value})
+	};
+
+    return (
+        <>
+            <BlockControls>
+                <MediaToolbar
+                    id={imageId}
+                    onSelect={ handleImageSelection }
+                    isOptional={true}
+                    onRemove={removeImage}
+                    labels={{
+                        replace: __('Replace your gif'),
+                        remove: __('Remove the gif'),
+                        add: __('Add a gif')
+                    }}
+                />
+            </BlockControls>
+            <div {...blockProps}>
+                <h2>Hello World!</h2>
+                <Image
+                    id={imageId}
+                    size="large"
+                    onSelect={handleImageSelection}
+                    className="example-image"
+                    allowedTypes={['image/gif']}
+                    labels={{
+                        title: __('Select a gif image'),
+                        instructions: __('Upload a gif or pick one from your media library.')
+                    }}
+                />
+            </div>
+        </>
+    )
+}

example/src/blocks/custom-media-example/index.ts

@@ -0,0 +1,10 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+import { BlockEdit } from './edit';
+import metadata from './block.json';
+
+registerBlockType( metadata, {
+    edit: BlockEdit,
+    save: () => null
+} );