0

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.

0

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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