Twenty Twenty-One: Quote block shows quotation marks outside a background color area in the editor

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate the Twenty Twenty one theme.
2. Choose Quote block.
3. Apply background color.

Now you can able to see the

"

is outside from the background area.
And, if you check the user side it is working properly.
I have attached video for better understanding.
URL :- ​https://share.cleanshot.com/FSj7vGQq78NGzFVQW07D

[sabernhardt]

character outside background area before patch

[sabernhardt]

patch moves character inside background area

[sabernhardt]

The patch corrects the quotation mark positioning. The ​padding from theme.scss is 1em, so the patch's 20px works at standard font size (but could have a discrepancy with the front with other font sizes).

[shailu25]

Test Report for https://core.trac.wordpress.org/attachment/ticket/57377/57377.patch

Environment:
===========
OS: windows
Browser: Google Chrome
PHP: 8.1.17
WordPress: 6.2.2
Theme: Twenty Twenty One

Before Patch : ​https://prnt.sc/HQ5__aEmnbIy
After Patch : ​https://prnt.sc/vt7hngWYDziI

Result After Patch:

• Quotation mark's Position Looks properly as expected in Editor.

[harshgajipara]

Test Report

This report validates that the indicated patch addresses the issue.

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

Environment:

OS: Windows
PHP: 8.1.9
WordPress: 6.2.2
Browser: Chrome
Theme: Twenty Twenty One
Plugins: None activated

Actual Results:

✅ Before patch: In the Editor, Quote was outside of the background area. ​https://prnt.sc/pXEZpJ-Du0VZ
✅ After patch: In the Editor, Quote gets inside of the background area. ​https://prnt.sc/LtXKPrEvK9eH

[poena]

I tested this change together with https://core.trac.wordpress.org/ticket/55991 patch 3 which allows changing the font size.

I was only able to make it work with larger font sizes if the 20px value was changed to 1em.
1em is already used on the front, it is a style that is provided by WordPress core.

[mukesh27]

Added the reporter-feedback keyword to indicate that further input is needed.

[sabernhardt]

using 1em for left padding

[sabernhardt]

This probably should wait until next release now.

[huzaifaalmesbah]

Test Report

Environment

OS: macOS m1
WordPress 6.4-alpha-56267-src
PHP 7.4.33
nginx/1.25.2
MySQL 5.7.43
Browser: Chrome 116.0.5845.140
Theme: Twenty Twenty-One
Active Plugins: No plugins activated.

Results

This patch works properly. It's good.

Before Applying Patch

After Applying Patch

[karmatosed]

Tested this and it looks good to me. Going to commit this now.

[karmatosed]

In 56567:

Twenty-Twenty One: Fixes quotation mark being outside with background.

The quotation marks were outside when the background color was applied.

Props nidhidhandhukiya, sabernhardt, shailu25, harshgajipara, poena, huzaifaalmesbah.
Fixes #57377.

[karmatosed]

I am re-opening this as on testing after committing I now see and @desrosj confirms almost a half-fix. What I see is that this works for the front, but not for back now.

Perhaps we can get another check on this testing wise to ensure the PR holds up for others still and it's nothing unique to our sites. In testing today after commit though the full resolution hasn't been met unfortunately so we just need it to also pick up within the editor styles.

[sabernhardt]

front end was fine before the patch/commit

[sabernhardt]

front end remains the same following r56567

[sabernhardt]

iframe editor before commit

[sabernhardt]

iframe editor shows quotation mark inside the Quote block's background with r56567

[sabernhardt]

non-iframe editor before

[sabernhardt]

non-iframe editor likewise shows quotation mark inside the Quote block's background now

[sabernhardt]

The patch/commit changed the editor styles to match the front end, which had been fine.

This probably makes the side padding unnecessary on the smallest screens:

@media only screen and (max-width: 481px) {
  .editor-styles-wrapper .wp-block-quote {
    padding-left: calc(0.5 * var(--global--spacing-horizontal));
  }
}

The editor styles do not adjust properly for RTL languages, but that issue is separate from having the quotation mark outside the background.