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, and the Lynda series .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.

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/block-editor/components/radio-control and the Lynda series https://www.lynda/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.

• block-editor
• radio

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