Mr.Utils enhances the block editor with 7 extra features

Using Mr.Utils on the block editor

On this post, I’ll guide you on how to use my front-end toolkit Mr.Utils, to scale and get features on the block editor of WordPress.

As explained on the previous post, a front-end toolkit might be the best future-proof and optimized solution to this site builder that is still growing.

And depending of your website and theme configuration, you might already be able to use the editor to change the font-size, colors, custom colors, margins and paddings. But those changes would be made on each block individually, there’s currently at the moment of writing, no way to change those properties globally. Mr.Utils gives you a way to do that.

Installing Mr.Utils to use on the block editor

On the documentation you’ll find a short and easy explanation on two methods to install Mr.Utils, by using Mr.Dev.’s Framework or via manual installation.

Preview Mr.Utils changes on the block editor (Optional)

Because the block editor is a very visual editor that closely resembles the front-end, you might want to see the changes that Mr.Utils will apply to your blocks, before actually saving the post.

You can configure that easily by using Mr.Dev.’s Framework, or manually if that’s your thing.

Using Mr.Dev.’s Framework

On the plugin settings on the configuration tab, you will find the CSS Utilities section. Check the box Utils Backend, and you are ready to go.

Manual configuration

Add the below code into the function.php file or into a custom plugin.

add_action( 'admin_enqueue_scripts', 'mrutils_admin_styles' );
function mrutils_admin_styles() {
    wp_enqueue_style( 'mrutils_admin', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils.css', false, '1.0.0' );
    wp_enqueue_style( 'mrutils_admin_backend', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_backend.css', false, '1.0.0' );
}

If you want to avoid external requests:

  1. Download Mr.Utils (free)
  2. Unzip into your website.
  3. Replace the link on the code above, with the location where you unzipped the folder.

Add more “wp_enqueue_style” between the first and last one, if you want to add the breakpoints.

How to use Mr.Utils features on the block editor

Once installed, most of the features shown below, will work by adding specific classes into Advanced > Additional CSS Class(es) on any block.

Block editor with frontend toolkit

Global font-sizes

With Mr.Utils you have 7 global font-sizes and it’s possible to change their values.

For example, add the class mr-fontsize5 into Advanced > Additional CSS Class(es) on any block that has text and see it changing sizes.

You can also use different sizes depending of the device/breakpoint joining multiple classes, for example:
mr-fontsize5 mr-phone-fontsize4
mr-desktop-fontsize7 mr-tablet-fontsize5 mr-phone-fontsize6

If you want to change the values for the 7 sizes, you can check the documentation explaining how to change variables. It explains how to do it manually or using the Mr.Dev.’s Framework.

Global colors (Mr.Dev.’s Framework)

For this one feature, Mr.Utils is currently not enough, you’ll want to use Mr.Dev.’s Framework to define which will be the global colors that appear on the block editor.

Being a global color means that if you select a color and then decide to change the value, all blocks using it will automatically have their colors changed to the new value.

Remove margins and paddings of blocks

Removing margins and paddings can be very useful because currently at the moment of writing, some blocks have default margins or paddings that you might not want. It’s much easier to add a class instead of changing via CSS.

With Mr.Utils you can choose the side you want to remove the margin/padding or remove on all sides. Simply add the correspondent class into Advanced > Additional CSS Class(es):

mr-nomargin mr-nopadding
mr-nomargintop mr-nopaddingtop
mr-nomarginright mr-nopaddingright
mr-nomarginbottom mr-nopaddingbottom
mr-nomarginleft mr-nopaddingleft

And you can also remove the margin/padding only on specific devices/breakpoints, for example:

mr-desktop-nomargin
mr-phone-nopaddingright

Add global margins and paddings

Mr.Utils brings the classes mr-margin and mr-padding, that can also point to specific sides of the block:

mr-margin mr-padding
mr-margintop mr-paddingtop
mr-marginright mr-paddingright
mr-marginbottom mr-paddingbottom
mr-marginleft mr-paddingleft

And you can also use the margin/padding only on specific devices/breakpoints, for example:

mr-desktop-margin
mr-phone-paddingright

If you want to change the values for the global margins and paddings, you can check the documentation explaining how to change variables. It explains how to do it manually or using the Mr.Dev.’s Framework.

Change visibility of a block depending of the device

To show or hide a block, you can use the classes mr-show and mr-hide respectively.

To point to specific devices/breakpoints, all you have to do is to add the device name between the prefix and action. Here are some examples:

Show on phone only: mr-hide mr-phone-show
Hide on phone: mr-phone-hide
Show on portrait devices: mr-landscape-hide
Hide on desktop and laptop: mr-desktop-hide mr-laptop-hide
Itemzero Open Graph Image
The Itemzero Shop has some good examples of showing content depending of the device/breakpoint using Mr.Utils.

Change the order of blocks depending of the device

Changing the order of blocks is easy with drag and drop but if you want to change the order depending of the device/breakpoint, you’ll need something more:

  1. Select all the blocks that will be reordered and then select the option “Group“.
  2. On the Group Block go to Advanced > Additional CSS Class(es) and add the class mr-1perline (You can replace 1 with any number between 0 [infinite] and 12, this would be similar to using columns).
  3. Then select the first block you want to reorder and on Advanced > Additional CSS Class(es) section, add the class mr-breakpoint-order followed by a number between -1 and 12 and replacing breakpoint with the device name (desktop, laptop, tablet, phone or another custom breakpoint that exists). Example: mr-phone-order2. Do the same for each block inside the group (Repeated numbers are allowed).

Horizontal scroll list of posts

Using the block “Latest Posts”, or any other block that works as a list, you can add the class mr-swipecontent or mr-horizontalscrollcontent into Advanced > Additional CSS Class(es), to make that list flow horizontally and become scrollable when the amount of items is big.

Ressano Garcia Arquitectos Open Graph Image
The website Ressano Garcia Arquitectos is a good example of horizontal scrolling lists of posts using Mr.Utils.

Those are the 7 features I wanted to share with you! I’ll update this post If I add more into this front-end toolkit.

Comments