Gutenberg: Site Title: A few styling option ideas

[alaczek]

As we get closer to Full Site Editing, I wanted to suggest a few ideas for site title styling options:

• uppercase - is a very popular visual style for site title and navigation. Already brought up in a general context in #20801

Example design:

• letter-spacing - already brought up in in general context in #20796
  Example design:

• margin/padding - headers and footers are often the areas where tight control over spacing (especially vertical) is required, for example to create a compact header like this:

• font-size / line-height

(hat tip to @iamtakashi for these header designs)

[Addison-Stavlo]

Nice suggestions and visuals!

I think the letter spacing is great style idea for this block. We can save the site title in all caps to achieve that effect, but maybe there are cases where we would want standard casing in all other circumstances?

23007 Is currently adding font and background colors, font-size, and line height. The line height in this case seems to achieve the effect of vertical margin/padding.

Another odd style thing I have noticed, is that in being a <h1> element it can pick up styles supplied by themes for headings. For example twentynineteen-blocks it gets this odd tick mark that are applied to headings:

[alaczek]

The line height in this case seems to achieve the effect of vertical margin/padding.

It might! But from my experience designing themes, I suspect margins and padding will play a part too.

One more idea - adding support for bold and italics text styling options.

[ianstewart]

One more idea - adding support for bold and italics text styling options.

+1. The full gamut of rich text would be valuable — plus, it'd be nice to have the option to have the title be a link as well.

[Addison-Stavlo]

+1. The full gamut of rich text would be valuable — plus, it'd be nice to have the option to have the title be a link as well.

Definitely! I think RichText itself is out of the question (https://github.com/WordPress/gutenberg/issues/21087#issuecomment-638150490 / https://github.com/WordPress/gutenberg/issues/21087#issuecomment-606042510) due to technical reasons for how the site title entity is saved and consumed - but it is possible to set up the same settings at a block wide level.

The difference being, with RichText we could select a section of the title to Bold, italic, make a link, etc (ex "My Awesome Site". But its possible set up block wide attributes to apply these settings across the entire title - (ex "My Awesome Site" )

[iamtakashi]

But its possible set up block wide attributes to apply these settings across the entire title - (ex "My Awesome Site" )

Yes, that would be the majority of the use case. I think a simple checkbox that defaults to be a link to the homepage would be a good start. (potentially allowing a custom URL if we hear many requests)

--

I've been waiting for a letter-spacing control for some time #20796. Is it possible to start with the Site Title block, and eventually the setting to be ported to other blocks?

[apeatling]

Font size and line height should be in place now. Letter spacing and uppercase should be achievable using CSS classes and styles. Getting rich text to work on the site title is going to be a whole different conversation.

[apeatling]

I do think that letter spacing and uppercase transforms could be generalized and apply to any block as part of font settings.

[alaczek]

Letter spacing and uppercase should be achievable using CSS classes and styles

Would this be theme dependent, or are there universal classes in Gutenberg we could start applying now?

[shaunandrews]

I believe most of the requests here are (and will be) solved as the Global Styles project progress: https://github.com/WordPress/gutenberg/issues/25139

The foundation is there, and @noahshrader is working on extending the design to support line-height, letter-spacing, font-family, font-size, and maybe even letter case. I spent a little time exploring one-off solutions to support line-height for the Site Title block, but Noah has already eclipsed my thinking — he's way ahead of me — and I wouldn't want to spend too much time creating solutions that might not make sense in the larger context of Global Styles.

Maybe there's a way we can all work towards improving the early stage Global Styles project? Would it make sense to start by creating a line-height control specific to Site Title, and then pushing to expand it elsewhere?

[iamtakashi]

I'm not fully up to date on the progress on Global Styles project, but would it allow, for example, a custom letter-spacing specifically for the site title block?

We see often site title and section headings are styled differently from the headings in the content of a post/ page.

[shaunandrews]

I'm not fully up to date on the progress on Global Styles project, but would it allow, for example, a custom letter-spacing specifically for the site title block?

Yup, you'll have block-level controls. Here's how it works right now:

[iamtakashi]

Thanks for the info! But, I still feel that it would be valuable to have the setting in the block from the pattern creation point of view. Like the examples at the top of this issue, I can imagine various header patterns having unique settings around letter-spacing or letter-casing to express different visual expressions.

I'm likely missing something obvious, but in my understanding, patterns should be able to override the style provided by Global Styles or theme in each pattern if necessary... right?