Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#53112 closed defect (bug) (fixed)

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

Reported by: devnel's profile devnel Owned by: sabernhardt's profile 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 4 years ago.
Correct styling with no alignment set
wide-aligned.png (100.4 KB) - added by devnel 4 years ago.
Styling missing with wide-align set
53112.patch (524 bytes) - added by sabernhardt 4 years ago.
adding wp-block-pullquote class to Twenty Nineteen editor styles
Twenty-Nineteen-pullquotes-before.png (32.6 KB) - added by sabernhardt 4 years ago.
each alignment option before patch
Twenty-Nineteen-pullquotes-after.png (35.0 KB) - added by sabernhardt 4 years ago.
after applying patch
53112.1.patch (824 bytes) - added by sabernhardt 4 years ago.
adding styles for left and right alignment
53112.2.patch (827 bytes) - added by sabernhardt 4 years ago.
using text-align: inherit for left and right pullquotes (plus the max-width)

Download all attachments as: .zip

Change History (15)

@devnel
4 years ago

Correct styling with no alignment set

@devnel
4 years ago

Styling missing with wide-align set

#1 @sabernhardt
4 years ago

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

@sabernhardt
4 years ago

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

@sabernhardt
4 years ago

each alignment option before patch

@sabernhardt
4 years ago

after applying patch

#2 @sabernhardt
4 years 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, but I'm unsure whether that would be better on a separate ticket.

Version 0, edited 4 years ago by sabernhardt (next)

#3 @desrosj
4 years 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
4 years ago

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

#5 @psrpinto
4 years ago

  • Keywords needs-testing removed

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

@sabernhardt
4 years ago

adding styles for left and right alignment

#6 @sabernhardt
4 years 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 years ago by sabernhardt (previous) (diff)

@sabernhardt
4 years ago

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

#7 @sabernhardt
4 years 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 years 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.