DEV Community

Tien Nguyen
Tien Nguyen

Posted on

Update Content for a Custom Block Toolbar Button (Full Site Editing)

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,
} );
Enter fullscreen mode Exit fullscreen mode

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)