gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

HTML block at the root is saved without any attributes

Open Tofandel opened this issue 3 years ago • 0 comments

Description

When using the HTML blocks, if some plugins register attributes on the HTML block but the block is not nested within another element, the html block will loose all it's attributes

This is is caused by this line https://github.com/WordPress/gutenberg/blob/trunk/packages/blocks/src/api/serializer.js#L354 which is shortcircuiting the attributes output, even if there is some non default ones, I don't think this should be short circuited

It should be noted that if it's within another block like a column, the attributes are not lost

Step-by-step reproduction instructions

  1. Register a custom attribute on the core/html block
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'tofandel/add-lang-html',
    ( settings, name ) => {
        if( 'core/html' === name ){
            return  {...settings, attributes : {...settings.attributes, lang: { type: 'string' } } };
        }
        return settings;
    }
);
const withLangInput = createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {

        // If current block is not allowed
    	if ( props.name !== 'core/html' ) {
            return (
                <BlockEdit { ...props } />
            );
        }

        const { attributes, setAttributes } = props;

        return (
            <Fragment>  
                <BlockEdit { ...props } />
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Lang Attribute' ) }
                    >
                        <TextControl
                            label="Lang"
                            value={ attributes.lang }
                            onChange={ ( value ) => setAttribute( {lang: value} ) }
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withLangInput' );
wp.hooks.addFilter(
    'editor.BlockEdit',
    'tofandel/with-lang-input',
    withLangInput
);
  1. Add some html block at the root in the widget editor
  2. Save
  3. Reload the page, the attributes have been lost

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Tofandel avatar Sep 22 '22 17:09 Tofandel