Windows. Linux. Wordpress. Joomla. GIMP. Inkscape. Kdenlive. Hardware. Networking.

Wordpress - How to highlight blocks borders in Gutenberg

A lot of people hate the Gutenberg editor because it is difficult to edit in, but there is a trick that allows to edit comfortably. It is a piece of code that adds borders to blocks and paragraphs, which needs to be inserted in functions.php:

add_action( 'admin_head', function () { ?>
.block-editor-block-list__layout div.block-editor-block-list__layout
{	border:1px solid blue;
.block-editor-block-list__layout p
{	border:1px solid red;
.block-editor-block-list__layout div.block-list-appender
{	border:1px solid lime;
.block-editor-block-list__layout div.components-resizable-box__container
{	border:1px solid pink;
<?php } );

This code consists in a hook which will result in the editor looking like this. Red borders for paragraphs, blue borders for blocks and green borders for blocks that you can add:

Of course, you can change the colors if you wish.

Last posts
25/05/2023WordpressHow to highlight blocks borders in Gutenberg
16/04/2023HardwareHow to change the CMOS battery of an Acer Aspire E5-521 laptop
11/06/2019InternetHow to log in to websites in a secure way
12/12/2018KdenliveHow to create an animated Christmas postcard
22/10/2018LinuxThe sl (Steam Locomotive) command
11/10/2018KdenliveThe Chroma Key effect
07/10/2018GIMPHow to create a three state button
30/08/2018GIMPHow to highlight text
05/03/2016JoomlaHow to create a Joomla website
07/08/2014SEOHow to rank high in the search engines