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)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more