Gutenberg: Verse Block: Alignment uses inline styles

[CreativeDive]

Currently the verse block get an inline style after selecting a specific alignment.

<pre style="text-align:left" class="wp-block-verse">Content</pre>

This is an unexpected behavior and should work like this:

<pre class="wp-block-verse alignleft">Content</pre>

Without adding the alignment class, I can't set any specific theme side styles for the alignment of verse block.

To style a poem block, the alignment class is necessary to get more design possibilities.

Is there a reason why you should not add the alignment class to this block type?

[talldan]

Hi @CreativeDive. Thanks for creating the issue. I hope you don't mind, I changed the title to be more specific.

It looks like text alignment works the same across other core blocks I've checked (paragraph, header, possibly others), they also use an inline style.

I had a look through some of the history in git, but couldn't find any justifications for an inline style over a class.

Pinging @jasmussen, who's very knowledgeable on these matters to see if he has any ideas.

[jasmussen]

Thanks for the ping. My knowledge extent here _suggests_ that the person to ask is @ellatrix. She is the master of everything rich text. Ella any thoughts?

[codebymikey]

I have a similar issue with paragraphs and all other blocks which apply inline styles in their save function.

It makes everything a pain to theme, and the html starts to get really ugly/hacky quick (like a lot of page-builders out there, which is why I prefer Gutenberg).

The only things I believe require inline styles are custom attributes like backgrounds, margins and padding. Everything else imho should be class-based as a convention.

I'd recommend using a new class like aligntextleft rather than alignleft in order to avoid accidentally breaking existing themes which rely on floats for their alignleft type styles.

With the new styles being something along the lines of:

.aligntextleft { text-align: left }
.aligntextcenter { text-align: center }
.aligntextright { text-align: right }

This allows the theme designer to know when an alignment has been applied on the text and style it accordingly.

Hopefully someone who has more of a say on the architecture can provide more insight/help.

[gziolo]

I'm proposing a fix which could get applied to all blocks which use text alignment in #16035.

[codebymikey]

That's really amazing news @gziolo, and the implementation looks very clean.

Hopefully the PR lands soon, and is used as a convention going forward. And we can do away with non-essential inline attributes on all blocks.

[gziolo]

Now that #16035 has landed for Heading block, we should replicate it for Verse as well.

[gziolo]

Related issues:

• #10970
• #8450

[ellatrix]

My knowledge extent here suggests that the person to ask is @ellatrix. She is the master of everything rich text. Ella any thoughts?

Sounds like this is not rich text related. Alignment is a block level attribute. Looks like @gziolo is taking care of this now.

[gziolo]

I opened #16777 which will resolve this issue.