Twenty Twenty: Quote block does not adjust width for inner block in the editor when it has both text alignment and Full or Wide width

[nidhidhandhukiya]

Steps to reproduce the issue:-

1. Activate Twenty Twenty theme.
2. Choose quote block.
3. Add some text with citation.
4. Make it to full width.
5. Now change alignment to center or right from the parent(Quote) block settings.

Expected Behavior
Both the quote text and citation should align based on the selected alignment (center or right), matching the frontend behavior.

Actual Behavior
On the editor side, only the citation aligns correctly. The main quote text remains left-aligned even when center or right alignment is selected.

[mayur8991]

Test report for - https://core.trac.wordpress.org/attachment/ticket/63750/63750.patch

Environment : PHP 8.2
WordPress - 6.8.2
Theme - Twenty TwentyVersion: 2.9
Os: Windows
Browser: Chrome

Expected Result: Both the quote text and citation should align according to the selected alignment option (center or right), ensuring consistency with the frontend display.

Before Patch

Backend - ​https://prnt.sc/gD3chLo66aVp
Frontend - ​https://prnt.sc/rcNYrBFCfr4I

After Patch
Backend - ​https://prnt.sc/TC6QGL8ppM9B
Frontend - ​https://prnt.sc/NGe4pv7Djyiv

Conclusion:
The patch resolves the alignment inconsistency issue effectively. Editor and frontend views are now aligned as expected.

Thanks

[sabernhardt]

Quote blocks in the editor, showing how an inner block (paragraph) does not align well with citations when the Quote has Full or Wide width plus Center or Right text alignment

[sabernhardt]

The limited width for inner blocks can happen with both Full and Wide settings on the Quote block. I tested a ​set of Quote blocks with each text alignment and width setting, and added some in Group blocks.

The styles could be something like this:

.wp-block:where([data-align="full"], [data-align="wide"]) > .wp-block-quote .wp-block {
	max-width: 100%;
}

• The parent .wp-block should match for both full and wide widths. Either :is() or :where() could group them together, and :where() has lower specificity.
• I like the > child combinator so the styles do not change the Quote when it is inside a Group with the Full or Wide setting.
• Either blockquote or .wp-block-quote could work, but the class targets only the block we know.
• The inner .wp-block should target the class instead of a paragraph because other elements can be nested within a Quote block (such as a Verse block).

---

Twenty Twenty-One and Twenty Thirteen have similar limits to inner block widths.

[nidhidhandhukiya]

I have applied the given suggestion for both Full width and Wide width settings, and confirmed that it is working fine in both scenarios. The patch has been updated accordingly.

[darshitrajyaguru97]

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/63750/63750.1.patch

Environment:

OS: Windows
PHP: 8.2.28
WordPress: 6.9-alpha-60093-src
Browser: Chrome
Theme: Twenty Twenty
Plugins: None activated

Actual Results:

✅ Before patch:
Backend: ​https://prnt.sc/dmbbZzZSjpNd
Frontend: ​https://prnt.sc/ULkIiMd95FRX

✅ After patch:
Backend: ​https://prnt.sc/B_nHMXKJyAJW
Frontend: ​https://prnt.sc/WcxS4LJP6HvP

✅ Patch is working well as per desired solution