[Pull Quote Block] The font size setting isn't reflected accurately in the editor or on the front-end

[andersnoren]

Description

When you set a font size on a Pull Quote block and publish the page, the text size on the front end is a lot larger than the value set in the editor. That's because the font size is applied to the figure element, and the child paragraph element is set to a font-size of 1.75em by the Core styles. That means that the front-end font size will be 175% percent of whatever font size the user has set in the editor.

Also! The Core editor styles set .wp-block-pullquote blockquote p to a fixed font size of 28px, meaning whatever font size you set in the editor is not reflected while you're editing. The chosen value is applied to the figure element, but since the child paragraph has a fixed font size of 28px, the change isn't visible in the editor preview.

Step-by-step reproduction instructions

1. Create a page.
2. Add a Pull Quote.
3. Set a custom font size. It can be a size defined by the theme (like Large) or a custom value like 64px. The font size in the editor preview will remain 28px, no matter what size you set.
4. Publish the page. When you view it on the front-end, the font size will be much larger than the one you selected.

If you set the Pull Quote to have a text alignment of left or right, the paragraph will be 1.25em larger instead of 1.75em, but still not the same as the font size set by the user.

Screenshots, screen recording, code snippet

Environment info

Wordpress 6.0
Gutenberg 13.6.0
Twenty Twenty-Two
Safari 15.5

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Thelmachido]

It seems this could be related to the Twenty Twenty-Two theme. I checked on the Blank Canvas theme and the font size for the pull quotes is working as expected.

To add on, when I had the Twenty Twenty Two theme I noticed a few other things

1. The font size setting for the pull-quote block was only affecting the citation while in the editor. When I checked the page on the front end the pull quote was large as @andersnoren mentioned above. I took a video and screenshot of what I saw

Trying to change front size while in Editor

Screen.Recording.2022-07-08.at.11.52.37.mov

Checking the frontend of the site

[andersnoren]

@Thelmachido I gave it a go in Blockbase as well, and it seems like the font size isn't working in Blockbase but for theme specific reasons. In Blockbase, the pullquote paragraph element is set to a fixed font size by the theme, overwriting the font size set by the user in the post editor:

Note the figure set to font-size: 100px by the editor setting, and the paragraph element set to a fixed 32px by the theme. But this is separate from the issue with the Core styles.

[Thelmachido]

Thanks, @andersnoren for adding that. Twenty Twenty-Two and Blockbase have FSE which along with other FSE themes the issue was persisting when I was testing. With Blankcanvase and Stow but I see what you mean now, after checking with Twenty Seventeen theme I can reproduce the issue.

Thanks!

[justintadlock]

@andersnoren Can you verify if #43195 corrects this?

[t-hamano]

@andersnoren

Thank you for your contribution.

I have tested this issue again and #43295 seems to have resolved it. At least it works as expected on Twenty Twenty Three and Twenty Twenty Two. However, if the theme has the hard-coded font size into the p or cite elements, it will not work as expected. I believe this is an issue to be resolved by the theme.

Therefore, I would like to close this issue as resolved, but if I have missed something, please do not mind reopening it.

As a follow-up PR,I also submitted #45403 to match the height and margins on the front-end and the editor .