Make WordPress Core

Opened 6 months ago

Last modified 6 weeks ago

#60880 new defect (bug)

Twenty Nineteen: paragraph does not inherit font size from parent block within the editor

Reported by: pitamdey's profile pitamdey Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.0
Component: Bundled Theme Keywords: has-testing-info needs-patch has-screenshots
Focuses: ui, css Cc:

Description

In Twenty Nineteen Theme, The typography setting of Details Block is not working properly i.e. if we change the size then it is not reflecting on the editor side but it is reflecting in the front end. This is working properly in another theme so I think we have to make the same for this theme also

Here is the recording for better understanding :
https://www.loom.com/share/3f7a1220bd5c4927b343561fd89250b3?sid=9c578532-fee6-47a2-a9ed-896b9b251df5

Attachments (1)

2019 theme - detail block - typography issue.mov (4.8 MB) - added by krupajnanda 6 months ago.
This visual shows that change in typography does not work as expected for summary in back end.

Change History (6)

This ticket was mentioned in Slack in #core-test by ankit-k-gupta. View the logs.


6 months ago

#2 @krupajnanda
6 months ago

  • Focuses ui added
  • Keywords has-testing-info needs-patch has-screenshots added
  • Version set to 6.4.3

Hi @pitamdey

Thank you for reporting the bug. I'm able to replicate the issue mentioned.

Reproduction Report

Description

This report validates the issue can be reproduced.

Environment

  • WordPress: 6.4.3
  • PHP: 8.2.0
  • Server: Apache/2.4.54 (Unix) OpenSSL/1.0.2u PHP/8.2.0 mod_wsgi/3.5 Python/2.7.18 mod_fastcgi/mod_fastcgi-SNAP-0910052141 mod_perl/2.0.11 Perl/v5.30.1
  • Database: mysqli (Server: 5.7.39 / Client: mysqlnd 8.2.0)
  • Browser: Chrome 123.0.0.0
  • OS: macOS
  • Theme: Twenty Nineteen 2.7
  • MU Plugins: None activated
  • Plugins:
    • Core Rollback 1.3.5
    • Query Monitor 3.15.0
    • Test Reports 1.1.0
    • WordPress Beta Tester 3.5.5

Actual Results

  1. ✅ Error condition occurs (reproduced).

Additional Notes

  • N/A

Supplemental Artifacts

Add as Attachment

@krupajnanda
6 months ago

This visual shows that change in typography does not work as expected for summary in back end.

#3 @sabernhardt
6 months ago

  • Focuses css added
  • Summary changed from Twenty Nineteen : Details Block Typography is not working properly to Twenty Nineteen: paragraph does not inherit font size from parent block within the editor
  • Version changed from 6.4.3 to 5.0

When a Group or Columns block has its own font size and contains Paragraph blocks, the paragraphs do not match the special font size from those parent blocks either. On the front end, the paragraphs match Group, Columns or Details block font sizes.

Version note: Although the Typography setting was not available with WordPress 5.0 and Twenty Nineteen 1.0, entering a has-larger-font-size class for a Columns block already would have had the same issue in the editor. The style-editor.scss stylesheet has targeted the p element in addition to body since initial commit, yet the front-end stylesheet sets font size on the html and body elements instead.

#4 @sabernhardt
2 months ago

The paragraph font size ruleset was added to override 16px in WordPress 5.0 and 5.1 but is unnecessary now.

  1. To continue supporting old versions, the font-size could be changed to inherit. It could even check the body classes with :where(.branch-5-0, .branch-5-1) .editor-styles-wrapper p if it should target only those versions. The two add up to only 1.02% of all recorded WordPress sites, but the chances of those sites using Twenty Nineteen would be higher than with other WordPress versions.
  2. In WordPress 6.6, deleting the font-size ruleset would make the default paragraphs the same 22px size (taken from body in the iframe editor and Classic Editor, or from .editor-styles-wrapper in the non-framed editor). Both #61429 and #61474 have patches that proposed deleting the rule.

#5 @karmatosed
6 weeks ago

  • Milestone changed from Awaiting Review to Future Release
Note: See TracTickets for help on using tickets.