Mr.Utils includes a good preset of utility classes, for spacing, colors, sizes, components and much more. And when using it on WordPress, you and other users can even select them via the block editor.

But there might be occasions, that you need to have your own custom classes, and you might want them to be available on the editor also.

And maybe you want to use those custom classes on specific breakpoints: The 4 preset breakpoints might not be enough for you, if that’s the case, you can also create custom breakpoints.

On this tutorial, you will learn how you can add your own custom utility classes and breakpoints to Mr.Utils. There are two ways to do it:

• Using Mr.Dev.’s Framework – is the easiest way on WordPress.
• Manual implementation on Mr.Utils

Using Mr.Dev.’s Framework on WordPress

Create custom utility classes using Mr.Dev.’s Framework

1. Once on WordPress, go to “Settings” > “Mr.Dev.” (or your website name, depending of the configuration).
2. Go to the “Utilities” tab (If the tab is not available, you’ll need to enable the option on the “Configuration” tab, at “Utilities configuration”).
3. On “Default options” click on “Choose available features” and select “Custom” on each breakpoint where you’ll want your custom classes to be available.
4. Below on “Custom Utilities”, click on + to add the first class.
5. Choose the class name (the class will be generated from this name).
6. Choose the CSS property (A list of some properties will appear while you write, those properties can be used for the block editor. You can still use any CSS property you want, even the ones not listed, the only downside is those might not appear on the block editor, you’ll need to copy & paste the class).
7. Choose the CSS variable / value (If you have the “Styles” tab enabled, you can create the variables there, they will appear in here after. And you don’t have to use variables, you can also write the intended values directly here if you prefer.)

Tip: If you want a class to have multiple properties, you can do it, by having the same class name repeated multiple times.

Using the custom utility classes

Once you create the custom utility classes, you will see inputs showing how the class looks for each breakpoint (that you selected on the 3rd step). You can click on the input to copy the class and then paste into your HTML, CSS, etc.

If the option “Show utilities on the block editor” is active, you can use the block editor to use the custom classes, for options related to spacing, coloring and sizes.

Add custom breakpoints using Mr.Dev.’s Framework

1. Once on WordPress, go to “Settings” > “Mr.Dev.” (or your website name, depending of the configuration).
2. Go to the “Styles” tab (If the tab is not available, you’ll need to enable the option on the “Configuration” tab, at “Styles configuration”).
3. Scroll down to the “Breakpoints” section, where you will find 4 preset breakpoints already created, that you can change the values.
4. Click on “+” on “Number of Breakpoints” to add a custom breakpoint.
5. Choose the name for the breakpoint and define the min/max – width/height.

Using the custom breakpoints

Once you create the custom breakpoints, you can select them on the “Utilities” tab or/and on the “Files / Media” tab.

On the “Files/Media” tab, you can choose on which breakpoints each spreadsheet should load (In production, do not forget to use a cache plugin with minifying options, to combine these spreadsheets, while keeping the breakpoints and their media queries).

Manual implementation on Mr.Utils

Create custom utility classes

1. Download Mr.Utils.
2. Go to “dev/css”. Each folder located in here corresponds to one breakpoint (except for “utils” that is global).
3. Go to each folder/breakpoint where you want your custom classes to be available and create a utils_breakpoint_custom.css file on each one.
4. Open all the created files and add a class, following the utilities rules. Example: “.mr-breakpoint-fontsize10 { }“.
5. Add the intended CSS properties to each class. Example: “font-size: var(--font-size-10,60px);“.
6. Once you created all classes on all utils_custom.css, go to the main file on each folder/breakpoint, titled “utils_breakpoint.css”.
7. Add the following line: @import url("utils_breakpoint_custom.css"); Replacing “breakpoint” with the actual breakpoint name.
8. For development, you can load each of the main “dev/css/utils_breakpoint/utils_breakpoint.css” files, with media queries.
   For production, you should use your favourite compiler, to compile the main files into the main “css” folder (located in the root folder). Use media queries to load all files inside that folder and then, use a page/html minifier to join all those media queried files into one.

Add custom breakpoints

With more files you can add more breakpoint names and media queries:

