Hi there and happy holidays!

First, let me extend a warm welcome back to the blog. It’s been far too long since my last post, and for that, I owe you an explanation. Life and work have kept me on my toes, leaving little room to nurture this space as much as I would like. However, exciting developments are on the horizon, and I’m thrilled to share a glimpse of what’s been happening behind the scenes and what’s coming next.

Status update on my life as a Rydoo’er

A significant chunk of my time has been dedicated to my work at Rydoo, where we’ve been hard at work on a complete overhaul of our website and branding. The new version of the site is now live, and I’m proud to say it’s a significant leap forward. We’ve launched the updated website in six languages, ensuring that our message resonates globally. This project has been a labor of love—a culmination of meticulous planning, collaboration, and execution. From refreshing the brand identity to fine-tuning the multilingual user experience, every detail has been a step toward creating a platform that reflects the Rydoo mission.

Freelance work and supporting the developer community

Beyond Rydoo, I’ve kept busy with freelance projects that have pushed my skills to new levels. You can find some of them on the Websites section. And of course, is also part of my freelance work, to actively support the frameworks and plugins I developed, such as: Mr.Utils and Mr.Dev’s Framework. These tools have been instrumental for users and developers, and ensuring they’re running smoothly and efficiently has been a priority. Whether it’s updating documentation, providing technical support, or rolling out new features, I’m deeply committed to empowering the developer community and, as a result, empower our clients and authors too.

Taking my music hobby to new heights

On a more personal note, I’ve been channelling my creative energy into my music hobby. Music has always been a passion of mine, but over the past few months, I’ve taken it to a new level. I got new guitar pedals that added a lot of new sounds and opened up exciting possibilities for my unique sound. I’m exploring ways to integrate my love for music into future projects, so check my new songs on my personal Instagram and Youtube, and stay tuned for updates on that front.

A web developer status update: new project in the works

Perhaps the most exciting update is a new web development project I’ve been quietly working on. While I can’t share too many details just yet, I’m confident it will be a game-changer in its niche. This project represents months of research and planning, using newer technologies, and I’m eager to unveil it soon. And once I do, it’s likely that I’ll have a lot more to add to this blog.

The blog’s future

With this new project set to launch, I’m planning to bring the blog back to life. My vision for this space is evolving, much like my personal and professional endeavours. I’m looking forward to sharing more in-depth insights, tutorials, and updates as I embark on this next chapter. The blog will once again become a hub for tech enthusiasts, developers, and anyone who enjoys the journey of learning and creating.

Wrapping up the web developer status update

If you’ve been following the blog over the years, thank you for your patience and support. This journey has been filled with growth, challenges, and opportunities, and I’m grateful to have you here. The hiatus was necessary, but it’s paved the way for an exciting future.

As we prepare to welcome 2025, I’m filled with anticipation and motivation. There’s so much to share, and I’m eager to make this blog a vibrant, informative, and inspiring space once again. Here’s to a new year filled with creativity, innovation, and meaningful connections.

Stay tuned for updates, until then, let’s celebrate Christmas and start 2025 with the right footer!
🎅 🎄 🎁 🥂

Comments

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

If you ever tried to change the look and feel of a HTML5 datalist but couldn’t, then this post might be your (delayed) Christmas present 🎄🎁 (I hope you had a great one and close to the ones you love the most)!

What’s the problem of styling a HTML5 datalist?

At the moment of writing, it’s not possible to style a datalist directly.

Hopefully in the future, we will be able to simply use normal CSS like this:

.mr-datalist > * {
    background-color: var(--dark);
    color: var(--light);
}

For now, if you still want to use datalist, there are two ways to do it:

• An easy way, using a class from a front-end toolkit.
• A more manual way, using Vanilla JavaScript.

The CSS code above will work after implementing any of those 2 options.

Some things that might be important to you: 

• These methods might not work on iOS versions prior to the 13th. On those devices, the datalist will not change, working as it does by default.
• Both methods should be future-proof. When HTML5 data lists become easier to style, you can remove the front-end toolkit or the JavaScript code. Just keep the classes and the CSS as is.

With that aside, let’s move on with this tutorial…

The easiest way to style a datalist

You can use a front-end toolkit such as Mr.Utils.

All you have to do is, make sure you are adding the global JavaScript file js/utils.js in your page (or if you don’t want to load the entire toolkit, you can individually add dev/js/utils/utils_components.js).

After that, you need to add the correct class .mr-datalist to your datalist (not to the input) and it will magically transform it into a “search” component.

