Declare image alignment on its parent

[robsonsobral]

Is your feature request related to a problem? Please describe.

Currently, the images are wrapped by .wp-block-image, no matter their alignment. No other class is added, making impossible to stylize following elements based on image alignment.

Describe the solution you'd like

Is it possible to add a class to the wrapping div? Something like .wp-block-image--left-aligned-child and wp-block-image--right-aligned-child.

.wp-block-image--left-aligned-child ~ * {
  clear: right;
}

.wp-block-image--right-aligned-child  ~ * {
  clear: left;
}

Describe alternatives you've considered

I've no idea for other solution.

Thank you so much!

[talldan]

@robsonsobral I think this issue will need some more information to be able to progress.

Here's the HTML markup I see when aligning an image block in Gutenberg v8.5.

editor:

post:

This seems different to what you mentioned above when you mention a wrapping div with the class .wp-block-image. Checking an older version, it seems like this has changed, so it might be worth testing against more recent versions of the plugin.

Related to your issue I'd also recommend taking a look at #20650, which talks about some of the issue with alignments and potential solutions.

[robsonsobral]

Thank you, @talldan ! I gonna look at that issue!

Running Gutenberg 8.5.1:

<div class="wp-block-image">
  <figure class="alignleft size-large">
    <img src="/wp-content/uploads/2020/07/transparencia-1.jpg"
      alt=""
      class="wp-image-37759"
      srcset="/wp-content/uploads/2020/07/transparencia-1.jpg 566w,
        /wp-content/uploads/2020/07/transparencia-1-337x337.jpg 337w,
        /wp-content/uploads/2020/07/transparencia-1-163x163.jpg 163w,
        /wp-content/uploads/2020/07/transparencia-1-200x200.jpg 200w"
        sizes="(max-width: 566px) 100vw, 566px">
  </figure>
</div>

Is there a command I can run on console, to check the running version?