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?