Twenty Twenty-Three: Separator Block default and wide line styling outputing same result

[haritpanchal]

In the separator block, when selecting any of the options in styles (default or wide line), the front end outputs the same results in both.

Video: ​https://www.awesomescreenshot.com/video/14632018?key=1e77ae93c87211b7356ed86e45714536

[audrasjb]

Hello and thanks for the ticket,

That's indeed something we can improve.
As we try to use the less possible CSS in TT3, it would be nice to find a way to implement this without having to add any CSS to the theme stylesheet. We should explore fixing this via theme.json or Gutenberg itself.

[dhrupo]

Changed Block Separator CSS in Twenty twenty three Theme

[dhrupo]

I have added .is-style-default {width: 200px} CSS in core/separator in the Twenty Twenty Three theme's theme.json file and It fixes the bug.

@audrasjb please review this whenever you are free.

[sakibmd]

I have tested the patch & it works perfectly. Thank you @dhrupo for this patch.

[haritpanchal]

@dhrupo, Patch fails when the user adds the block and updates the post. It works only when you select the Default/Wide Line style again.

[dhrupo]

@haritpanchal,
I have checked thoroughly and found that the issue is causing for separator on the Gutenberg side. The classes are not assigning perfectly is causing the issue and there is no CSS for these classes. Please check now from Gutenberg's side.

[sakibmd]

Yes, @haritpanchal. I forgot to check what you mentioned. Now I've checked the 2nd patch provided by @dhrupo and found that the issue was from the Gutenberg side.

It was not adding is-style-default / is-style-dots / is-style-wide classes perfectly and there was no CSS for is-style-default and is-style-wide.

Now, this is working perfectly. Great work @dhrupo

[poena]

Hi!
I have retested this today with WordPress 6.2-beta3-55409, and I cannot reproduce it anymore.

It should have been fixed with this update that was made four days ago: https://core.trac.wordpress.org/ticket/57561

If you have the availability, can you please retest the bug with 6.2 and confirm that it has been fixed?

​https://make.wordpress.org/test/2023/02/07/help-test-wordpress-6-2/

[haritpanchal]

Hi @poena, I tested the bug in latest 6.2 beta versions 6.2-beta3 and 6.2-beta4 but found that the bug is still there and working unexpectedly. The behavior of the block has changed more as it shows the doubled line in both the Default and Wideline options in the backend and a single line in the front end.

Backend - ​https://tinyurl.com/2o3ousqr
FrontEnd - ​https://tinyurl.com/2o9wd4wg

[poena]

Thank you for testing.
I can sort of reproduce your result with WordPress 6.2-beta5-55493: but I can't reproduce it consistently.

1) No CSS seems to be output for the class .is-style-wide when this style variation is selected. Not in the editor or the front.

2) The two lines, which are the top and bottom borders, show with a space between them depending on the screen width and positioning.

With both the list view and the block settings sidebar open:
The first and last separator has a space between the borders.

When I close a list view, making the editor wider, there is no space between the top and bottom borders.

When I close both the list view and block settings sidebar:
The first and last separator has a space between the borders.

But if I refresh the editor, or if I select another block, I can no longer reproduce the issue.

If I remove this CSS, it seems to solve the issue with the borders:

.block-editor-block-list__block[data-type="core/separator"] {
	padding-bottom: 0.1px;
	padding-top: 0.1px;
}

But this CSS is unrelated to the original issue.

On the front I do not see the space between the borders at all, the above CSS is not output on the front.

Update: I tested in a few more block themes and this issue does not appear if the theme includes
add_theme_support( 'wp-block-styles' );
Twenty Twenty-Three should not include this. The problem needs to be fixed in Gutenberg and then added to WordPress in a future release.

[poena]

I completely forgot that the width styles were removed intentionally.
​https://github.com/WordPress/gutenberg/pull/38635

I apologize if this is stating the obvious, it took me this long to finally understand what you were all saying weeks ago :)

If we want the theme.json solution like in 57667.diff, I believe we would need to use :not similar to the styles that are in the separator block theme.scss file, plus the alignment settings.
Because as you were saying, the is-style-default class is not applied by default when you add the block.

