{"id":1997,"date":"2021-10-14T00:11:57","date_gmt":"2021-10-13T23:11:57","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=1997"},"modified":"2022-04-26T23:57:17","modified_gmt":"2022-04-26T22:57:17","slug":"mr-utils-block-editor-features","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/mr-utils-block-editor-features\/","title":{"rendered":"Mr.Utils enhances the block editor with 8 extra features"},"content":{"rendered":"\n<p class=\"\"> On this post, I&#8217;ll guide you on how to use my front-end toolkit <strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a><\/strong>, to scale and get features on the block editor of <a href=\"https:\/\/marcosrego.com\/account\/tag\/wordpress\/\" data-type=\"post_tag\" data-id=\"23\">WordPress<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"\">As explained on the <a href=\"https:\/\/marcosrego.com\/account\/blog\/solve-block-editor-toolkit\/\" data-type=\"post\" data-id=\"1878\">previous post<\/a>, a front-end toolkit might be the best future-proof and optimized solution to this site builder that is still growing.<\/p>\n\n\n\n<p class=\"\">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&#8217;s currently at the moment of writing, no way to change those properties globally. <strong>Mr.Utils<\/strong> gives you a way to do that.<\/p>\n\n\n\n<aside class=\"       wp-block-group sidebar has-main-text-color-color has-aside-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<section class=\"    wp-block-group has-main-text-color-color has-main-background-color-background-color has-text-color has-background is-layout-flow\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"   has-main-text-color-color has-text-color wp-block-heading\"><strong>Did you know?<\/strong><\/h3>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png\" alt=\"Mr.Utils Opengraph Image\" class=\"wp-image-1029\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<p class=\"  has-main-text-color-color has-text-color\"><strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a><\/strong> gives you a set of classes with a clear syntax, such as <em><strong>mr-phone-hide<\/strong><\/em> clearly saying to hide an element on a phone, <strong><em>mr-marginright<\/em><\/strong> to add a margin on the right side of an element and <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" target=\"_blank\">so much more<\/a><\/strong>&#8230;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex\">\n<div class=\"   wp-block-button\"><a class=\"wp-block-button__link has-invert-color-color has-link-color-background-color has-text-color has-background\" href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrutils\"><strong>Get it now (free)<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/section>\n<\/div><\/aside>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><ul class=\"toc_list\"><li><a href=\"#installing_mrutils_to_use_on_the_block_editor\"><span class=\"toc_number toc_depth_1\">1<\/span> Installing Mr.Utils to use on the block editor<\/a><ul><li><a href=\"#preview_mrutils_changes_on_the_block_editor_optional\"><span class=\"toc_number toc_depth_2\">1.1<\/span> Preview Mr.Utils changes on the block editor (Optional)<\/a><ul><li><a href=\"#preview_changes_using_mrdev8217s_framework\"><span class=\"toc_number toc_depth_3\">1.1.1<\/span> Preview changes using Mr.Dev.&#8217;s Framework<\/a><\/li><li><a href=\"#manually_configuration_of_the_preview\"><span class=\"toc_number toc_depth_3\">1.1.2<\/span> Manually configuration of the preview<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#how_to_use_mrutils_features_on_the_block_editor\"><span class=\"toc_number toc_depth_1\">2<\/span> How to use Mr.Utils features on the block editor<\/a><ul><li><a href=\"#global_font-sizes\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Global font-sizes<\/a><\/li><li><a href=\"#global_colors_mrdev8217s_framework\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Global colors (Mr.Dev.&#8217;s Framework)<\/a><\/li><li><a href=\"#remove_margins_and_paddings_of_blocks\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Remove margins and paddings of blocks<\/a><\/li><li><a href=\"#add_global_margins_and_paddings\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Add global margins and paddings<\/a><\/li><li><a href=\"#change_visibility_of_a_block_depending_of_the_device\"><span class=\"toc_number toc_depth_2\">2.5<\/span> Change visibility of a block depending of the device<\/a><\/li><li><a href=\"#change_how_columns_blocks_display_on_mobile\"><span class=\"toc_number toc_depth_2\">2.6<\/span> Change how Columns blocks display on mobile<\/a><\/li><li><a href=\"#change_the_order_of_blocks_depending_of_the_device\"><span class=\"toc_number toc_depth_2\">2.7<\/span> Change the order of blocks depending of the device<\/a><\/li><li><a href=\"#horizontal_scroll_list_of_posts\"><span class=\"toc_number toc_depth_2\">2.8<\/span> Horizontal scroll list of posts<\/a><\/li><\/ul><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">3<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"installing_mrutils_to_use_on_the_block_editor\"><strong>Installing Mr.Utils to use on the block editor<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">On  the<strong> <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki#installation\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a><\/strong> you&#8217;ll find a short and easy explanation on three methods to install <a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a>, by using Mr.Dev.&#8217;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.<\/p>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"preview_mrutils_changes_on_the_block_editor_optional\"><strong>Preview Mr.Utils changes on the block editor (Optional)<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">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.<\/p>\n\n\n\n<p class=\"\">If you did the installation as a plugin you don&#8217;t need to do anything else and you can skip to &#8220;<em><a href=\"#how_to_use_mrutils_features_on_the_block_editor\">How to use Mr.Utils features on the block editor<\/a><\/em>&#8220;.<\/p>\n\n\n\n<p class=\"\">Otherwise, you can configure it easily by using <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">Mr.Dev.&#8217;s Framework<\/a>, or manually if that&#8217;s your thing.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"  wp-block-heading\"><span id=\"preview_changes_using_mrdev8217s_framework\"><strong>Preview changes using Mr.Dev.&#8217;s Framework<\/strong><\/span><\/h4>\n\n\n\n<p class=\"\">On the plugin settings on the configuration tab, you will find the <em>CSS Utilities<\/em> section. Check the box <strong>Utils Backend<\/strong>, and you are ready to go.<\/p>\n\n\n\n<p class=\"\">If you want to use utilities on breakpoints, simply select the ones you want on the same group of checkboxes.<\/p>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"  wp-block-heading\"><span id=\"manually_configuration_of_the_preview\"><strong>Manually configuration of the preview<\/strong><\/span><\/h4>\n\n\n\n<p class=\"\">Add the below code into the functions.php file or into a custom plugin.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'admin_enqueue_scripts', 'mrutils_admin_styles' );\nfunction mrutils_admin_styles() {\n    wp_enqueue_style( 'mrutils_admin', 'https:\/\/raw.githubusercontent.com\/marcosrego-web\/mr-utils\/master\/css\/utils.css', false, '1.0.0' );\n    wp_enqueue_style( 'mrutils_admin_backend', 'https:\/\/raw.githubusercontent.com\/marcosrego-web\/mr-utils\/master\/css\/utils_backend.css', false, '1.0.0' );\n}<\/code><\/pre>\n\n\n\n<p class=\"\">If you want to add breakpoints you need to add more &#8220;wp_enqueue_style&#8221; to the above, between the first and last one, this time also indicating the intended media query, like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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)' );<\/code><\/pre>\n\n\n\n<p class=\"\">If you want to avoid external requests:<\/p>\n\n\n\n<ol class=\"  \"><li><a href=\"https:\/\/marcosrego.com\/account\/client-area\/downloads\/?product=mrutils\">Download Mr.Utils <em>(free)<\/em><\/a> <\/li><li>Unzip into your website. <\/li><li>Replace the link on the code above, with the location where you unzipped the folder.<\/li><\/ol>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"how_to_use_mrutils_features_on_the_block_editor\"><strong>How to use Mr.Utils features on the block editor<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">If you installed Mr.Utils as a plugin, you&#8217;ll now see the option &#8220;Utilities&#8221; when selecting a block. By using that interface you don&#8217;t need to know the methods explained below.<\/p>\n\n\n\n<figure class=\"    wp-block-gallery aligncenter has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex\">\n<figure class=\"     wp-block-image size-full\"><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/banner-772x250-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"772\" height=\"250\" data-id=\"2289\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/banner-772x250-1.png\" alt=\"Mr.Utils options on WordPress block editor\" class=\"wp-image-2289\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/banner-772x250-1.png 772w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/banner-772x250-1-300x97.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/10\/banner-772x250-1-768x249.png 768w\" sizes=\"(max-width: 772px) 100vw, 772px\" title=\"-\"><\/a><figcaption>Mr.Utils options on WordPress block editor<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p class=\"\">If you didn&#8217;t install Mr.Utils as a plugin, most of the methods shown below, will work by adding specific classes into <strong>Advanced > Additional CSS Class(es)<\/strong> on any block:<\/p>\n\n\n\n<figure class=\"    wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-with-frontedn-toolkit-1024x538.png\" alt=\"Block editor with frontend toolkit\" class=\"wp-image-1946\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-with-frontedn-toolkit-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-with-frontedn-toolkit-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-with-frontedn-toolkit-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-with-frontedn-toolkit.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"global_font-sizes\"><strong>Global font-sizes<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">With Mr.Utils you have <strong>7 global font-sizes<\/strong> and it&#8217;s <strong>possible to change<\/strong> their values.<\/p>\n\n\n\n<p class=\"\">For example, add the class <strong>mr-fontsize5<\/strong> into <strong>Advanced &gt; Additional CSS Class(es)<\/strong> on any block that has text and see it changing sizes.<\/p>\n\n\n\n<p class=\"\">You can also use different sizes depending of the device\/breakpoint joining multiple classes, for example:<br><strong>mr-fontsize5 mr-phone-fontsize4<\/strong><br><strong>mr-desktop-fontsize7 mr-tablet-fontsize5 mr-phone-fontsize6<\/strong><\/p>\n\n\n\n<p class=\"\">If you want to change the values for the 7 sizes, you can <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Variables#how-to-do\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Variables#how-to-do\" rel=\"noreferrer noopener\"><strong>check the documentation explaining how to change variables<\/strong><\/a>. It explains how to do it manually or using the Mr.Dev.&#8217;s Framework.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"global_colors_mrdev8217s_framework\"><strong>Global colors<\/strong> (Mr.Dev.&#8217;s Framework)<\/span><\/h3>\n\n\n\n<p class=\"\">For this one feature, Mr.Utils is currently not enough, you&#8217;ll want to use Mr.Dev.&#8217;s Framework to define which will be the global colors that appear on the block editor.<\/p>\n\n\n\n<p class=\"\">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.<\/p>\n\n\n\n<figure class=\"  wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex\">\n<figure class=\"     wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"693\" data-id=\"958\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-1024x693.jpg\" alt=\"Mr.Dev.&#039;s Framework - Styles\" class=\"wp-image-958\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-1024x693.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-300x203.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles-768x520.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_styles.jpg 1342w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><figcaption>Use the plugin settings, or optionally use the customizer and block editor, to add global colors, typography, sizes and breakpoints.<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"remove_margins_and_paddings_of_blocks\"><strong>Remove margins and paddings of blocks<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">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&#8217;s much easier to add a class instead of changing via CSS.<\/p>\n\n\n\n<p class=\"\">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 <strong>Advanced &gt; Additional CSS Class(es<\/strong>):<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>mr-nomargin<\/td><td>mr-nopadding<\/td><\/tr><tr><td>mr-nomargintop<\/td><td>mr-nopaddingtop<\/td><\/tr><tr><td> mr-nomarginright<\/td><td> mr-nopaddingright<\/td><\/tr><tr><td> mr-nomarginbottom<\/td><td> mr-nopaddingbottom<\/td><\/tr><tr><td> mr-nomarginleft<\/td><td> mr-nopaddingleft<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"\">And you can also remove the margin\/padding only on specific devices\/breakpoints, for example:<\/p>\n\n\n\n<p class=\"\"><strong>mr-desktop-nomargin<br>mr-phone-nopaddingright<\/strong><\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"add_global_margins_and_paddings\"><strong>Add global margins and paddings<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Mr.Utils brings the classes <strong>mr-margin<\/strong> and <strong>mr-padding<\/strong>, that can also point to specific sides of the block:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>mr-margin<\/td><td>mr-padding<\/td><\/tr><tr><td>mr-margintop<\/td><td>mr-paddingtop<\/td><\/tr><tr><td> mr-marginright<\/td><td> mr-paddingright<\/td><\/tr><tr><td> mr-marginbottom<\/td><td> mr-paddingbottom<\/td><\/tr><tr><td> mr-marginleft<\/td><td> mr-paddingleft<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"\">And you can also use the margin\/padding only on specific devices\/breakpoints, for example:<\/p>\n\n\n\n<p class=\"\"><strong>mr-desktop-margin<br>mr-phone-paddingright<\/strong><\/p>\n\n\n\n<p class=\"\">If you want to change the values for the global margins and paddings, you can <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Variables#how-to-do\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Variables#how-to-do\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>check the documentation explaining how to change variables<\/strong><\/a>. It explains how to do it manually <strong>or using the Mr.Dev.&#8217;s Framework<\/strong>.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"change_visibility_of_a_block_depending_of_the_device\"><strong>Change visibility of a block depending of the device<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">To show or hide a block, you can use the classes <strong>mr-show<\/strong> and <strong>mr-hide<\/strong> respectively.<\/p>\n\n\n\n<p class=\"\">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:<\/p>\n\n\n\n<figure class=\"  wp-block-table is-style-regular\"><table><tbody><tr><td class=\"has-text-align-left\" data-align=\"left\">Show on phone only:<\/td><td><strong>mr-hide mr-phone-show<\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Hide on phone:<\/td><td><strong>mr-phone-hide<\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Show on portrait devices:<\/td><td><strong>mr-landscape-hide<\/strong><\/td><\/tr><tr><td class=\"has-text-align-left\" data-align=\"left\">Hide on desktop and laptop:<\/td><td><strong>mr-desktop-hide mr-laptop-hide<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"    wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/websites\/itemzero\/\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-1024x538.png\" alt=\"Itemzero Open Graph Image\" class=\"wp-image-1012\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/marcosrego-itemzero-open-graph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption> The <a href=\"https:\/\/marcosrego.com\/account\/websites\/itemzero\/\" data-type=\"post\" data-id=\"1\">Itemzero Shop<\/a> has some good examples of showing content depending of the device\/breakpoint using <a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a>. <\/figcaption><\/figure>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"change_how_columns_blocks_display_on_mobile\"><strong>Change how Columns blocks display on mobile<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">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.<\/p>\n\n\n\n<p class=\"\">But if you only have images or you don&#8217;t have a lot of text in the columns, it could look better with 2 columns on each line.<\/p>\n\n\n\n<p class=\"\">You can do that with Mr.Utils, you can add classes such as <strong>mr-phone-2perline<\/strong> into <strong>Advanced &gt; Additional Class(es)<\/strong>.<\/p>\n\n\n\n<p class=\"\">If you installed the toolkit as a plugin it&#8217;s even more friendly: Click on &#8220;Utilities&#8221;, on the phone icon and then on layout you choose 2 as the number of items per line.<\/p>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"change_the_order_of_blocks_depending_of_the_device\"><strong>Change the order of blocks depending of the device<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">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&#8217;ll need something more:<\/p>\n\n\n\n<ol class=\"  \"><li><strong>Select all the blocks that will be reordered<\/strong> and then select the option &#8220;<strong>Group<\/strong>&#8220;.<\/li><li>On the <strong>Group Block<\/strong> go to <strong>Advanced &gt; Additional CSS Class(es)<\/strong> and add the class <strong>mr-1perline<\/strong> (You can replace 1 with any number between 0 [infinite] and 12, this would be similar to using columns).<\/li><li>Then select the first block you want to reorder and on <strong>Advanced &gt; Additional CSS Class(es)<\/strong> section, add the class <strong>mr-<em>breakpoint<\/em>-order<\/strong> followed by a number between -1 and 12 and replacing <em>breakpoint<\/em> with the device name (desktop, laptop, tablet, phone or another custom breakpoint that exists). Example: <strong>mr-phone-order2<\/strong>. Do the same for each block inside the group (Repeated numbers are allowed).<\/li><\/ol>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"horizontal_scroll_list_of_posts\"><strong>Horizontal scroll list of posts<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Using the block &#8220;Latest Posts&#8221;, or any other block that works as a list, you can add the class <strong>mr-swipecontent<\/strong> or <strong>mr-horizontalscrollcontent<\/strong> into <strong style=\"color: var(--main-text-color) ; font-family: var(--text-font, &quot;Arial,Helvetica Neue,Helvetica&quot;); font-size: revert; background-color: var(--main-background-color, #dfdfd0);\">Advanced &gt; Additional CSS Class(es)<\/strong>, to make that list flow horizontally and become scrollable when the amount of items is big.<\/p>\n\n\n\n<figure class=\"    wp-block-image size-large\"><a href=\"https:\/\/marcosrego.com\/account\/websites\/ressanogarcia\/\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"538\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-1024x538.png\" alt=\"Ressano Garcia Arquitectos Open Graph Image\" class=\"wp-image-1813\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-1024x538.png 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-300x158.png 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph-768x403.png 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/04\/ressanogarciaarquitectos-marcosrego-site-opengraph.png 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption>The website <strong><a href=\"https:\/\/marcosrego.com\/account\/websites\/ressanogarcia\/\">Ressano Garcia Arquitectos<\/a><\/strong> is a good example of horizontal scrolling lists of posts using <a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">Mr.Utils<\/a>.<\/figcaption><\/figure>\n\n\n\n<div style=\"height:15px\" aria-hidden=\"true\" class=\"  wp-block-spacer\"><\/div>\n\n\n\n<p class=\"\"><strong>Those are the 8 features I wanted to share with you!<\/strong> I&#8217;ll update this post If I add more into <a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\" data-type=\"post\" data-id=\"473\">this front-end toolkit<\/a>.<\/p>\n\n\n\n<h2><span id=\"comments\"><b>Comments<\/b><\/span><\/h2>\n<div id=\"disqus_thread\"><\/div>\n<script>\nif(mrGetCookie('cookielawinfo-checkbox-functional') == 'yes') {\n    var disqus_config = function () {\n        this.page.url = (location.protocol+'\/\/'+location.host+location.pathname).replace(\"\/account\/\", \"\/\");\n        this.page.identifier = document.querySelector(\"article\").id.replace(\"post-\", \"\");\n    };\n    \n    (function() {\n    var d = document, s = d.createElement('script');\n    s.src = 'https:\/\/marcosrego-web.disqus.com\/embed.js';\n    s.setAttribute('data-timestamp', +new Date());\n    (d.head || d.body).appendChild(s);\n    })();\n} else {\n    document.querySelector('#disqus_thread').innerHTML = 'You cannot view or add comments because you did not consent to the use of functional cookies: <a class=\"  cli_manage_current_consent\" style=\"cursor:pointer;\">Manage your consent.<\/a>';\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>On this post, I&#8217;ll guide you on how to use my front-end toolkit Mr.Utils, to scale and get features on the block editor of WordPress.<\/p>\n","protected":false},"author":1,"featured_media":2051,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[75,70,71,35,65,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1997"}],"collection":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/comments?post=1997"}],"version-history":[{"count":8,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1997\/revisions"}],"predecessor-version":[{"id":2622,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1997\/revisions\/2622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/2051"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=1997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=1997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=1997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}