Gutenberg: Dynamic Block - Show saved data in the editor

Question

Im trying to create a Gutenberg dynamic block with dropdown list. I have completed block creation and rendering the block with selected dropdown value in the frontend.

How to set the dropdown selected with previous value when editing a post?

I have tried to access attribute value using props.attributes , but getting undefined

block.js

const { __ } = wp.i18n;
const { registerBlockType, RichText } = wp.blocks;

registerBlockType( 'gut/new-block', {
    title: __( 'new-block - Test' ),
    category: 'common',
    attributes: {
        category_id: {
            type: 'number'
        }
    },
    edit: function( props ) {
        const { attributes: { category_id }, setAttributes } = props;

        function setCategory( event ) {
            const selected = event.target.querySelector( 'option:checked' );
            setAttributes( { category_id: selected.value } );
            event.preventDefault();
        }

        return (
            <div className={ props.className }>                            
                <select value={ category_id } onChange={ setCategory }>
                    <option value="120">Animals</option>
                    <option value="350">Architecture</option>
                    <option value="700">Nature</option>
                    <option value="800">People</option>
                    <option value="432">Tech</option>
                </select>                
            </div>
        );
    },
    save ( props ) {
        return null
    },
});

PHP

function gut_my_new_block() {
    wp_register_script(
        'gut-my-new-block',
        plugins_url( 'new-block/dist/blocks.build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gut/new-block', array(
        'render_callback' => 'gut_render_block_my_newblock',
        'editor_script' => 'gut-my-new-block',
    ) );
}

add_action( 'init', 'gut_my_new_block' );

function gut_render_block_my_newblock($params) {  
    return '<h3>selected category '.$params['category_id'].'</h3>';
}

Answer 1

When an attribute is registered with type: 'number', it won't return a string format value in the attributes object. This has tripped me up a number of times.

The solution is to ensure that you are setting the value as a number when setting the attribute. One way is to do that with:

setAttributes( { category_id: parseInt( selected.value ) } );

Noting that this question is quite old, it's recommended to use the built-in SelectControl component these days, rather than a native HTML select.

Answer 2

You just need to get value from attributes, and set to <select> In your case it will be like this: <select value={ props.attributes.category_id } onChange={ setCategory }>

Generally, you thinking in a right way, but variable that you declare at 13 row is not available outside of {}, and you set value to undefined.