1. Start by copying one of the given breakpoint files. For this example, copy the file ‘utils_desktop.css’.
2. Change the file name to the name of your breakpoint. For this example rename it ‘utils_notmobile.css’ .
3. Use your favorite code editor to find and replace all instances of ‘-desktop-‘ with ‘-notmobile-‘.
4. Save the file next to other breakpoints and load it with your own media query. For this example, the easiest would be to add the following to the <head> section:
   <link rel='stylesheet' href='mr-utils/css/utils_notmobile.css' media='(min-width: 768px)' />

Comments

In this post, I’ll be focusing on those useful extras.

Whitelabel WordPress and Mr.Dev. for a more friendly and professional look

Whitelabel WordPress and Mr.Dev. titles and logos

Mr.Dev’s Framework can replace the main instances of WordPress title and logo with the site’s name and favicon, this will better personalize the backend and login page to you or your client. Giving that extra friendly and professional touch shows that you care and leaves a good impression on your client.

Mr.Dev.’s Framework can also replace its own title and logo, that way your client can easily find where the framework settings and make changes. It’s much easier for you to explain and for your client to remember that he/she needs to “go to Settings > Website name > Styles, to change the colours“ compared to saying “Settings > Mr.Dev.’s Framework > Styles”.

Whitelabel WordPress active theme

If you are using a theme that changes looks over time, or it uses a name that does not match the website, it can also be friendly and looks professional, to change the look of the active theme on WordPress theme list, to show the current look and name of the website.

By enabling the “Active theme” white label, the active theme will always show a screenshot and the name of the website, as shown on the image below.

Change WordPress backend styling

With some themes, you can find the option to style the backend in the Configuration tab of the Framework. By enabling it, the styles configured on the styles tab will be automatically applied on the backend.

Currently, the Mr.Dev_s theme shows that option if you have Beta Test enabled.

If your theme does not give you that option, all you need to do is to create a file named style-admin.css on the root folder. Edit the file to add styles accordingly (you can use the variables you set on the Framework) and enable the option to see the results on the backend.

Dequeue CSS and JS files from WordPress or plugins

Another cool and handy feature on Mr.Dev’s Framework is the File Manager, not only it allows adding new styles and scripts, it also allows to dequeue files that were already loaded, not only by the framework but also from other plugins or even WordPress itself.

To do this, go to the “Files” tab and increase the number of files (Styles or Scripts).

Then, for the new “File ID” field, you’ll grab the ID of the file that you want to dequeue, without -css or -js.

For example, if you wanted to dequeue the styles of the block editor, you would inspect the source of a page and find something like this:

<link rel='stylesheet' id='wp-block-library-css'  href='/wp-includes/css/dist/block-library/style.min.css?ver=6.0.1' media='all' />

The part “wp-block-library” is what you need to copy and paste on the “File ID” field.

Then, on the load part, you’ll choose “Do not load”.

Save and that’s it!

You don’t need to add the File URL in this situation.

Combine this with assignments if you want to remove a style or script from specific posts / categories / post-types…

How to set the base for rem sizes

If you are using rem sizes on your CSS variables, you might want to set the base size for rem and change it depending on the breakpoints.

It’s really easy to do it with Mr.Dev.’s Framework, just set one variable name to “base” and save. Once you save, you’ll notice that also the breakpoints now have the option to change the base value accordingly.

On the back side of things, Mr.Dev.’s Framework adds the font-size to the html element once it recognizes the “base” variable, on the same stylesheet.

Add root variables instead of body for styling

Most times, adding CSS variables to the body is the way to go if you want to make them available to use anywhere on your pages (for example: WordPress block editor and FSE [Full site editor] do exactly that), that’s why Mr.Dev.’s Framework does it.

But there are specific situations, that you might want to have the variables available to elements before the body. For example: setting a value for scroll-padding-top (to have a scroll offset) with a variable can only be done on the html or on the root element.

Those are very specific situations, so the way to do it might not be very obvious, but it’s very easy. All you have to do on the framework is to include one of the following words on your variable name/slug:
“base“, “root” or “offset“.

By doing that, the framework will add those variables to the root element when creating the vars.css file.

Enable the block editor on WooCommerce product pages and remove WooCommerce default styles

