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

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

Get mouseover options on the block editor

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

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

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

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

Animations

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

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

Live example using Zoom animation

This paragraph block animates on mouseover!

Layout change

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

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

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

Live example of size change

Display changes

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

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

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

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

Live example of visibility change

Spacing changes

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

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

Live example of paddings change

Text size change

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

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

Live example of font-size change

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

Misc. Changes

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

Showing a scrollbar only when mouse hovering an element

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

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

Comments

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

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

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

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

Preparing a file for a WordPress code snippet

Prepare it using Mr.Dev.’s Framework

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

Prepare it using a custom PHP file

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

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

Block patterns code snippet

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

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

Understanding the code (optional)

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

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

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

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

Create the block pattern with the editor

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

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

Add more block patterns

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

Extra: Remove core block patterns from WordPress

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

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

remove_theme_support( 'core-block-patterns' );

Will block patterns be on the interface?

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

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

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

Comments

I include emails on hosting maintenance

One of the things I provide on the hosting maintenance (for clients with websites I developed) is a basic email service.

I manage the service of a third-party company, so you don’t have to (You can know everything that is included on the service on the Maintenance page of the client area).

Emails can be accessed via webmail or email clients (such as Thunderbird, Outlook, etc).

Webmail vs Email clients

You can use email clients to create folders, filter emails, create signatures and other common email tasks, but many of those features will only be visible on that client on that device.

Spam filters on email clients, for example, might filter the emails you see but not filter directly on the server.

Webmail, on the other hand, provides direct access to the emails hosted on the server.

Filters, auto responders (aka out of offices) that you create on webmail, will be available on any client or device that you use.

On this post, I’ll show how you can do the most common email tasks using the webmail service I provide via the third-party company Hostinger.

How to use webmail for common email tasks

First, let’s log in, go to mail.hostinger.com and use the credentials of your account.

If you don’t remember the credentials, click on “Forgot password”. If still you can’t log in, and I’m the one managing the hosting service for you, feel free to contact me. I can reset the password for you, create new addresses, or do some troubleshooting.

Email filters

Email filters allow you to automatically organize your emails depending on whose sending, depending on the email subject and of the content.

Spam filters

Let’s say you are receiving emails that should be spam, from a domain you don’t trust or simply don’t want to receive their emails.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below. The key part of this filter is the action, set to move messages with specific rules to the “Junk” folder.

Filters for urgent or important emails

Let’s say some of your colleagues, sharing the same domain as you, usually send you important emails but sometimes with many links or without subject. Those emails might be considered spam by mistake. You can create a filter that will force emails from the same domain as you to always be sent to the “Inbox” folder.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below.

Or let’s say you are waiting for an important email from a certain domain, you can also move those messages automatically to a custom folder (to create folders go to Settings > Folders).

Redirect emails to a preferred address

Also, using filters, you can redirect certain messages or all of them to a specific address.

Go to Settings > Filters, click on “Create” and check the suggestions on the image below.

The key option is setting the action to “Redirect message to”.

This can be very useful if you have multiple or parked domains (such as .pt and .com) and you only want to manage your messages from one address.

Auto responders (out of office)

Currently, the webmail of Hostinger does not permit to send auto responders. You have two options:

1- Auto responders via the hosting panel

On the hosting panel of Hostinger you can create your auto responders, but not everyone can have access to that panel.

If you don’t have access, being my client you can contact me, to request the creation of the auto-responder for free or to upgrade your maintenance with a professional email service for an extra cost.

If you already have access, check the image below to understand where and how to set your autoresponders:

2- Alternative is sending the email to someone who’s available

Just like creating email filters, you can create a filter to send all messages to a colleague or friend who’s available to answer.

Check the image below, the trick is setting the scope of the filter to “All messages”:

Email signatures

If you want to create an email signature directly on the webmail, you can do it.

Go to Settings > Identities and write your signature on the text area. Click on the icon on the editor to allow HTML and the visual editor, to easily add images, indents, lines and more.

If you want to do something prettier, you can get a signature code and click on the <> icon to add HTML. Contact me if you want a custom-made one 😉

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