• 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, 6 months ago by davaaron. Reason: code formatting
    • This topic was modified 1 year, 6 months ago by davaaron. Reason: added more information: inline comments
Viewing 1 replies (of 1 total)
  • Hi @davaaron

    Are you able to share the full plugin code here, either through GitHub or some other code hosting platform?

    The reason I ask is that there might be something outside the Edit and save that could be causing this, and it will make it easier for me to debug the issue if I have the full code.

Viewing 1 replies (of 1 total)
  • The topic ‘WordPress plugin: props parameter is empty in save method’ is closed to new replies.