Make WordPress Core

Opened 7 months ago

Closed 7 months ago

Last modified 7 months ago

#61571 closed defect (bug) (fixed)

Twenty Fifteen: Code block font family is different in iframe editor

Reported by: pranitdugad's profile pranitdugad Owned by: karmatosed's profile karmatosed
Milestone: 6.7 Priority: normal
Severity: minor Version: 6.4
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description

Hello,
I have reviewed "Code" block and found that its font-family is different in both(Editor & Front-end) sides.
I think that it should be same on both sides.

Thanks,

Attachments (4)

Screenshot 2024-07-04 at 11.20.08 AM.png (117.6 KB) - added by pranitdugad 7 months ago.
frontend
Screenshot 2024-07-04 at 11.19.43 AM.png (175.0 KB) - added by pranitdugad 7 months ago.
back-end
61571.patch (500 bytes) - added by pranitdugad 7 months ago.
After applying this patch , this issue is resolved
61571.1.patch (437 bytes) - added by sabernhardt 7 months ago.
adds Inconsolata font to the Code block within editor styles

Download all attachments as: .zip

Change History (10)

@pranitdugad
7 months ago

After applying this patch , this issue is resolved

@sabernhardt
7 months ago

adds Inconsolata font to the Code block within editor styles

#1 @sabernhardt
7 months ago

  • Focuses css added
  • Keywords has-patch needs-testing added
  • Milestone changed from Awaiting Review to Future Release
  • Summary changed from Twenty Fifteen: Code block font family is different in back-end & Front-end. to Twenty Fifteen: Code block font family is different in iframe editor
  • Version set to 6.4

In the iframe-based editor, WordPress 6.4 stopped adding .editor-styles-wrapper to selectors it pulled from the theme's editor-style.css. Then Twenty Fifteen's Inconsolata font in code element styles did not override .wp-block-code code {font-family: inherit} from block-library/style.css, which inherited .wp-block-code {font-family: Menlo,Consolas,monaco,monospace} from block-library/theme.css.

61571.1.patch adds Inconsolata to the Code block (not the code element) within block editor styles. The font could be added to the existing ruleset instead, but I chose to target .wp-block-code without raising the specificity.

Note: Twenty Sixteen would need a similar change in its editor-blocks.css (other themes should not need a change).

#2 @karmatosed
7 months ago

  • Milestone changed from Future Release to 6.7
  • Owner set to karmatosed
  • Status changed from new to assigned

Assigning this to myself to test with a view to commit.

@sabernhardt we don't seem to have an issue unless I am mistaken for this:

Note: Twenty Sixteen would need a similar change in its editor-blocks.css (other themes should not need a change).

Do you want to create one and also that patch? Happy to resolve both if we are doing that.

#3 @karmatosed
7 months ago

  • Keywords commit added

Thank you, I can confirm in testing I am going to move this to commit. I still want to note there needs to be made a ticket for Twenty Sixteen but that should not block getting this in.

#4 @karmatosed
7 months ago

  • Keywords needs-testing removed

#5 @karmatosed
7 months ago

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

In 58730:

Twenty Fifteen: Fixes code block family being different in iframe editor.

The font family was not being included for the code block. This adds Inconsolata to the code block within the editor styles.

Props pranitdugad, sabernhardt.
Fixes #61571.

#6 @sabernhardt
7 months ago

#61700 could fix the font-family for Twenty Sixteen (with other properties).

Note: See TracTickets for help on using tickets.