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.

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))

[sabernhardt]

#63992 was marked as a duplicate.

1. Adds the dots content property and auto height in the theme, with the same selectors they had in block-library styles before WordPress 6.6.
2. Assigns UTF-8 charset to make sure CSS content displays correctly even if the site uses a different character set.
3. Adds alternative text syntax for each content property that is not already empty or none, and leaves the original content property as a fallback for older browsers.
   • dots in the Separator block
   • quotation mark in the Pullquote block
   • em dash in the RSS widget
   • SVG for checkboxes

Props umeshsinghin, narenin

Trac 61787

[sabernhardt]

I did not open an issue on Gutenberg to consider increasing the specificity of the dots content and height in the past 18 months, and this can be an opportunity to improve other parts of Twenty Twenty's stylesheets.

PR 10957 adds to PR 7110.

• I thought to change the dots to Unicode (content: "\00b7 \00b7 \00b7";), but Twenty Twenty already had a quotation mark and an em dash in UTF-8 without assigning the character set in the stylesheet.
• I also added alternative text syntax for the CSS-generated content, and the old rules remain there for older browsers (as #64350 kept for WordPress core).