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

[shailu25]

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

[shailu25]

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

[shailu25]

Backend Side Before Patch

[shailu25]

Backend Side After Patch

[shailu25]

Frontend Side Before Patch

[shailu25]

Frontend Side After Patch

[NekoJonez]

Me testing the patch

[NekoJonez]

After applying the patch

[NekoJonez]

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.

[poena]

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.

[ramonopoly]

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:

• ​https://github.com/WordPress/gutenberg/issues/54554
• ​https://github.com/WordPress/gutenberg/issues/56628

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?

[sabernhardt]

This was reported earlier in #56001, but it needs an issue and/or PR on GitHub.

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

Only editing the value in theme.scss to inherit could change how the case is by default. However, I think that the block styles could inherit the case when the Pullquote specifies its own letter case.

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

	&[style*="text-transform"] cite,
	&[style*="text-transform"] &__citation {
		text-transform: inherit;
	}
}

[karmatosed]

Closing as recommended.