Twenty Twenty: Separator block (dots) does not render anymore

[mrfoxtalbot]

The separator block shows correctly in the editor but is no longer showing in the public post.

I can only replicate this with Twenty Twenty, previous bundled themes seem to work just fine. Third-party classic themes work fine too.

[mrfoxtalbot]

This is happening with WP 6.6.1
I can replicate it with or without the Gutenberg pugin (18.8.0)

Trac ticket: https://core.trac.wordpress.org/ticket/61787

[narenin]

Test Report

I have tested latest patch and it is working as expected. ​https://github.com/WordPress/wordpress-develop/pull/7110

Environment

WordPress: 6.7-alpha-58576-src
PHP: 8.1.23
Server: nginx/1.16.0
Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
Browser: Chrome 126.0.0.0 (macOS)
Theme: Twenty TwentyVersion: 2.7

Expected Results

Dots are coming on frontend as well but not center aligned which needs to be fixed.

Screenshot - ​https://ibb.co/9Txt2p3

@umesh-uiux The patch looks fine but please add this CSS also to vertically center align the dots.

.wp-block-separator.is-style-dots {
	height: auto;
}}}}

[narenin]

Test Report

I have tested latest patch and it is working as expected. ​https://github.com/WordPress/wordpress-develop/pull/7110

Environment

WordPress: 6.7-alpha-58576-src
PHP: 8.1.23
Server: nginx/1.16.0
Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
Browser: Chrome 126.0.0.0 (macOS)
Theme: Twenty TwentyVersion: 2.7

Expected Results

✅ Dots are coming fine on front-end and also these are center aligned horizontally and vertically.

Screenshot - ​https://i.ibb.co/4ggnDTt/Screenshot-from-2024-07-30-16-15-56.png

@umesh-uiux Now it looks fine.

@umesh-uiux Now it looks fine.

@umesh-uiux The patch is working fine.

[poena]

In WordPress 6.6.x, the specificity of the default block styles from WordPress core was lowered
with

root :where

The default styles for the dotted separator are now overwritten by this theme style

.entry-content hr::before,
.entry-content hr::after,
hr.styled-separator::before,
hr.styled-separator::after {
	background: currentColor;
	content: ""; <----------------- This is the problematic style
	display: block;
	height: 1.6rem;
	position: absolute;
	top: calc(50% - 0.8rem);
	transform: rotate(-22.5deg);
	width: 0.1rem;
}

So my question is if it would not be better to make sure that the theme style for the custom separators -//-does not override the dotted separators?

[narenin]

Hi @poena

Yes, you are correct. The CSS changes done in that PR will impact only when we select 'Dots' as an option because CSS is targeting

wp-block-separator.is-style-dots

classes which we have only Dots style selected in Separator block

Let me know your thoughts on this.

[sabernhardt]

reduces specificity for three selectors

[sabernhardt]

Original report:
​https://github.com/Automattic/themes/issues/7978

If this could be fixed in the editor, I would prefer that instead of changing the theme. GB61638 clearly ​considered the Dots style, but I question whether any theme's JSON global styles should override rules such as the auto height or the pseudo-element content property. The same change also increased CSS specificity for the border styles after they were reduced in GB60740.

I think @poena was suggesting that the theme might reduce the specificity for its .entry-content hr rules. I made 61787.reduce-specificity.diff​ to consider that option (in case it might be better than PR 7110).

// Specificity less than 0-1-0 to keep the dots
:where(.entry-content) hr::before,
:where(.entry-content) hr::after,

// 0-1-0 is just enough to override `.wp-block-separator {border-top: 2px solid;}`
.entry-content :where(hr:not(.is-style-dots))