From 8a164d13fbee1034c1beaadbcfb01f09c9734326 Mon Sep 17 00:00:00 2001
From: Jon Christensen <jon.christensen@10up.com>
Date: Mon, 24 Jun 2024 15:51:59 -0500
Subject: [PATCH] Add example with custom media toolbar labels

---
 .../blocks/custom-media-example/block.json    | 18 ++++++
 .../src/blocks/custom-media-example/edit.tsx  | 56 +++++++++++++++++++
 .../src/blocks/custom-media-example/index.ts  | 10 ++++
 3 files changed, 84 insertions(+)
 create mode 100644 example/src/blocks/custom-media-example/block.json
 create mode 100644 example/src/blocks/custom-media-example/edit.tsx
 create mode 100644 example/src/blocks/custom-media-example/index.ts

diff --git a/example/src/blocks/custom-media-example/block.json b/example/src/blocks/custom-media-example/block.json
new file mode 100644
index 00000000..32e11b46
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/example/src/blocks/custom-media-example/edit.tsx b/example/src/blocks/custom-media-example/edit.tsx
new file mode 100644
index 00000000..437fc02e
--- /dev/null
+++ b/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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/example/src/blocks/custom-media-example/index.ts b/example/src/blocks/custom-media-example/index.ts
new file mode 100644
index 00000000..cd17beb4
--- /dev/null
+++ b/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
+} );