Page List: Add typography supports

[aaronrobertshaw]

Related:

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

What?

Adds all typography support to the Page List block.

Why?

• Improves consistency of our design tools across blocks.
• Provides a means of applying typographic styles for the Page List.

How?

• Opts into all typography support.
• Makes the font size control display by default.

Testing Instructions

1. Edit a post, add a Page List block, and select it.
2. Test various typography settings ensuring styles are applied in the editor.
3. Save and confirm the application on the frontend.
4. Switch to the site editor and add a Page List to a page or template.
5. Navigate to Global Styles > Blocks > Page List > Typography and apply typography styles there.
6. Confirm the selected styles are reflected in the preview and on the frontend.

Screenshots or screencast

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

[carolinan]

With the exception of the text decoration underline, which we are aware of does not work:

• As a standalone block: Works well.

• When part of the navigation block: Compared to trunk, there seems to be an issue with the padding.

Trunk:

Trunk, with large font size and bold set on the navigation block, for comparison:

PR:

[glendaviesnz]

I retested this and it all seems to be working as expected, but I wasn't able to replicate your setup with the navigation block @carolinan - how do you add a Page list block as a dropdown in a Nav menu the way you have it?

[carolinan]

Create a few pages with and without child pages on the test install. Or import the theme test data.

In the block editor or site editor, add a navigation block.

Select the navigation block.
Click Add Block in the editor canvas: A custom link is added to the navigation. This block needs to be selected.
Now toggle the block inserter in the top left corner.

The block inserter should show a reduced number of items:

Select the page list block. It should now be visible both in the editor and in the list view, as an inner block of the navigation block.

Hover over a page with a child page to see the spacing:

[glendaviesnz]

🤦 ! thanks @carolinan, was overlooking the good old-fashioned parent page option!

I was able to replicate the same issue you are having with padding disappearing on the dropdown menu page list on this branch - works as expected on trunk. Will try and take a closer look at why sometime this week.

[carolinan]

It happens even if I do not make any changes to the typography settings 🤔

[glendaviesnz]

@carolinan I rebased this and retested it and I am not seeing the lack of padding issue now:

are you able to give it another go please when you have a minute please and see if it is resolved for you as well now?

[carolinan]

In block themes (Twenty Twenty-Three, empty theme): The spacing is correct in the editor and front in the standalone block, the navigation block, and navigation block overlay.

Not blockers:

Twenty Nineteen:
The spacing is correct in the editor and front.
The exception is on the front, in the navigation block overlay, where the spacing is exceptionally large and a 2em blockgap is applied. This is unrelated to this PR.

Twenty Sixteen:
The page list is broken when placed in the navigation block: there is too much spacing between the submenus, so the "show menu items on hover" stops working. I believe this is a theme issue unrelated to this PR.