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">

                    label="Image Position"
                    selected={ attributes.positon }
                    options={ [
                        { label: 'Left', value: 'left-align' },
                        { label: 'Right', value: 'right-align' },
                    ] }
                    onChange={ positionHandler }


    save( { attributes } ) {

        return (
            <div className="radio">
} );

Any assistance you can provide would be appreciated.

1 Answer 1


Your problem is caused by a typo:

                    selected={ attributes.positon }

positon is not the same as position, this should have generated a warning in the browser console, and would have been picked up by appropriate eslint rules

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.