0

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

According to the gutenberg handbook you can use the blocks.registerBlockType filter which allows you to paly 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/cover, core/paragraph, core/heading and core/quote.

Troublesome Image and Cover Blocks

As for WP 5.0.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 and core/cover 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

1

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 '18 at 6:29
  • You could overwrite the CSS for just those blocks? For example: .wp-block-cover-image.alignwide { /* your custom CSS here */ } – Danny Cooper Oct 22 '18 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 '18 at 10:10

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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