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".
- 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"
}
-
Load the editor and add/edit a new paragraph. It should have the default values as expected:

-
Select custom values for the fontSize, backgroundColor, and textColor and save:

-
Reload the editor, notice the block has a different size and indentation:

Inspecting the element reveals that there is a <p> element nested inside the Paragraph wrapper:

-
Try changing to a different custom background color for the block. Notice the background is only applied to outer wrapper:

-
Save and reload the editor, you may find the block has broken:

Expected behavior
Expected to not have a second wrapper and broken block.
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:
gutenberg/packages/block-editor/src/hooks/color.js
Lines 70 to 76 in 65258a0
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".
attributesin Paragraph'sblock.jsonfile:Load the editor and add/edit a new paragraph. It should have the default values as expected:

Select custom values for the fontSize, backgroundColor, and textColor and save:

Reload the editor, notice the block has a different size and indentation:

Inspecting the element reveals that there is a

<p>element nested inside the Paragraph wrapper:Try changing to a different custom background color for the block. Notice the background is only applied to outer wrapper:

Save and reload the editor, you may find the block has broken:

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