Как установить переменную по умолчанию в JSX для const с селектором

Question

Я довольно опытен с PHP и темами Wordpress, но сейчас борюсь с новым редактором Гутенберга. Я создал пользовательский блок плагинов, который включает в себя много JS (React). К последнему я немного новичок.

Блок создает простой div-обертку с присвоенным ему атрибутом html lang на основе входных данных селектора. Следующий код работает нормально, но только при изменении селектора. По умолчанию переменная langCode остается пустой. Любая идея, что идет не так?

registerBlockType( 'lang-group-block/lang-group', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'Language group', 'lang-group-block' ), // Block title.
    icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'Language', 'lang-group-block' ),
        __( 'Group', 'lang-group-block' ),
    ],

    attributes: {
        // Register langCode attribute to save the chosen language
        langCode: {
            type: 'string',         
        },
    },

    edit( { attributes, setAttributes, className } ) {
        const {
            langCode = 'en', 
        } = attributes;


        const groupIndicatorStyle = {
            fontSize: 14,
            color: "#ff0000",
            textAlign: "center",
            paddingTop: "40px",
        }

        return (            
            <Fragment>
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Language', 'rapp2020-lang-group-block' ) }
                        initialOpen={ true }
                    >
                        <SelectControl
                            label={ __( 'Language', 'rapp2020-lang-group-block' ) }                         
                            value={ langCode }
                            options={ [
                                {
                                    value: 'en',
                                    label: __( 'EN', 'rapp2020-lang-group-block' ),
                                },
                                {
                                    value: 'nl',
                                    label: __( 'NL', 'rapp2020-lang-group-block' ),
                                },
                                {
                                    value: 'de',
                                    label: __( 'DE', 'rapp2020-lang-group-block' ),
                                },
                            ] }
                            onChange={ ( selectedOption ) => setAttributes( { langCode: selectedOption } ) }
                        />
                    </PanelBody>
                </InspectorControls>
                <div style={ groupIndicatorStyle }>
                    language group: { langCode }
                </div>
                <div
                    className={ className }
                    lang={ langCode }
                >
                    <InnerBlocks />
                </div>
            </Fragment>
        );      
    },

    save( { attributes, className } ) {
        const {
            langCode = '',
        } = attributes;

        let classes = className;
        if ( '' == langCode ) {
            { langCode: 'en' }
        }   

        return (
            <div
                className={ classes }
                lang={ langCode }
            >
                <InnerBlocks.Content />
            </div>
        );
    },
} );

Answer 1

Это должно работать:

save( { attributes, className } ) {
    const { langCode } = attributes;
    let classes = className;

    return (
        <div
            className={ classes }
            lang={ langCode || 'en' }
        >
            <InnerBlocks.Content />
        </div>
    );
},

РЕДАКТИРОВАТЬ: Не удалось воспроизвести все еще существующую ошибку. Итак, вот полный блок уже с createElements. Еще одно предложение: вы устанавливаете, используя 'en' по умолчанию. Почему бы не установить его как таковой?

;( function ( wp ) {

    const el = wp.element.createElement;
    const __ = wp.i18n.__;

    const { Fragment } = wp.element;
    const { InspectorControls , InnerBlocks } = wp.blockEditor;
    const { PanelBody , SelectControl } = wp.components;

    wp.blocks.registerBlockType( 'lang-group-block/lang-group', {
        // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        title: __( 'Language group', 'lang-group-block' ), // Block title.
        icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
        category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
        keywords: [
            __( 'Language', 'lang-group-block' ),
            __( 'Group', 'lang-group-block' ),
        ],

        attributes: {
            // Register langCode attribute to save the chosen language
            langCode: {
                type: 'string', 
                default : 'en'       
            },
        },

        edit( { attributes, setAttributes, className } ) {

            const groupIndicatorStyle = {
                fontSize: 14,
                color: '#ff0000',
                textAlign: 'center',
                paddingTop: '40px',
            }

            return el( Fragment, null , 
                el( InspectorControls, null,
                  el( PanelBody,
                    { title: __('Language', 'rapp2020-lang-group-block'), initialOpen: true },
                    el(SelectControl, {
                      label: __('Language', 'rapp2020-lang-group-block'),
                      value: attributes.langCode,
                      options: [
                        { value: 'en', label: __('EN', 'rapp2020-lang-group-block') },
                        { value: 'nl', label: __('NL', 'rapp2020-lang-group-block') },
                        { value: 'de', label: __('DE', 'rapp2020-lang-group-block') }
                      ],
                      onChange: function onChange(selectedOption) { return setAttributes({ langCode: selectedOption }); }
                    })
                  )
                ),
                el( 'div', { style: groupIndicatorStyle }, 'language group: ', attributes.langCode  ),
                el( 'div', { className: className, lang: attributes.langCode }, el(InnerBlocks, null) )
              );
        },

        save( { attributes, className } ) {
            return el( 'div', { className: className, lang: attributes.langCode || 'en' }, el(InnerBlocks.Content, null) );
        },
    } );

} )( window.wp );