如何在Gutenberg中禁用指定块的宽度对齐

时间:2018-10-19 作者:Michael

我添加了对的支持align-wide 我的主题,但我不知道如何禁用某些现有块的此功能。

我检查一下Gutenberg documentation 但我找不到解决办法。

add_theme_support( \'align-wide\' );

2 个回复
SO网友:Jörn Lund

根据the gutenberg handbook 您可以使用blocks.registerBlockType 允许您使用块设置的过滤器。

对于大多数wp核心块,修改supports.align 物业运作良好:

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;
    }
);
在我的测试中,除了core/image, core/paragraph, core/headingcore/quote.

麻烦的图像块

对于WP 5.0.3(至少高达5.3),这些块将接收以下附加对齐控制:

Additional Alignments

带代码:

        ...
        {
            align: [\'left\',\'full\'], 
        }
        ...
控制的可用路线的步骤core/image 块,则必须使用editor.BlockEdit 滤器

讨厌的标题、段落和;引用问题core/paragraph, core/headingcore/quote 即块对齐(由ClasseName定义alignleft, alignwide, ... 在前端和data-align 编辑器中的属性)未与文本对齐(在样式属性中定义)明确分开,这会导致如下奇怪的结果:Odd core/paragraph

[UPDATE 2019-11-13]: 从WP 5.3开始,这在core/cover 现在

SO网友:Danny Cooper

你指的是你自己建造的街区还是现有的街区?

如果您正在构建自己的模块,您可以这样做:

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

确保包括以下组件:

const { BlockControls, BlockAlignmentToolbar } = wp.editor;

如果你想限制现有街区的对齐,那么我不确定目前是否可行。

结束

相关推荐