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' );

2 Answers 2


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:

    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:

Additional Alignments

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: Odd core/paragraph

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


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.

  • Thanks for your answer. I must disable alignment of some existing blocks. Sorry, my mistake. I did not write this.
    – Michael
    Oct 22, 2018 at 6:29
  • You could overwrite the CSS for just those blocks? For example: .wp-block-cover-image.alignwide { /* your custom CSS here */ } Oct 22, 2018 at 9:21
  • This is good method but when the design is still this same then the options (align-wide, align-full) are unnecessary.
    – Michael
    Oct 22, 2018 at 10:10
  • 1
    I was looking for a solution to remove a custom "BlockAlignmentToolbar" (just like you posted it here), which was not added via the "supports" attribute. So far I wasn't able to find any solution. So @DannyCooper 's solution seems to be the best fit for me at this point.
    – wbq
    Aug 12, 2020 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.