Gutenberg RadioControl saving data but not not selecting radio

Question

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 'WPBeginner - WordPress Tutorials/blocks';
import {  RadioControl } from 'WPBeginner - WordPress Tutorials/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.

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/gutenberg-radiocontrol-saving-data-but-not-not-selecting-radio/">

Gutenberg RadioControl saving data but not not selecting radio</a>
0
, user1861582 4 months 0 Answers 105 views 0

Leave an answer