How to disable align-wide for specified blocks in Gutenberg

Question

I added support for align-wide to my theme, but I don't know how to disable this feature for some existing blocks.

I check Gutenberg documentation but I can't find solution.

add_theme_support( 'align-wide' );

Answer 1

According to the gutenberg handbook you can use the blocks.registerBlockType filter which allows you to play around with the block settings.

For most of the wp core blocks modifying the supports.align property works pretty well:

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-theme/namespace',
    function( settings, name ) {
        if ( name === 'core/pullquote' ) {
            return lodash.assign( {}, settings, {
                supports: lodash.assign( {}, settings.supports, {
                    // disable the align-UI completely ...
                    align: false, 
                    // ... or only allow specific alignments
                    // align: ['center,'full'], 
                } ),
            } );
        }
        return settings;
    }
);

In my tests this worked for most of wp core blocks, except for core/image, core/paragraph, core/heading and core/quote.

Troublesome Image Block

As for WP 5.0.3 (and at least up to 5.3) these blocks will receive an additional alignment control like this:

with code:

        ...
        {
            align: ['left','full'], 
        }
        ...

To control the available alignments for the core/image block, you would have to modify the edit method of a block using the editor.BlockEdit filter.

Nasty Headings, Paragraphs & Quotes

The problem with core/paragraph, core/heading and core/quote is, that block-align (defined by classenames alignleft, alignwide, ... in the frontend and the data-align attribute in the editor) is not clearly separated from the text-align (defined in the style attribute), which leads to odd results like this:

[UPDATE 2019-11-13]: As of WP 5.3 this works pretty well with core/cover now.

Answer 2

Are you referring to blocks you've built yourself or existing blocks?

If you are building your own blocks you can do something like this:

<BlockControls key="controls"> <BlockAlignmentToolbar value={ align } onChange={ ( align ) => setAttributes( { align } ) } controls={ [ 'wide', 'full' ] } /> </BlockControls>

Make sure you include the components:

const { BlockControls, BlockAlignmentToolbar } = wp.editor;

If you are looking to limit the Alignment of existing blocks, then I'm not sure if that is possible at the moment.