"core/separator": {
	"css": " &:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull){width: 200px}"
},

If we want to combine it with a solution like in 57667.2.diff, the change needs to be made through Gutenberg first.

[haritpanchal]

I think the changes in the theme.json file are more suitable as @audrasjb mentioned earlier it would be nice to find a way to implement this without having to add any CSS to the theme stylesheet.

[poena]

I am back again with yet another idea: Use the new theme.json variations feature added in 6.2.

​https://make.wordpress.org/core/2023/03/07/miscellaneous-editor-changes-in-wordpress-6-2/#edit-block-style-variations-from-theme-json

"styles": {
	"blocks": {
		 "core/separator": {
			"variations": {
				"default" : {
					"css": "width:200px"
				}
			}
		},
(...other blocks goes here)

The CSS output:

.wp-block-separator:not(.is-style-wide):not(.is-style-dots):not(.alignwide):not(.alignfull) {
	width: 200px;
}

[poena]

The padding between the block borders, was added to make the block easier to select / click on. It should be replaced in Gutenberg, as soon as there is a better alternative.

[haritpanchal]

Replying to poena: Understood! @poena. I tested the new patch in theme.json and it is working. Thanks for all the help!

The padding between the block borders, was added to make the block easier to select / click on. It should be replaced in Gutenberg, as soon as there is a better alternative.

[ocean90]

#57911 was marked as a duplicate.

[sabernhardt]

#58086 was marked as a duplicate.

[poena]

There is a bug in the block editor / Gutenberg plugin preventing the use of CSS for the block style variation in theme.json. It may require a large change to how style variations work and will not be ready in time for WordPress 6.3.

We could consider a temporary CSS patch, meanwhile.
I have increased the priority from minor to normal since the issue has been reported multiple times.

[audrasjb]

Hello everyone,

It would be nice to implement the change suggested in comment:13, so we can fix this in WP 6.3 :)

[Rahmohn]

Hi @audrasjb

I've added a patch that implements the suggestion in comment:11 instead of comment:13 because the block editor has a bug preventing using CSS for the block style variation (as said in comment:18).

The bug I faced was the separator block outputting the same style for Default and Wide Line in the block editor and in the frontend.

[poena]

The attached patch works well:

• The default width is limited,
• Dots and wide style works.
• None, center, wide and full width alignments in the toolbar works.

@mikachan @beafialho I know the design evolved a bit during development. I am not sure where the 200px default value for the separator width came from, -which is the correct value?

With the default width being updated, should the separator in the CTA pattern on the home template be changed to wide?

[mikachan]

Thanks for the ping, @poena! Gah, I thought this issue was fixed with #57561. Thanks for the patch, @Rahmohn.

I'm not sure where the 200px width has come from. I think we should probably use 100px, which is the default width of the non-wide separator block from Gutenberg, referenced in ​this stylesheet. Or perhaps we could use a spacing preset, like var(--wp--preset--spacing--80)?

With the default width being updated, should the separator in the CTA pattern on the home template be changed to wide?

Yes, I think this makes sense and will be consistent with the original design.

[poena]

Set default width to 100px, set the separator block in the call to action block pattern to wide.

[poena]

Testing instructions

1) Activate Twenty Twenty-Three.
2) If you have made any changes to the home template, reset it so that the template uses the updated theme file. (Appearance > Editor > Templates > Manage all templates > Home - reset customizations)
3) View the home template, confirm that there is no visual difference in the editor or front; that the width of the separator is the same as before the patch.
4) Now please add a new separator block, make sure it is not placed inside a row or stack or similar.
5) Confirm that the default width is now 100px, in the editors and on the front.
6) Change the different width and alignment settings and confirm that the width is correct, in the editors and on the front.

[Rahmohn]

@poena

I tested your patch and it works as expected.

[audrasjb]

I also tested the last patch (57667.3.diff) and it works fine to me.
Self assigning for commit.

[audrasjb]

In 56173:

Twenty Twenty-Three: Fix Separator Block default styling.

This changeset sets default width to 100px for the Separator block, and sets the Separator block located in the Call to Action block pattern to wide.

Props haritpanchal, audrasjb, sakibmd, poena, Rahmohn, mikachan.
Fixes #57667.