Skip to content

Style hooks - default values cause extra wrappers and block errors in editor for standard blocks. #24387

@Addison-Stavlo

Description

@Addison-Stavlo

Describe the bug
Semi-related to #24363.

Style hooks seem to be written with the intent to support default styles to be defined on the block- ex:

// allow blocks to specify their own attribute definition with default values if needed.
if ( ! settings.attributes.backgroundColor ) {
Object.assign( settings.attributes, {
backgroundColor: {
type: 'string',
},
} );

However, in practice this seems to not play nice in the editor. With standard blocks (reproduced with Paragraph and Heading), default styles add extra wrappers in the editor and can break the blocks.

To reproduce

Below I will explore this with a standard block, "Paragraph".

  1. Add the following to attributes in Paragraph's block.json file:
		"textColor": {
			"type": "string",
			"default": "secondary"
		},
		"backgroundColor": {
			"type": "string",
			"default": "primary"
		},
		"fontSize": {
			"type": "string",
			"default": "large"
		}
  1. Load the editor and add/edit a new paragraph. It should have the default values as expected:
    Screen Shot 2020-08-05 at 1 02 16 PM

  2. Select custom values for the fontSize, backgroundColor, and textColor and save:
    Screen Shot 2020-08-05 at 1 03 57 PM

  3. Reload the editor, notice the block has a different size and indentation:
    Screen Shot 2020-08-05 at 1 04 38 PM

Inspecting the element reveals that there is a <p> element nested inside the Paragraph wrapper:
Screen Shot 2020-08-05 at 1 06 07 PM

  1. Try changing to a different custom background color for the block. Notice the background is only applied to outer wrapper:
    Screen Shot 2020-08-05 at 1 07 56 PM

  2. Save and reload the editor, you may find the block has broken:
    Screen Shot 2020-08-05 at 1 08 41 PM

Expected behavior
Expected to not have a second wrapper and broken block.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Feature] Custom Editor StylesFunctionality for adding custom editor styles[Feature] ParsingRelated to efforts to improving the parsing of a string of data and converting it into a different f[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions