Make WordPress Core

Opened 11 months ago

Last modified 5 weeks ago

#58107 new defect (bug)

Twenty Twenty-Two :- PullQuote block Letter case is not working in citation text

Reported by: shailu25's profile shailu25 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.2
Component: Bundled Theme Keywords: has-patch has-screenshots 2nd-opinion
Focuses: Cc:

Description

Steps to reproduce the issue :

  • Activate Twenty Twenty-Two theme.
  • Go to Posts / Pages > Add New Post / Page
  • Choose Pullquote block.
  • Add some text in Quote & citation.
  • Apply Letter Case in Pullquote


You can able to see that Letter Case is not working in the citation text.

I have attached video for better understanding.

Video URL :- https://drive.google.com/file/d/1-ypweKmaHmNCmq38naNi5TV0LEldojCQ/view

Attachments (7)

58107.diff (564 bytes) - added by shailu25 11 months ago.
Twenty Twenty-Two :- PullQuote block Letter case is not working in citation text
Backend-Screenshot1.png (92.2 KB) - added by shailu25 11 months ago.
Backend Side Before Patch
Backend-Screenshot2.png (91.6 KB) - added by shailu25 11 months ago.
Backend Side After Patch
Frontend-Screenshot1.png (65.3 KB) - added by shailu25 11 months ago.
Frontend Side Before Patch
Frontend-Screenshot2.png (64.9 KB) - added by shailu25 11 months ago.
Frontend Side After Patch
Before-Test.png (13.2 KB) - added by NekoJonez 11 months ago.
Me testing the patch
After-Test.png (13.8 KB) - added by NekoJonez 11 months ago.
After applying the patch

Download all attachments as: .zip

Change History (11)

@shailu25
11 months ago

Twenty Twenty-Two :- PullQuote block Letter case is not working in citation text

@shailu25
11 months ago

Backend Side Before Patch

@shailu25
11 months ago

Backend Side After Patch

@shailu25
11 months ago

Frontend Side Before Patch

@shailu25
11 months ago

Frontend Side After Patch

#1 @shailu25
11 months ago

  • Keywords has-screenshots added

@NekoJonez
11 months ago

Me testing the patch

@NekoJonez
11 months ago

After applying the patch

#2 @NekoJonez
11 months ago

I tested this patch on a 6.2 install and I just added the patch via adding the code via the theme editor.
As shown in the screenshots, the patch has the intented result.

#3 @poena
6 weeks ago

  • Keywords 2nd-opinion added

Hi
Here is what I found when testing the problem on WordPress 6.4.2 and 6.5-alpha-57345:

The theme uses add_theme_support( 'wp-block-styles' );.
This loads the theme.css file from WordPress core (You need to be in the block editor to see this file).

This file includes the CSS for the pullquote citation:

.wp-block-pullquote cite, .wp-block-pullquote footer, .wp-block-pullquote__citation {
	color: currentColor;
	font-size: .8125em;
	font-style: normal;
	text-transform: uppercase;
}

The option in the block settings under Typography > Appearance > Letter case also adds CSS, but inline on in the style attribute on the wrapping <figure> element.

In my opinion this is an editor bug; it can be reproduced in any theme that uses wp-block-styles.
You can reproduce it by adding add_theme_support( 'wp-block-styles' ); to Twenty Twenty-Four.
Some themes like Twenty Twenty-One already override the style for the cite, so it is not as visible.

Perhaps the option should not add the style inline on the wrapper, but use a CSS class name. And it should not be limited to only the letter casing. The letter casing just happened to be the example here because it is in wp-block-styles for this block.
I would like to hear a few more opinions before bringing this to the Gutenberg GitHub repository.

@ramonopoly This is not pressing for 6.5, but when you find the time.

#4 @ramonopoly
5 weeks ago

Thanks for the ping @poena

Agree that this should be rather addressed in Gutenberg.

I had a look around and it's possible the overriding theme.scss rules are affecting other things too, e.g., borders:

Perhaps the option should not add the style inline on the wrapper, but use a CSS class name. And it should not be limited to only the letter casing. The letter casing just happened to be the example here because it is in wp-block-styles for this block.

I'm not sure to be honest.

That sounds like a worthy experiment.

Alternatively, we could target the <p/> and <cite/> elements directly via the block.json selectors API (?)

What do folks think?

The theme.scss rules look like they were added intentionally as "opinionated styles" (quoting the PR).

cc @joen for when he has time to advise.

Specifically addressing text-transform, could we not flip the value from uppercase to inherit?

Note: See TracTickets for help on using tickets.