If you have WooCommerce enabled, you will find options for it on the Configuration tab of Mr.Dev.’s Framework.

One option allows removing all WooCommerce default styles, this is very helpful if you want to style WooCommerce from scratch.

Another option is to enable the block editor on WooCommerce product pages. This option is currently only visible when the Beta test option is enabled, but it’s already on a stable status. It’s totally safe to enable beta test to use this feature. The only reason this is not yet on the master build is because I’m still considering whether to create or not a “post type manager & builder”, if so this option will move to that feature.

Comments

Get mouseover options on the block editor

One of the cool features of Mr.Utils is the ability to easily install it as a WordPress plugin for free.

When you do so, an interface will appear on the block editor, allowing you to easily use the utility classes of this front-end toolkit.

One type of utility class is the mouse hover state, let’s focus on that for this post.

Note: If you prefer, you can install Mr.Utils without the interface and use the classes on each block Advanced section.

Animations

On the Animation section of the Hover tab (zigzag arrow icon) you will find options such as Fade, Slide, Scale and Zoom.

One thing to keep in mind when selecting one of those options is: By default, the animation will only occur when mouse hovering above the element, nothing will happen when mouse hovering outside the element… If you want the animation to rollback when you go outside the element, you must go to the Animation section of the Global tab (first tab) and select the transition type (e.g. Ease In Out).
Once you apply a transition globally, the animation will react to both hover situations.

Live example using Zoom animation

This paragraph block animates on mouseover!

Layout change

On the Layout section of the Hover tab (zigzag arrow icon) you will find options to change the size (width) of a block.

If you want to change the initial size, simply go to the Layout section on the Global tab (first tab) and find the similar option.

By default, the size will change without any transition/animation. If you want the block to change the size smoothly, you must go to the Animation section of the Global tab and select the transition type (e.g. Ease In Out).

Live example of size change

Display changes

On the Display section of the Hover tab (zigzag arrow icon) you will find options to change the visibility type of a block.

Here you can better understand the differences between the visibility types.

With these options, you can make a block semi-opaque or totally opaque on mouseover. To do the latter, you must first put the block semi-opaque by default on the Display section of the Global tab (you can also use the option on the Desktop tab [screen icon]).

Just like changing the layout, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out).

Live example of visibility change

Spacing changes

On the Spacing section of the Hover tab (zigzag arrow icon) you will find options to change the spacing (paddings or/and margins) of a block.

Just like changing the layout or display, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of paddings change

Text size change

On the Text section of the Hover tab (zigzag arrow icon) you will find options to change the font-size of a block.

Just like changing the layout, display or spacing, if you want a smooth transition you must choose the transition type on the Animations section (e.g. Ease In Out) of the Global tab (first tab).

Live example of font-size change

This paragraph block will have it’s font-size increased on mouseover!

Misc. Changes

On the Misc. section of the Hover tab (zigzag arrow icon) you will find some extra options such has:

Showing a scrollbar only when mouse hovering an element

There are more than 3 images below. Mouseover to see the scrollbar that will allow you to see all of them!

Those were very basic examples, but with some creativity you can use them to make fascinating and useful experiences for your website users 🙂

Comments

At the moment of writing, WordPress does not yet give an interface for editors to create block patterns. But that doesn’t mean it’s difficult to create them without an interface. On this post, I’ll guide you on how you can create patterns, and I’ll try to make it as friendly as possible.

Create a block pattern with Mr.Dev.’s Framework

Currently, there’s no graphic user interface to create block patterns. Mr.Dev.’s Framework only adds options that WordPress does not have by default, and I’m expecting WordPress to create that default interface very soon. For that reason, I’ll not add a specific interface for this functionality (this might change if WordPress takes too much time to do it).

But if you can’t wait for that to happen, Mr.Dev.’s Framework can still help you on the process…

Preparing a file for a WordPress code snippet

Prepare it using Mr.Dev.’s Framework

• If you have Mr.Dev.’s Framework, check if the option to control files is enabled: If you see the tab Files / Media that means it is, if not then you can enable it on the Configuration tab on the Files & Media Manager section.
• Go to the Files / Media tab , there you can find the section Server-side scripts. Click on the pencil icon to open the file.
  This is the file where you’ll add a short code snippet.

