Add button to Block toolbar: toggleFormat is undefined

admin管理员组

文章数量:1314588

I'm try to add a custom button to the toolbar for paragraph blocks.

I followed the steps reproduced in this great tutorial: /

The button is correctly showing up and every piece of code in that project is working good.

I have some trouble to get the content updated inside the editor when the button is clicked.

I tried to follow this guidelines: / but I get a console error saying that the method toggleFormat is undefined.

I share this github: Gutenberg Buttons, if someone can help me to fix the issue.

Thank you

I'm try to add a custom button to the toolbar for paragraph blocks.

I followed the steps reproduced in this great tutorial: https://neliosoftware/blog/how-to-add-a-button-to-the-gutenberg-editor-using-wordpress-scripts/

The button is correctly showing up and every piece of code in that project is working good.

I have some trouble to get the content updated inside the editor when the button is clicked.

I tried to follow this guidelines: https://developer.wordpress/block-editor/tutorials/format-api/3-apply-format/ but I get a console error saying that the method toggleFormat is undefined.

I share this github: Gutenberg Buttons, if someone can help me to fix the issue.

Thank you

• block-editor

Share Improve this question edited Nov 26, 2020 at 16:10 Tom J Nowell♦ 61k77 gold badges7979 silver badges148148 bronze badges asked Nov 26, 2020 at 15:24 SuPerGiuSuPerGiu 311 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Now I can see what the problem is. You are not using the onChange properly. It comes from the props of the edit component:

Here you have a complete example that works:

registerFormatType(
    'nelio/keyboard', {
        title: __( 'Key', 'nelio' ),
        tagName: 'kbd',
        className: null,
        edit: ( { value, onChange } ) => (
            <RichTextToolbarButton
                icon="editor-removeformatting"
                title={ __( 'Key', 'nelio' ) }
                onClick={ () => onChange( toggleFormat( value, { type: 'nelio/keyboard' } ) ) }
            />
        ),
    }
);

本文标签： Add button to Block toolbar toggleFormat is undefined