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

[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:

Inactive Gutenberg plugin:

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

[andrewserong]

@tellthemachines this looks like a similar issue to #60646, which we resolved in #60649. I might run out of time to get to this today, but it sounds like this block could use some specificity reduction for its default styles, too?

[tellthemachines]

@andrewserong looks like it does! Might not be a bad idea to look at all core block stylesheets and lower specificity of any styles that can override their block supports. There's probably a few more lying around 😅