Make WordPress Core

Opened 3 years ago

Closed 11 months ago

#52546 closed enhancement (fixed)

Twenty Ten: Pullquote line-height too tall

Reported by: melchoyce's profile melchoyce Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch has-screenshots commit
Focuses: css Cc:

Description

The pullquote block should use a tighter line-height for better readability. See attached before/after screenshot.

Attachments (5)

2010-pullquote-line-height.png (77.5 KB) - added by melchoyce 3 years ago.
52546.diff (383 bytes) - added by melchoyce 3 years ago.
52546.1.diff (998 bytes) - added by sabernhardt 12 months ago.
2023-06-08_12-01-origin.png (234.3 KB) - added by Heiko_Mamerow 12 months ago.
origin with bigger line-height
2023-06-08_12-09-change.png (205.1 KB) - added by Heiko_Mamerow 12 months ago.
Patched with smaller line-height

Download all attachments as: .zip

Change History (12)

@melchoyce
3 years ago

#1 @sabernhardt
12 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.3

To avoid multiplying the paragraph's 1.5em font size by the default inline global 1.5em on .wp-block-pullquote, this resets the block's font size to 1em. The text has been extra large on the front end since WordPress 6.1.

I applied both styles in the editor, too.

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


12 months ago

#3 @ugyensupport
12 months ago

Twenty Ten: Pullquote line-height too tall

Description

The pullquote block should use a tighter line-height for better readability. See attached before/after screenshot.

Environment

  • WordPress: 6.2.2
  • PHP: 8.0.0
  • Server: Apache/2.4.10 (Debian)
  • Database: mysqli (Server: 5.5.59-MariaDB-1~wheezy / Client: 5.5.62)
  • Browser: Chrome 113.0.0.0 (macOS)
  • Theme: Twenty-Ten 3.8
  • MU-Plugins: None activated
  • Plugins:
    • Gutenberg 15.9.1

Steps to Reproduce

  1. Install Twenty Ten Theme and create a blog post using Pullquote block.
  2. Publish the blog post and
  3. 🐞 Bug occurs, Here you could see that the pullquote block should use a tighter line-height for better readability as mentioned in @melchoyce screenshot.

https://ibb.co/9ZcmL2j

Expected Results

  1. ✅ I would agree with @sabernhardt The text has been extra large on the front end since WordPress 6.1. There @melchoyce's patch 52546.1.diff fixes make a pullquote block tighter line height for better readability.

https://ibb.co/j9C6Gq6

Actual Results

  1. Looking forward to seeing this fix in the near release of our WordPress.

@Heiko_Mamerow
12 months ago

origin with bigger line-height

@Heiko_Mamerow
12 months ago

Patched with smaller line-height

#4 @Heiko_Mamerow
12 months ago

I also tested this:

Test Report

This report validates that the indicated patch addresses the issue.


Environment

  • OS: Ubuntu 23.04
  • Web Server: Nginx
  • PHP: 8.1.9
  • WordPress: 6.2.2
  • Browser: Firefox 115
  • Theme: Twenty Ten
  • Active Plugins: none


Actual Results



Supplemental Artifacts

See my attached images above...

#5 @pooja1210
12 months ago

Hi,

Patch report for - https://core.trac.wordpress.org/attachment/ticket/52546/52546.1.diff

Environment:
WordPress - v6.2.2
Theme - Twenty Ten
Os - Mac
Browser - Chrome

Expected Result - Pullquote block should use a tighter line-height for better readability ☑️

Screenshots:
Before - https://prnt.sc/_LD_mkoo-d54
After - https://prnt.sc/bx2mx_Nx4Wry

Thanks!

#6 @audrasjb
11 months ago

  • Keywords has-screenshots commit added; needs-testing removed
  • Owner set to audrasjb
  • Status changed from new to accepted

Looks good to ship! Thanks all for the patch and tests.
Self-assigning for commit.

#7 @audrasjb
11 months ago

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

In 55978:

Twenty Ten: Improve Pullquote block line height for better readability.

Props melchoyce, sabernhardt, ugyensupport, Heiko_Mamerow, pooja1210.
Fixes #52546.

Note: See TracTickets for help on using tickets.