javascript - Gutenberg Edit Block Inspector Controls and save

I am looking to edit an existing block to add inspector controls that save as meta data. I have been beating my head trying to find how to save the data. The following code adds a text field to the inspector system . I can add the field but for some reason the field does not save. I can not for the life of me figure it out.

var el = wp.element.createElement,
    Fragment = wp.element.Fragment
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.editor.RichText,
    BlockControls = wp.editor.BlockControls,
    AlignmentToolbar = wp.editor.AlignmentToolbar,
    Fields = wpponents;

var withInspectorControlsEdit = wppose.createHigherOrderComponent( function( BlockEdit ) {
    return function( props ) {
        return el(
            wp.element.Fragment,
            {},
            el( BlockEdit, props ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    Fields.PanelBody,
                    {},
                    el(
                        Fields.TextControl,
                        {
                            label: 'Test Field',
                            value: props.attributes.testField,
                            onChange: function(e){
                                props.setAttributes({ testField: e });
                            }
                        }
                    )
                )   
            )
        )
    };
}, 'withInspectorControlsEdit' );
wp.hooks.addFilter( 'editor.BlockEdit', 'acf/accordion', withInspectorControlsEdit );

I am looking to edit an existing block to add inspector controls that save as meta data. I have been beating my head trying to find how to save the data. The following code adds a text field to the inspector system . I can add the field but for some reason the field does not save. I can not for the life of me figure it out.

var el = wp.element.createElement,
    Fragment = wp.element.Fragment
    registerBlockType = wp.blocks.registerBlockType,
    RichText = wp.editor.RichText,
    BlockControls = wp.editor.BlockControls,
    AlignmentToolbar = wp.editor.AlignmentToolbar,
    Fields = wp.components;

var withInspectorControlsEdit = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
    return function( props ) {
        return el(
            wp.element.Fragment,
            {},
            el( BlockEdit, props ),
            el(
                wp.editor.InspectorControls,
                {},
                el(
                    Fields.PanelBody,
                    {},
                    el(
                        Fields.TextControl,
                        {
                            label: 'Test Field',
                            value: props.attributes.testField,
                            onChange: function(e){
                                props.setAttributes({ testField: e });
                            }
                        }
                    )
                )   
            )
        )
    };
}, 'withInspectorControlsEdit' );
wp.hooks.addFilter( 'editor.BlockEdit', 'acf/accordion', withInspectorControlsEdit );

• javascript
• block-editor

Share Improve this question asked Oct 20, 2018 at 20:57 JamesJames 20533 silver badges1212 bronze badges 1

• This isn't off topic, but, you really should open an issue over on the gutenberg github, it's the best place to ask these kinds of questions in the run up to the 5.0 release ( I asked numerous gutenberg leads and they said so ) – Tom J Nowell ♦ Commented Oct 20, 2018 at 21:14

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Have you set your attribute (testField) up as meta?

attributes: { testField: { type: 'string', source: 'meta', meta: 'testField' }, },