Gutenburg 在浮动图像周围插入 DIV 打破浮动

Question

我正在使用古腾堡来布局博客文章，其中一些帖子的图像会漂浮在段落旁边。

无论出于何种原因，Wordpress 在浮动图像周围插入一个 div 破坏了效果。

这是它输出的示例 HTML：

<div class="wp-block-image">
<figure class="alignleft  size-full is-resized">
<img decoding="async" src="/wp-content/webp-express/webp-images/uploads/2023/06/company-working.png.webp" alt="a group of employees working together at a large desk in a brightly lit office building" class="wp-image-3120" style="width:350px" width="350">
</figure>
</div>

这会导致图像不像页面那么宽，只是将文本分开，而不是像预览屏幕一样浮动。

前端：

编辑页面：

我尝试了此处概述的方法，将其添加到functions.php文件中以过滤块输出，但它似乎不起作用。 https://www.binarymoon.co.uk/2021/03/fixing-gutenberg-image-floats/

我还在 gutenburg github 上看到对此问题的引用已修复，但我的 WP 版本是最新的，但仍然存在问题。 https://github.com/WordPress/gutenberg/issues/28820

任何帮助或见解都会有帮助，谢谢！

Answer 1

纠结了一段时间后，我意识到帖子内容和图像周围的父容器设置为显示：flex，从而破坏了所有浮动。哎呀，在帖子模板中的内容/图像周围添加一个无样式的 div 标签就可以修复它了。