attributes: {
tabs: {
type: 'array',
default: [
{ tabLabel: 'Tab 1', tabContent: 'Content for Tab 1' }
],
}, }, edit: ({ attributes, setAttributes }) => {
const { tabs } = attributes;
const updateTabContent = (value, tabIndex) => {
const updatedTabs = [...tabs];
updatedTabs[tabIndex].tabContent = value;
setAttributes({ tabs: updatedTabs });
};
return (
<div className="my-custom-block">
{tabs.map((tab, tabIndex) => (
<div key={tabIndex}>
<RichText
tagName="h6"
value={tab.tabLabel}
onChange={(value) => updateTabLabel(value, tabIndex)}
placeholder="Tab Label..."
/>
</div>
))}
</div>
); }, save: ({ attributes }) => {
const { tabs } = attributes;
return (
<div className="my-custom-block">
{tabs.map((tab, tabIndex) => (
<div key={tabIndex}>
<h6>{tab.tabLabel}</h6>
<div>{tab.tabContent}</div>
</div>
))}
</div>
); },
This custom block is triggering an error under WordPress 6.4.2 but if I use WordPress 6.0.0 then it works fine.
This is what I'm seeing on the console:
Block validation: Block validation failed for blogee-accordion-block/blogee-accordion
Content generated by save function:
<div class="wp-block-blogee-accordion-block-blogee-accordion"></div>Content retrieved from post body:
<div class="wp-block-blogee-accordion-block-blogee-accordion"><div><p>Tab</p></div><div><p>Tab 2</p></div></div>