Issue with image alignment when set to "center"

[JohnPixle]

@abaicus So, here is the issue I am having, it is related to images that are supposed to be center-aligned, but for some reason they are not.

This is related to some patterns we are planning to release with Otter, and I am testing them in several themes. Currently the two themes I am having issues are Raft and TT2.

Here is a quick video explaining the issue https://www.loom.com/share/5371a92b5e8a4c23a8279c4607742e51

Let me know your insights here, and if you think there is something we can do.

Cheers!

[abaicus]

@JohnPixle Could you please share the code from the code editor for the specific patterns? Thank you! 👍🏻

[JohnPixle]

@abaicus Sure:

The one with the two columns of testimonials:

<!-- wp:themeisle-blocks/advanced-columns {"id":"wp-block-themeisle-blocks-advanced-columns-c00aadba","columns":2,"layout":"equal","layoutMobile":"collapsedRows","padding":{"top":"64px","right":"24px","bottom":"64px","left":"24px"},"paddingTablet":{"top":"64px","right":"24px","bottom":"64px","left":"24px"},"paddingMobile":{"top":"40px","bottom":"40px"},"margin":{"top":"0px","bottom":"0px"},"columnsWidth":960,"horizontalAlign":"center","verticalAlign":"center","align":"full","className":"ticss-c00aadba","hasCustomCSS":true,"customCSS":""} -->
<div id="wp-block-themeisle-blocks-advanced-columns-c00aadba" class="wp-block-themeisle-blocks-advanced-columns alignfull has-2-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-collapsedRows-layout has-vertical-center ticss-c00aadba"><div class="wp-block-themeisle-blocks-advanced-columns-overlay"></div><div class="innerblocks-wrap"><!-- wp:themeisle-blocks/advanced-column {"id":"wp-block-themeisle-blocks-advanced-column-41c8770c","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"paddingMobile":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"12px","bottom":"0px","left":"12px"},"marginMobile":{"right":"0px","bottom":"24px","left":"0px"},"columnWidth":"50"} -->
<div id="wp-block-themeisle-blocks-advanced-column-41c8770c" class="wp-block-themeisle-blocks-advanced-column"><!-- wp:image {"align":"center","id":260,"width":90,"height":90,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="https://demosites.io/otter/wp-content/uploads/sites/664/2022/09/Screenshot-2022-09-12-at-15.15.51.png" alt="" class="wp-image-260" width="90" height="90"/></figure>
<!-- /wp:image -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-ad44c57d","tag":"p","align":"center","alignTablet":"center","alignMobile":"center","fontSize":24,"fontStyle":"italic"} -->
<p id="wp-block-themeisle-blocks-advanced-heading-ad44c57d" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-ad44c57d">"...Sed ut perspiciatis unde omnis natus error sit voluptatem accusantium doloremque..."</p>
<!-- /wp:themeisle-blocks/advanced-heading -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-d3f7e3db","tag":"p","align":"center","alignTablet":"center","alignMobile":"center","fontSize":12,"fontSizeTablet":12,"fontSizeMobile":12,"textTransform":"uppercase"} -->
<p id="wp-block-themeisle-blocks-advanced-heading-d3f7e3db" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-d3f7e3db"><strong>Jason Doe</strong></p>
<!-- /wp:themeisle-blocks/advanced-heading --></div>
<!-- /wp:themeisle-blocks/advanced-column -->

<!-- wp:themeisle-blocks/advanced-column {"id":"wp-block-themeisle-blocks-advanced-column-82532c60","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"paddingMobile":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"12px","bottom":"0px","left":"12px"},"marginMobile":{"right":"0px","bottom":"24px","left":"0px"},"columnWidth":"50"} -->
<div id="wp-block-themeisle-blocks-advanced-column-82532c60" class="wp-block-themeisle-blocks-advanced-column"><!-- wp:image {"align":"center","id":260,"width":90,"height":90,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="https://demosites.io/otter/wp-content/uploads/sites/664/2022/09/Screenshot-2022-09-12-at-15.15.51.png" alt="" class="wp-image-260" width="90" height="90"/></figure>
<!-- /wp:image -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-3a87334a","tag":"p","align":"center","alignTablet":"center","alignMobile":"center","fontSize":24,"fontStyle":"italic"} -->
<p id="wp-block-themeisle-blocks-advanced-heading-3a87334a" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-3a87334a">"...Sed ut perspiciatis unde omnis natus error sit voluptatem accusantium doloremque..."</p>
<!-- /wp:themeisle-blocks/advanced-heading -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-1f9f2063","tag":"p","align":"center","alignTablet":"center","alignMobile":"center","fontSize":12,"fontSizeTablet":12,"fontSizeMobile":12,"textTransform":"uppercase"} -->
<p id="wp-block-themeisle-blocks-advanced-heading-1f9f2063" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-1f9f2063"><strong>Jason Doe</strong></p>
<!-- /wp:themeisle-blocks/advanced-heading --></div>
<!-- /wp:themeisle-blocks/advanced-column --></div></div>
<!-- /wp:themeisle-blocks/advanced-columns -->

And the one with the author box:

<!-- wp:themeisle-blocks/advanced-columns {"id":"wp-block-themeisle-blocks-advanced-columns-421a73c0","columns":1,"layout":"equal","layoutMobile":"collapsedRows","padding":{"top":"64px","right":"24px","bottom":"64px","left":"24px"},"paddingTablet":{"top":"64px","right":"24px","bottom":"64px","left":"24px"},"paddingMobile":{"top":"40px","bottom":"40px"},"margin":{"top":"0px","bottom":"0px"},"columnsWidth":1140,"horizontalAlign":"center","verticalAlign":"center","align":"full","className":"ticss-c00aadba","hasCustomCSS":true,"customCSS":""} -->
<div id="wp-block-themeisle-blocks-advanced-columns-421a73c0" class="wp-block-themeisle-blocks-advanced-columns alignfull has-1-columns has-desktop-equal-layout has-tablet-equal-layout has-mobile-collapsedRows-layout has-vertical-center ticss-c00aadba"><div class="wp-block-themeisle-blocks-advanced-columns-overlay"></div><div class="innerblocks-wrap"><!-- wp:themeisle-blocks/advanced-column {"id":"wp-block-themeisle-blocks-advanced-column-45b51ceb","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"paddingMobile":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"12px","bottom":"0px","left":"12px"},"marginMobile":{"right":"0px","bottom":"24px","left":"0px"},"columnWidth":"100"} -->
<div id="wp-block-themeisle-blocks-advanced-column-45b51ceb" class="wp-block-themeisle-blocks-advanced-column"><!-- wp:image {"align":"center","id":260,"width":180,"height":181,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full is-resized is-style-rounded"><img src="https://demosites.io/otter/wp-content/uploads/sites/664/2022/09/Screenshot-2022-09-12-at-15.15.51.png" alt="" class="wp-image-260" width="180" height="181"/></figure>
<!-- /wp:image -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-05603f09","tag":"p","align":"center","alignTablet":"center","alignMobile":"center","fontSize":12,"fontSizeTablet":12,"fontSizeMobile":12,"textTransform":"uppercase"} -->
<p id="wp-block-themeisle-blocks-advanced-heading-05603f09" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-05603f09"><strong>About the Author</strong></p>
<!-- /wp:themeisle-blocks/advanced-heading -->

<!-- wp:themeisle-blocks/advanced-heading {"id":"wp-block-themeisle-blocks-advanced-heading-f5055a4f","align":"center","alignTablet":"center","alignMobile":"center"} -->
<h2 id="wp-block-themeisle-blocks-advanced-heading-f5055a4f" class="wp-block-themeisle-blocks-advanced-heading wp-block-themeisle-blocks-advanced-heading-f5055a4f">John Peterson</h2>
<!-- /wp:themeisle-blocks/advanced-heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Tousled letterpre tote bag bicycle rights cliche twee hashtag pokpo demos tanero lamina sime voti. Quinoa ramps hashtag yuccie, selfies af wolf. Thundercats brunch gastropub whatever poutine tattooed godard bespoke blog seitan flannel jianbing bitters cloud.. Sed ut perspiciatis unde omnis natus error sit voluptatem accusantium doloremque.</p>
<!-- /wp:paragraph -->

<!-- wp:social-links {"align":"center","className":"is-style-default","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links aligncenter is-style-default"><!-- wp:social-link {"url":"#","service":"twitter"} /-->

<!-- wp:social-link {"url":"#","service":"linkedin"} /-->

<!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"wordpress"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:themeisle-blocks/advanced-column --></div></div>
<!-- /wp:themeisle-blocks/advanced-columns -->

Let me know if you need any further details with this!

[abaicus]

@JohnPixle, I've sent in a fix for this. It will probably get added with the next update. I've also checked with some other FSE themes, and the issue seems to exist in some of them too.

[JohnPixle]

@abaicus Thanks a lot for this! Indeed, there are other themes too. TT2 is one of them. But regarding the patterns I guess we cannot take in account every theme out there, however I thought it would be good to address this in Raft, for obvious reasons.

Thanks again for the help 👍🏻

[pirate-bot]

:tada: This issue has been resolved in version 1.0.4 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: