Navigation Block: Add font style option to typography setttings

[aaronrobertshaw]

Is your feature request related to a problem? Please describe.

It would be handy to be able to apply a specific font style to all navigation links within a particular navigation block. This would save a user needing to manually select each link within the block, the text within that and then choose a font style e.g. italics.

The current use case for this is to achieve a given block pattern design out of the box for users.

Describe the solution you'd like

The navigation block currently has options for custom font sizes under Typography. Perhaps we could add an option to select a font style here. This selection, if made, would be applied to all links within the navigation block.

Describe alternatives you've considered

Custom CSS classes or toggles for the different font styles just feel clunky and don't offer the same simplicity or flexibility. Leaving this to the current theme limits what we can offer as a single click solution via block patterns.

[apeatling]

We should look at how global styles will affect or impact this need.

[aaronrobertshaw]

Global Styles should be able to allow us to apply a font style to the navigation block or links. This will give both theme developers and users some control.

That said, we still need to add controls to the block so it can be individually configured by the user. Perhaps they might have multiple navigation blocks on the page each needing different font styles?

In regards to the development of block patterns, would we be happy calling the pattern “done” without setting an explicit font style for the navigation links so as to facilitate easier inheritance from the Global Styles?

The alternative of setting this style on the block itself to achieve a pattern design, would mean requiring the user to remove it themselves if it didn’t match their theme. A similar situation would arise when the user switches themes.

@ianstewart and @iamtakashi do you have any thoughts on this?

[ianstewart]

custom font sizes under Typography. Perhaps we could add an option to select a font style here. This selection, if made, would be applied to all links within the navigation block.

We should look at how global styles will affect or impact this need.

I think this is something I would expect global styles experiments to enable for all blocks. Or for global styles to make possible to extend with plugins to add any arbitrary styles down to the block level.

[ianstewart]

More on Global Styles here from @shaunandrews

#23228 (comment)

[iamtakashi]

In regards to the development of block patterns, would we be happy calling the pattern “done” without setting an explicit font style for the navigation links so as to facilitate easier inheritance from the Global Styles?

I have a similar question to this. I thought we'd need design tool like this so that each pattern can provide unique navigation style that works well in the pattern. But, I know that I have to learn Global Styles more 😅

[aaronrobertshaw]

I have a PR (#25641) to add a font style option to the typography settings via a hook and block support flag ready for some initial feedback or reviews.

[aaronrobertshaw]

The original PR has been abandoned in favour of #26050

Discussion from the original also lead to #26059 and #26060

[aaronrobertshaw]

Further discussions have resulted in another change of course, combining font weight and font style options.

This issue will now be addressed via #26444

[aaronrobertshaw]

#25791 has been merged to address this need.