WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 4 months ago

#53112 closed defect (bug) (fixed)

Twenty Nineteen - Pullquote block editor styling breaks with block alignment set

Reported by: devnel Owned by: sabernhardt
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.7.1
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: css Cc:

Description

Steps to reproduce the behavior

  1. Activate Twenty Nineteen
  2. Add a pull-quote block to any page
  3. Apply "wide-align" or any other block alignment option
  4. See the issue

What I expected to happen

The editor styling shows by default with the theme font styles (italic etc.) just like without alignment.

What actually happened

The editor styling of the text in the block doesn't reflect the correct size and font-decoration. The styling is still displayed correctly on the front-end and without any alignment options active.

Tested with latest WordPress version installed and no plugins active.

Attachments (7)

no-alignment.png (101.7 KB) - added by devnel 6 months ago.
Correct styling with no alignment set
wide-aligned.png (100.4 KB) - added by devnel 6 months ago.
Styling missing with wide-align set
53112.patch (524 bytes) - added by sabernhardt 6 months ago.
adding wp-block-pullquote class to Twenty Nineteen editor styles
Twenty-Nineteen-pullquotes-before.png (32.6 KB) - added by sabernhardt 6 months ago.
each alignment option before patch
Twenty-Nineteen-pullquotes-after.png (35.0 KB) - added by sabernhardt 6 months ago.
after applying patch
53112.1.patch (824 bytes) - added by sabernhardt 4 months ago.
adding styles for left and right alignment
53112.2.patch (827 bytes) - added by sabernhardt 4 months ago.
using text-align: inherit for left and right pullquotes (plus the max-width)

Download all attachments as: .zip

Change History (15)

@devnel
6 months ago

Correct styling with no alignment set

@devnel
6 months ago

Styling missing with wide-align set

#1 @sabernhardt
6 months ago

  • Component changed from Themes to Bundled Theme
  • Focuses css added

@sabernhardt
6 months ago

adding wp-block-pullquote class to Twenty Nineteen editor styles

@sabernhardt
6 months ago

each alignment option before patch

@sabernhardt
6 months ago

after applying patch

#2 @sabernhardt
6 months ago

  • Keywords has-patch needs-testing added

@devnel Thanks for the report!

53112.patch sets all editor pullquote styles to put the quote in italics and remove all-caps from the citation with Twenty Nineteen.

I also noticed a discrepancy between pullquote block alignment options with the Twenty Twenty theme, now reported on #53158.

Last edited 5 months ago by sabernhardt (previous) (diff)

#3 @desrosj
5 months ago

  • Milestone changed from Awaiting Review to 5.8

Moving to 5.8 because it would be nice to fix as many editor bugs in the default themes as possible. But with the focus on full site editing, this would need someone to own.

#4 @sabernhardt
5 months ago

  • Owner set to sabernhardt
  • Status changed from new to accepted

#5 @psrpinto
5 months ago

  • Keywords needs-testing removed

I tested the patch locally and can confirm it fixes the issue.

@sabernhardt
4 months ago

adding styles for left and right alignment

#6 @sabernhardt
4 months ago

  • Keywords needs-testing added

Using longer quotes, the left- and right-aligned pullquotes are more obviously centered in the editor.

On the front end both left and right are aligned the same direction as the language default. I added the text-align: left to the editor version even though there is no RTL version (so those blocks would not match the front end in RTL anyway).

If it's better to leave the text centered in the block and float those pullquote blocks to the side, we could remove that text alignment and keep the max-width for the editor.

Last edited 4 months ago by sabernhardt (previous) (diff)

@sabernhardt
4 months ago

using text-align: inherit for left and right pullquotes (plus the max-width)

#7 @sabernhardt
4 months ago

To remove the LTR bias of my previous patch, the text alignment is updated to use inherit in 53112.2.patch. So now it should be correct for both language directions.

#8 @ryelle
4 months ago

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

In 51096:

Twenty Nineteen: Fix pullquote styling in editor when block has alignment.

Props devnel, sabernhardt.
Fixes #53112.

Note: See TracTickets for help on using tickets.