Fixing Gutenberg Image Floats

Last week Keith Devon asked if anyone knew how to fix Gutenbergs floated image blocks. For some reason the floated image gets wrapped in a containing div.

I’m not sure why this is done, but the code is right there cherry picking the blocks with an alignment and adding an extra wrapper. This makes floating and positioning content difficult since the positional controls are added inside the container.

Simon Blackbourn suggested using the render_block filter to tweak the html, and so that’s what I did. The code ended up being very simple, it’s basically just a handful of string replacements.

The Code

What the code does is first check if we’re using the Image block. We could simplify this in WP 5.7 with the new render_block_core/image filter.

We then loop through the possible alignments and check to see if the current block contains one of them. If it does then we first remove the old alignment, then replace the wrapper class with the alignment we removed – shifting the alignment onto the wrapper. Finally I removed any empty class attributes.

Why does this happen?

The wrapper is added so that certain alignment situations happen, but they also mean that others can’t happen. There’s a full explanation on this Gutenberg Github issue. The Github issue was very active this time last year but has now stalled, which suggests to me that it won’t be addressed; but I hope I’m wrong since improving this would make theming a lot simpler.

Toolbelt?

I’m now wondering about adding this to Toolbelt along with fixes for any other blocks that have funky rendering behaviours. For example the Pullquote and Blockquote blocks have different wrappers that make styling the two blocks consistently a pain, so maybe something could be done to improve that as well.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

16 Mar 2019

The WordPress Block Directory

There has recently been a proposal to introduce a new type of plugin into WordPress. One specifically for editor blocks.I find this an interesting concept, and I can definitely see some benefits, but there are also some downsides. For starters;...
20 Jul 2018

GutenReady for the Gutenpocalypse – Educating Gutenberg

It was WPCampus last weekend, an education focused WordPress conference. There’s a lot of talks about using WordPress in Universities and other educational establishments – but there’s also a lot of more traditional WordCamp subjects.One presentation in particular caught my...
26 Sep 2018

WordPress get_post_gallery() Gutenberg Polyfill

I’m working on a new WordPress theme designed for Gutenberg, however Gutenberg isn’t finished, and there are elements that won’t work until the plugin is merged with core.One such issue, that I ran into this weekend, is that get_post_gallery() doesn’t...
28 Sep 2018

Gutenberg Cloud – the Ultimate Open Source Project?

Gutenberg Cloud is a project for creating open source Gutenberg Blocks that work with both Drupal and WordPress that is created by web agency Frontkom.The team at Frontkom made a version of Gutenberg that works with Drupal. Since Gutenberg is...
27 May 2013

WordPress: 10 Years Young, What Does The Future Hold?

WordPress is now 10 years old. I started using wordpress 9 years ago – which means I joined the WordPress community early on. The reason I chose WordPress is simply because of the fabled 5 minute install process – I...