Easily use Mr.Utils front-end toolkit with the block editor interface without knowing code, the classes or the functions.

You can transform parent blocks (such as Columns or Groups) into components such as Search, Tabs, Swiper or Sliders (with pagination).

You can select what to do when mouse hovering a block (e.g. animations or a semi-opacity).

You can also apply changes to specific devices/breakpoints: Show/hide blocks depending of the device, remove default margins/paddings, apply a global margin/padding, change font-size depending of device and more.


  • Mr.Utils options are found inside the “Utilities” section (closed by default), to not obstruct or confuse with the editor’s default options.
  • All options are divided into categories.
  • All options opened (except for breakpoints).
  • Example of options that will apply when mouse hovering a block.
  • Example of options that will only apply on phone devices.
  • Using Mr.Dev.’s Framework allows to select which options will be available (reducing HTTP requests and file size).
  • Mr.Dev.’s Framework allows to create custom utilities to select on the block editor.


  1. Upload the plugin files to the /wp-content/plugins/mrutils directory, or install the plugin through the WordPress plugins screen directly.


Does the interface of Mr.Utils support all blocks?

Since version 0.2.0, that the interface of Mr.Utils works with all core blocks. For third-party blocks or if a specific block is not showing the “Utilities” section, you can still use the utility classes on the “Advanced” section > “Additional CSS class(es)”. If a block is not working for you because of Mr.Utils, please report the issue or contact me, do let me know which block you are using.

Where can I find more information about Mr.Utils?

You can find detailed information on the documentation at:
You can also find some tips & tricks on the blog:
General information can be found on:

How do I contact the developer?

You can contact me at:


There are no reviews for this plugin.

Contributors & Developers

“MR.Utils” is open source software. The following people have contributed to this plugin.


Translate “MR.Utils” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • Added “Border radius” options on the “Appearance” tab.
  • Tested on WP 6.4.3.


  • Update Mr.Utils adding mrBefore, mrAfter and mrWrap functions (not available on the block editor for now).
  • Tested on WP 6.4.2.


  • Added “Search” component.
  • Toolkit: “mr-datalist” class converts a HTML datalist into a search component, allowing styling.


  • Fixed method of getting a class from elements with “mr-activeonlick”, when adding it to the body.
  • Tested on WP 6.1.


  • Removes gaps on blocks using pagination.
  • Add exception to core/tag-cloud.
  • Reorder sections to be more friendly (Pagination closer to Layout).


  • Attention: If you are starting with this version you are ready to go. If you are updating from a previous version, spacing and size options might have to be reselected and classes on Advanced section might have to be cleared, due to some needed core changes. It is advised to test and make the needed changes on a staging/local environment, or to only update the plugin when you are ready to do so.
  • Dynamically add classes (instead of using blocks.getSaveContent.extraProps) for the interface to work with all core blocks, as suggested here.
  • Improve explanation on the differences between “items per line” and “columns”.
  • When using an automatic tabs navigation: Added fallback when the item does not contain child elements.
  • Fixed bug when changing number of columns or items per line on the ‘Desktop’ breakpoint.


  • Added spacing options to remove or add Gaps.
  • Small changes to the icons indicating use of components/pagination.
  • Toolkit: Possibility to change red, green, blue and alpha values as an alternative way to set background and text colors.
  • Toolkit: Different scroll behaviour when using scroll navigation (arrows).
  • Toolkit: Change the utility classes from Other to Appearance.
  • Toolkit: If no colors are set for offcanvas background/text/toogle fallback to default background and text colors.


  • Fix preview not working inside block templates and full site editor.
  • Fix indication of variable value when using breakpoints (when defined).
  • Fix size/font-size on breakpoints not working without a global size/font-size.
  • Change the way assets are enqueued following new block functions.
  • Toolkit: Added -webkit-animation on offcanvas for better compatibility.
  • Toolkit: Added optional properties to the “mrActiveInView” javascript function.
  • Fix contact link on plugin description.


  • Added some appearance options to the interface (Background Color and Color).
  • Fixed bug when using custom font-sizes.


  • Added “Swipe”, “Swipe content” and “Scroll Navigation” to the components section.
  • Auto columns option (Layout section).
  • Option for global value on columns and on items per line.
  • “Active when clicked” option on the “Dynamic” section (adds the class “mr-active”).
  • Slide animation now works for paragraphs and headings (not only for child elements).
  • Added font-family options (also compatible with custom utility classes added by Mr.Dev.’s Framework).
  • Improvements to horizontalscroll for better compatibility with blocks.
  • Toolkit: Improvements to offcanvas.
  • Toolkit: Added offset and offsetelement classes and variables.
  • Toolkit: Starting to add classes for appearance and height.


  • Compatibility with Custom Utility Classes added by Mr.Dev.’s Framework.
  • Change animation orientation (for the options Slide, Scale and Zoom) when using pagination arrows.
  • Fixed: Bug when changing back to any default option on breakpoints.
  • Fixed: Semi-opacity not visible on the backend when combined with Components and Pagination.
  • Toolkit: Improved offcanvas options to not rely on javascript.
  • Toolkit: Fixed missing overlay class when not using offcanvas.
  • Toolkit: Fixed SlideOut animation orientation.


  • First release