Remove Gallery Block Alignment Class when Editing

[bbertucc]

Is your feature request related to a problem? Please describe.
I’m applying a custom stylesheet with style for an alignwide class. My alignment style doesn’t affect any other blocks, except for the gallery block. Is there a reason the gallery block adds the alignwide class when using the editor? Other blocks just use a data-attribute to set alignment

Describe the solution you'd like
Ideally, the gallery block alignment would only be set with a data-attribute

Describe alternatives you've considered
I stopped including the alignment style in my editor style.

[jorgefilipecosta]

Hi @bbertucc, thank you for reporting this issue. It seems adding the class is something we should do even for other blocks. Adding the class makes the styles between editor and frontend closer and promotes the reusability between the styles.
Hi @jasmussen are you aware of the reason why these classes were not added to the edit method of other blocks?

[jasmussen]

Hi @jasmussen are you aware of the reason why these classes were not added to the edit method of other blocks?

No, I've actually wondered the same. I'm not sure I have the full context, but as a principle, the more we can make the editor markup match the frontend, the better, notably for editor style simplicity.

To the issue here in question: if all blocks that had alignments had the relevant "align" classes present, could you not accomplish the same as you could by targeting only the data attributes? Targeting the classes would potentially let you have editor styles that were closer to the theme styles.

[bbertucc]

Thanks @jasmussen and @jorgefilipecosta!

Using classes instead of data-attributes would solve my problem. In issue #6430, the reply from @mtias explains why they're using data-alignments in the editor. That doesn't explain why classes are used in the gallery block.

I'm finding lots of inconsitencies with class names, while I build my block-ready starter theme.

Does the Gutenberg team want to seamlessly integrate theme and editor styles? If so, I would definitely suggest better consistency.

[jasmussen]

Thank you for referencing that response. Matías has a good point with that, actually.

Followup question for you: what if blocks in the editor featured both the data-align attributes, and the corresponding alignment classes ... would this make your life easier or harder?

[bbertucc]

Using both would be fine, as long as class styles could easily override data attribute styles. If a parent <div> had the data attribute and a child element had the class, we would still have to add editor-specific hacks to affect the alignment.

[jasmussen]

If a parent <div> had the data attribute and a child element had the class, we would still have to add editor-specific hacks to affect the alignment.

This will likely always be the case. The markup for the block in the editor has additional elements to make it editable, such as the toolbar, the mover, and other things. The markup that is actually output on the front-end will always be a child element of this.

In light of that it sounds like you'd prefer the removal of the alignment classes in favor of only the data attributes in the editor?

[bbertucc]

Yeah, using the data attributes might be the best option - for now. Though, I hope future updates easily adapt editor styles to theme styles.

[jasmussen]

That seems like the next step to explore. I know that @youknowriad can do some magic rewriting of editor styles, so there are options to explore for future improvements.

[youknowriad]

Follow-up to this issue with a consistent proposal across blocks here #20650

Thanks