This issue has come back to haunt me again and this time Tom, I look forward to learning from this is so I can trueeely get it, and solve my own block violations. I just need a little on the learning curve "on what to look for".
From wp-admin the error I get in the console when the post loads...
Content generated by `save` function:
<div class="wp-block-blachawk-hc-alert-block hc-alert-block-group has-bg-color-wheat01 has-txt-color-black" style="background-color:#f1dcaa;color:black"><div class="wp-block-blachawk-hc-alert-block has-icon-<div class="wp-block-blachawk-hc-alert-block has-icon-info has-icon-color-blackn75"></div><div class="innerContent">
</div> has-icon-color-<div"></div><div class="innerContent"></div></div>
Content retrieved from post body:
<div class="wp-block-blachawk-hc-alert-block hc-alert-block-group has-bg-color-wheat01 has-txt-color-black" style="background-color:#f1dcaa;color:black"><div class="wp-block-blachawk-hc-alert-block has-icon-info has-icon-color-blackn75"></div><div class="innerContent">
</div></div>
So obviously there is a mismatch. I can see from above that has-icon-<div class="wp-bl...
is wrong, and wondering why in the world does wordpress have issues with....
const iconProps = useBlockProps({
className: `has-icon-${bgIcon} has-icon-color-${bgIconColor}`,
});
This is a simple message block plugin I created from scratch with create block. Here are the goods:
block.json
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "blachawk/hc-alert-block",
"version": "0.1.0",
"title": "HC Alert Block Info Wheat",
"category": "text",
"description": "A custom text block available in multiple color sets",
"keywords": ["nffa", "hc", "help", "text", "variations", "item"],
"supports": {
"html": false,
"color": {
"background": true,
"text": true
}
},
"textdomain": "_hcab",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"attributes": {
"colorBgDefault": {
"type": "string",
"default": "wheat01"
},
"colorBgChange": {
"type": "string",
"default": "#f1dcaa"
},
"colorTxtDefault": {
"type": "string",
"default": "black"
},
"colorTxtChange": {
"type": "string",
"default": "black"
},
"bgIcon": {
"type": "string",
"source": "html",
"selector": "div",
"attribute": "class",
"default": "info"
},
"bgIconColor": {
"type": "string",
"source": "html",
"selector": "div",
"attribute": "class",
"default": "blackn75"
},
"_cover": {
"type": "string",
"default": ""
}
},
"example": {
"attributes": {
"_cover": "https://placehold.co/600x401/000000/FFF"
}
}
}
edit.js
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
BlockControls,
InnerBlocks,
useInnerBlocksProps,
InspectorControls,
PanelColorSettings,
} from '@wordpress/block-editor';
import './editor.scss';
export default function Edit({ attributes, setAttributes }) {
const {
colorBgDefault,
colorBgChange,
colorTxtDefault,
colorTxtChange,
bgIcon,
bgIconColor,
_cover,
} = attributes;
//PREVIEW PANAL BYPASS
if (attributes._cover) {
return <img src={attributes._cover} alt="" />;
}
//PARENT CONTAINER ATTRIBUTES
const parentProps = useBlockProps({
className: `hc-alert-block-group has-bg-color-${colorBgDefault} has-txt-color-${colorTxtDefault}`,
style: {
backgroundColor: colorBgChange,
color: colorTxtChange,
},
});
//ICON ATTRIBUTES
const iconProps = useBlockProps({
className: `has-icon-${bgIcon} has-icon-color-${bgIconColor}`,
});
//ENABLED INNER BLOCKS | RENDER APPENDER
const innerBlocksProps = useInnerBlocksProps({
allowedBlocks: ['nffa-blocks-v/text-block-item'],
renderAppender: InnerBlocks.ButtonBlockAppender,
});
//COLOR CHANGE OPTIONS FROM THE SIDEBAR
const onColorBgChange = (newColorBg) => {
setAttributes({ colorBgChange: newColorBg });
};
const onColorTxtChange = (newColorTxt) => {
setAttributes({ colorTxtChange: newColorTxt });
};
return (
<>
<InspectorControls>
<PanelColorSettings
title={__('Color Settings', '_hcab')}
icon="admin-appearance"
initialOpen
colorSettings={[
{
value: colorBgChange,
onChange: onColorBgChange,
label: __('Background Color', '_hcab'),
},
{
value: colorTxtChange,
onChange: onColorTxtChange,
label: __('Text Color', '_hcab'),
},
]}
/>
</InspectorControls>
<div {...parentProps}>
<div {...iconProps} />
<div {...innerBlocksProps} />
</div>
</>
);
}
save.js
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function save({ attributes }) {
const {
colorBgDefault,
colorBgChange,
colorTxtDefault,
colorTxtChange,
bgIcon,
bgIconColor,
_cover,
} = attributes;
//PARENT CONTAINER ATTRIBUTES
const parentProps = useBlockProps.save({
className: `hc-alert-block-group has-bg-color-${colorBgDefault} has-txt-color-${colorTxtDefault}`,
style: {
backgroundColor: colorBgChange,
color: colorTxtChange,
},
});
//ICON ATTRIBUTES
const iconProps = useBlockProps.save({
className: `has-icon-${bgIcon} has-icon-color-${bgIconColor}`,
});
return (
<div {...parentProps}>
<div {...iconProps} />
<div className="innerContent">
<InnerBlocks.Content />
</div>
</div>
);
}
and within my /src
directory, I have a sub block in a folder called hc-alert-block-item
edit.js
import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
// import { __ } from '@wordpress/i18n';
export default function Edit({ attributes }) {
const blockProps = useBlockProps();
const innerBlocksProps = useInnerBlocksProps(blockProps);
return (
<>
<div {...innerBlocksProps} />
</>
);
}
save.js
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function Save() {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
}
Many many thanks on any "ideas" to consider in solving this violation. Again, I don't know what is off...