Add example with custom media toolbar labels

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
+} );