将按钮添加到现有Gutenberg块的工具栏

时间:2020-01-08 作者:gordie

我想扩展默认图像块并向其添加一个选项。

enter image description here

这样做的想法是,如果图像是远程图像,可以有一个额外的选项在本地下载该图像。

这有可能吗?怎么可能?谢谢

2 个回复
SO网友:Mat Lipe

编辑:WordPress 5.9或更高版本。

WordPress 5.9将slotfill移到useDisplayBlockControls 钩子,防止填充注册,除非它们位于当前选定块的组件内。无法再使用BlockControls 用于向WordPress核心块的工具栏添加元素的slotfill。

原文:WordPress 5.8.3或更低版本。

有一个未记录的slotfill 在名为BlockControls 它允许您在块工具栏中包含自定义按钮或元素。组件为documented, 但不是在slotfills内部。

在插槽中添加控件最直接的方法是使用<ToolbarButton> component 这是道具。不过,您可以将任何喜欢的元素放入插槽中。

有一个<ToolbarItem> component 为自定义元素提供帮助。

您可以通过useSelect hook 并返回null 如果未选择正确的块。

把它们放在一起。

const Download = () => {
    const selectedBlock = useSelect( select => {
        return select( \'core/block-editor\' ).getSelectedBlock();
    }, [] );

    if ( selectedBlock && selectedBlock.name !== \'core/image\' ) {
        return null;
    }

    return (
        <BlockControls>
            <ToolbarButton
                icon={\'download\'}
                label="Download"
                onClick={() => alert( selectedBlock?.attributes?.url )}
            />
        </BlockControls>
    );
};

SO网友:gordie

相关推荐