Twenty Nineteen: Quote block having issue when font-size is selected

[nidhidhandhukiya]

Steps to reproduce the issue :-

1. Activate Twenty Nineteen theme.
2. Choose Quote block.
3. Change font size.
4. Now check that applied font-size both side admin and user side for citation text.

You can able to see the difference between both the fonts.

I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/m4sv6stcg7PLCcwdH8QK

[nidhidhandhukiya]

The below css can resolve the issue.

.editor-styles-wrapper .wp-block-quote cite {
  font-size: calc(1rem / (1.25 * 1.125))!important;
}

[ironprogrammer]

Thanks for the report and detailed instructions, @nidhidhandhukiya!

The next step for this ticket would ideally be for another contributor to provide ​reproduction results, and for a formal patch to be submitted. I've also assigned this to the 6.3 milestone.

[sabernhardt]

Changing the editor styles to match the front can be trickier because the rem value is not the same. Twenty Nineteen sets the html to 22px (line 2215 in the stylesheet or $font__size_base in the typography partial), but the editor uses the browser default (usually 16px).

It may be good enough to multiply by 1.375 in the editor styles.

        cite,
        footer,
        .wp-block-quote__citation {
                @include font-family( $font__heading );
                font-size: calc(1rem * 1.375 / (1.25 * 1.125));
                line-height: 1.6;
                color: inherit;
        }

However, I suggest editing the front end to use em measurements instead. That way, any custom font sizing for the block would affect the citation text.

[amin7]

I am also able to replicate the issue by following the test instruction.

Testing environment

OS: Windows 10 version 22H2
Web Server: Nginx
PHP: 8.1.9
WordPress: 6.2
Browser: Chrome 109.0.5414.87
Theme: Twenty Nineteen
Active Plugins: No plugins activated.

Steps to reproduce the issue :-

Activate Twenty Nineteen theme.
Choose Quote block.
Change the font size of the citation text.
Check the font size of both the backend editor and front end after applying the change.

The font size is not changing accordingly.

[amin7]

Typography issue in twenty nineteen theme quote block

[sabbiralamwp]

Do we not want to change the font size for the citation part of the Quote block? If that is the case we can disable the font-size option for the Quote block.

Because from what I can see, we are enabling the user to add a font-size and adding CSS so that the font-size is not applied. That is a bit confusing from the user's perspective. I might be missing something here.

[pavanpatil1]

Able to reproduce the issue with the quote block and Twenty Nineteen theme. If we could remove this below font size or update it form the style.css file then the issue seems working fine.

.entry .entry-content .wp-block-quote cite {
  font-size:calc(1rem * 1.375 / (1.25 * 1.125));
}

[nkeller15]

Added patch as per @pavanpatil1 suggestion: https://core.trac.wordpress.org/attachment/ticket/58169/58169.2.patch

(Ignore first patch I uploaded)

[poena]

Because from what I can see, we are enabling the user to add a font-size and adding CSS so that >the font-size is not applied. That is a bit confusing from the user's perspective. I might be missing something here.

That is because the theme CSS was added before WordPress updated the quote block typography options. The option can't be disabled because it would affect existing websites.

[poena]

If I understand the comments correctly, there are two issues:

1) Front: The <cite> does not change font size at all when the quote block typography settings are used.
2) Editor, the cite changes, but not to the correct size.

Preset:
When I set the font size to the large preset:
The .has-large-font-size class on the front is overridden by the theme CSS for .entry .entry-content .wp-block-quote cite

Custom size:
When I select a custom font size:
Front: The font size is inline on the blockquote element, and the theme CSS for .entry .entry-content .wp-block-quote cite overrides it.

Editor: the font size is overridden by this CSS:

.wp-block-quote cite,
.wp-block-quote footer,
.wp-block-quote .wp-block-quote__citation {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.71111em;
  line-height: 1.6;
  color: inherit;
}

[audrasjb]

As per today's bug scrub, let's move this to the next milestone as we are at the end of WP 6.3 beta cycle.

[oglekler]

@poena am I right in understanding that patch needs an additional work? It isn't clear if you looked at it or not.

[oglekler]

This patch is working only partly, because p element is getting inline font-size and cite block is not, so, to ensure that this element will have this certain size, it needs to make the same thing — add this font size as inline stile to the cite element.

[marybaum]

Pinging the reporter to see if she would like to update the patch per the comments on the ticket. @nidhidhandhukiya if you can, it would be great to get it done before beta 3 on October 10. Thanks!

[nicolefurlan]

Hi @nkeller15! Could you review the recent comments on this ticket and update the patch that you submitted? We're looking to get this fix in for 6.4 RC1, which is just one week away.

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

[felipeelia]

(Although the solution may seem a bit hacky) I think I've covered all the problems @poena outlined in her comment with that PR but let me know if any additional change is needed.

[nicolefurlan]

@poena would you be able to check out this updated PR to see if this is ready for testing?

[sumitbagthariya16]

QA update: ❌

I've double checked with the most recent patch, and the results are different, Set font size to 40 pixels, the front end displays a different font size.

​https://prnt.sc/hJq0DDUOB6GP
​https://prnt.sc/wQ7SL3ClzJFp

[karmatosed]

It looks to me like this patch needs a refresh / update so I am noting the keyword for that.

[sabernhardt]

#62743 was marked as a duplicate.