How to add a toolbar button to image block?

Hey @ickata,

You can’t really do it in this way. You will have to use Block filters to do it: https://developer.www.ads-software.com/block-editor/developers/filters/block-filters/#editor-blockedit

There you can use BlockControls component with your custom toolbar button. Hope it leads you to right direction.

Hi @hardeepasrani ,

Many thanks for your help. I cannot see anything about BlockControls in the documentation from the link you posted above. Can you please give me more details, because obviously I am missing something. The only thing I see I am able to control from these docs is the right property panel (I think they call it Inspector), however I don’t see any way controlling the Toolbar…

This should help: https://github.com/WordPress/gutenberg/blob/master/docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md#block-toolbar @ickata

Thanks @hardeepasrani for your help. Unfortunately it seems that extending toolbar is not possible at this moment. After spending hours reading current documentation looking for what I need, I started reverse-engineering the code. The image block registers its controls and scopes them in its edit FC. There is no way to inject a custom control (well, no proper way). It seems that my only option is to add my custom control to the right panel inspector.

@ickata Of course there is a way to do it, I’ve done many times. Do you have your code on Github? I’ll be happy to show you how. ??

@hardeepasrani unfortunately I don’t have it as I cannot share it. I would be very thankful if you can give me a simple example how to add a new button in the toolbar that simply alerts or console.logs something. This would be more than enough!

@ickata

Here’s a video of it: https://www.loom.com/share/cf90ee77fc564544a278c6431dd28aca

You can try it like this:

/**
 * WordPress dependencies.
 */
const { __ } = wp.i18n;

const { PanelBody } = wp.components;

const { createHigherOrderComponent } = wp.compose;

const { AlignmentToolbar, BlockControls } = wp.blockEditor;

const { Fragment } = wp.element;

const { addFilter } = wp.hooks;

const withGalleryExtension = createHigherOrderComponent( BlockEdit => {
	return ( props ) => {

		if ( 'core/image' === props.name ) {
			return (
				<Fragment>
					<BlockEdit { ...props } />
					<BlockControls>
						<AlignmentToolbar
							value={ 'left' }
							onChange={ e => console.log }
						/>
					</BlockControls>
				</Fragment>
			);
		}

		return <BlockEdit { ...props } />;
	};
}, 'withGalleryExtension' );

addFilter( 'editor.BlockEdit', 'themeisle-gutenberg/gallery-extension', withGalleryExtension );

You can put the code here to compile it and then put it in your browser console to see the change in real-time: https://babeljs.io/repl/

@hardeepasrani : thanks, buddy! I don’t know what I was doing before, but tried almost the same several times and it did not work. Maybe I was missing the <Fragment /> component and that is why id didn’t make it.

Many thanks!

@ickata You’re welcome. ??