
Change the aspect ratio of an image using CSS
24/09/2021In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
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.
In this post I'll show you how to change the aspect ratio of an image or element using CSS, and explain why this is important.
Here is how you can fix node incompatibility error, using "Node Sass does not yet support your current environment" as an example.
Need to make a directory in PHP? No Problem! mkdir has you covered... Need to recursively make directories in PHP? mkdir has you covered, too!
Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.
Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
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?
It goes in the same function.php.
Thanks for share!
Why aren’t u using percentages? Any particular reason or these are just for example?
I think is just an example. He mentioned above this:
Gav
23rd November 2020 at 12:50 am
Hi
Don’t use the default values from the post, adjust them to suit your needs. Try changing the values to ‘none’ instead
Thank you! Now the typing experience is more enjoyable.