fix: restore non-API version of the editor styles

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR removes the API-based inline CSS introduced here and moves it back into the editor.scss for easier syncing with WP.com.

See: 1200550061930446-as-1209502971732489

Maddeningly, it looks like #1548 may have changed how the @media styles cascaded, so this PR corrects that as well. I based what the correct size should be off the front-end, rather than the current editor styles. This changes the smaller types scales (1-3) by a couple pixels in the editor only. Edited to add: this is my mistake, I double-checked and I had this wrong!

This is a chart based on the front-end in case it helps with testing; --- means same as the previous breakpoint size. It's a lot, but it should be enough to spot check a few of these at different breakpoints:

Sizes from front-end

Typescale	Selector	Default	min-width: 782px	min-width: 1168px
10	.entry-title	2.6em	3.6em	4.8em
	.newspack-post-subtitle	1.4em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
9	.entry-title	2.4em	3.4em	4.2em
	.newspack-post-subtitle	1.4em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
8	.entry-title	2.2em	3em	3.6em
	.newspack-post-subtitle	1.4em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
7	.entry-title	2em	2.4em	3em
	.newspack-post-subtitle	1.4em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
6	.entry-title	1.7em	2em	2.4em
	.newspack-post-subtitle	1.4em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
5	.entry-title	1.4em	1.6em	2em
	.newspack-post-subtitle	1.2em	---	---
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
4	.entry-title	1.2em	1.6em
	.newspack-post-subtitle	inherits	---	---
	.entry-wrapper p	inherits	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
3	.entry-title	1em	1.2em	---
	.newspack-post-subtitle	0.8em	---	---
	.entry-wrapper p	0.8em	---	---
	.entry-wrapper .more-link	0.8em	---	---
	.entry-meta	0.8em	---	---
2	.entry-title	0.9em	---	---
	.newspack-post-subtitle	0.8em	0.7em	---
	.entry-wrapper p	0.8em	0.7em	---
	.entry-wrapper .more-link	0.8em	0.7em	---
	.entry-meta	0.8em	0.7em	---
1	.entry-title	0.7em	---	---
	.newspack-post-subtitle	0.8em	0.7em	---
	.entry-wrapper p	0.8em	0.7em	---
	.entry-wrapper .more-link	0.8em	0.7em	---
	.entry-meta	0.8em	0.7em	---

How to test the changes in this Pull Request:

1. Create a post with ten Content Loop blocks, one using each type scale. You can also copy-paste this starter code:

Testing blocks

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":1,"sectionHeader":"1","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":2,"sectionHeader":"2","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":3,"sectionHeader":"3","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showCategory":true,"postLayout":"grid","mediaPosition":"left","sectionHeader":"4","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":5,"sectionHeader":"5","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":6,"sectionHeader":"6","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"postLayout":"grid","mediaPosition":"left","typeScale":7,"sectionHeader":"7","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"mediaPosition":"left","typeScale":8,"sectionHeader":"8","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"columns":2,"postsToShow":1,"mediaPosition":"left","typeScale":9,"sectionHeader":"9","showSubtitle":true} /-->

<!-- wp:newspack-blocks/homepage-articles {"showReadMore":true,"showImage":false,"showCategory":true,"columns":2,"postsToShow":1,"mediaPosition":"left","typeScale":10,"sectionHeader":"10","showSubtitle":true} /-->

2. Edit a few posts to make sure you have a good distribution of posts with the Newspack Article Subtitle visible.
3. Apply this PR and run npm run build.
4. Compare the editor font sizing against the front-end -- make sure to check the different breakpoints. The exact px value may not line up based on the editor's base font size, but the em size should; this will line up with current behaviour, which is also relative.
5. If you're not using one already, switch the site to a block theme.
6. Edit one of the Templates/Template parts, and add a Content Loop block. Switch the block to the 'Grid' layout, and make sure that at least one of the visible posts has a featured image.
7. Confirm that the images don't exceed the available space (there's some examples of this issue here).

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[dkoo]

This is working well! It retains what #1548 optimized for the front-end, while simplifying the CSS handling in the editor.

One thing to note is that with these changes, the text sizes in the editor at mobile breakpoints are noticeably larger than what's on the front-end, and than the editor styles before the changes. I think this is okay because the relative sizes between the type scale settings look consistent enough within the editor. Also, I doubt many editors are using this editor view to preview mobile breakpoint styles (the dedicated preview page is better for that).

On release:

On this PR:

[laurelfulford]

Thanks @dkoo!

One thing to note is that with these changes, the text sizes in the editor at mobile breakpoints are noticeably larger than what's on the front-end...

I think this might be a mix of the editor font sizes being a bit bigger on mobile than desktop thanks to the theme, and me not including the editor styles in this change originally -- it bumps up the super-small block sizes on mobile a bit since we had some feedback about them getting too small on small screens.

I'm going to hold off merging this 'til first thing tomorrow so I'm around when it goes out, juuuuuust in case 🙂

[dsas]

This fixes the occurrence of #1826 on wpcom, thank you

[matticbot]

🎉 This PR is included in version 4.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 4.7.0-alpha.2 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