Ever since WordPress started utilizing a block design, a lot of new features became available, but the layout options are still clunky. I encountered this issue constantly whenever I tried to add a GIF image to a post and it would take up the entire page. There are no controls on block-level settings to change its size, so what can we do?
I hope that in the future WordPress will improve our control over the layout and size of all available blocks, but for now, we’ll have to use a workaround which, by the way, will work for changing the size of any block, not just a GIF.
By default, if I leave the GIF block as is, it takes up an entire screen like this:
The long way to fix this would be to limit the size with custom CSS, but I’ve found a faster solution to this problem you can deploy without any coding and you can do it directly within your post.
How do you resize a GIF block on WordPress?
By turning it into a Group. Here’s how.
Step 1: Insert the GIF block
Click the plus sign and type in “GIF” to find your block.
Search for your favorite GIF to dress up your post.
Step 2: Turn the GIF block into a Group
Has your GIF become invisible?
Whether you call it bug or limitation, that’s how it works on WordPress. Worry not—it’s still there.
If it disappears from the preview and you have a hard time finding it in your post, click the List view (the three lines in your top toolbar) and select it from there.
With your GIF block selected, click ⋮ (the three dots) on your toolbar to open the menu and choose Group.
Step 3: Change the Group settings
Now that your GIF is wrapped up inside a Group, you’ll notice that the Group has options that the GIF block alone didn’t. Under the Layout section, type in a value into the WIDE or CONTENT box.
Here’s the same GIF as above but now it’s only 300 pixels wide:
And that’s it. We did it in seconds without utilizing custom CSS. What’s even better about this method is that you can adjust your GIF to a custom size, whereas in custom CSS, you’d have no choice but have all GIFs be the same size across your entire website (or you’d have to create multiple CSS classes for different sizes).
If you’re going to insert a lot of GIFs all the time, limiting the size with CSS might be an efficient way, but otherwise, this hack is the fastest fix to this WordPress limitation.
Urgent update
Today, May 5th 2023, I found that this hack no longer worked for me—I no longer see the toggle “Inner blocks use content width” on a Group block. I suspect that recent WordPress update might have broken this (though existing blocks remain unchanged). I am investigating and will update this post once I figure this out.
Did you find this post useful? Let me know in the comments.
