Twenty Sixteen: Quote block negative margin

[nidhidhandhukiya]

Steps to Reproduce the Issue:

1. Activate the Twenty Sixteen theme.

2. Add a Quote block to a post or page.

3. Enter some text along with a citation.

4. Set the font size to XL using the block settings.

5. View the page on the frontend at a screen width greater than 1200px.

Expected Behavior:
The quote text should remain properly aligned within the content area, respecting the theme’s layout and margins.

Actual Behavior:
At screen widths above 1200px, the quote text overflows to the left and extends outside the visible content area.

[abcd95]

Hi @nidhidhandhukiya, Thanks for the ticket.

However, I tried as you mentioned, but couldn't reproduce any overflow.

Here is what I saw -

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.25
• Browser: Chrome 136.0.0.0
• OS: macOS
• Theme: Twenty Sixteen 3.5

[sabernhardt]

Quote blocks and a blockquote in the editor, comparing against paragraphs and a list

[sabernhardt]

front end uses negative margin for the Quote blocks and blockquote

[sabernhardt]

The negative margin was a design feature of the theme since the ​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), multiplied by 1.263157895 for the padding, 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.

[sabernhardt]

reasserts the theme's padding value on Quote blocks

[sabernhardt]

front end with 63455.padding.patch

Thanks for creating a pull request. I also thought of an alternative way to write this with padding-inline-start (so the one rule would work with either text direction):

.wp-block-quote {
	border-width: 0 0 0 4px;
	padding-inline-start: 1.263157895em;
}

:where(.rtl) .wp-block-quote {
	border-width: 0 4px 0 0;
}