Wp-calypso: FSE: Large image sizes are not center aligned in the header [2]

[apeatling]

From Aadil:

When I resized the image, it defaulted to a ‘left alignment’ but everything else on the page is aligned in the center. ‘Align Center’ should be the default arrangement

Here's an example:

[Copons]

I'm actually becoming kind of opinionated about the alignment that we are enforcing in the template parts.
For most vanilla blocks, Gutenberg lets the user choose the alignment. We, instead, are basically overriding the user choice with a predefined alignment (e.g. center in the header, left in the footer).

Imho this is bad for two reasons:

• We are artificially removing a very common, straightforward, and established option, one that I would expect most user are aware of, and have an expectation of how it works.
• We do this change via CSS only, but the blocks will still have the alignment option. Users can see it, can change it, but nothing happens.

I'd say we have two options here:

• We stop enforcing an alignment on header and footer in both the editor and the front end, with the sole exception of the elements that either don't have an alignment (e.g. the Cover block), or have a predefined alignment (e.g. the FSE blocks, Site Title, Description, and Navigation).
• We figure out a way to disable the alignment option for all blocks when editing a wp_template.

[apeatling]

One thing we have to remember here is that the Modern Business header and footer styles were not built with Gutenberg in mind, so the styling is very strong and opinionated. When we convert the Varia base theme, we will need to make sure styles are easily to override by Gutenberg set options.

or have a predefined alignment (e.g. the FSE blocks, Site Title, Description, and Navigation).

This is the best option IMO, if we can set a preferred alignment via the editor, and make sure that the styles coming from the theme are not so strong that it overrides anything set by Gutenberg.

[apeatling]

@Copons I think fixing this will also fix

https://github.com/Automattic/wp-calypso/issues/35569
https://github.com/Automattic/wp-calypso/issues/35532
https://github.com/Automattic/wp-calypso/issues/35541

[Copons]

So just to be 100% clear, we should:

• In the theme, if FSE is enabled (to avoid breaking all sites), remove the explicit text-align from header and footer.
• In FSE: add the explicit text-align to the FSE blocks (Title, Description, Navigation), center in the header, and left in the footer.
• Let the user decide the alignment of "alignable" blocks directly in the editor through the block option.

[apeatling]

Yes, I think that's right, so we'd be giving the power to Gutenberg with a reasonable default. Does that make sense to you?

[Copons]

On hold!
Let's check again after Automattic/template-first-themes-private#126

[iamtakashi]

In FSE: add the explicit text-align to the FSE blocks (Title, Description, Navigation), center in the header, and left in the footer.

Like page templates, on the demo site, we should select the right alignment (in this case of the header, all blocks should have centred alignment selected. So when a user receives the header, the alignments for those blocks have already been selected.

We are probably saying the same thing, but just in case.

[Copons]

In FSE: add the explicit text-align to the FSE blocks (Title, Description, Navigation), center in the header, and left in the footer.

Like page templates, on the demo site, we should select the right alignment (in this case of the header, all blocks should have centred alignment selected. So when a user receives the header, the alignments for those blocks have already been selected.

We are probably saying the same thing, but just in case.

@iamtakashi FSE blocks (Site Title, Description, Navigation) don't have an alignment option that the user can select in Gutenberg. In those cases, we will provide a pre-determined alignment via CSS based on the demo site.
Other Gutenberg blocks that have an alignment option (e.g. Paragraph, Heading, etc.) will be aligned according to whatever the user selected in Gutenberg, and so we won't force any alignment in CSS.