{"id":1302,"date":"2020-09-15T11:09:00","date_gmt":"2020-09-15T04:09:00","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1302"},"modified":"2020-12-23T15:18:50","modified_gmt":"2020-12-23T08:18:50","slug":"shortcode-still-exists","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/shortcode-still-exists\/","title":{"rendered":"Is It Okay to Use Shortcode in Gutenberg? (100% Yes)"},"content":{"rendered":"\n<p>We are often blinded by these fancy Block editor that we forgot about shortcode. It&#8217;s very easy to implement and highly reusable. What&#8217;s not to like?<\/p>\n\n\n\n<p>In this article, we will discuss when is the right time to use Shortcode in Gutenberg editor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. You Need Complex HTML Markup<\/h2>\n\n\n\n<p>The job of Shortcode is mostly taken by <strong>Reusable Block<\/strong>. But that is only if the markup you need can be made with Gutenberg.<\/p>\n\n\n\n<p>Let&#8217;s say your client is a restaurant chain and has an &#8220;Outlet&#8221; custom post type with &#8220;City&#8221; taxonomy. You need to show outlets in specific cities.<\/p>\n\n\n\n<p>With shortcode, it&#8217;s very simple to do:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"313\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/03\/shortcode-block-sample.jpg\" alt=\"\" class=\"wp-image-1304\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/03\/shortcode-block-sample.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/03\/shortcode-block-sample-480x200.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>Using the [outlet] shortcode<\/figcaption><\/figure>\n\n\n\n<p>And the code to enable that shortcode is as shown below:<\/p>\n\n\n\n<pre title=\"functions.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">add_shortcode( 'outlet', 'shortcode_outlets' );\n\n\n<em>function<\/em>\u00a0shortcode_outlets(\u00a0$atts,\u00a0$content\u00a0=\u00a0null\u00a0)\u00a0{\n\u00a0\u00a0\/\/\u00a0set\u00a0default\u00a0attribute\n\u00a0\u00a0$atts\u00a0=\u00a0shortcode_atts([\n\u00a0\u00a0\u00a0\u00a0'city'\u00a0=>\u00a0''\n\u00a0\u00a0],\u00a0$atts);\n\n\u00a0\u00a0$outlets\u00a0=\u00a0get_posts([\n\u00a0\u00a0\u00a0\u00a0'post_type'\u00a0=>\u00a0'outlet',\n\u00a0\u00a0\u00a0\u00a0'posts_per_page'\u00a0=>\u00a0$atts['city']\u00a0?\u00a0'-1'\u00a0:\u00a0'6',\n\u00a0\u00a0\u00a0\u00a0'tax_query'\u00a0=>\u00a0$atts['city']\u00a0?\u00a0[[\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'taxonomy'\u00a0=>\u00a0'city',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'field'\u00a0=>\u00a0'slug',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'terms'\u00a0=>\u00a0$atts['city'],\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'operator'\u00a0=>\u00a0'IN'\n\u00a0\u00a0\u00a0\u00a0]]\u00a0:\u00a0[];\n\u00a0\u00a0]);\n\n\u00a0\u00a0\/\/\u00a0create\u00a0data\u00a0to\u00a0be\u00a0passed\u00a0on\u00a0to\u00a0template\n\u00a0\u00a0$args\u00a0=\u00a0[\n\u00a0\u00a0\u00a0\u00a0'outlets'\u00a0=>\u00a0$outlets\n\u00a0\u00a0];\n\n\u00a0\u00a0ob_start();\n\u00a0\u00a0get_template_part(\u00a0'shortcodes\/outlets',\u00a0'',\u00a0$args\u00a0);\n\u00a0\u00a0return\u00a0ob_get_clean();\n}<\/code><\/pre>\n\n\n\n<pre title=\"shortcodes\/outlets.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\n$html\u00a0=\u00a0'';\n\nforeach(\u00a0$args['outlets']\u00a0as\u00a0$o\u00a0)\u00a0{\n\u00a0\u00a0$thumbnail\u00a0=\u00a0get_the_post_thumbnail(\u00a0$o\u00a0);\n\u00a0\u00a0$title\u00a0=\u00a0$o->post_title;\n\u00a0\u00a0$link\u00a0=\u00a0get_permalink(\u00a0$o\u00a0);\n\u00a0\u00a0\n\u00a0\u00a0$html\u00a0.=\u00a0\"&lt;li>\u00a0&lt;a\u00a0href='{$link}'>\n\u00a0\u00a0\u00a0\u00a0{$thumbnail}\n\u00a0\u00a0\u00a0\u00a0&lt;h4>{$title}&lt;\/h4>\n\u00a0\u00a0&lt;\/a>\u00a0&lt;\/li>\";\n}\u00a0?>\n\n&lt;ul\u00a0class=\"outlet-list\">\n\u00a0\u00a0&lt;?php\u00a0echo\u00a0$html;\u00a0?>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. You Need it Quick<\/h2>\n\n\n\n<p>This is the <strong>primary reason<\/strong>. If you are developing a theme to sell, then it&#8217;s understandable to invest in the time for a <a rel=\"noreferrer noopener\" href=\"https:\/\/pixelstudio.id\/blog\/create-a-custom-block-manually\/\" target=\"_blank\">custom block<\/a>.<\/p>\n\n\n\n<p>But if it&#8217;s a custom theme for a specific client that you will only use in 1 or a few pages, just create a Shortcode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. The Content Rarely Changed<\/h2>\n\n\n\n<p>One common example is a Newsletter form.<\/p>\n\n\n\n<p>That form likely to stay intact for years to come. So there&#8217;s little benefit of having it as an editable block.<\/p>\n\n\n\n<p>Maybe you only change the introduction message, but that can be solved by <strong>mixing it up with other blocks<\/strong> like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"574\" src=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/12\/extend-core-shortcode.jpg\" alt=\"\" class=\"wp-image-1926\" srcset=\"https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/12\/extend-core-shortcode.jpg 750w, https:\/\/pixelstudio.id\/blog\/wp-content\/uploads\/2020\/12\/extend-core-shortcode-480x367.jpg 480w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption>Using shortcode in combination with other blocks<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. You Also Want to Use It In a Widget<\/h2>\n\n\n\n<p>Since you can&#8217;t put a block in a Widget (at least not yet), having a shortcode means not doing double work.<\/p>\n\n\n\n<p>For example the Newsletter shortcode we made above can easily be reused inside a widget.<\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Shortcode is still a great tool to have in your arsenal. From my experience, it&#8217;s simple enough for clients to understand. The worst thing that can happen is a typo which they will realize after checking how the site looks.<\/p>\n\n\n\n<p>If you want to avoid shortcode but want it quick, the ACF (Advanced Custom Fields) Pro plugin has a feature to create <a rel=\"noreferrer noopener\" aria-label=\"ACF Block (opens in a new tab)\" href=\"https:\/\/www.advancedcustomfields.com\/resources\/blocks\/\" target=\"_blank\">Custom Block<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>This article has been <strong>updated on Sep 15 2020<\/strong> because WP 5.5 added a better way to return a shortcode by using <code>get_template_parts()<\/code>.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>We are often blinded by these fancy Block editor that we forgot about shortcode. It&#8217;s very easy to implement and highly reusable. What&#8217;s not to like?<\/p>\n","protected":false},"author":1,"featured_media":1307,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22,31,23],"class_list":["post-1302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","tag-gutenberg","tag-php","tag-shortcode"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1302"}],"version-history":[{"count":5,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1302\/revisions"}],"predecessor-version":[{"id":1983,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1302\/revisions\/1983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1307"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}