Add alignment classes to <div class="wp-block-image"> for more accessible and clean styling rules in themes.

[jcklpe]

Is your feature request related to a problem? Please describe.
Images can be aligned center, left, right, wide, and full width in Gutenberg.

Image alignment styling rules are targeted based on css selectors like .aligncenter, .alignleft etc.

Images which are aligned to the center produce markup like this:

<figure class="wp-block-image aligncenter">
    <img src="..." alt="" class="wp-image-149">
    <figcaption>
          Lorem ipsum dolor.
    </figcaption>
</figure>

While images which are aligned right produce markup like this:

<div class="wp-block-image">
	<figure class="alignright">
		<img src="url" alt="" >
	</figure>
</div>

This difference was implemented in this pull request:

#7721

That pull request added the wp-image-block div wrapper to the alignright and alignleft figures in order to style alignment classes in a way which was identical on the frontend and in the editor.

Notice that while the top most element of the aligncenter image is classes aligncenter wp-block-image the top most class for an aligned right image is simply wp-block-image and the addition of alignright is to the figure that is floated to the right and interior to the wrapper div.

Not every theme developer is going to be focusing on having unified styles between their frontend and editor. I for instance am working on a React/WP-REST API frontend with a "css-in-js" styled component build process. The styling of that frontend is completely separate from the Wordpress instance that provides the CMS access.

It is very tricky and inelegant to write rules in scss/css-in-js which cleanly target the top level div :

<div class="wp-block-image">
	<figure class="alignright">
		<img src="url" alt="" >
	</figure>
</div>

while not targeting:

<figure class="wp-block-image aligncenter">
    <img src="..." alt="" class="wp-image-149">
    <figcaption>
          Lorem ipsum dolor.
    </figcaption>
</figure>

And it's hard to easily target that top level div differently based on if it contains a a figure with alignright or alignleft.

Describe the solution you'd like

I would like an additional class added to the top level div.wp-block-image wrapper element of figures which are aligned right or left. Which would produce markup similar to this:

<div class="wp-block-image alignright-wrapper">
	<figure class="alignright">
		<img src="url" >
	</figure>
</div>

The class name does not have to be alignright-wrapper. It could be image-floated-left or whatever. The important thing is that some kind of class be added so that the top level div is accessible to themers without having to right overly complicated rules that require setting and unsetting float states etc.

Describe alternatives you've considered

I've had to user very hacky nesting structures and set and unset different properties using !important overrrides which is not elegant and makes parsing the actual code kind of hard.

[youknowriad]

We're revisiting alignments in #20650 with a solution close to this proposal. Thanks

[thekendog]

This is old obviously, but I'm running into this exact issue still in 2023. What is the fix?