How can I disable the toolbars for core blocks? Is this possible at all?

Question

I'm trying to disable the toolbars for all core blocks to keep the editors from unnecessarily formatting the content. Is that even possible?

My current approach is:

wp.blocks.getBlockTypes().forEach((blockType) => {

    // unregister all default styles (from the right sidebar)

    let blockName = blockType.name;

    if ( blockType.hasOwnProperty('styles')) {
        blockType.styles.forEach( (style) => {
            wp.blocks.unregisterBlockStyle( blockName, style.name );
        });
    }     

});

Can I somehow access the toolbars in this loop? Do I understand it correctly that I have to override the edit and save methods of the core blocks, probably with a filter?

Thanks, Patrik

Answer 1

I have just solved the problem, but different than intended. Basically, the solution for me was to deregister the required core blocks, make changes to the edit and save methods, and then re-register the blocks.

A great help was this blog article by Riad Benguella: https://riad.blog/2017/10/16/one-thousand-and-one-way-to-extend-gutenberg-today/

Here's an example based on a core / quote block:

const TextControl = wp.components.TextControl;

import './style.scss';
import './editor.scss';

wp.domReady( () => {

    let unregisteredBlock = wp.blocks.unregisterBlockType('core/quote');

    unregisteredBlock.title = 'Quotation';
    unregisteredBlock.icon = 'format-quote';

    unregisteredBlock.edit = ({ attributes, setAttributes} ) => {    

        const updateFirstValue = ( val ) => {
            setAttributes({
                value: val
            });
        };
        const updateSecondValue = ( val ) => {
            setAttributes({
                citation: val
            });
        };

        return (
            <div>
                <TextControl
                    label='Quote'
                    value={ attributes.value }
                    onChange={ updateFirstValue }
                />
                <TextControl
                    label='Citation'
                    value={ attributes.citation }
                    onChange={ updateSecondValue }
                />
            </div>
        );

    };

    unregisteredBlock.save = ( { attributes, className } ) => {
        return (
            <blockquote className={className}>
                <p>{attributes.value}</p>
                <cite>{attributes.citation}</cite>
            </blockquote>
        )
    };

    wp.blocks.registerBlockType('core/quote', unregisteredBlock);

});

In principle, both the edit and save method are replaced here, only the block attributes are reused from the core blocks. Due to the fact that new elements are used to enter the content, the toolbars are not the problem anymore.

I hope this can help someone who has the same problem.

Cheers, Patrik