Remove Icons from toolbars of the core blocks

[pwartbichler]

Hi folks,

how would I remove or adapt the toolbars for Gutenberg core blocks? I guess I'd need to use the 'editor.BlockEdit' filter for this but can't wrap my head around it.

Is this the correct way of doing this?

wp.hooks.addFilter(
	'editor.BlockEdit',
	'slug/modify-block-edit',
	modifyBlockEdit
);

function modifyBlockEdit( BlockEdit ) {
	return (props) => {
		if ('core/paragraph' === props.name) {
			const { attributes: { align: false }, setAttributes } = props;
			return (
				<BlockEdit { ...props } />
			);
		}
		return (
			<BlockEdit { ...props } />
		);
	};
}

Sorry for my nooby question and thank you in advance!

Patrik

[pwartbichler]

Please ignore the code I used above, I was clearly on the wrong track. I now understand that the filter 'editor.BlockEdit' is intended for the contents of the right sidebar. Or am I wrong?

What I do now is that I iterate through all the blocks, trying to disable the toolbars.

Is the correct and recommended approach here that I customize the edit and save method of each block?

[randombumper]

Hi, @pwartbichler. I've been trying to disable text align for core/paragraph, to no avail. I gather from your last comment that you've at least found a workaround. Could you please elaborate on the solution? Thanks!

[pwartbichler]

My workaround, if one can even call it that, is that I now use css to disable the buttons i don't need. It's really messy, but it works - for now... Sorry for not being able to provide you with a better solution...

[randombumper]

Well, I find myself doing that a lot in WordPress. Stinky as hell, but as long as a proper solution isn't available...

The problem is, toolbar buttons lack class names (or any other attributes) to identify and hide them. Using position selectors (:nth-child) won't work either, since toolbar positions vary among blocks and depend on configuration.

I have resorted to overwriting text-align properties with !important, so that even if a user tries to align some text to the right it won't affect the output.

[pwartbichler]

@randombumper In my case I am lucky because the client demands that I disable ALL the icons, so the lack of class names is not a problem.
The reason we want to limit the formatting options is because frequently our authors make too much use of them and destroy the look of the frontend (we have around 170 authors).

[pwartbichler]

@randombumper Maybe this will help you: Link to StackOverflow
The idea behind this solution is to disable the core blocks, make changes to the components, and reactivate them. Unfortunately, this only works for certain elements, not for all, so it didn't really help me.

[randombumper]

Never thought of that! Thanks for the info. I'll be sure to read the article linked there as well.

[youknowriad]

Right now, there's no easy solution here. It's hard to find an API that is not adhoc. Let's close this as a duplicate of #6023 which tried to solve the same thing for inspector controls which are not really different from toolbar controls.