最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

filters - Gutenberg - Add align controls to a custom block

programmeradmin0浏览0评论

I want to add align controls to a custom block.

I wrote this code thad adds the code that adds the default block alignment toolbar to the block, but I select and change the align, I get an the following error:

react-dom.min.js?ver=16.13.1:32 Uncaught TypeError: n is not a function
    at Object.controls.l.map.w.onClick (block-editor.min.js?ver=ee2642fa39827fa8f0de00446089caf1:12)
    at onClick (components.min.js?ver=acda7ed704a5cd88b3f144fad5e2edec:7)
    at Object.ki (react-dom.min.js?ver=16.13.1:176)
    at ji (react-dom.min.js?ver=16.13.1:13)
    at mi (react-dom.min.js?ver=16.13.1:13)
    at lf (react-dom.min.js?ver=16.13.1:13)
    at wi (react-dom.min.js?ver=16.13.1:187)
    at Kd (react-dom.min.js?ver=16.13.1:32)
    at pc (react-dom.min.js?ver=16.13.1:32)
    at Wf (react-dom.min.js?ver=16.13.1:34)
Object.controls.l.map.w.onClick @ block-editor.min.js?ver=ee2642fa39827fa8f0de00446089caf1:12
onClick @ components.min.js?ver=acda7ed704a5cd88b3f144fad5e2edec:7
ki @ react-dom.min.js?ver=16.13.1:176
ji @ react-dom.min.js?ver=16.13.1:13
mi @ react-dom.min.js?ver=16.13.1:13
lf @ react-dom.min.js?ver=16.13.1:13
wi @ react-dom.min.js?ver=16.13.1:187
Kd @ react-dom.min.js?ver=16.13.1:32
pc @ react-dom.min.js?ver=16.13.1:32
Wf @ react-dom.min.js?ver=16.13.1:34
(anonymous) @ react-dom.min.js?ver=16.13.1:236
uf @ react-dom.min.js?ver=16.13.1:15
Qd @ react-dom.min.js?ver=16.13.1:42
sc @ react-dom.min.js?ver=16.13.1:41
unstable_runWithPriority @ react.min.js?ver=16.13.1:25
Da @ react-dom.min.js?ver=16.13.1:60
mk.Events.current @ react-dom.min.js?ver=16.13.1:236
Ei @ react-dom.min.js?ver=16.13.1:41

My code:

const CustomButtonsToolbar = () => {
    const currentBlock = useSelect(
        select => select('core/editor').getSelectedBlock()
    );
    if(!currentBlock){
        return <BlockControls/>
    }

    const currentBlockIsSmallCta = currentBlock.name ==='create-block/my-custom-button'
    if(currentBlockIsSmallCta){
        return (
            <BlockControls>
                <ToolbarGroup>
                    <BlockAlignmentToolbar/>
                </ToolbarGroup>
            </BlockControls>
        );
    } else {
        return <BlockControls/>
    }

}

registerPlugin(
    'custom-buttons-toolbar-mods',
    {
        render: CustomButtonsToolbar
    }
);

I want to save the alignment as an attribute "block_alignment"

What is the correct way to add align toolbar to a custom block?

发布评论

评论列表(0)

  1. 暂无评论