{"id":1878,"date":"2021-09-29T20:01:35","date_gmt":"2021-09-29T19:01:35","guid":{"rendered":"https:\/\/marcosrego.com\/account\/?p=1878"},"modified":"2022-02-27T15:55:43","modified_gmt":"2022-02-27T15:55:43","slug":"solve-block-editor-toolkit","status":"publish","type":"post","link":"https:\/\/marcosrego.com\/account\/blog\/solve-block-editor-toolkit\/","title":{"rendered":"The block editor with a front-end toolkit is still advised in 2021"},"content":{"rendered":"\n<p class=\"\">A front-end toolkit might the best future-proof solution to get features currently lacking on the default site builder of WordPress. I&#8217;ll let you know why&#8230;<\/p>\n\n\n\n<!--more-- class=\" \">\n<!--noteaser-->\n\n\n\n<p class=\"\">The block editor (aka Gutenberg) is the default site builder of WordPress and it&#8217;s the most optimized and performative you can have on this CMS. But it&#8217;s still growing and currently lacking some features.<\/p>\n\n\n\n<p class=\"\">On this post, I&#8217;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.<\/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=\"#some_features_might_be_hidden_to_you\"><span class=\"toc_number toc_depth_1\">1<\/span> Some features might be hidden to you<\/a><\/li><li><a href=\"#you_should_not_use_plugins_to_extend_the_block_editor\"><span class=\"toc_number toc_depth_1\">2<\/span> You should not use plugins to extend the block editor<\/a><\/li><li><a href=\"#what_you_need_on_the_block_editor_for_now_is_a_middle_term_solution\"><span class=\"toc_number toc_depth_1\">3<\/span> What you need on the block editor for now is a middle term solution!<\/a><ul><li><a href=\"#using_a_front-end_toolkit\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Using a front-end toolkit<\/a><\/li><li><a href=\"#using_a_lightweight_framework\"><span class=\"toc_number toc_depth_2\">3.2<\/span> Using a lightweight framework<\/a><\/li><li><a href=\"#solutions_overview\"><span class=\"toc_number toc_depth_2\">3.3<\/span> Solutions overview<\/a><\/li><li><a href=\"#what_about_other_front-end_toolkits\"><span class=\"toc_number toc_depth_2\">3.4<\/span> What about other front-end toolkits?<\/a><\/li><\/ul><\/li><li><a href=\"#getting_8_of_the_lacking_features_on_the_block_editor\"><span class=\"toc_number toc_depth_1\">4<\/span> Getting 8 of the lacking features on the block editor<\/a><\/li><li><a href=\"#comments\"><span class=\"toc_number toc_depth_1\">5<\/span> Comments<\/a><\/li><\/ul><\/div>\n<h2 class=\"wp-block-heading\"><span id=\"some_features_might_be_hidden_to_you\"><strong>Some features might be hidden to you<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">Before I dive into the use of a front-end toolkit to add some of the lacking features, it&#8217;s best to make sure that they are actually lacking from the block editor.<\/p>\n\n\n\n<p class=\"\">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.<\/p>\n\n\n\n<p class=\"\"><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/\" rel=\"noreferrer noopener\">On this page of the WordPress documentation<\/a>, you can find some of the features that are available but need the theme or <a href=\"https:\/\/marcosrego.com\/account\/blog\/block-editor-features-theme\/\" data-type=\"post\" data-id=\"2106\">a plugin to declare support<\/a>.<\/p>\n\n\n\n<p class=\"\">If all the features you need are mentioned on that page, then <a href=\"https:\/\/marcosrego.com\/account\/blog\/block-editor-features-theme\/\" data-type=\"post\" data-id=\"2106\">declaring support is in fact the best option<\/a> (You can use <a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\" data-type=\"post\" data-id=\"403\">Mr.Dev.&#8217;s Framework<\/a> to do that). If they are not, then you might find a better solution by continue to read this post.<\/p>\n\n\n\n<figure class=\"  wp-block-gallery columns-1 is-cropped wp-block-gallery-4 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"437\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features-1024x437.jpg\" alt=\"-\" data-id=\"1949\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features.jpg\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1949\" class=\"wp-image-1949\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features-1024x437.jpg 1024w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features-300x128.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features-768x328.jpg 768w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-hidden-features.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">Some block editor features might be hidden, such as patterns, and individual paddings, font-sizes, line-height and gradients.<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"you_should_not_use_plugins_to_extend_the_block_editor\"><strong>You should not use plugins to extend the block editor<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">The easiest solution for the lacking features would be of course, to get them via a third-party plugin, <strong>but that doesn&#8217;t mean it&#8217;s the best or the most scalable option.<\/strong><\/p>\n\n\n\n<p class=\"\">Plugins such <a href=\"https:\/\/wordpress.org\/plugins\/editorplus\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/editorplus\/\" rel=\"noreferrer noopener\">Editor Plus by Extendify<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/kadence-blocks\/\" rel=\"noreferrer noopener\">Kadence Blocks<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/wordpress.org\/plugins\/lazy-blocks\/\" rel=\"noreferrer noopener\">Lazy Blocks<\/a> and <a href=\"https:\/\/www.advancedcustomfields.com\/resources\/blocks\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.advancedcustomfields.com\/resources\/blocks\/\" rel=\"noreferrer noopener\">ACF Blocks<\/a> are impressive for sure but a quick look at their changelogs and you&#8217;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.<\/p>\n\n\n\n<p class=\"\">That leaves a question with difficult answers:<br><strong>What will happen when those new features arrive to WordPress?<\/strong><br>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?<br>The latter is more likely and would force to have multiple ways to do the exact same things.<\/p>\n\n\n\n<figure class=\"   wp-block-gallery columns-1 is-cropped wp-block-gallery-6 is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><a href=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"1005\" height=\"763\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features.jpg\" alt=\"Block editor plugins repeated features\" data-id=\"1953\" data-full-url=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features.jpg\" data-link=\"https:\/\/marcosrego.com\/account\/?attachment_id=1953\" class=\"wp-image-1953\" srcset=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features.jpg 1005w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features-300x228.jpg 300w, https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/09\/block-editor-plugins-repeated-features-768x583.jpg 768w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" title=\"-\"><\/a><figcaption class=\"blocks-gallery-item__caption\">An example of the block editor adding a center alignment while an extra plugin adds a left alignment.<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p class=\"\">Doesn&#8217;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, <strong>decreasing your speed score<\/strong> that also affects SEO (Search Engine Optimization).<\/p>\n\n\n\n<p class=\"\">Another things to keep in mind are:<\/p>\n\n\n\n<ul class=\"\"><li>Some of those plugins also <strong>change the natural workflow of the editor<\/strong>: It&#8217;s difficult enough to force users to get used to a new way of working on their websites, imagine having multiple ways.<br>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.<\/li><li>Some of those plugins are <strong>based on old technologies and do requests to the server<\/strong>. The essence of the native blocks is the <strong>use of React and to do more on the client-side<\/strong>, that&#8217;s what makes the native blocks so well optimized compared to other site builders.<\/li><\/ul>\n\n\n\n<p class=\"\">Don&#8217;t you agree? Let me know in the comments section below.<\/p>\n\n\n\n<p class=\"\">If still you prefer to go with a plugin, choose one that lets you <strong>go back to the default values<\/strong> and\/or that <strong>helps you transition back,<\/strong> when you don&#8217;t want to rely on that plugin anymore.<\/p>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"what_you_need_on_the_block_editor_for_now_is_a_middle_term_solution\"><strong>What you need on the block editor for now is a middle term solution!<\/strong><\/span><\/h2>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"using_a_front-end_toolkit\"><strong>Using a front-end toolkit<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Get a lightweight and easy to use front-end toolkit, such as <strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mr-utils\/\">Mr.Utils<\/a><\/strong> (free). It includes classes that are friendly for everyone and can be added on each block &#8220;Advanced&#8221; section.<\/p>\n\n\n\n<p class=\"\">And if that&#8217;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!<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"using_a_lightweight_framework\"><strong>Using a lightweight framework<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Or get a lightweight framework such as <strong><a href=\"https:\/\/marcosrego.com\/account\/development\/mrdev-framework\/\">Mr.Dev.&#8217;s Framework<\/a><\/strong>, that focus on new features, discontinues the repeated ones <em>(that are already available on the CMS)<\/em> and even helps you on the transition to the CMS method\/feature.<\/p>\n\n\n\n<p class=\"\">The framework also has the option to use an interface on the block editor.<\/p>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"solutions_overview\"><strong>Solutions overview<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Mr.Utils front-end toolkit, Mr.Utils as a plugin and Mr.Dev&#8217;s Framework are much lighter compared to the plugins mentioned above and much easier to scale and transition to future methods.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-10\">\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"  wp-block-video\"><video controls muted poster=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils-marcosrego-opengraph.png\" preload=\"none\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrutils_desktop.mp4\" playsinline><\/video><figcaption>Video showing Mr.Utils classes and un-minified code for all breakpoints (on August 2021)<\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow\">\n<figure class=\"  wp-block-video\"><video controls muted poster=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdevframework-marcosrego-opengraph.png\" preload=\"none\" src=\"https:\/\/marcosrego.com\/account\/wp-content\/uploads\/2021\/06\/mrdev-framework_desktop.mp4\" playsinline><\/video><figcaption>Video showing the available options on Mr.Dev.&#8217;s Framework (on August 2021)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"  wp-block-heading\"><span id=\"what_about_other_front-end_toolkits\"><strong>What about other front-end toolkits?<\/strong><\/span><\/h3>\n\n\n\n<p class=\"\">Of course you can use other, specially if you already have another installed on your website.<br><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/getbootstrap.com\/\" rel=\"noreferrer noopener\">Bootstrap<\/a> probably comes to mind, but I feel my <a href=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/github.com\/marcosrego-web\/mr-utils\/wiki\/Utility-Classes\" rel=\"noreferrer noopener\">utility classes<\/a> are a bit more straightforward and more friendly to explain to non-tech users. They always work the same way <em>prefix-breakpoint-action<\/em>, such as <em>mr-phone-hide<\/em> or <em>mr-desktop-nomargin<\/em> <em>(mr-nomargin for actions on all breakpoints)<\/em>.<\/p>\n\n\n\n<p class=\"\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"getting_8_of_the_lacking_features_on_the_block_editor\"><strong>Getting 8 of the lacking features on the block editor<\/strong><\/span><\/h2>\n\n\n\n<p class=\"\">What Mr.Utils \/ Mr.Dev.&#8217;s Framework add to the block editor is a way to: <\/p>\n\n\n\n<ol class=\"  \"><li><strong>Change to a global font-size.<\/strong><\/li><li><strong>Change global color.<\/strong><\/li><li><strong>Remove margins and paddings of blocks.<\/strong><\/li><li><strong>Add global margins and paddings.<\/strong><\/li><li><strong>Change visibility of a block depending of the device.<\/strong><\/li><li><strong>Change how Columns blocks display on mobile<\/strong><\/li><li><strong>Change order of blocks depending of the device.<\/strong><\/li><li><strong>Horizontal scroll list of posts.<\/strong><\/li><\/ol>\n\n\n\n<p class=\"\"><a href=\"https:\/\/marcosrego.com\/account\/blog\/mr-utils-block-editor-features\/\" data-type=\"post\" data-id=\"1997\"><strong>Check the next post<\/strong><\/a> where I go deeper on how to do those <em>actions<\/em>.<\/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>A front-end toolkit might the best future-proof solution to get features currently lacking on the default site builder of WordPress. I&#8217;ll let you know why&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1946,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[19],"tags":[75,71,35,23],"_links":{"self":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1878"}],"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=1878"}],"version-history":[{"count":3,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1878\/revisions"}],"predecessor-version":[{"id":2279,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/posts\/1878\/revisions\/2279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media\/1946"}],"wp:attachment":[{"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/media?parent=1878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/categories?post=1878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcosrego.com\/account\/wp-json\/wp\/v2\/tags?post=1878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}