How to add a toolbar button in toolbar but not in dropdown menu

[QiShaoXuan]

I try to add a toolbar button in toolbar like this:

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    console.log( 'toggle format' );
                },
            }
        );
    }
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'samp',
            className: null,
            edit: MyCustomButton,
        }
    );
} )( window.wp );

This is copied in gutenberg document

My question is why the button is always in the dropdown menu, how can I add it in toolbar.

And it seems like it is not allow to add in toolbar after I view the code in format-toolbar and rich-text

It is dependent on the props but none be passed.

Wait online, it's urgent

[technote-space]

I use BlockFormatControls to add buttons in toolbar.

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-toolbar/index.js#L36

[QiShaoXuan]

I use BlockFormatControls to add buttons in toolbar.

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/block-toolbar/index.js#L36

Thank you so much, could you tell me where did you get your screenshot of the plugin?

[andpor]

Have the same problem...none of the examples around work...toolbar buttons always added to the end of More Rich Text Controls dropdown menu...even sample code from WordPress does not work and the screenshot in documentation is dated because I do not see strikethrough in main toolbar either - only dropdown

so annoying...!!!!!

[ghostmaster]

@QiShaoXuan: can you please share example, how to do that ?

[QiShaoXuan]

@QiShaoXuan: can you please share example, how to do that ?

use BlockControls like this

<BlockControls>
  <Toolbar>
    <IconButton
      icon="edit"
    />
  </Toolbar>
</BlockControls>

[screeper]

Or in ES2015:

return wp.element.createElement(
    wp.components.IconButton, {
       icon: 'editor-code',
       label: 'Sample output',
       onClick: function() {
           console.log( 'toggle format' );
       },
   }
);

[mahnunchik]

What are the differences between RichTextToolbarButton and BlockFormatControls? Why there are only RichTextToolbarButton in the examples?

[fabienlege]

Same issue for me. Any news ?

[mahnunchik]

Hi @nickhamze how did you solve it?

[nickhamze]

Hi @nickhamze how did you solve it?

Look here at George's commit:
sortabrilliant/emojiconbini@d45573d

[chrisvanpatten]

It would be great to see the RichTextToolbarButton component support controlling placement. Something like an isPrimary attribute, or some other way to "promote" to the main toolbar.

Long term a similar pinning approach to plugin sidebars would be pretty neat, or like the block visibility modal.

[t-hamano]

It has been quite some time since the assignment was submitted, but I have been thinking about this issue again.

The answer to this issue is to use BlockControls, but there is no specific tutorial or sample code even in the latest Gutenberg.
I think it is a good idea to add a new step at the end of Formatting Toolbar API document. I would like to create a sample code and submit a PR.

[t-hamano]

By updating the documentation, #29181 will be resolved at the same time.
Also related to this issue are #22663 and #30069 regarding the option to move the core format from the drop-down to the toolbar.

[mjjwatson]

Reigniting this with a potential issue—when adding the icon using <BlockControls> as described, if you have a RichText component using inlineToolbar, it renders to the parent block toolbar rather than your inline toolbar. Any work around or suggestions there?

[t-hamano]

@mjjwatson
could you please attach a screenshot or specific code?

[mjjwatson]

Took a while as I've been away, sorry.
Using the example from the documentation:

const MyCustomButton = ( { isActive, onChange, value } ) => {
	return (
		<BlockControls>
			<ToolbarGroup>
				<ToolbarButton
					icon="editor-code"
					title="Sample output"
					onClick={ () => {
						onChange(
							toggleFormat( value, {
								type: 'my-custom-format/sample-output',
							} )
						);
					} }
					isActive={ isActive }
				/>
			</ToolbarGroup>
		</BlockControls>
	);
};
registerFormatType( 'my-custom-format/sample-output', {
	title: 'Sample output',
	tagName: 'samp',
	className: null,
	edit: MyCustomButton,
} );

And then creating a RichText component with inlineToolbar:

<RichText
	tagName={'h2'}
	value={ value }
	onChange={ value => {
              if(onChange)
                  onChange(value) 
          }}
         inlineToolbar
/>

This renders the new block control within the RichText's parent block, in the top left, as seen on this screenshot:

[t-hamano]

@mjjwatson
It is possible to render the RichTextToolbarButton component into an inline toolbar dropdown. However, as far as I can tell, there does not seem to be a slot provided to insert the component directly into the inline toolbar.