Description
We have the following custom block registered and for all users apart from super administrator we get an error of invalid content when user with role other than super administrator saves the page/post that contains the block.
We managed to narrow down the error to the aria attributes in the DOM structure returned by the save function. It seems that if we use aria-controls and/or aria-expanded attributes these are not saved with the page. Using data-controls and data-expanded instead of the aria- attributes results in expected behaviour.
Step-by-step reproduction instructions
How to reproduce
- Create a new page
- Insert the block
- Save page
- Refresh the page
Screenshots, screen recording, code snippet
Simplified version of the block's code
edit: function( props ) {
const blockProps = useBlockProps();
return (
<>
<div {...blockProps}>
<button aria-controls="test">hello</button>
</div>
</>
);
},
save: function( props ) {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<button aria-controls="test">hello</button>
</div>
);
}Content generated by block
<!-- wp:cv-wp-gb-lib-blocks/collapse -->
<div class="wp-block-cv-wp-gb-lib-blocks-collapse"><button aria-controls="test">hello</button></div>
<!-- /wp:cv-wp-gb-lib-blocks/collapse -->
Content saved into database
<!-- wp:cv-wp-gb-lib-blocks/collapse -->
<div class="wp-block-cv-wp-gb-lib-blocks-collapse"><button>hello</button></div>
<!-- /wp:cv-wp-gb-lib-blocks/collapse -->
Error in JS Console in editor
Block validation: Expected attributes [Array(3)]0: (3) ['aria-controls', 'test', true]length: 1[[Prototype]]: Array(0), instead saw []length: 0[[Prototype]]: Array(0).
blocks.js:3610 Block validation: Block validation failed for `cv-wp-gb-lib-blocks/collapse` ({name: 'cv-wp-gb-lib-blocks/collapse', icon: {…}, keywords: Array(2), attributes: {…}, providesContext: {…}, …}apiVersion: 2attributes: align: {type: 'string', enum: Array(6)}answer: {type: 'string', default: '', source: 'html', selector: '.cvgb-collapse__row'}className: {type: 'string'}id: {type: 'string', default: ''}isExpanded: {type: 'boolean', default: false}question: {type: 'string', default: '', source: 'html', selector: '.cvgb-collapse__question > span'}[[Prototype]]: Objectcategory: "cvgb-blocks"description: "Adds collapsable organism, e.g. FAQs"edit: ƒ Edit()icon: {background: 'rgba(255, 215, 190, 1)', src: {…}, foreground: '#191e23', shadowColor: 'rgba(255, 215, 190, 0.3)'}keywords: (2) ['collapse', 'faqs']name: "cv-wp-gb-lib-blocks/collapse"providesContext: {}save: ƒ Save()styles: []supports: {align: Array(2)}title: "Collapsible"usesContext: [][[Prototype]]: Object).
Content generated by \`save\` function:
<div class="wp-block-cv-wp-gb-lib-blocks-collapse"><button aria-controls="test">hello</button></div>
Content retrieved from post body:
<div class="wp-block-cv-wp-gb-lib-blocks-collapse"><button>hello</button></div>
Environment info
Tested on the following configurations
- Wordpress version 5.8.3
- Gutenberg plugin (not in use)
- Browser: Chrome, Brave
- OS: Linux Ubuntu (kernel 5.14.0), Mac OS 10.15.7
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
Description
We have the following custom block registered and for all users apart from super administrator we get an error of invalid content when user with role other than super administrator saves the page/post that contains the block.
We managed to narrow down the error to the aria attributes in the DOM structure returned by the save function. It seems that if we use
aria-controlsand/oraria-expandedattributes these are not saved with the page. Usingdata-controlsanddata-expandedinstead of thearia-attributes results in expected behaviour.Step-by-step reproduction instructions
How to reproduce
Screenshots, screen recording, code snippet
Simplified version of the block's code
Content generated by block
Content saved into database
Error in JS Console in editor
Environment info
Tested on the following configurations
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes