Make WordPress Core

Opened 12 months ago

Last modified 3 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: Future Release Priority: normal
Severity: normal Version: 6.2
Component: Bundled Theme Keywords: has-testing-info has-screenshots needs-testing needs-refresh
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 12 months ago.
Typography issue in twenty nineteen theme quote block
58169.1.patch (2.3 KB) - added by nkeller15 11 months ago.
58169.2.patch (1.5 KB) - added by nkeller15 11 months ago.

Download all attachments as: .zip

Change History (28)

#1 @nidhidhandhukiya
12 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
12 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.


12 months ago

#4 @ironprogrammer
12 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
12 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
12 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
12 months ago

Typography issue in twenty nineteen theme quote block

#7 @sabbiralamwp
11 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
11 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
11 months ago

@nkeller15
11 months ago

#9 @nkeller15
11 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
10 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
10 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;
}


-This CSS looks like it would also prevent the font family and line height settings (but not color).

Last edited 10 months ago by poena (previous) (diff)

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


10 months ago

#13 @audrasjb
10 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
8 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
7 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.


7 months ago

#17 @marybaum
7 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
7 months 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
6 months 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
6 months ago

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

#22 @sabernhardt
6 months ago

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

#23 @sumitbagthariya16
5 months 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

#24 @poena
2 months ago

  • Milestone changed from 6.5 to Future Release

#25 @karmatosed
3 weeks ago

  • Keywords needs-refresh added; has-patch removed

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

Note: See TracTickets for help on using tickets.