Prepare it using a custom PHP file

If you don’t have Mr.Dev.’s Framework and already have a way to add PHP code snippets to your website, you can skip directly to add the code snippet.

Otherwise, you can get the framework or add the code into the functions.php file of your theme.

Block patterns code snippet

• Copy the code snippet below and paste it into the file you previously created/selected. Do not save yet because we still need to create the actual pattern.

//START BLOCK PATTERNS
function custom_site_init() {
	register_block_pattern_category(
		'custom-site',
		array( 'label' => get_bloginfo() )
	);
	
	register_block_pattern(
		'custom-site/project-list',
		array(
			'title'       => __( 'Pattern 1', 'custom-site' ),
			'description' => _x( '', 'Block pattern description', 'custom-site' ),
			'keywords' => ['pattern'],
			'categories' => ['custom-site'],
			'content'     => 'PATTERN CONTENT',
		)
	); 
}
add_action( 'init', 'custom_site_init' );
//END BLOCK PATTERNS

Understanding the code (optional)

The code above can be reused on as many websites as you want.

It will automatically create a pattern’s category with the same name as the website using get_bloginfo() (behind the scenes the slug will be “custom-site”, and although you can change that, it is more scalable this way).

The pattern name will be “Pattern 1”, this part you can change to whatever you want, depending on the project or the actual pattern.

You can also add a pattern description and add/replace keywords (The keywords are utilized when a user is using the search input to find blocks).

Create the block pattern with the editor

Now that we have prepared the code snippet, we can use the block editor to create the content for the pattern.

• On a different tab, go to Pages > Add New.
• Create the content for the patterns, using any type of blocks you want.
• In the top right corner, click on the 3 dots.
• Click on “Copy all content”.
• Go back to the PHP file you previously created/selected.
• Replace PATTERN CONTENT with the content you just copied.
• Save the file.

Add more block patterns

To create multiple block patterns, duplicate the function register_block_pattern from the code snippet above and repeat the same steps.

Extra: Remove core block patterns from WordPress

Now that you added your own custom patterns, chances are you don’t want to show the default/core block patterns.

To do that, if you have Mr.Dev.’s Framework, you can simply enable Styles Control on the Configuration tab. Otherwise, you can add the following code on the previous code snippet, inside the main custom_site_init function:

remove_theme_support( 'core-block-patterns' );

Will block patterns be on the interface?

Hopefully WordPress will soon add a good way to do this via the full site editor. There are some interesting discussions on which will be the best way, you can follow them:

• Patterns: Create a pattern similarly to how we create a Reusable block. · Issue #31298 · WordPress/Gutenberg (github.com)
• Selecting multiple blocks – Save as Pattern or Reusable block. · Issue #35305 · WordPress/gutenberg (github.com)
• Building with Patterns · Issue #38529 · WordPress/gutenberg (github.com)

And that’s it! I hope the steps were clear and easy to follow. If not, feel free to comment below or contact me if you prefer to talk about it privately.

Comments

The journey of Mr.Dev.’s Widget and Module

Back when I first started developing Mr.Dev.’s Widget and Module, it didn’t have that name and the main intention was to show categories in accordions and posts inside tabs that are inside those accordions for Ruben R Dias website.

Back then, WordPress and Joomla were CMS where the frontend was totally dependent of extra elements (themes, plugins and other optional features) that the developer/designer could choose to use or could create custom tools.

We (developers) had the full control over the frontend.

In my case, I choosed to create a widget and module because of the functions and the graphic user interface (GUI) that both WordPress and Joomla had already built-in. In theory they allowed to not bloat the systems with something otherwise done from scratch or using external dependencies.

The version of Mr.Dev.’s widget/module I gave to my direct clients became very powerful, allowing to show any type of content (from posts to products) with many options, themes and layouts. All that with checkbox and fields, so it was safe to give to clients, knowing they would not affect negatively the design.

To indirect clients (people downloading the widget/module to their own developments) I put the most powerful features part of the paid plugin Mr.Dev.’s Framework.

But then things changed..

