[wp-trac] [WordPress Trac] #63455: Twenty Sixteen: Quote block negative margin (was: Twenty Sixteen - Quote block having overflow in responsive.)

[WordPress Trac]

#63455: Twenty Sixteen: Quote block negative margin
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bundled Theme     |     Version:
 Severity:  normal            |  Resolution:
 Keywords:  has-patch         |     Focuses:
------------------------------+------------------------------
Changes (by sabernhardt):

 * keywords:  reporter-feedback => has-patch
 * version:  6.8 =>


Comment:

 The [https://core.trac.wordpress.org/ticket/59754#Negativemargin negative
 margin] was a design feature of the theme since the
 [https://github.com/WordPress/twentysixteen/blob/4d4ba75f181336743c30b9fe09ce24607fb4a30e/style.css#L2724-L2738
 initial GitHub commit], before the block editor. It moves the border
 outside so the quote text should align with paragraphs, similar to how
 list markers hang to the side of the list items.

 However:
 - The `blockquote` margin of `-1.473684211em` is based on a font size of
 `1.1875rem` (`19px`) plus a padding of `1.263157895em` plus a border of
 `4px`. The `block-library/theme.css` stylesheet overrides the Quote
 block's padding value with `1em`, which does not align properly with the
 default font size and border width. Then increasing the font size or
 removing the border can show a more significant difference.
 - [50358] removed the negative margins from the editor styles—both block
 and Classic—because the block editor needed `auto` margins.
 - [58689] set the left and right margins to zero specifically for the
 Pullquote block, not for any others.
 - The theme's quote border style still works on the front end with
 `blockquote` elements in a Classic block.

 First, I tried replacing `.entry-content
 blockquote:not(.alignleft):not(.alignright)` with `.entry-content >
 blockquote:not([class])`—in both `style.css` and `rtl.css`. That would
 remove the negative margin from Quote blocks on the front end (and other
 `blockquote` elements with a class or inside a container).

 I think adjusting the Quote block padding is a less dramatic change, so I
 am only uploading that option now.

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