
Regenerate WordPress media image sizes, programmatically
25/02/2021Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
There are many things which irritate me about working with WordPress, but one of my biggest annoyances is the default width of the Gutenberg editor. The default width is 610px, which I personally find to be far too narrow for desktop use. It seems a strange design choice, but I’m sure WordPress have their reasons.
Luckily, there is an easy fix. We’re going to inject some admin styles to override the width.
Navigate to a functions.php file in either your theme or custom plugin (WordPress plugin skeleton). Here we are going to add the following function:
function gb_gutenberg_admin_styles() {
echo '
<style>
/* Main column width */
.wp-block {
max-width: 720px;
}
/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
max-width: 1080px;
}
/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
max-width: none;
}
</style>
';
}
The idea is that we want to call this function when the admin head is loaded so that the enclosed style tags are echoed into the head. To do this we can add an action to call the code in the admin head.
add_action('admin_head', 'gb_gutenberg_admin_styles');
Play with the max-width numbers until you find the perfect width for you. Happy blogging!
For those of you as lazy as I am, I’ve added a simple plugin to GitHub for you.
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Need to find a directory path relative to your current file? This is how we use dirname() and realpath() to move up directory levels in PHP.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
What are web components? Learn about web components, the shadow DOM, styling and lifecycle callbacks in this JavaScript tutorial series.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Using Bulma but don't know how to integrate it with Nuxt? I'll show you how to load Bulma into your Nuxt project with full control over variables.
wouldnt this be better ? cheerz
.block-editor-block-list__layout .wp-block {
margin:0px;
}
.wp-block {
max-width:100%;
}
Sure, if you want a standard wp-block layout to span 100% of the available width with no margin to seperate the blocks.
Hi Gav,
I just downloaded your plugin but the block editor is still narrow. Is there something else I need to do?
Thanks,Inez
Hi
Don’t use the default values from the post, adjust them to suit your needs. Try changing the values to ‘none’ instead 🙂
Where does the “add_action” go?