Hello,
I am trying to create a custom button on the Block Toolbar of the Full Site Editor. This button could insert custom content to paragraphs, button text, or headings. But I don’t know how to finish my code. Here is the code:
import { registerFormatType } from '@wordpress/rich-text';
import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton, Button } from '@wordpress/components';
/*
https://developer.wordpress.org/block-editor/reference-guides/components/modal/
*/
import { Modal } from '@wordpress/components';
import { useState } from '@wordpress/element';
const MyCustomButtonIcon = ( props ) => {
const [ isOpen, setOpen ] = useState( false );
const openModal = () => setOpen( true );
const closeModal = () => setOpen( false );
return (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
icon="buddicons-activity"
title="Custom Icon"
onClick={ openModal }
/>
{ isOpen && (
<Modal title="Search an Icon" onRequestClose={ closeModal }>
<Button onClick={'**What should I put here to update the content?**'}>
Insert a thing
</Button>
</Modal>
) }
</ToolbarGroup>
</BlockControls>
);
};
registerFormatType( 'my-custom-format/my-sample-output', {
title: 'Custom Icon',
tagName: 'i',
className: null,
attributes: {
className: 'class'
},
edit: MyCustomButtonIcon,
} );
Hope you could help me on this. What is the function that I need to use to update the content of the block?
Thank you very much.
Top comments (0)