Skip to content

Commit

Permalink
Add example with custom media toolbar labels
Browse files Browse the repository at this point in the history
  • Loading branch information
Firestorm980 committed Jun 24, 2024
1 parent 3ecc8ac commit 8a164d1
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 0 deletions.
18 changes: 18 additions & 0 deletions example/src/blocks/custom-media-example/block.json
Original file line number Diff line number Diff line change
@@ -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"
}
56 changes: 56 additions & 0 deletions example/src/blocks/custom-media-example/edit.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
)
}
10 changes: 10 additions & 0 deletions example/src/blocks/custom-media-example/index.ts
Original file line number Diff line number Diff line change
@@ -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
} );

0 comments on commit 8a164d1

Please sign in to comment.