[wp-trac] [WordPress Trac] #63750: 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 (was: Editor-Side Quote Block Misalignment in Twenty Twenty Theme with Full Width & Alignment)

[WordPress Trac]

#63750: 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
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bundled Theme     |     Version:  6.7
 Severity:  normal            |  Resolution:
 Keywords:                    |     Focuses:
------------------------------+------------------------------
Changes (by sabernhardt):

 * version:  6.8.2 => 6.7


Comment:

 The limited width for inner blocks can happen with both Full and Wide
 settings on the Quote block. I tested a
 [https://gist.github.com/sabernhardt/031d17747049f4912ab71d704b7c2bbe 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63750#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform