为现有的 WP Block Editor 设置增加价值

Question

我想为 Wordpress 块“按钮”添加 33%。到目前为止，它有 25%、50%、75% 和 100%。是否可以将我的新值插入现有的宽度选择器？

我猜 块过滤器 是正确的选择。

我想我也找到了获取设置对象的方法，这可能会帮助我找出需要覆盖的内容。但是，简单地将此代码添加到我的 admin.js 不会产生任何输出。 我需要在哪里加载这个？

const filterBlocks = (settings) => {
    if (settings.name !== 'core/buttons') {
        return settings
    }
    console.log(settings);
    return settings;
}

Answer 1

快速解决方案：在 “高级 > 附加 [=51] 下的按钮块属性中添加自定义 CSS class =] class(es)" 然后在你的主题中定义自定义宽度 style.css

详细解法： 通过使用 wp.hooks.addFilter()，您可以向 Button 块添加一个新控件，其中包含您需要的任意数量的额外自定义宽度选项。按钮块预设宽度在块 edit.js 函数的函数 WidthPanel() 中定义：

function WidthPanel( { selectedWidth, setAttributes } ) {
...
return (
    ...
        <ButtonGroup aria-label={ __( 'Button width' ) }>
            { [ 25, 50, 75, 100 ].map( ( widthValue ) => {
    ...
    }
}

要向块中添加新的宽度值 33%，我们需要添加我们自己的新按钮控件 to the InspectorControls，然后使用 wp.hooks.addFilter() 将其添加到现有的核心按钮块中，例如：

index.js

import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, Button } from '@wordpress/components';

const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

        const { setAttributes } = props;
        let widthValue = 33; // must be a number
    
        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                     <PanelBody title="Custom Width">
                         <Button
                             key={widthValue}
                             isSmall
                             variant={widthValue}
                             onClick={() => setAttributes({ width: widthValue })}
                        >
                            {widthValue}%
                        </Button>
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withInspectorControl');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'core/button',
    withInspectorControls
);

接下来，需要为新的自定义宽度添加一个新的附加 css 样式（matches the existing width presets structure），例如：

style.scss

$blocks-block__margin: 0.5em;

&.wp-block-button__width-33 {
    width: calc(33.33% - #{ $blocks-block__margin });
}

给你了..

将所有代码放在 together/working 上方的最简单方法是 create your own Gutenberg block（如果您不熟悉流程或 ReactJS，这本身就具有挑战性）。我也遇到过与古腾堡类似的挑战，所以我想为这种有效的问题提供一个详细的解决方案。

为现有的 WP Block Editor 设置增加价值

Add value to existing WP Block Editor setting

wordpress

wordpress-gutenberg