Make WordPress Core

#57667 closed defect (bug) (fixed)

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

Reported by: haritpanchal's profile haritpanchal Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch commit
Focuses: ui, css Cc:

Description

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

Attachments (4)

57667.diff (462 bytes) - added by dhrupo 15 months ago.
Changed Block Separator CSS in Twenty twenty three Theme
57667.2.diff (1.7 KB) - added by dhrupo 15 months ago.
fix-separator-block-default-style.diff (502 bytes) - added by Rahmohn 11 months ago.
57667.3.diff (1.2 KB) - added by poena 11 months ago.
Set default width to 100px, set the separator block in the call to action block pattern to wide.

Download all attachments as: .zip

Change History (32)

This ticket was mentioned in Slack in #core by haritpanchal. View the logs.


15 months ago

#2 @audrasjb
15 months ago

  • Keywords needs-patch added
  • Severity changed from major to minor

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
15 months ago

Changed Block Separator CSS in Twenty twenty three Theme

#3 @dhrupo
15 months ago

  • Keywords has-patch added; needs-patch removed

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.

#4 @sakibmd
15 months ago

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

#5 @haritpanchal
15 months ago

@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
15 months ago

#6 @dhrupo
15 months ago

@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.

#7 @sakibmd
15 months ago

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

#8 @poena
15 months ago

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/

#9 @haritpanchal
15 months ago

Hi @poena, I tested the bug in late 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

Version 0, edited 15 months ago by haritpanchal (next)

#10 @poena
15 months ago

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.

Last edited 15 months ago by poena (previous) (diff)

#11 @poena
15 months ago

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.

Last edited 15 months ago by poena (previous) (diff)

#12 @haritpanchal
15 months ago

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.

#13 @poena
15 months ago

  • Keywords needs-refresh added
  • Milestone changed from Awaiting Review to 6.3

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;
}

#14 follow-up: @poena
15 months ago

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.

#15 in reply to: ↑ 14 @haritpanchal
15 months ago

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.

#16 @ocean90
14 months ago

#57911 was marked as a duplicate.

#17 @sabernhardt
14 months ago

#58086 was marked as a duplicate.

#18 @poena
11 months ago

  • Severity changed from minor to normal

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.

#19 @audrasjb
11 months ago

  • Keywords needs-patch added; has-patch needs-refresh removed

Hello everyone,

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

#20 @Rahmohn
11 months ago

  • Keywords has-patch added; needs-patch removed

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.

#21 @poena
11 months ago

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?

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.


11 months ago

#23 @mikachan
11 months ago

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
11 months ago

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

#24 @poena
11 months ago

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.

#25 @poena
11 months ago

  • Keywords needs-testing added

#26 @Rahmohn
11 months ago

@poena

I tested your patch and it works as expected.

#27 @audrasjb
11 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to accepted

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

#28 @audrasjb
11 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

Note: See TracTickets for help on using tickets.