Hotfix/update subtitle selector

[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:

Edited to add: The testing steps have been updated to cover an additional fix I've added to this PR.

Subtitles:
This PR fixes a weird edge case where if you have:

• A single post with a subtitle displaying
• A homepage posts block on that single post

... the styles from the homepage posts block subtitle override the styles coming from the theme, and remove the space from underneath the subtitle in the post header. The issue is that the CSS selector changed in the release.

Font sizes:
It also updates the selectors for the smaller homepage post block sizes. The sizes for type scale 3 and smaller don't include the .ts-# selector in front of all elements, so that font size is getting picked up by other homepage post blocks with larger font sizes that normally use the theme's defaults.

I've updated the selectors to make sure styles for type scale 3 and lower don't "bleed" into other blocks on the page. I also tweaked the title size for type scale 4's headers -- it's the "default" size so the styles weren't set up exactly the same as the others originally, and weren't inheriting the right font size on different screen sizes.

How to test the changes in this Pull Request:

Testing the subtitle fix:

1. Create a post and add a subtitle.
2. Add a Homepage Posts block to the body of the post, and turn on the subtitles on the block.
3. Publish and view on the front-end:

4. Apply the PR.
5. Confirm that the spacing in the header is changed, and also that the subtitle has no bottom margin when it appears in the block.

Testing the smaller font size fix:

1. Add a series of homepage post blocks to a page, of all sizes -- sizes 1-4 specifically should be tested, but it wouldn't hurt to add others. You can also copy-paste the example code of all sizes below.

HPB - different sizes

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"columns":2,"postsToShow":1,"typeScale":10,"sectionHeader":"Ts 10"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"typeScale":9,"sectionHeader":"Ts 9"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","columns":2,"postsToShow":2,"typeScale":8,"sectionHeader":"Ts 8"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","typeScale":7,"sectionHeader":"Ts 7"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","typeScale":6,"sectionHeader":"Ts 6"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","typeScale":5,"sectionHeader":"Ts 5"} /-->

<!-- wp:newspack-blocks/homepage-articles {"showCategory":true,"postLayout":"grid","sectionHeader":"Default"} /-->

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

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

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

2. Compare against this test page, running an older block release. On the front-end, note that the paragraph font size on master is smaller throughout, and if make the browser window smaller, the font size on the 'default' (type scale 4) block's post titles doesn't decrease in size. In the editor, the 'default' (type scale 4) block's post titles will appear smaller than they should.
3. (Also look for any other weirdness in case I'm missing something!).
4. Apply the PR and run npm run build.
5. Compare your localhost against the demo site again; confirm that the font sizes appear consistent on the front-end and in the editor.

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?

[laurelfulford]

@adekbadek I'd love to get your eyes on this before it's merged -- I ended up re-adding a CSS class removed in #1548 to fix an edge case display issue. An alternative would be to just make the CSS selector more specific (like .wpnbha .newspack-post-subtitle), but I was a little worried that could affect site-specific CSS, so I stuck with the original class.

I might be preserving something that's not great to keep in the long-run by doing this, though -- if the more specific selector would be better than what I've done here, I can come up with a plan for site-specific stuff. Just let me know if you have any questions, and I could be totally overthinking this 😅 Thanks!

[adekbadek]

Thanks for catching that! I think it's fine to add this one selector.

[laurelfulford]

Thanks @adekbadek!

We had one more report of something else font-size related, so I've bundled it in the same PR and am marking it as needing review again, so they can both be in the same hotfix.

I'm going to update the testing steps to cover both, then mark this as needing review again.

[leogermani]

the font size fizes work as described

The paragraphs below the titles change their size according to the size chosen in the block, both on the editor and on the front end

[laurelfulford]

Thanks @leogermani! 🙌

[matticbot]

🎉 This PR is included in version 2.2.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