Make WordPress Core

Opened 13 months ago

Closed 10 months ago

Last modified 10 months ago

#57971 closed defect (bug) (fixed)

Twenty Twenty-Three: Can't update site title font size in Marigold, Whisper styles

Reported by: ryelle's profile ryelle Owned by: audrasjb's profile audrasjb
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.2.2
Component: Bundled Theme Keywords: has-screenshots has-patch has-testing-info commit
Focuses: css Cc:

Description

If you switch to one of these two styles, setting a font size on the Site Title block no longer works.

I believe this is due to the fontSize set on the core/site-title.elements.link.typography in the variation JSON. The font size set on the block changes the element itself, but .wp-block-site-title a:where(:not(.wp-element-button)) is set by that JSON value and takes precedence.

This might be intentional for the design, but it was still unexpected.


To reproduce:

  1. Open the site editor, get to the Styles sidebar
  2. Choose the Marigold or Whisper styles in Twenty Twenty-Three
  3. Switch back to the block sidebar, select the Site Title block
  4. Open styles, edit the font size
  5. The block outline changes, but the text itself does not

Attachments (3)

tt3-marigold-site-title.mp4 (2.6 MB) - added by ryelle 13 months ago.
2023-site-title.png (595.3 KB) - added by shuvoaftab 13 months ago.
Font Size not changing in Link Tag
57971.diff (1.8 KB) - added by sabernhardt 13 months ago.
move font styling from link element to site title (or post title) block in Marigold and Whisper

Change History (17)

#1 @ryelle
13 months ago

In Whisper, you also can't change the font family, weight, or letter spacing. This is true whether you're editing one block in the Settings sidebar, or editing the global style of site title blocks in Styles.

#2 @shuvoaftab
13 months ago

  • Focuses ui accessibility javascript css administration template added
  • Keywords has-screenshots needs-design-feedback added

The issue seems to be the Paragraph Tag changes with the Font Size changing. But the Text is inside a Link Tag <a> which is staying the same as Normal as in the screenshot.

@shuvoaftab
13 months ago

Font Size not changing in Link Tag

#3 @sabernhardt
13 months ago

  • Focuses ui accessibility javascript administration template removed
  • Keywords needs-patch added; needs-design-feedback removed

@sabernhardt
13 months ago

move font styling from link element to site title (or post title) block in Marigold and Whisper

#4 @sabernhardt
13 months ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.3

Marigold had applied a font size to links in the Post Title block, too.

I thought to add inherit for the link styles, but then assigning a style to all links might apply to the top navigation without affecting the linked site title.

#5 @alvitazwar052
11 months ago

  • Keywords has-testing-info added
  • Version set to 6.2.2

Test Report

Patch tested: https://core.trac.wordpress.org/attachment/ticket/57971/57971.diff

Environment

  • OS: macOS 12.4
  • Web Server: Nginx
  • PHP: 7.4.33
  • WordPress: 6.3-alpha-55505-src
  • Browser: Chrome
  • Theme: Twenty Twenty-three

Steps

  • Open the site editor, get to the Styles sidebar
  • Choose the Marigold styles in Twenty Twenty-Three
  • Switch back to the block sidebar, select the Site Title block
  • Open styles, edit the font size

ScreenCast

Before Applying the Patch: https://www.loom.com/share/3d8d34d261f64e57ab37ac30e3d33bbf
After Applying the Patch: https://www.loom.com/share/5033bfa213cd4bb1ae327397d4e19d20

Actual Results

  • After Applying the patch the text size is changing as expected✅

#6 @oglekler
10 months ago

  • Keywords needs-testing added

I am adding needs-testing to highlight that this patch is ready, and testing is also not limited by one test.

#7 @shailu25
10 months ago

Test Report for https://core.trac.wordpress.org/attachment/ticket/57971/57971.diff

Environment:
============
OS: Windows
PHP: 8.1.17
WordPress: 6.2.2
Browser: Chrome
Theme: Twenty Twenty-three


In Marigold Style:
===============

Backend:
========
Before Patch Backend: https://prnt.sc/bqjnqlWczqo0
After Patch Backend : https://prnt.sc/6vBXF5LCeIVw

Frontend:
========
Before Patch Frontend: https://prnt.sc/8S0QKrs5FHg7
After Patch Frontend : https://prnt.sc/IE3gKRklH-1j


In Whisper Style:
==============

Backend:
========
Before Patch Backend : https://prnt.sc/lJ7DKUIwd76f
After Patch Backend : https://prnt.sc/MBqv0hD-Pz7A

Frontend:
========
Before Patch Frontend: https://prnt.sc/7GVbhGZL8B2P
After Patch Frontend : https://prnt.sc/ZLO2CqMBnMN2


Result After Patch:
===============

  • site title's font size is Changing both Backend & Frontend in Marigold & Whisper styles
  • Also font family, font weight, and letter spacing are working fine in Whisper style. (https://prnt.sc/QFFJGX7KFFPl)

#8 @mikinc860
10 months ago

  • Keywords needs-testing removed

#9 @poena
10 months ago

  • Keywords commit added

The patch works well in my testing too, thank you.

#11 @audrasjb
10 months ago

Works well in my testing too. I added a new PR to refresh the patch against trunk.

#12 @audrasjb
10 months ago

  • Owner set to audrasjb
  • Status changed from new to accepted

#13 @audrasjb
10 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 56131:

Twenty Twenty-Three: Allow changing Site Title font size in Marigold and Whisper styles.

This changeset moves font styling from link element to site title (or post title) block in Marigold and Whisper style variations, which allows to change Site
Title block font size.

Props ryelle, shuvoaftab, sabernhardt, alvitazwar052, shailu25, poena, audrasjb.
Fixes #57971.

Note: See TracTickets for help on using tickets.