solved social icon alignment issue on front end

[theminaldiwan]

This is occur when we wrap social icon block inside group block and changing social icon alignment from left or right
and applying background color using float:none property we solved this issue.

This pull request fixes a bug in which social icon alignment with full wrap background color as mentioned in #40131.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @theminaldiwan! 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.

[amustaque97]

Hi @theminaldiwan, thank you for taking up #40131. In my machine, changes are not working. I would request you to please verify your changes once?

Also, I would like to request @jasmussen to review this PR once we get a reply from the author. 😄

[jasmussen]

Thank you for the PR and thank you for the ping!

To better visualize the bug meant to be fixed, if you align left a social icons block inside a group, the act of it floating means the group no longer wraps the content:

This is a bit of a classic web-design problem, and is usually addressed by either applying overflow: hidden; to the parent container, or by unsetting the floating as this PR does.

However it is also the intended behavior of CSS and floats, and I'm reluctant to land this PR as is, because of that. Float behaviors are intrinsically a bit confusing, but I would think it more important to apply an align-left property inside a group block, and then not have any effect from it, despite the button being toggled. For example in this case, the social links block is aligned left, and text flows around it as it does with floats naturally. This use case would be broken with this PR:

I searched but was unable to find it, I'm fairly sure that a ticket exists which suggests adding a toggle to the advanced section of the Group block to essentially apply overflow: hidden;. That seems like it might be a better solution. @paaljoachim do you recall such a ticket?

[paaljoachim]

I am also not able to locate the issue related to adding a toggle in the advanced section of the Group block.
I know there has earlier been some discussions around floats, but do not recall how that landed.
I would suggest bringing up this PR in the Open Floor portion of the next Core Editor Meeting. As there seems to be a few aspects that will need to be discussed. Thanks!