Make WordPress Core

#57506 closed defect (bug) (fixed)

Twenty Twenty-Three: Quote block border missing

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

Description

steps to reproduce the issue :-

  1. Activate twenty twenty three theme.
  2. Choose quote block.
  3. In editor side you have the left border.

Now check the front side of that block.
You can able to see there is no border-left on front side.

I have attached video for better understanding.
Video URL:- https://share.cleanshot.com/5WDf3pxV1XFMd9BS0F1w

Attachments (6)

57506.diff (940 bytes) - added by akrocks 17 months ago.
Created patch adding theme support for block styles.
57506.1.diff (477 bytes) - added by akrocks 17 months ago.
Updates border property in TT3 theme.json
57506.2.patch (483 bytes) - added by nidhidhandhukiya 17 months ago.
2023-quote-front-rtl-with-patch-2.png (22.1 KB) - added by sabernhardt 12 months ago.
with 57506.2.patch, in Persian (RTL direction)
57506.functions1.patch (2.4 KB) - added by sabernhardt 12 months ago.
includes theme.json changes from 57506.2.patch and introduces a functions.php file for server-side filter to override in RTL
57506.functions2.patch (2.2 KB) - added by sabernhardt 12 months ago.
another functions.php option that rearranges properties so the filter only adjusts the border width (on all sides)

Download all attachments as: .zip

Change History (27)

#1 @nidhidhandhukiya
17 months ago

The reason behind this issue is
in editor side we have this css :-

.wp-block-quote {
    border-left: 0.25em solid;
}

this is missing in front side.

#2 @poena
17 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Hi!

This is a bug that is unrelated to the theme, please see the reported issue in the Gutenberg GitHub repository:
https://github.com/WordPress/gutenberg/issues/45547

Since this has already been reported, I will close this ticket.

#3 @poena
17 months ago

  • Resolution reported-upstream deleted
  • Status changed from closed to reopened

#4 @poena
17 months ago

I apologize, I rushed closing this:

I tested this with and without Gutenberg version 15 active, since changes to the blocks there are likely to go into 6.2.

With Gutenberg active:
In TT3: The border is not visible on the front or in the editor.
In "Empty theme", a border is visible both in the editor and the front.

In TT3 theme.json, the border is set, but I think it may be missing a color and border style, so it is not visible?

"core/quote": {
	"border": {
		"width": "1px"
}

#5 @poena
17 months ago

We need to refer to the original theme design as well to check what the border is supposed to look like.

@akrocks
17 months ago

Created patch adding theme support for block styles.

@akrocks
17 months ago

Updates border property in TT3 theme.json

#6 @poena
16 months ago

  • Milestone set to 6.3

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: 57506.1.diff and 57506.2.patch

Environment

  • OS: macOS 13.2.1
  • Web Server: Nginx
  • PHP: 8.1.9
  • WordPress: 6.2-beta3-55409
  • Browser: Chrome 110.0.5481.100
  • Theme: Twenty Twenty-Three
  • Active Plugins:
    • WordPress Beta Tester 3.2.7

Actual Results

  • ✅ Issue resolved with patch.

Both patch 57506.1.diff and 57506.2.patch are valid and solves the problem.

#7 @sabernhardt
15 months ago

  • Summary changed from Twenty Twenty three theme quote block border issue. to Twenty Twenty-Three: Quote block border issue.

#57400 was opened first, but I might close that as a duplicate of this ticket. The editor discrepancy was apparently fixed, so now the quote block does not have the border either in the editor or on the front.

57506.1.diff and 57506.2.patch add the left border—even in RTL—to both Default and Plain styles. (Twenty Twenty-Two does not have the border in Plain style, and its Default style has the border on the right for right-to-left languages.)

Between the two patches, I prefer 57506.2.patch. It lists styles in the same color-style-width order that is used in the Aubergine and Canary JSON files. The theme.scss file has currentColor, which might be a better choice than inherit (or initial).

Last edited 12 months ago by sabernhardt (previous) (diff)

#8 @nithins53
15 months ago

On the latest 6.2 RC3 by default, the quote block is broken. There is no left border in the editor as well as the front end. Tested 57506.2.patch and the border shows up on both the editor as well as front end.

#9 @zoonini
14 months ago

Missing border in the default Quote block style (both in the editor and on the front end) was reported by a forum user:

https://wordpress.org/support/topic/quote-block-not-shown-properly/

I provided CSS as a workaround.

#10 @sabernhardt
12 months ago

#57400 was marked as a duplicate.

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


12 months ago

@sabernhardt
12 months ago

with 57506.2.patch, in Persian (RTL direction)

#12 @sabernhardt
12 months ago

  • Keywords has-patch needs-testing added
  • Summary changed from Twenty Twenty-Three: Quote block border issue. to Twenty Twenty-Three: Quote block border missing

During today's bug scrub, @hareesh-pillai mentioned the need for RTL testing.

I added an image in Persian to show that the border stays on the left side with 57506.2.patch. That is probably not as good as mirroring it to the right, but possibly acceptable.

I had suggested currentColor earlier, though I am not aware of any problems with inherit.

#13 @poena
12 months ago

I would find it strange if the styles generated from theme.json are not run through an rtl converter, the regular block styles handle rtl with the help of SASS.

This is a bigger issue than a single theme, let's think about what we may need to test besides the border, such as left and right padding and margin.

This ticket was mentioned in Slack in #core-editor by poena. View the logs.


12 months ago

#15 @poena
12 months ago

I have not been able to find out much more. I don't think there is currently any way to make block styles in theme.json work better on RTL.

-I would support either patch as an improvement.
-I am hesitant to move it to a stylesheet since the theme does not use one (it does not load style.css).

-Perhaps try adding it as custom CSS in theme.json, targeting the block, with and without the
rtl CSS class that this on the <body> element?

#16 @poena
12 months ago

I tested the custom CSS approach but it turns out the block editor does not provide an
.rtl class.
The editor places a dir attribute on the HTML element, and I could not find a way to target a child of a parent with that attribute.
So, tldr I was not able to make it work.

@sabernhardt
12 months ago

includes theme.json changes from 57506.2.patch and introduces a functions.php file for server-side filter to override in RTL

@sabernhardt
12 months ago

another functions.php option that rearranges properties so the filter only adjusts the border width (on all sides)

#17 @sabernhardt
12 months ago

Adjusting the RTL width technically is possible with a server-side filter. I added two options to consider.

However, Twenty Twenty-Three purposely did not include a functions.php file. And hopefully theme.json styles will be able to mirror styles for RTL in the future without a filter.

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


11 months ago

#19 @audrasjb
11 months ago

  • Keywords commit added; needs-testing removed

As per today's bug scrub: no functions.php file was included to TT3, in order to show what may be the future of block themes. Introducing this file after the theme is released would be against this challenge. Let's stick with this for now and commit 57506.2.patch for now :)

#20 @audrasjb
11 months ago

  • Owner set to audrasjb
  • Status changed from reopened to accepted

#21 @audrasjb
11 months ago

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

In 56190:

Twenty Twenty-Three: Add a border to Quote block.

This changeset adds a border to the Quote block on front-end, in order to be consistent with the Editor styles.

Props nidhidhandhukiya, poena, akrocks, sabernhardt, nithins53, zoonini.
Fixes #57506.

Note: See TracTickets for help on using tickets.