Block Editor Inserter

  • Resolved Vahan

    (@vahan889)


    3 months ago

    Dear all,

    I’m working on a plugin that should have easier/quicker access to my actions in the admin Gutenberg editor. And for that I’m thinking of adding a button tag next to one of them:

    1. native empty core/paragraph blocks placeholder, next to the span element, see the screenshot
    2. in the block-editor-inserter container, next to the block-editor-inserter__toggle button, see the screenshot

    I checked the block editor handbook but didn’t find anything useful for this request.

    It would be great if you could help me.

    Thank you very much.
    Regards,
    Vahan

    • This topic was modified 3 months ago by Vahan.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Aaron Robertshaw

    (@aaronrobertshaw)

    Hi @vahan889 ??

    I’m not sure I’m 100% following what you are trying to achieve. Is your intention to add extra buttons alongside the existing block inserter? This sounds like it would be detrimental to the overall user experience.

    An alternative approach might be to leverage the editor’s command palette.

    Your users could then access functionality quickly by using a keyboard shortcut or clicking the centre of the document toolbar, to open the command palette. From there, recent commands will be available or a quick search will find the command.

    This post might help if you decide to go the custom command route.

    I hope that helps!

    Thread Starter Vahan

    (@vahan889)

    Hi @aaronrobertshaw ??,

    Thanks for the reply.

    Yes, you are right about the second point, I want to add a button next to the insert button (“+”) and I agree with you about the user experience.

    That’s why I am also looking for a solution of the first point. I want to add a button like this. Do you have any suggestions for this case (first point)?

    Thank you!
    Vahan

    Thanks for the clarification @vahan889.

    I don’t see a great difference between either location you’re looking at.

    You might be able to customize the DefaultBlockAppender or add a renderAppender function to a custom block that uses InnerBlocks. This all could be hard to achieve and difficult to maintain.

    As for adding an extra button, I still have the same UX concerns but ultimately that’s 100% your call. I’m afraid the best suggestion I have is to lean into the command palette.

    Thread Starter Vahan

    (@vahan889)

    Hi @aaronrobertshaw ,

    I got you, but can you explain what means “customize the?DefaultBlockAppender“? This is a JS function, is there a way (hooks maybe) to customize it? Or how?

    And can you share some documentation how to do this: “add a?renderAppender?function to a custom block that uses?InnerBlocks“? Because I didn’t find useful article for that.

    Thanks for your help!

    Regards,
    Vahan

    This isn’t something I have had to try and accomplish before. My understanding is that defining a renderAppender function that is passed to InnerBlocks will allow that default appender to be replaced. The catch with this though is it might only be possible for custom blocks.

    You can find some documentation on the renderAppender prop for InnerBlocks in this readme.

    This all suggests my tip that this approach could be difficult to achieve and maintain was correct.

    I wish you luck with whichever path forward you take. I’m not sure I can help much further as I’ve reached the end of my knowledge in this area ??

    Thread Starter Vahan

    (@vahan889)

    Thanks for your help! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.