Custom format type for the core/button block

[Branch]

Hi!

I’ve successfully built a custom format type that I based off of this tutorial. This is working great. However, my custom format doesn’t appear for the core button block.

Is there any way for me to apply the custom format to buttons as well? From what I've understood any custom formats should be applied by default to all blocks that are using the RichText component, which the button block is doing. However, the button block has the prop withoutInteractiveFormatting set for the RichText component within, which I believe is the cause of my problem. This can be seen in the source here.

Is there any way for me to get my custom format to appear for the button block without having to build my own custom button block?

[devfle]

Hi @Branch,

maybe not the ideal way for solving this, but try to wrap your <ToolbarButton> component inside a <Fill>component. The Toolbar uses the Wordpress Slot-Fill-System: https://developer.wordpress.org/block-editor/reference-guides/components/slot-fill/

Example:

<Fill name="RichText.ToolbarControls.italic">
  <ToolbarButton>
      ...
  </ToolbarButton>
</Fill>

This will render your custom format Type next to the italic format type and not anymore in the more options menu. You should then also specify an icon in the ToolbarButton component via prop.

Hope this is gonna help 😄

[Branch]

Hi @devfle

Thanks for your suggestion! I gave it a try and unfortunately it didn't solve my issue.

I had made some modifications after having followed the tutorial. The following is my original piece of code:

<BlockControls>
  <ToolbarGroup>
    <ToolbarButton
      icon="money-alt"
      title={__("My link")}
      onClick={() => {
      setShowPopover(true);
      }}
      isActive={isActive}
    />
  </ToolbarGroup>
</BlockControls>

My code including your suggestion:

<BlockControls>
  <ToolbarGroup>
    <Fill name="RichText.ToolbarControls.italic">
      <ToolbarButton
        icon="money-alt"
        title={__("My link")}
        onClick={() => {
        setShowPopover(true);
        }}
        isActive={isActive}
      />
    </Fill>
  </ToolbarGroup>
</BlockControls>

However this only changes the location of the formatting option and it remains hidden for the button block.

I like the idea though. I'll explore portal rendering and see if I can figure this out. If I can't get this to work I believe that my only other option would be to build a tinyMCE plugin.

[devfle]

What happens if you remove the BlockControls and the ToolbarGroup component? This approach worked for me.

    <Fill name="RichText.ToolbarControls.italic">
      <ToolbarButton
        icon="money-alt"
        title={__("My link")}
        onClick={() => {
        setShowPopover(true);
        }}
        isActive={isActive}
      />
    </Fill>

[devfle]

Hi @Branch , I have checked the filter mechanism of the prop you've mentioned. Does your custom format type includes one of these tags?

gutenberg/packages/block-editor/src/components/rich-text/use-format-types.js

Lines 17 to 29 in 99c3dda

	const interactiveContentTags = new Set( [
	'a',
	'audio',
	'button',
	'details',
	'embed',
	'iframe',
	'input',
	'label',
	'select',
	'textarea',
	'video',
	] );

if yes, they will be filtered:

gutenberg/packages/block-editor/src/components/rich-text/use-format-types.js

Lines 74 to 79 in 99c3dda

	if (
	withoutInteractiveFormatting &&
	interactiveContentTags.has( tagName )
	) {
	return false;
	}

Changing the position seems not to be the solution 😄

[Branch]

Hi @devfle

Sorry for the late reply, had a busy weekend!

I'm using an a tag for my custom format option so you found the cause!

I'll continue looking into this during the week and see if I can find any workaround.

[devfle]

Hi @devfle

Sorry for the late reply, had a busy weekend!

I'm using an a tag for my custom format option so you found the cause!

I'll continue looking into this during the week and see if I can find any workaround.

I'm glad I could help. Maybe you can also implement your feature with JavaScript.

Would you select the answer that identified the cause as the solution to this discussion? That way, other users can find the cause of their problem more quickly in the future.

I wish you much success with your implementation!