core/image block’s alignleft/alignright don’t respect content width

  • Hi,

    maybe someone has come across this, too?

    In a new WP installation: as soon as a theme.json file, regardless of the content, is present in the theme directory (hybrid theme/_s based) most editor defaults will no longer be applied to the editor (typography/width, etc), regardless of whether the respective settings are changed in the theme.json file.

    This doesn’t seem intuitive (and wasn’t the case in previous tests I ran, I think), but there appears to be a specific problem with respect to the image block. While applying the layout settings “contentSize” and “wideSize” in the theme.json file will change the content width, say for the paragraph block, the image block does not respect the new contentWidth. Without explicitly set alignment, the image will be placed at the left margin of the defined content-with, but images floated to the left or right will not respect the content width but instead float to the left or right side of the editor.

    I’ve tried this with a number of theme.json-files of varying complexity including those provided by the generator at fullsiteediting.com, but the effect was always the same. As soon as a theme.json file is present in the theme, the image alignment options will not respect the content size.

    After removing the theme.json file (regardless of its content), the alignment functionality does respect the (default) content width.

    Thanks for any idea!

    This is the applied simple theme.json-file:

    {
"version": 2,
"settings": {
"layout": {
"contentSize": "624px",
"wideSize": "624px"
}
}
}
Viewing 1 replies (of 1 total)
  • Mario Santos

    (@santosguillamot)

    I’ve been looking at your issue and trying to find a solution. Unfortunately, according to this comment, it doesn’t seem possible right now to set a default “wide” alignment for images via theme.json.

    I also found this GitHub issue, which seems related to the problem you stated -> Image Block Alignments broken on themes using theme.json. It is closed, but maybe you can share your experience there, as other users are doing. Or even opening a new issue to support “wide” alignment for images via theme.json.

    As a hacky solution, I believe you could filter the classes of the core/image block to add alignwide. I haven’t tested it, but I think this could be done in two ways:

    – With PHP: using the render_block_core/image filter, and modifying the $block_content to include the new class.
    – With JS: using blocks.getBlockDefaultClassName.

    This is another GitHub issue where they are discussing potential solutions for adding CSS classes.

    As I said, this feels a bit hacky to me, and you would be at your own risk. But as it seems there isn’t an “official” solution, I wanted to share it in case it is helpful.

Viewing 1 replies (of 1 total)
  • The topic ‘core/image block’s alignleft/alignright don’t respect content width’ is closed to new replies.