Make WordPress Core

Opened 17 months ago

Closed 7 months ago

#57377 closed defect (bug) (fixed)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by: karmatosed's profile karmatosed
Milestone: 6.4 Priority: normal
Severity: minor Version: 6.1.1
Component: Bundled Theme Keywords: has-patch has-screenshots has-testing-info needs-testing
Focuses: css Cc:

Description

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

Attachments (11)

57377.patch (814 bytes) - added by nidhidhandhukiya 17 months ago.
2021-quote-background-before.png (33.7 KB) - added by sabernhardt 11 months ago.
character outside background area before patch
2021-quote-background-with-patch.png (33.6 KB) - added by sabernhardt 11 months ago.
patch moves character inside background area
57377.1.patch (831 bytes) - added by sabernhardt 11 months ago.
using 1em for left padding
2021-quote-front-before.png (4.7 KB) - added by sabernhardt 8 months ago.
front end was fine before the patch/commit
2021-quote-front-r56567.png (4.7 KB) - added by sabernhardt 8 months ago.
front end remains the same following r56567
2021-quote-iframe-editor-before.png (33.3 KB) - added by sabernhardt 8 months ago.
iframe editor before commit
2021-quote-iframe-editor-r56567.png (33.2 KB) - added by sabernhardt 8 months ago.
iframe editor shows quotation mark inside the Quote block's background with r56567
2021-quote-v2-editor-before.png (35.4 KB) - added by sabernhardt 8 months ago.
non-iframe editor before
2021-quote-v2-editor-r56567.png (33.3 KB) - added by sabernhardt 8 months ago.
non-iframe editor likewise shows quotation mark inside the Quote block's background now
ticket_57377_6.4b3_r56822.png (77.9 KB) - added by petitphp 7 months ago.
Couldn't reproduce the issue on WP 6.4b3 either.

Download all attachments as: .zip

Change History (32)

@sabernhardt
11 months ago

character outside background area before patch

@sabernhardt
11 months ago

patch moves character inside background area

#1 @sabernhardt
11 months ago

  • Focuses css added
  • Keywords has-patch has-screenshots added
  • Milestone changed from Awaiting Review to 6.3
  • Summary changed from Twenty Twenty one theme quote block is having minor design issue. to Twenty Twenty-One: Quote block shows quotation marks outside a background color area in the editor

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).

#2 @oglekler
11 months ago

  • Keywords needs-testing added

#3 @shailu25
11 months ago

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.
Last edited 11 months ago by shailu25 (previous) (diff)

#4 @harshgajipara
11 months ago

  • Keywords has-testing-info added

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

Last edited 11 months ago by harshgajipara (previous) (diff)

#5 @poena
11 months ago

  • Keywords changes-requested added

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.

This ticket was mentioned in Slack in #core by mukeshpanchal27. View the logs.


11 months ago

#7 @mukesh27
11 months ago

  • Keywords reporter-feedback added
Version 0, edited 11 months ago by mukesh27 (next)

@sabernhardt
11 months ago

using 1em for left padding

#8 @sabernhardt
11 months ago

  • Keywords changes-requested reporter-feedback removed

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


10 months ago

#10 @sabernhardt
10 months ago

  • Milestone changed from 6.3 to 6.4

This probably should wait until next release now.

This ticket was mentioned in Slack in #core by oglekler. View the logs.


9 months ago

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


9 months ago

#13 @huzaifaalmesbah
9 months ago

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

https://i.ibb.co/T1S0nhz/Before-1.png

After Applying Patch

https://i.ibb.co/s2tLvL9/after-1.png

#14 @karmatosed
8 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to karmatosed
  • Status changed from new to assigned

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

#15 @karmatosed
8 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#16 @karmatosed
8 months ago

  • Keywords needs-testing added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
8 months ago

front end was fine before the patch/commit

@sabernhardt
8 months ago

front end remains the same following r56567

@sabernhardt
8 months ago

iframe editor before commit

@sabernhardt
8 months ago

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

@sabernhardt
8 months ago

non-iframe editor before

@sabernhardt
8 months ago

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

#17 @sabernhardt
8 months ago

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.

This ticket was mentioned in Slack in #core by marybaum. View the logs.


7 months ago

#19 @marybaum
7 months ago

Several folx will take a look—thinking this is probably fixed.

@petitphp
7 months ago

Couldn't reproduce the issue on WP 6.4b3 either.

#20 @nicolefurlan
7 months ago

It looks like we're unable to reproduce this issue now, so maybe we can close this. Are others able to confirm?

#21 @sabernhardt
7 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

I'll close this. If something else should change, please open a new ticket.

Note: See TracTickets for help on using tickets.