Skip to content

Separator Block: Border styles set in theme.json are overwritten by the Gutenberg plugin #60634

@dashkevych

Description

@dashkevych

Description

Updating the Gutenberg plugin to v18.1.0 causing border styles inconsistency for a default block style.
It seems like the plugin overrides styles set in theme.json:

"core/separator": {
	"border": {
		"color": "currentColor",
		"style": "solid",
		"width": "4px 0 0"
	}
},

When the Gutenberg plugin is deactivated the styles look correct with the following CSS output:

.wp-block-separator {
    border-color: currentColor;
    border-width: 4px 0 0;
    border-style: solid;
}

When the Gutenberg plugin is active, the styles are overwritten by the plugin, with the following CSS output:

.wp-block-separator {
    border: none;
    border-top: 2px solid;
}
:where(.wp-block-separator) {
    border-color: currentColor;
    border-width: 4px 0 0;
    border-style: solid;
}

Step-by-step reproduction instructions

  1. Edit border styles for the Separator Block in theme.json.
  2. Add the Separator Block with default style to the post/page.
  3. Publish/Update and then preview the post/page.

Screenshots, screen recording, code snippet

Active Gutenberg plugin:

Issue with border styles when plugin is active

Inactive Gutenberg plugin:

Correct border styles when plugin is inactive

Environment info

  • WordPress: 6.5.2
  • Gutenberg: 18.1.0

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

Metadata

Metadata

Assignees

Labels

[Block] SeparatorAffects the Separator Block[Status] In ProgressTracking issues with work in progress[Type] RegressionRelated to a regression in the latest release

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions