Make WordPress Core

Opened 8 months ago

Last modified 2 weeks ago

#58169 new defect (bug)

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

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.2
Component: Bundled Theme Keywords: has-testing-info has-screenshots has-patch needs-testing
Focuses: Cc:

Description

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

Attachments (3)

typo issue.gif (711.3 KB) - added by amin7 7 months ago.
Typography issue in twenty nineteen theme quote block
58169.1.patch (2.3 KB) - added by nkeller15 6 months ago.
58169.2.patch (1.5 KB) - added by nkeller15 6 months ago.

Download all attachments as: .zip

Change History (26)

#1 @nidhidhandhukiya
8 months ago

The below css can resolve the issue.

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

#2 @SergeyBiryukov
8 months ago

  • Summary changed from Twenty Ninteen - Quote block having issue when font-size is selected to Twenty Nineteen: Quote block having issue when font-size is selected

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


7 months ago

#4 @ironprogrammer
7 months ago

  • Keywords has-testing-info has-screenshots added
  • Milestone changed from Awaiting Review to 6.3

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.

#5 @sabernhardt
7 months ago

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.

#6 @amin7
7 months ago

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
7 months ago

Typography issue in twenty nineteen theme quote block

#7 @sabbiralamwp
7 months ago

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.

#8 @pavanpatil1
6 months ago

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
6 months ago

@nkeller15
6 months ago

#9 @nkeller15
6 months ago

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

(Ignore first patch I uploaded)

#10 @poena
5 months ago

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.

#11 @poena
5 months ago

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;
}


Version 0, edited 5 months ago by poena (next)

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


5 months ago

#13 @audrasjb
5 months ago

  • Milestone changed from 6.3 to 6.4

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.

#14 @oglekler
3 months ago

  • Keywords has-patch added

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

#15 @oglekler
2 months ago

  • Keywords changes-requested added

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.

This ticket was mentioned in Slack in #core by marybaum. View the logs.


2 months ago

#17 @marybaum
2 months ago

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!

#18 @nicolefurlan
8 weeks ago

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.

#20 @felipeelia
8 weeks ago

  • Keywords changes-requested removed

(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.

#21 @nicolefurlan
8 weeks ago

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

#22 @sabernhardt
7 weeks ago

  • Keywords needs-testing added
  • Milestone changed from 6.4 to 6.5

#23 @sumitbagthariya16
2 weeks ago

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

Note: See TracTickets for help on using tickets.