如何为图像块设置添加额外选项?

时间:2020-05-20 作者:MC Naveen

如何向Gutenberg图像块添加一个选项,该选项允许我选择图像是否可以固定在Pinterest中(如复选框),以及固定描述。

下面是要插入的示例数据。

enter image description here

Any possibility to add a checkbox and description textbox in image block settings?

enter image description here

1 个回复
SO网友:Welcher

这可以使用block filters.

首先,您需要过滤图像块的块属性,以便能够保存新项目:

const { addFilter } = wp.hooks;
function filterAttributes( settings, name ) {

    if ( \'core/image\' === name && settings.attributes ) {

        settings.attributes.description = {
            type: \'string\',
            default: \'\'
        };

        settings.attributes.nopin = {
            type: \'boolean\',
            default: false
        };
     }
    return settings;
 }

addFilter( \'blocks.registerBlockType\', \'wpse\', filterAttributes );
接下来,您需要过滤图像块的InspectorControl以添加新控件:

const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wp.compose;
const withInspectorControls = createHigherOrderComponent( ( BlockEdit ) => {

    return ( props ) => {
        return (
            <>
                { ( \'core/image\' !== props.name ) &&
                    <InspectorControls>
                        // YOUR CUSTOM CONTROLS GO HERE
                    </InspectorControls>
                }
                <BlockEdit { ...props } /> // THIS IS ALL OF THE OTHER CONTROLS AND CAN GO ABOVE YOUR STUFF AS WELL
            </>
        );
    };
}, \'withInspectorControl\' );

addFilter( \'editor.BlockEdit\', \'wpse\', withInspectorControls );
您需要管理自定义控件部分,因为我不知道那里的详细信息。

希望这有帮助!

相关推荐

Convert emoji to images

我有一个私有插件,可以导出所有没有“主题化”的帖子,所以输出的只是内容的html(帖子主题为H1,日期/时间为H2)。如果帖子包含表情符号,它会正确显示在主题页面上。但是如果我将HTML输出保存到一个文件中,表情符号会显示为&eth;&#159;&#153;&#129; 这些是UniCode字符(我想),我需要生成的HTML页面将表情符号显示为图形图像。创建HTML输出的代码使用标准WP\\u查询对象,然后在have\\u posts循环中输出内容:$thest