You can then style it with a CSS code similar to the one shown before.

Style a datalist with code

I mentioned that the easiest way of implementation works like magic, but of course there’s no magic behind it at all, just the correct JavaScript code.

In this post, I’ll share a simplified version of that code with you.

You can either follow the steps or jump directly to the Gist full code.

Feel free to change it to your specific needs.

1- Transform the datalist into an element that can be styled.

document.addEventListener("DOMContentLoaded", function () {
  const mrDataLists = document.querySelectorAll(".mr-datalist");
  for (let id = 0; id < mrDataLists.length; id++) {
    let mrDataList = mrDataLists[id];
    let mrDataListUL = "";
    let mrDataListClone = "";
 
    mrDataListClone =
      mrDataList
        .cloneNode(true)
        .innerHTML.replaceAll("<option", "<li")
        .replaceAll("</option>", "</li>");
    mrDataListUL = document.createElement("ul");
    mrDataListUL.id = mrDataList.id;
    mrDataListUL.className = mrDataList.className;
    mrDataListUL.innerHTML = mrDataListClone;
 
    mrDataList.replaceWith(mrDataListUL);
  }
}

In this first step, we grab all data lists that have the class .mr-datalist, but you can change it to your own.

You can even grab all data lists without exception, by replacing the class .mr-datalist with the property datalist, on the querySelectorAll (Don’t forget to change the CSS code accordingly at the end).

In this example, we transform the datalist into an unordered list. You can change that if you wish, but it should be an element with direct children. Each direct child will be a datalist option.

The replaceWith at the end finishes the transformation, but we are not done yet.

We need to create a similar “search” functionality to the one the HTML5 datalist has.

2- Make the input find content on the element.

document.addEventListener("keyup", function (e) {
  let mrDataListID = "mr-datalist";
  if (e.target.matches('input[list="'+mrDataListID+'"]')) {
    mrSearch(document.getElementById(mrDataListID), e.target);
  }
  e.stopPropagation();
});

In here, I’m assuming we know the ID of the datalist, and that we have it on the input “list” attribute. I’m assuming that because those are needed for the original datalist to work.
In this example, the ID is mr-datalist, set on the mrDataListID variable.

If for some reason you don’t know the ID, there are alternative ways to do it. On Mr.Utils for example, the “Search” component removes the original input, creates a new one and uses nextElementSibling. It does that for a reason, you can check that on the GitHub repository.

As you might notice, we are calling the function mrSearch, which will do the heavy work. 

Here is the function simplified, feel free to rename it to anything you want:

function mrSearch(t, e) {
  //t = Datalist
  //e = Input with list attribute
  let mrSearchChildren = t.children;
  if (mrSearchChildren) {
    if (e.value !== "") {
      t.style.removeProperty("display");
      for (let id = 0; id < mrSearchChildren.length; id++) {
        let mrSearchChild = mrSearchChildren[id];
        if (mrSearchChild.hasAttribute("value")) {
          //If the child does not contain any text, show the value as text.
          if (!mrSearchChild.innerText) {
            mrSearchChild.innerText = mrSearchChild.getAttribute("value");
          }
 
          //Change the input value when clicking on the child.
          mrSearchChild.addEventListener("click", function () {
            e.value = mrSearchChild.getAttribute("value");
          });
        }
        mrSearchChild.style.display = "none";
 
        //Checking the child outerHTML because I want to search text also inside the value attribute. Convert in lowercase to not be case sensitive.
        if (
          mrSearchChild.outerHTML
            .toLowerCase()
            .replace(/[^a-zA-Z0-9 ]/g, "")
            .includes(e.value.toLowerCase().replace(/[^a-zA-Z0-9 ]/g, ""))
        ) {
          mrSearchChild.style.removeProperty("display");
        }
      }
    } else {
      t.style.display = "none";
    }
  }
}

Here we changed the Input value when clicking on the element child (the datalist option that we transformed) and we’ll make the search case-insensitive.

Check the comments inside the code to better understand which parts replicate which datalist “search” feature.

Extra: If you have full control over the original datalist, you probably added a value and text to each option. If you don’t have, then this code as you covered, it copies the value into the text when no text is found.

And that’s it! Now you replicated most datalists’ functionalities and can start styling the element, with a CSS code similar to the one shown before.

3- Take it to the next level (Optional and Advanced)

If you feel inspired, now that you have full control over the code, you can add extra features! Features that not even the original datalist has.

For example:

• Show a message when no result is found.
• Bold the text while it is found on the results.
• If no exact match is found, search by each keyword instead (You can also show a message in that situation).
• Show results only after a minimum number of characters (This is a good idea to avoid connection words and code properties).

I did many of those features for Mr.Utils, you can check the part of the code here.

Might also be a good idea, to track pressing keyboard arrow keys, to select the results and improve accessibility.

Gist full code on how to style a datalist

Working example of styling datalists

I did something very similar to the methods explained above for Rydoo’s Compliance Centre and Marketplace.

I hope you enjoyed this post! I’m not sure that I will be writing something more on the blog before entering the new year, so enjoy the celebrations and let’s enter 2023 with the right footer!! 🥂🎆🥳

Comments

When using components that are based on JavaScript, you might notice a layout shift on your content (CLS), especially if you delay the start of JavaScript in some way. In that situation, you’ll see the initial look of the elements until JavaScript kicks in.

But of course, delaying JavaScript until user interaction or after some seconds it’s a good practice and a good trick to increase the score of a website on pagespeed insights. So the better option is to find ways to avoid layout shifts, fortunately it is not that complicated.

For this tutorial, I’ll be focusing on Mr.Utils JS components, but the same logic applies to other tools.

Understand how general JS Components work

The way Mr.Utils JavaScript components work is by adding the necessary CSS inline properties to the element after page load, but only if the element doesn’t have a utility class that already uses some of those properties.

And as you might know, HTML classes don’t rely on JavaScript to apply the style of CSS properties. We’ll use that fact to our benefit, to avoid the layout shift when delaying JavaScript in this situation.

Fixing the Content Layout Shift

Fix CLS for components that add properties

Components such as Mr.Utils Swipe component add the following inline properties to the element:

display: -webkit-inline-box;
flex-wrap: unset !important;
overflow-x: scroll !important;
-webkit-overflow-scrolling: touch !important;
overflow-y: hidden;

But there’s one utility class that does the exact same thing, so all you need to do is to add the following utility class after adding the swipe class:

mr-horizontalscroll

If you are using Mr.Utils as a plugin: Instead of adding the class, you can select the option at Misc > Scroll > Horizontal Scroll.

In the end, you’ll have the following classes on your element:

mr-swipe mr-horizontalscroll

By doing this, the properties will be added before JavaScript runs, and you’ll be avoiding the layout shift, without losing the benefits of the swipe component (such as the ability to drag with a mouse).

Fix CLS for components that create new elements

Components such as Tabs and navigation options on Pagination (Radio, Arrows, Dropdown) add new elements to the page if those elements do not exist yet. So, the way to avoid layout shifting when JavaScript starts on this situation, is to create the elements manually, let’s take a look at that:

If you want to use the exact same elements that Mr.Utils’ JavaScript would create, you can use the below HTML Codes after the element (or before when using the proper class).

Pagination Arrows

<div class="mr-pagination">
<button class="mr-arrows mr-prev">⇦</button>
<button class="mr-arrows mr-next">⇨</button>
</div>

Pagination Radio Buttons

Duplicate the last “mr-radio” to match the number of pages.

<div class="mr-pagination">
<span class="mr-radios">
<input name="mr-radio" title="1/2" class="mr-radio" type="radio" value="1" checked="checked">
<input name="mr-radio" title="2/2" class="mr-radio" type="radio" value="2">
</span>
</div>

Pagination Dropdown

Duplicate the last “option” to match the number of pages.

<div class="mr-pagination">
<select class="mr-pageselect" title="/2">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

Tabs

Duplicate the last “mr-tab” to match the number of pages.

<div class="mr-tabsnav mr-horizontalscroll">
<button class="mr-tab mr-active">Tab 01</button>
<button class="mr-tab">Tab 02</button>
</div>

If you want a bit more control or if you use site-builders, you can also create those new elements differently, as long as the main/parent element uses the class mr-pagination or mr-tabsnav.

If you are using Mr.Utils as a plugin on WordPress, you can use the block editor to create buttons for the Tabs component. Then, by selecting the buttons’ container, on Utilities choose Components > Tabs Navigation.

Live example of fixing Tabs CLS

A good live example of this is on Itemzero’s Shop, the tabs were created using the block editor and Mr.Utils.

And that’s it! Those are some ways to avoid layout shift when using JS Components.

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

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

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

Mr.Dev. is your provider of developing tools!

He gives you a powerful WordPress widget to display your content with many customizable layouts and options.