Image Block Alignments broken on themes using theme.json

[philhoyt]

Description

Image blocks when rendered on themes using theme.json output as followed

<figure class="wp-block-image alignright size-full"><img width="150" height="150" src="https://the-northeast-ohio-region.local/wp-content/uploads/2022/04/150.png" alt="" class="wp-image-16913"></figure>

Without a div container resulting in the following

This is easily tested with themes like Twenty Twenty-Two, but not limited to FSE themes.

Image blocks on non theme.json themes render as followed

<div class="wp-block-image">
<figure class="alignright size-full"><img width="150" height="150" src="https://the-northeast-ohio-region.local/wp-content/uploads/2022/04/150.png" alt="" class="wp-image-16913"></figure></div>

resulting in the desired alignment visually

This was tested using WordPress 5.9.3
with and without Gutenberg 12.9.0

Step-by-step reproduction instructions

1. Activate a theme using theme.json (Twenty Twenty-Two or Other)
2. Create a page or post with a paragraph of text
3. Place an image block above the paragraph and align left or right
4. View results

Screenshots, screen recording, code snippet

No response

Environment info

This was tested using WordPress 5.9.3
with and without Gutenberg 12.9.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

Hi @philhoyt, while not ideal, this is expected behavior in block themes. The image figure is no longer contained in a wrapper div, which is great for many use-cases but does present the drawback you highlighted in this issue. One easy fix is to wrap the Image block in a Group block. That will give you the design you are looking for. Please let me know if I can answer any additional questions.

[philhoyt]

This is not okay. To explain to a client they would need to wrap their image in a group to accommodate alignments is unacceptable. Are posts imported from previous themes not taken into account for backward compatibility? The block already wraps the image in a div as explained in previous iterations of the block editor. Your "expected behavior in block themes" results in "not ideal" behavior in the default FSE theme.

[philhoyt]

Looks to be reverted... weird

[sergiu-radu]

Hey guys, any updates on this issue?
Do you plan to bring back the wp-block-image container to left/right aligned images?

Without it everything breaks and adding wrap the image inside a group is not great at all because people will have to edit all their posts manually...

[bridgetwes]

I spent hours trying to figure out why some of my client sites get the div wrapper around alignright and alignleft image blocks and others don't. Even Twenty Twenty-One has the wrapper, but switching same site to Twenty Twenty-Two removed the wrapping div. I finally figured out it was the presence of the theme.json file in the theme. The extra wrapping div allows me to align the floated images with the other margin-left, margin-right: auto content on pages. Otherwise, there is no container to add the margin: auto to, with a float on the figure so paragraphs can wrap around it. The Twenty Twenty-Two theme floats alignleft image blocks way off to the side. Is there any chance the wrapping div can be added back to image blocks aligned left or right?

[audunmb]

So this is bug that won't be fixed, which will break thousands of websites if they update to an FSE theme.

[audunmb]

Adding the following to a css-file (style.css) creates a workaround for this issue. It won't work in the editor, only in the frontend.

@media only screen and (min-width : 768px) {
   figure.wp-block-image.alignleft {
	  margin-left: calc( ( 100% - var(--wp--style--global--content-size)) / 2 );
 }

   figure.wp-block-image.alignright {
	margin-right: calc( ( 100% - var(--wp--style--global--content-size)) / 2 );
 }
}

[delorimier]

This is clearly unacceptable behavior from the image block. Please fix asap.

[delorimier]

Here is my solution: wrapping the image block in a div. Works in my current theme.

Frontend:

 function wrap_image_block( $block_content, $block ) {
   	if ( $block['blockName'] === 'core/image' ) {
      $block_content = '<div class="image-block-wrapper">' . $block_content . '</div>';
      return $block_content;
    }
      return $block_content;
 }
 add_filter( 'render_block', 'wrap_image_block', 10, 2 );

Backend (enqueue script in backend with admin_enqueue_scripts)

var createElement = wp.element.createElement;
var modifyEditHtml = function(BlockEdit) {
    return function(props) {
        if (props.name !== "core/image") {
            return createElement( BlockEdit, props );
        }
        return createElement(
            "div",
            { className: "image-block-wrapper" },
                createElement(
                    BlockEdit,
                    props
                )
        );
    };
};
wp.hooks.addFilter(
    "editor.BlockEdit",
    "my-plugin/modifyEditHtml",
    modifyEditHtml
);

This took me a few hours to figure out and may not be optimized for your project,

I wish we didn't have to struggle as much with the new editor. Image blocks should never have behaved that way.

[djcowan]

@audunmb 👍 thank you - solution works. but - might - need to consider .is-layout-constrained

  _.is-layout-constrained_ figure.wp-block-image.alignright {
	margin-right: calc( ( 100% - var(--wp--style--global--content-size)) / 2 );
 }

@delorimier there's an render_block ticket regarding the priorty of calls to core\image #55407