As for the module, Joomla 4 was later released with different methods to create modules. It was not worth it to recreate the module, so it was discontinued and unsupported for other two reasons: The user-base of Joomla is much smaller comparing to WordPress and I was using Joomla mostly for a company where I am not working anymore.

As for the widget, WordPress also changed, with a new highly visual editor enabled by default: The Gutenberg block editor meant that WordPress was pushing to developers a specific tool to change the frontend, a tool that basically transforms the CMS into a site builder.

And with that, the optional features such as widgets and the customizer started to become obsolete vs the block editor with full site editor growing much stronger.

Despite this, Mr.Dev.’s Widget is still compatible and support is available! But no further development will be put into it (for the reason mentioned above).

Instead I’ll focus my energies on Mr.Dev’s Framework and Mr.Utils..

The plugin development journey of Mr.Dev.’s Framework

The idea behind the framework came up because I started noticing how using a third-party framework (Gantry5 with particles) together with the block editor and Mr.Dev.’ widgets was adding extra learning curves, starting to bloat WordPress and I wasn’t even needing all the features of Gantry5.

So, keeping that idea of not wanting to bloat the system and make it simpler, I had to adopt the block editor and accept it as the future moving forward.

Mr.Dev.’s Framework focus on adding optional features he considers essential to a CMS, without repeating features already available by default and helping transition / discontinue features that might become available by default.

Being a continued path, the Framework its on active development and improvements continue to be made.

And this brings us to today..

The new version of Mr.Utils joined with the Framework

Mr.Dev.’s Framework already helps to create breakpoints, add media sizes, create stylesheets with global colors, typography, sizes and files via a graphic user interface (GUI). And it always included an optional frontend toolkit I developed called Mr.Utils.

There was no graphic user interface to use that toolkit, it was used mainly by developers knowing concepts like classes, CSS and javascript functions.

As of today, Mr.Utils and the framework reached the block editor!

Mr.Dev. now gives an option for editors and clients to use that frontend toolkit using the GUI!

All options will appear under an “Utilities” tab,  allowing to easily implement designs that were difficult or impossible to implement with the current state of the Gutenberg block editor. Including Mr.Utils pagination (perpage) and components to create sliders and tabs.

If you don’t have Mr.Dev’s Framework yet, you can actually install Mr.Utils as a plugin for free. It will give you the same interface just without some advanced options.

And to finish with another great news, a present just in time for Christmas…

Mr.Utils plugin is available on WordPress repository!

I hope you’ve found interesting to know the reasons behind developing this plugins, that you can join me on this journey and most of all, enjoy using the plugins!

Let’s now celebrate Christmas and start 2022 with the right footer! 🎅 🎄 🎁 🥂

Extra note: Mr. comes from playing with the initials of my first and last name while representing a person that is a developer. Dev. represents the fact that all framework features are optional, thinking on developers that want some control and worry about lighter work environments.

Comments

Mr.Dev. is your provider of developing tools!

He gives you a theme framework with optional features and add-ons that extend the natural workflow of WordPress.

Which features are available?

All framework features work with any theme!

But if you want to start from scratch and focus on the features given by the framework, then Mr.Dev. gives you a boilerplate theme that you can use.

Despite being a boilerplate, you can develop complete websites without needing to add or edit the base code, that’s thanks to the features of the Framework together with the block editor.

The Mr.Dev’s Theme is a boilerplate that works with the default Full Site Editor. By joining the Framework, you can control the default styles that appear on the FSE and you’ll be up to date with all the new features that are coming to WordPress.

DOWNLOAD

+INFO

The block editor (aka Gutenberg) is the default site builder of WordPress but some handy features might be hidden, waiting for your theme to declare support.

Which block editor features can be enabled?

Features such as creation of block templates, responsive embeds, wide alignments for images, custom line-heights and custom spacing usually must be enabled by adding some code snippets into your theme.

But what if you don’t have control over your theme code? What if you want to always have those features despite the theme you use?

Since the version 0.9.492 of Mr.Dev.’s Framework, that you can enable all those features without touching any code.

How to get those block editor features?

On the Configuration tab of Mr.Dev.’s Framework, located in Settings > Mr.Dev. (Instead of Mr.Dev. you might see your site name, depending of the whitelabel configuration), you can find the section Styles Configuration with the dropdown Blocks Styles Picker and also the section Layout configuration with the dropdown Layout Control.

