Gutenberg RadioControl saving data but not not selecting radio
The RadioControl attribute below saves data but the selected radio isn’t checked. I think the state isn’t being updated, or I’m using the wrong value in the selected
attribute.
I reviewed the documentation, https://developer.wordpress.org/block-editor/components/radio-control and the Lynda series https://www.lynda.com/WordPress-tutorials/WordPress-Developing-Blocks-Gutenberg/5034179-2.html
In the code below, the component is isolated below from the rest of the block.
import { registerBlockType } from '@wordpress/blocks';
import { RadioControl } from '@wordpress/components';
// Import our CSS files
import './style.scss';
import './editor.scss';
registerBlockType( 'dynamic-equine/radio', {
title: 'DE Radio',
icon: 'media-document',
category: 'dynamic-equine',
attributes: {
position: {
type: 'text',
selector: '.position',
},
},
edit( { attributes, setAttributes } ) {
const positionHandler = function( position ) {
return setAttributes( {
position: position,
} );
}
return (
div className="container de_radio serviceCard"
RadioControl
label="Image Position"
selected={ attributes.positon }
className="position"
options={ [
{ label: 'Left', value: 'left-align' },
{ label: 'Right', value: 'right-align' },
] }
onChange={ positionHandler }
/
/div
);
},
save( { attributes } ) {
return (
div className="radio"
{attributes.position}
/div
);
},
} );
Any assistance you can provide would be appreciated.
Topic block-editor radio Wordpress
Category Web