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 code

export 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.

• This topic was modified 1 year, 7 months ago by davaaron. Reason: code formatting
• This topic was modified 1 year, 7 months ago by davaaron. Reason: added more information: inline comments