Depending of the option you choose on those dropdowns, different features will be enabled:

Block templates

If your theme already enables block templates, you can leave the dropdown Layout Control with the option “Disabled / Theme Controlled”, otherwise you can select “Enable block templates (Recommended)”.

You’ll also need to have WordPress 5.8 or above.

The Block templates feature, allows to add blocks inside template parts such as header and footer. All changes you do on a block inside a template part will apply to all pages using that template.

Responsive embeds

This block editor feature will be enabled if you select one of this options:

• Disabled but with extra block features – It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.
• Enabled with extra block features and allow custom styles
• Enabled with extra block features

The Responsive embeds feature, automatically applies styles to embedded content to reflect the aspect ratio of content that is embedded in an iFrame, using the class wp-embed-responsive on the <body>.

Wide Alignment

This block editor feature will be enabled if you select one of this options:

• Disabled but with extra block features – It will not show the colors and sizes created using the framework (or the customizer) inside the block editor.
• Enabled with extra block features and allow custom styles
• Enabled with extra block features

The Wide Alignment feature, gives the possibility of defining “wide” and “full” alignments to certain blocks, such as the image block.

Custom Line-Height

This block editor feature will be enabled if you select one of this options:

• Enabled with extra block features and allow custom styles
• Enabled and allow custom styles per block

The Custom Line-Height feature, allows to customize the line height of certain blocks, such as the paragraph and headings.

Custom Spacing

This block editor feature will be enabled if you select one of this options:

• Enabled with extra block features and allow custom styles
• Enabled and allow custom styles per block

The Custom Spacing feature, will show padding controls in certain blocks, such as the column block. You can change the value for individual sides or keep the same for all sides.

And the Enabled option on the dropdown?

It’s not part of this post’s topic, but if you prefer to let your theme/plugins decide most of the available features, but still want to show the colors and sizes created using the framework (or the customizer) on the block editor, then that option is for you.

Getting Mr.Dev.’s Framework

If this easy method to enable block editor features despite the theme sounds good to you, but you don’t have this framework yet, then you can know more about it and get it anytime:

Comments

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.

Depending of your website and theme configuration, you might already be able to use the editor to change things such as the font-size, 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 three methods to install Mr.Utils, by using Mr.Dev.’s Framework, by installing as a plugin or via manual installation. The most optimized method is using the framework because it allows you to select the type of utilities you want to use, combine and minify them.

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.

If you did the installation as a plugin you don’t need to do anything else and you can skip to “How to use Mr.Utils features on the block editor“.

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

Preview changes 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.

If you want to use utilities on breakpoints, simply select the ones you want on the same group of checkboxes.

Manually configuration of the preview

Add the below code into the functions.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 add breakpoints you need to add more “wp_enqueue_style” to the above, between the first and last one, this time also indicating the intended media query, like this:

wp_enqueue_style( 'mrutils_admin_phone', 'https://raw.githubusercontent.com/marcosrego-web/mr-utils/master/css/utils_phone.css', false, '1.0.0','(max-width: 768px)' );

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.

How to use Mr.Utils features on the block editor

If you installed Mr.Utils as a plugin, you’ll now see the option “Utilities” when selecting a block. By using that interface you don’t need to know the methods explained below.

If you didn’t install Mr.Utils as a plugin, most of the methods shown below, will work by adding specific classes into Advanced > Additional CSS Class(es) on any block:

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):

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:

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:

Change how Columns blocks display on mobile

By default when you set the number of columns on the Columns block, that number will apply on desktop. On mobile the columns will be automatically stacked below each other.

But if you only have images or you don’t have a lot of text in the columns, it could look better with 2 columns on each line.

You can do that with Mr.Utils, you can add classes such as mr-phone-2perline into Advanced > Additional Class(es).

If you installed the toolkit as a plugin it’s even more friendly: Click on “Utilities”, on the phone icon and then on layout you choose 2 as the number of items per line.

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.

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

Comments

The block editor (aka Gutenberg) is the default site builder of WordPress and it’s the most optimized and performative you can have on this CMS. But it’s still growing and currently lacking some features.

