Block library: Refactor Heading block to use class names for text align

[gziolo]

Description

Related: #16027, #15751

This PR explores using className for the text alignment in Heading block. It also moves this alignment to the block toolbar. There is a deprecation strategy necessary to make it work. It has been discussed with @kjellr and @jasmussen in #15964 (comment). This should allow us to make it easier to customize more complex blocks like List or Quote where we modify multiple styles depending on the text alignment selected. This will also allow us to simplify styles used, e.g.:

gutenberg/packages/block-library/src/quote/theme.scss

Lines 16 to 28 in 04ca6b4

	&[style*="text-align:right"],
	&[style*="text-align: right"] {
	border-left: none;
	border-right: 4px solid $black;
	padding-left: 0;
	padding-right: 1em;
	}
	&[style*="text-align:center"],
	&[style*="text-align: center"] {
	border: none;
	padding-left: 0;
	}

There are some important things to highlight:

• align is used with other blocks for the block alignment, renaming this attribute to textAlign should better express its intent
• in case of Heading using the class name shouldn't be an issue at all. I'm wondering if the same approach can be used for Quote block in subsequent PR
• there are other blocks which could get the same update: Paragraph, Quote, and Verse

Before:

<!-- wp:core/heading {"align":"right","level":3} -->
<h3 style="text-align:right">A picture is worth a thousand words, or so the saying goes</h3>
<!-- /wp:core/heading -->

After:

<!-- wp:heading {"level":3,"textAlign":"right"} -->
<h3 class="has-text-align-right">A picture is worth a thousand words, or so the saying goes</h3>
<!-- /wp:heading -->

I also moved the control with text alignments to the block toolbar. This requires some tweaks for the level option which needs more love. I can remove it from this PR if it distracts the review process. I'm mostly concern about answering the question of whether we want to refactor the text alignment to work with class names. - removed from this PR. There are no visual changes.

How has this been tested?

Using one of the existing branches (master probably) add a few Heading blocks and set different text alignments and save your post. Open the same post with this branch and ensure that it still works

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[timelsass]

just leaving a note that I tested this out locally, and it resolved a few issues I had with block styles, good work! 👍

[gziolo]

I also moved the control with text alignments to the block toolbar. This requires some tweaks for the level option which needs more love. I can remove it from this PR if it distracts the review process. I'm mostly concern about answering the question of whether we want to refactor the text alignment to work with class names.

I'm rather leaning towards moving it back to the sidebar to land the changes related to text alignment first and then replicate it for other core blocks in a follow-up PR.

[youknowriad]

I'm rather leaning towards moving it back to the sidebar to land the changes related to text alignment first and then replicate it for other core blocks in a follow-up PR.

I think it makes sense. It would help for reviews.

[gziolo]

I'm rather leaning towards moving it back to the sidebar to land the changes related to text alignment first and then replicate it for other core blocks in a follow-up PR.

I think it makes sense. It would help for reviews.

Removed with 2f0a325.

[youknowriad]

Is this a change that is going to be applied to all blocks? Thinking about consistency?

Also, if it's the case, are we considered about the deprecations needed (especially the paragraph block), this might create a big number of warnings :)

[gziolo]

Is this a change that is going to be applied to all blocks? Thinking about consistency?

Yes, there are 3 more blocks to update:

• Paragraph
• Quote
• Verse

We are going to add it to List block as well.

Also, if it's the case, are we considered about the deprecations needed (especially the paragraph block), this might create a big number of warnings :)

This will trigger in case non-default text alignment is applied. We should rather make those warning less scary when block's HTML get properly updated to use the latest version :)

[youknowriad]

This will trigger in case non-default text alignment is applied. We should rather make those warning less scary when block's HTML get properly updated to use the latest version :)

Agreed, I think we can entirely avoid the warning and maybe just write a friendly notice.

[gziolo]

Applying Needs Dev Note as this might have an impact on themes which used the presence of style as a way to change the visual aspect of the block.