Make WordPress Core

Opened 6 weeks ago

Last modified 6 weeks ago

#61377 new defect (bug)

Twenty Twenty: Login/out block font family is different in the editor when added to a post

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5.3
Component: Bundled Theme Keywords: dev-feedback
Focuses: css Cc:

Description

Hello,

I have reviewed "Login/out" 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.

Here, I have attached its screenshots:

Thanks,

Attachments (5)

Screenshot 2024-06-05 at 2.38.10 PM.png (459.5 KB) - added by viralsampat 6 weeks ago.
Back-end
Screenshot 2024-06-05 at 2.40.32 PM.png (388.1 KB) - added by viralsampat 6 weeks ago.
Front-end
61377.patch (780 bytes) - added by viralsampat 6 weeks ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
Screenshot 2024-06-07 at 10.57.20 AM.png (496.7 KB) - added by viralsampat 6 weeks ago.
After resolved issue Back-end:
Screenshot 2024-06-07 at 10.57.56 AM.png (152.1 KB) - added by viralsampat 6 weeks ago.
After resolved issue front-end:

Download all attachments as: .zip

Change History (6)

#1 @sabernhardt
6 weeks ago

  • Summary changed from Twenty Twenty: Login/out block font family is different in back-end & Front-end. to Twenty Twenty: Login/out block font family is different in the editor when added to a post

In a widget, the Login/out block uses a sans-serif font for both front end and the editor. It is likely more common to find that block in a widget for all pages than in individual posts or pages (though I have added a logout link on a single page before).

In a post:

  1. The block has the serif family on the front end, within the .entry-content container.
    .entry-content {
      font-family: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;
      letter-spacing: normal;
    }
    
  2. In the editor, the block inherits the sans-serif font ("Inter var" if supported) because it does not use a paragraph or list tag.
      .editor-styles-wrapper > * {
        font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
      }
    .editor-styles-wrapper p,
    .editor-styles-wrapper ol,
    .editor-styles-wrapper ul,
    .editor-styles-wrapper dl,
    .editor-styles-wrapper dt {
      font-family: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;
      letter-spacing: normal;
    }
    

@viralsampat
6 weeks ago

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

@viralsampat
6 weeks ago

After resolved issue Back-end:

@viralsampat
6 weeks ago

After resolved issue front-end:

Note: See TracTickets for help on using tickets.