WordPress plugin: props parameter is empty in save method
-
Hi,
I created a plugin for a custom block that uses InnerBlocks in order to display a tab menu. However, I figured out that when I save the block in the block editor and reload the page, the block cannot be displayed anymore.
So I debugged into the code and found out that the properties (attributes and innerBlocks) are empty in the save function, but only when I refresh the page. When I add a new custom block and update it, then the attributes and innerBlocks properties are set for the props object in the save function. But as said, when I refresh the page, the properties are empty…
This is the edit codeexport default function Edit(props) { const blockProps = useBlockProps(); const { children } = useInnerBlocksProps(blockProps, additionalInnerBlocksProps); useEffect(() => { console.log("in useeffect"); tab.createTabs(props.clientId); }, []) wp.domReady(function () { let selectedBlock = wp.data.select('core/editor').getSelectedBlock(); console.log("block", selectedBlock); wp.data.subscribe(function () { let currentSelectedBlock = wp.data.select('core/editor').getSelectedBlock(); if (!currentSelectedBlock) return; if (currentSelectedBlock !== selectedBlock) { console.log("something was selected!"); if (currentSelectedBlock.name === 'jink/jink-tab-menu-item') { if (currentSelectedBlock.clientId === selectedBlock?.clientId) { console.log("wp subscribe, selected same tab menu item, some property might have changed!"); if (currentSelectedBlock.attributes.tabName != selectedBlock.attributes.tabName) { console.log("oh ya - got you! the tab name attribute changed! :)"); tab.createTabs(props.clientId); } } console.log("wp subscribe, selected different tab menu item"); const parentBlocks = wp.data.select('core/block-editor').getBlockParents(currentSelectedBlock.clientId); if (parentBlocks.length != 0) { var selectedIdx = wp.data.select("core/block-editor").getBlock(parentBlocks[0]).innerBlocks.findIndex(f => f.clientId === currentSelectedBlock.clientId) if (selectedIdx >= 0) { console.log("select selected tab", selectedIdx); tab.selectTab(selectedIdx) } } } } selectedBlock = currentSelectedBlock; }) }) return ( <div class="tabcontrol"> <div class="tab" > </div> {children} // i think these are the "innerBlocks"? <div > <span>Add tab</span> <div class="innerblocks-div-wrapper" onClick={(event) => { setTimeout(() => { tab.createTabs(props.clientId); }, 100) }}> <InnerBlocks.ButtonBlockAppender /> </div> </div> </div> ); }
And this is the save code
export default function save(props) { // <------ props.attributes && props.innerBlocks are EMPTY! :( console.log("save::props", props); const tab = new Tab(); return ( <div class="tabcontrol"> <div class="tab"> // The elements below will never be rendered because props.innerBlocks is empty after a page refresh... {Array.isArray(props.innerBlocks) && props.innerBlocks.map((innerBlock, i) => { console.log("save::Really rendering the innerblocks of the props"); return (<button key={i} class="tablinks" onClick={(event) => tab.openTag(event, innerBlock.attributes.tabName, i)}>{innerBlock.attributes.tabName}</button>) })} </div> <InnerBlocks.Content /> </div> ); }
Can somebody help me out?
The idea is that the child block has an attribute called tabName. This tabName is used to be displayed as a tab link in the tab header.
- The topic ‘WordPress plugin: props parameter is empty in save method’ is closed to new replies.