Multiple themes: Image blocks are centered by default, not left aligned

[mikeicode]

Quick summary

I would assume that Image blocks are supposed to be left aligned (not floated left however) when you don't set specific alignment. Testing multiple Varia and Blockbase themes they are centered by default. There is no way to set them to regular left alignment without the "Align Left" setting, which results in text wrapping.

Steps to reproduce

• Activate Maywood
• Add an Image block, don't set a specific alignment

What you expected to happen

Published page should look like the editor with the image to the left without text wrapping.

The caption probably shouldn't be centered but that's not the point of this issue.

What actually happened

It's center aligned.

The issue with setting it to Align Left is that the text wraps:

On Maywood this CSS causes the issue:

Context

Building a DIFM-L site.

pdh1Xd-78-p2

Operating System

macOS

Browser

Mozilla Firefox

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Every Varia and Blockbase theme I tested. Maywood is the example above.

Other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, easy to implement

Workaround details

You could set the image to Align Left and add a Spacer block right under the image to break the float (so the text doesn't wrap the image).

[kosiew]

Hi @mikeicode ,

Thanks for reporting this and the detailed steps.

I could reproduce this on a Simple site.

Transferring to themes repo for developers' further investigation.

[jordesign]

Confirmed this - setting as high priority for an answer on if this expected behavior or not?

[MaggieCabrera]

This is what Gutenberg does on a theme with no CSS whatsoever:

There are related issues in GB:
WordPress/gutenberg#31011

and a possible solution:
WordPress/gutenberg#35787

I think GB is also assuming the image should be centered. It appears we certainly thought so when we added the CSS to fix in the theme what wasn't working correctly in the editor.

I'd say keep this one open until the GB issue gets merged and then we can check a solution if our theme's CSS conflicts with the GB fix to make the left aligned images work correctly.

I suspect the text wrapping on left align is what's intended to happen, I think if the user doesn't want that the can use a spacer block between the image and the text.

[jordesign]

Thanks @MaggieCabrera I'll note this as waiting a fix from WordPress/gutenberg#31011

Flagged for Bug Herders to keep an eye on

[Greatdane]

This should have now been fixed in core; WordPress/gutenberg#17162 (comment)

However, I can still reproduce on WordPress.com (Maywood).

Any thoughts @MaggieCabrera ?

[MaggieCabrera]

This should have now been fixed in core; WordPress/gutenberg#17162 (comment)

However, I can still reproduce on WordPress.com (Maywood).

Any thoughts @MaggieCabrera ?

It may very well be that Maywood has extra CSS added, so a fix for that specific theme would be needed

[edwinho89]

• 5692804-zd-woothemes

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5692804-zen