plugins – Update Content for a Custom Block Toolbar Button

Question

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 user/rich-text';
import { BlockControls } from 'wordpress user/block-editor';
import { ToolbarGroup, ToolbarButton, Button } from 'wordpress user/components';

/*
Modal
*/ import { Modal } from 'wordpress user/components'; import { useState } from 'wordpress user/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.

0
Tien Nguyen Van 1 month 2022-12-30T20:26:30-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse