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

Are you changing your emails to a different service/provider (server, host or domain) but want to keep all data as is? You don’t have to do it manually!

The problems of exporting and importing emails manually

Forget about exporting and importing trough webmail, many times those have limits.

You might end exporting without being able to import after (and a backup is no good if you can’t later import it, right?). Dividing an export into many different files, to avoid limits, it’s also a lot of work and can lead to mistakes.

You might even remember to export the “Inbox folder”, but what about others, such as “Sent” or custom ones.

That’s why on this post, I want to share with you a very handy on-line tool, properly called Mailbox Imapsync Online.

How to use Mailbox Imapsync Online to transfer emails automatically

Using Mailbox Imapsync Online couldn’t be simpler:

First, be sure that you have the credentials of the two email addresses.

Extra parameters

If you want, you can also automatically delete the source emails that get transferred – Click on “Show/hide extra parameters” and you’ll see the new option “Move sync” appearing on the left side. This can be useful to avoid the 3GB limit that the tool currently has, on the free version.

Click sync to automatically transfer emails

Then you simply click the green button “Sync or resync”! Keep the window opened and check the console log to be sure that everything is going smoothly. If something breaks, do not worry, simply click again the green button and the process will continue as “Resync” suggests.

Besides automatically transfer emails, there’s more to Mailbox Imapsync Online

Sync between different email addresses

If you look closer to all options, you are not limited to transfer emails between the same email addresses.
So let’s say there’s a new employee in yourcompany called Lucy working in content marketing, her email is lucy.copy@yourcompany.org, the old content marketer was Lauren and her email was lauren.writter@yourcompany.org.
With Mailbox Imapsync Online, you can transfer all of those work related emails, about content marketing, to the new employee.

Just create folders

If you don’t want to transfer all the emails, but want to keep the same structure of another email address, you actually have a checkbox to “Just create folders” during the sync.

Did you know about this tool before? Was this helpful?

Let me know in the comments section below.

I remember searching for something free like this in the past and it wasn’t easy. Until an old hosting provider mentioned it to me, during support. They were more life savers then I care to admit, I hope for you too.

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

What is a variable?

Variables are very handy strings that, as the name suggests, can vary or change one day. They can be called from many places and in many ways to be used and reused (depending on the coding language).

What makes them handy is: When you need to change one, you only need to change its value in one place, the new value will then pass to every location where you called the variable, by its name.

What to avoid in a variable name?

Even if a variable suggests a change, I see many times developers using names such as $white in SCSS or var(–white) in CSS. This for me doesn’t make any sense… How am I supposed to change to a value other than white?

Even if we can change the colour value, and it visually applies as expected, the code will be illegible. It will be read “white” when it isn’t. For example, it doesn’t make sense to have a #cecece on a $white variable.

It stops being a real variable.

It would be much better to call it $light, so it could be changed to any light colour on future design system changes. You might think this would still limit to a certain type of colour, and you are right, but at least it can vary as the name suggests.

And we could always take this to another level, call it $secondary_colour or $colourTertiary, so we could use any colour, making it future-proof as long as it’s not confused with the main/primary one.

We will recap with more examples below…

Use a standard method on the names

Be consistent when giving a name, stick to one method on all your coding or, at least, depending on the code language.

On PHP, it is typical to use underscores on variables with two or more words, on JavaScript the camel case method is more typical and on CSS the hyphen.

But if you can stick with only one method on all coding languages, it’s even better, I would say.

My favourite nowadays is camel case, so something like this: $colourPrimary.

Make it scalable with a convention!

Another tip, but very optional, is to set a convention to make the variables more scalable.

For instance, start the name with the property type and only then the actual name in camel case. In this situation, you can even combine underscores with camel cases. Here’s what I mean:

• $colour_PrimaryLight.
• $size_Spacing2 (don’t use “margin” on the name, that way you can reuse that size on paddings and font-sizes).
• $size_font_TitleBig (create another “layer” to say that this specific size is to be used only for text).

This will avoid conflicts, mistakes and make certain variables easier to find when you have a lot of them.

Quick recap

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

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

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