Cover: Add typography supports

[aaronrobertshaw]

Depends on:

• Duotone: Prevent early return blocking other style generation #43300

Related:

• Tracking: Addressing Design Tooling Consistency #43241
• Tracking: Typography Design Tools Consistency #43242

What?

Adds typography support to the Cover block.

Why?

• Improves consistency of our design tools across blocks.
• Allows some typographic styling to be set in a single place and applied to all the Cover's inner blocks.

How?

• Opts into typography supports.

Testing Instructions

1. Edit a post, add a Cover block with multiple paragraphs inside and select it.
2. Test various typography settings ensuring styles are applied in the editor.
   • Note that by default the Cover block current applies font size to the first paragraph which will take precedence.
3. Save and confirm the application on the frontend.
4. Cherry pick the changes from Duotone: Prevent early return blocking other style generation #43300 to this branch
5. Switch to the site editor and select a page/template with a Cover block.
6. Navigate to Global Styles > Blocks > Cover > Typography and apply typography styles there.
7. Confirm the selected styles are reflected in the preview and on the frontend.

Screenshots or screencast

Screen.Recording.2022-08-17.at.3.49.26.pm.mp4

[andrewserong]

I noticed that adjusting these Typography controls also affects rendering in the placeholder state. This appears to happen in both the post editor at the individual block level, and when setting typography controls in global styles:

Post editor	Global Styles

I haven't looked closely, but I was wondering if we need to update the Edit component so that if it's in the placeholder state, we don't output the style rules? I imagine the global styles case might be trickier 🤔

Aside from the issue with the placeholder state, otherwise the controls are testing well for me in the post editor and global styles with #43300 applied 👍

[aaronrobertshaw]

This appears to happen in both the post editor at the individual block level, and when setting typography controls in global styles

I'm wondering if we'll need a solution for placeholders in general. Any block using a placeholder and typography supports (among others e.g. border) will suffer the same issue.

Borders might be a special case, as for the Post Featured Image within a Query Loop in the site editor, there's a case to be made for displaying the border around the placeholder.

[talldan]

It's an issue that has been around for a while. After a quick look I found these issues:

• Cover Block: Prevent styles from applying to the placeholder #23198
• Should styles/padding sidebar panels be available for placeholders? #23122

I remember also briefly discussing it with @ajlende in an issue/PR. It's a difficult one to solve.

Probably two ways to go about it. Either not show particular block tools when the placeholder is visible, or try to prevent the styles from affecting the placeholder (popover/iframe/shadow dom). The problem with the latter option is that some styles need to be let through (otherwise something like this would be easy - https://matthewjamestaylor.com/style-blocker).

One idea might be to add a context provider around blocks that stores state around whether block supports features are visible/enabled. Then each placeholder could disable design tools when mounting, but enable when unmounting.

[tellthemachines]

Works as expected!

[aaronrobertshaw]

Given we'll look for a holistic solution to block placeholders inheriting the typography styles, I'll merge this one and follow-up on that separately.