resolved image block alignment issue

[NidhiDhandhukiya74]

What?

Resolve the issue mentioned here :- #56705

Why?

Whenever we use alignment to the image it is not looking proper.

How?

When we use alignment it will mess up with other content as per the alignment.

Testing Instructions

1. Create a new page and take the new image block.
2. Select small size image and change alignment setting.
3. Checked with Align right or Align left setting.
4. Checked front side image position out of container.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @NidhiDhandhukiya74! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[michalczaplinski]

Thank you for the PR @NidhiDhandhukiya74 and welcome to the community! 👋

I'm not well-versed enough in the CSS of the Image block to judge this. Pinging @artemiomorales & @andrewserong who might have an opinion or know who else might be in the know.

[andrewserong]

Thanks for the ping, and for working on this PR! Unfortunately I don't think it'll be viable to change the left and right alignment to use flex justify-content as it would result in left and right aligned images no longer being floated, which means that content would no longer flow around the image block in existing posts out in the wild, and so it'd be a breaking change.

For arranging blocks with Flex, folks can currently wrap an Image block in a Row block to achieve this:

2024-01-03.09.37.53.mp4

[artemiomorales]

Welcome @NidhiDhandhukiya74 and thanks for taking a look at this!

So I looked through the PR and, at least in themes Twenty Twenty Four and Twenty Twenty Three, the issue still appears to persist:

I also think this issue may be harder to solve than it appears on the surface. I think there are historical reasons as to why this known issue with the image block persists, as detailed in this comment by @carolinan.

As she notes in that comment, the current solution is to just put the image inside of a group block or other container using the editor. However, is it possible to put the container directly in the image markup or otherwise make it so the image works as expected by default?

While I'm still relatively new to Gutenberg, I did work on a PR related to the image block before and believe we are unable to modify the markup much for backwards compatibility reasons — the figure needs to be the wrapping element, and the img needs to be its first direct descendent. Perhaps someone else with more experience can weigh in on that constraint.

With that in mind, perhaps it would be possible to put the styles of the would-be container directly on the figure, and put the float property on the img, but I'm not sure if that would solve the styling issue in all cases. In all, it would probably require more discussion.

I made a video to talk about this more in depth and talk through the PR's current proposed changes in relation to the expected behavior. Would be happy to hear additional insight! Thanks all 🙏

image-styles-walkthrough.mp4