search

plone / volto

React-based frontend for the Plone Content Management System
https://demo.plone.org/
MIT License
427 stars 575 forks source link

Fix Image block field to wrap the entire image across left and right alignments. #5937

Open MostafaMagdyy opened 1 month ago

MostafaMagdyy commented 1 month ago

Fixes #5922 for the image field container to wrap the entire image in right and left alignment.

For full-width alignment, I think it's another issue itself. Disregard the field to wrap the entire image because the image is going outside the whole container and above the sidebar on the right if you try to drag its block. So, I do not think this PR should fix it, because it is not related to the failure of the wrapper to fill the whole image. Let me know if I should fix it in this PR, and I will do so. Also, please clarify how the full width should be, because I do not see any difference between it and when the image is aligned center with size=large, as both take size=100vw in getImageBlockSizes function.

netlify[bot] commented 1 month ago

Deploy Preview for plone-components canceled.

Name Link
Latest commit 7d5564b1444b29990f2a0ee4d52380b6d0be7ead
Latest deploy log https://app.netlify.com/sites/plone-components/deploys/660a9b627d0c3d000804b7f3
netlify[bot] commented 1 month ago

Deploy Preview for volto canceled.

Name Link
Latest commit 7d5564b1444b29990f2a0ee4d52380b6d0be7ead
Latest deploy log https://app.netlify.com/sites/volto/deploys/660a9b625903e70008ed4340
MostafaMagdyy commented 1 month ago

Please review this pull request. @stevepiercy ,@polyester, could you please take a look and provide your feedback? Thank you!

stevepiercy commented 1 month ago

@MostafaMagdyy the lint CI check fails. You must fix it before review will happen. See https://6.docs.plone.org/volto/contributing/linting.html

MostafaMagdyy commented 1 month ago

@stevepiercy Thank you for your feedback. I have addressed all your comments and fixed all the issues. Additionally, here are the screenshots displaying the new behavior for left and right alignment. oie_PHzGyA7xqc6d oie_cLX8eZVwphge

MostafaMagdyy commented 1 month ago

@MostafaMagdyy you don't fully understand why the select area with the border around the image is as small as it is. It's because of a float property. That is useful when you want to have text to the right or left of your image. Here is a demo on the current feature in action: before-flex

and how it would function with your changes: after-flex

You need some css that will affect the editing selected area alongside extra code to have the text float to the left or right.

Thank you for your feedback. Now i understand the importance of it and i will try to make the same behaviour as it was.