Extend core gutenberg block or make a new one?

  • Hi

    If one were to make a plugin for gutenberg, is it better to extend a core block’s functionality to add a custom button to a block’s toolbar(in my case, the paragraph block), or make a new block altogether?

    I want to add a new button to the toolbar for the paragraph block, and I feel like it is a waste of time to make a new paragraph block just for one button because I want to keep all the existing paragraph block functionality.

    I have read about the Format API and I’m not sure it is what I need because that API seems to be specifically for HTML wrapping tags, which I don’t think is what I need.

    When I googled this issue of adding custom buttons, it seems like people are recommending to make a new block altogether. This is problematic for me because I just want to extend the paragraph block – not change it up altogether. If gutenberg were to be updated in the future I’d want to upgrade all that functionality and add my own extension as an optional plugin.

    Are there any recommendations on how to tackle this?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hey there,

    That really depends on what exactly you want to do. You can add a button to existing Blocks using filters, including Block Controls. What exact functionality do you want so I could suggest you a good way?

    Thread Starter electrifried

    (@electrifried)

    I would like to add a custom button to the paragraph block toolbar to add predefined images into the text.
    Would I be able to do this using block filters alone?

    You can use editor.BlockEdit filter to do this. You need to add a Button to BlockControl which will trigger a function. In that function, you need to get the content of Paragraph and place your image in the beginning/end, or wherever you want to do it.

    This code is probably the best resource for intro on how to use filters: https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/hooks/custom-class-name.js

    Hope it helps. ??

    Thread Starter electrifried

    (@electrifried)

    Thank you very much for pointing me in the right direction – I will look into these and try to figure it out XD

    Hardeep Asrani

    (@hardeepasrani)

    Glad to be of help. ??

    Hello,
    I want to extend the core paragraph block functionality to add a custom button to the block toolbar.

    Is there any tutorials on how to use editor.BlockEdit filter?

    Many thanks in advance.
    Ammar

    • This reply was modified 5 years, 9 months ago by ammarjabakji.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Extend core gutenberg block or make a new one?’ is closed to new replies.