Twenty Twenty: "Add citation" text font-style issue in Quote block

[kajalgohel]

In Twenty Twenty Theme, when we add Quote block in editor side, We can see that "Add citation" text is seen with Italic font-style. But when we see the same Quote block at front side, "Add citation" text is seen with normal font-style.

Steps to replicate:
1: Activate the Twenty Twenty Theme
2: Add Quote block
3: Add text in "Add citation" section
4: Save Page/Post
5: View the page/post at front side

For better understanding I provide video attachment.

Thanks

[audrasjb]

Thank you for spotting this, reporting the ticket and adding a video recording of the issue :)

Fixed.
Ref #55931

Trac ticket: https://core.trac.wordpress.org/ticket/55931

[whaze]

hi, i add a PR, i modified the editor style

[mukesh27]

Hi there!

Thanks for the patch!

The Quote block does not use <footer> tag for the Add citation can you please check it?

[kajalgohel]

patch added for normal font-style in editor side.

[audrasjb]

Thanks everyone.
To sum-up the current status of the ticket:

• PR2788 by @iamjaydip contains unwanted changes.
• PR2789 by @whaze should target cite instead of footer.
• 55931.patch by @kajalgohel needs to implement the change also on the RTL stylesheet.

:)

[mukesh27]

#55934 was marked as a duplicate.

[kajalgohel]

patch added in RTL stylesheet.

[kajalgohel]

Hello @audrasjb

Thanks for the update. I have added css changes in both the stylesheet.

Thanks.

[whaze]

thx @audrasjb
i updated the PR

[audrasjb]

In 53470:

Twenty-Twenty: Improve Quote block style consistency between front and back-end.

This changeset updates the font-style value of the Quote block in the block editor to ensure styles are consistent between the editor and the front-end.

Props kajalgohel, iamjaydip, audrasjb, whaze, mukesh27.
Fixes #55931.

Fixed in https://core.trac.wordpress.org/changeset/53470

Fixed in https://core.trac.wordpress.org/changeset/53470

[bhrugesh12]

Hello @audrasjb,
I've checked twenty twenty theme with previous version of WordPress(5.9.3) and style of cite was italic. So we need to improve it as italic.

[audrasjb]

@bhrugesh12 using github blame, it appears the cite font-style value has always been normal in the front-end, so we'll want the editor view to be consistent with the font-end.
​https://github.com/WordPress/wordpress-develop/blame/trunk/src/wp-content/themes/twentytwenty/style.css#L558

[sabernhardt]

I'll close this because r53470 fixes the bug in the block editor. The cite element not only had normal font-style in style.css since ​initial commit, but the ​classic editor styles have matched the front end since before Twenty Twenty became available.

#56557 suggests changing the styles for a different use of the cite element. Discussion about possible style improvements can continue there.