2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.