Media & Text Block and Left or Right Alignment

A similar issue exists now for the Gutenberg block-type “newest posts” (German: “Neueste Beitr?ge”), i.e. featured images of posts used in such a block get moved outside of their regular div container.

I’ve created a support ticket for this, including a screenshot of the issue and a screenshot of the changes in main.min.css which I believe are causing this.

Please fix this as soon as possible, because more than 20 of our customers are facing this now.

Hi @franzxk & @t33b33

Thank you for the feedback on this. I’ll pass the details onto our dev team and get back to you with an answer soon. ??

Hi @t33b33

It seems that @franzxk’s issue isn’t related to yours. Are you able to send us the contents of the page that’s affected, so that we can paste them on our end and see what’s going on? You can use the Gutenberg “copy all” option — https://ibb.co/4NSWr6m

Thank you!

Below you will find the contents of the page (https://blocksy-1-8-56.webspace.rocks/2022/11/media-text-block-and-left-or-right-alignment) using the “Copy all blocks” function:

<!-- wp:media-text {"mediaPosition":"right","mediaId":16,"mediaLink":"https://blocksy-1-8-56.webspace.rocks/photo-1620083408464-ae0759cc9733_1920x1440","mediaType":"image","mediaWidth":30} -->
<div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 30%"><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…"} -->
<p>Tempus egestas sed sed risus pretium. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Nunc non blandit massa enim nec. Facilisi nullam vehicula ipsum a arcu. Elementum tempus egestas sed sed risus. Velit sed ullamcorper morbi tincidunt ornare massa eget. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Dictum at tempor commodo ullamcorper a lacus vestibulum. Nibh cras pulvinar mattis nunc. Ante in nibh mauris cursus mattis molestie a iaculis at. Aenean pharetra magna ac placerat. Sed tempus urna et pharetra pharetra. Scelerisque purus semper eget duis at. Pellentesque habitant morbi tristique senectus et.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":16,"width":300,"height":225,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignleft size-large is-resized"><img src="https://blocksy-1-8-56.webspace.rocks/wp-content/uploads/2022/11/photo-1620083408464-ae0759cc9733_1920x1440-1024x768.jpg" alt="" class="wp-image-16" width="300" height="225"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Morbi blandit cursus risus at ultrices mi. Odio ut enim blandit volutpat maecenas volutpat blandit. Quam viverra orci sagittis eu volutpat odio. Gravida quis blandit turpis cursus in. Faucibus scelerisque eleifend donec pretium vulputate. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Proin libero nunc consequat interdum varius. Dignissim enim sit amet venenatis urna cursus. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Arcu bibendum at varius vel pharetra vel turpis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Arcu non odio euismod lacinia at quis risus. Eros in cursus turpis massa tincidunt dui. Eget duis at tellus at urna. Nisl nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Eu turpis egestas pretium aenean pharetra magna ac placerat. Mi proin sed libero enim sed faucibus turpis.</p>
<!-- /wp:paragraph --></div><figure class="wp-block-media-text__media"><img src="https://blocksy-1-8-56.webspace.rocks/wp-content/uploads/2022/11/photo-1620083408464-ae0759cc9733_1920x1440-1024x768.jpg" alt="" class="wp-image-16 size-full"/></figure></div>
<!-- /wp:media-text -->

Hi @t33b33

As far as I can see, this issue has been already fixed in our internal builds and the page is looking much better, as it should.

We hope to release the update in the coming days, but if you want to test it out a bit more, here’s a fixed theme.zip — https://www.dropbox.com/s/p22gs50dd2b9egu/blocksy-1.8.57-b3.zip?dl=0

Hope this helps!

• This reply was modified 2 years, 4 months ago by Eduard.

It looks good to me. The removal of

.entry-content .alignleft {
  margin-inline-start: calc(( 100% - min(var(--block-max-width), var(--container-width-base)) )/2);
}

should do the trick. Thanks.