On this post, I’ll let you know why a front-end toolkit is currently the best future-proof solution to get some of those lacking features right now.

Some features might be hidden to you

Before I dive into the use of a front-end toolkit to add some of the lacking features, it’s best to make sure that they are actually lacking from the block editor.

Your theme or plugins might lock some of the new features and in some cases your theme could simply declare support with a short code snippet.

On this page of the WordPress documentation, you can find some of the features that are available but need the theme or a plugin to declare support.

If all the features you need are mentioned on that page, then declaring support is in fact the best option (You can use Mr.Dev.’s Framework to do that). If they are not, then you might find a better solution by continue to read this post.

You should not use plugins to extend the block editor

The easiest solution for the lacking features would be of course, to get them via a third-party plugin, but that doesn’t mean it’s the best or the most scalable option.

Plugins such Editor Plus by Extendify, Kadence Blocks, Lazy Blocks and ACF Blocks are impressive for sure but a quick look at their changelogs and you’ll notice they are bloated with features or dependencies that you might not need or that will soon be available by default on the block editor.

That leaves a question with difficult answers:
What will happen when those new features arrive to WordPress?
Will the plugin developers find a way to transfer all the repeated features to the methods of Gutenberg Block Editor? Or will they force everyone to keep the plugin active so their own features keep working?
The latter is more likely and would force to have multiple ways to do the exact same things.

Doesn’t sound serious yet? What if I tell you that, having so many active options and plugins to do the same things will increase the amount of needed scripts, styles on your pages, decreasing your speed score that also affects SEO (Search Engine Optimization).

Another things to keep in mind are:

• Some of those plugins also change the natural workflow of the editor: It’s difficult enough to force users to get used to a new way of working on their websites, imagine having multiple ways.
  And I know WordPress always had that problem, but now that WordPress is trying to fix that with the block editor, it seems to me some of those plugins are not doing much better for the long-run.
• Some of those plugins are based on old technologies and do requests to the server. The essence of the native blocks is the use of React and to do more on the client-side, that’s what makes the native blocks so well optimized compared to other site builders.

Don’t you agree? Let me know in the comments section below.

If still you prefer to go with a plugin, choose one that lets you go back to the default values and/or that helps you transition back, when you don’t want to rely on that plugin anymore.

What you need on the block editor for now is a middle term solution!

Using a front-end toolkit

Get a lightweight and easy to use front-end toolkit, such as Mr.Utils (free). It includes classes that are friendly for everyone and can be added on each block “Advanced” section.

And if that’s not friendly enough for you or your clients, you can actually install Mr.Utils as a plugin for free. It adds an interface on the block editor that allows to add classes without actually knowing them. But of course, this starts to get closer to the plugins mentioned above, still lighter than them though!

Using a lightweight framework

Or get a lightweight framework such as Mr.Dev.’s Framework, that focus on new features, discontinues the repeated ones (that are already available on the CMS) and even helps you on the transition to the CMS method/feature.

The framework also has the option to use an interface on the block editor.

Solutions overview

Mr.Utils front-end toolkit, Mr.Utils as a plugin and Mr.Dev’s Framework are much lighter compared to the plugins mentioned above and much easier to scale and transition to future methods.

What about other front-end toolkits?

Of course you can use other, specially if you already have another installed on your website.
Bootstrap probably comes to mind, but I feel my utility classes are a bit more straightforward and more friendly to explain to non-tech users. They always work the same way prefix-breakpoint-action, such as mr-phone-hide or mr-desktop-nomargin (mr-nomargin for actions on all breakpoints).

Getting 8 of the lacking features on the block editor

What Mr.Utils / Mr.Dev.’s Framework add to the block editor is a way to:

1. Change to a global font-size.
2. Change global color.
3. Remove margins and paddings of blocks.
4. Add global margins and paddings.
5. Change visibility of a block depending of the device.
6. Change how Columns blocks display on mobile
7. Change order of blocks depending of the device.
8. Horizontal scroll list of posts.

Check the next post where I go deeper on how to do those actions.

Comments

Let your visitors turn the pages!

FlipBook Block is a simple yet effective WordPress block that shows a PDF from your Media in a Flip Book.