Twenty Twelve: fix heading typography in the editor

[dilip2615]

When activating the 'Twenty Twelve' theme and creating any post then display 'Add title' font size is very low compare to others

[dilip2615]

Add title display very low, need to increase/improve font size.

[navinrangar]

i'm new to core; i tried finding the file where the code for 'add new post' is written, but couldn't make it.

I want to contribute to this ticket, could anyone pl help me finding the related file?

[sabernhardt]

adds selectors with .editor-styles-wrapper and/or .wp-block-post-title for typography rulesets

[sabernhardt]

The post title font-size should remain as it is on the front: the rem equivalent of 20px for small screens, 22px for screens wider than 600 pixels. It is very late to change that in a 12-year-old theme.

In the (iframe) editor, the size equals 21 pixels, which is a minor mismatch. However, the editor-blocks.css file had defined styles to match the front with now-obsolete selectors such as .editor-post-title__block .editor-post-title__input. The font-weight is a more noticeable difference than the size.

The patch adds selectors that fit the current editor. Some of the proposed updates are not necessary within the iframe, but the non-framed version would use them. I also kept the original selectors for anyone with a WordPress 5.x site.

[iflairwebtechnologies]

@dilip2615
Generated new 62010.patch
Here you can see beforUpdated.png and afterUpdate.png

[sabernhardt]

I could have edited the ticket summary earlier. The theme's font size for post titles is 20px with narrower viewports and 22px for wider. 62010.diff​ may need additional iterations, but the patch should follow that direction.

[mukesh27]

Nice catch @dilip2615

As patch needs some iteration i'm going to add the needs-refresh, also added good-first-bug

[dilip2615]

Replying to mukesh27:

Thank you for your support.

## PR Description

• Fix Heading Typography for Theme twenty twelve, for different viewports.

• Post titles are now set to 20px for narrow viewports and 22px for wider viewports, consistent with frontend design. Editor styles have been updated to reflect these sizes, providing a cohesive editing experience.

Trac ticket: https://core.trac.wordpress.org/ticket/62010

---

[anujrathore24]

Hello @sabernhardt,

Can you please review my PR and let me know if there are any changes required.
Thank You!

Please review it.

I've reviewed it, and everything is working fine on my end

[logicrays]

Hello @dilip2615

Please Increase the font-sze in h1 like, font-size: 1.5rem; to font-size: 2.5rem;
=> file Directory Path wp-content/themes/twentytwelve/editor-style.css

[desrosj]

It looks like this one was closed on accident. Reopening so it can be tested and properly considered.

[logicrays]

Replying to desrosj:

It looks like this one was closed on accident. Reopening so it can be tested and properly considered.

Hello @desrosj got it your points and thanks for your suggestion.
this ticket is review from our side and get the solution but how can I submit my answer for this ticket actually I don't know.
already review the #meta doc but I miss some point from my side.So Can you tell me how can I submit my solution for this ticket.

[alfafiatozz]

Tested 62010.diff locally with Twenty Twelve.

I created a post with H1 to H6, checked the editor before applying the patch, then applied the changes to css/editor-blocks.css and tested again.

What I found:

• Post title is 22px at 600px and above.
• Post title is 20px at 500px.
• H1 is 21px.
• The updated selectors are working in the editor.
• Front-end typography did not change.

Patch works as expected on my setup.

Screenshots:

• Editor after patch: ​https://i.imgur.com/TyeJECi.png
• Front end after patch: ​https://i.imgur.com/qc6KLw2.png
• Desktop title at 22px: ​https://i.imgur.com/RXyJVy5.png
• 500px title at 20px: ​https://i.imgur.com/S66esSm.png