Twenty Twenty-Three: Quote block border missing

[nidhidhandhukiya]

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

[nidhidhandhukiya]

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.

[poena]

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.

[poena]

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

[poena]

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

[akrocks]

Created patch adding theme support for block styles.

[akrocks]

Updates border property in TT3 theme.json

[poena]

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.

[sabernhardt]

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

[nithins53]

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.

[zoonini]

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.

[sabernhardt]

#57400 was marked as a duplicate.

[sabernhardt]

with 57506.2.patch, in Persian (RTL direction)

[sabernhardt]

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.

[poena]

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.

[poena]

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?

[poena]

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]

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

[sabernhardt]

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

[sabernhardt]

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.

[audrasjb]

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

[audrasjb]

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.