{"id":2518,"date":"2021-08-25T10:43:17","date_gmt":"2021-08-25T10:43:17","guid":{"rendered":"https:\/\/learncode.tinjurewp.com\/?p=2518"},"modified":"2021-09-12T10:06:38","modified_gmt":"2021-09-12T10:06:38","slug":"adding-custom-blocks-patterns-to-labre-blocks","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/adding-custom-blocks-patterns-to-labre-blocks\/","title":{"rendered":"Adding Custom Blocks Patterns to Labre Blocks"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post is <strong>part 2<\/strong> of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly.<\/p>\n<p>In the previous <a href=\"https:\/\/learncode.tinjurewp.com\/customizing-quadrat-a-blockbase-child-theme\/\">learning post<\/a>, I partially customized <a href=\"https:\/\/wordpress.org\/themes\/quadrat\/\" target=\"_blank\" rel=\"noopener\">Quadrat<\/a> child theme for my own personal project site, by modifying the most basic fonts, typography, link color control. Other modifications are still <em>work-in-progress<\/em>.<!--more--><\/p>\n<p>The <a href=\"https:\/\/wordpress.org\/themes\/quadrat\/\" target=\"_blank\" rel=\"noopener\">Quadrat<\/a> blocks theme comes with <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noopener\">patterns<\/a> primarily related to podcasts. Because, I have modified the Quadrat block to use as blog, I wanted to create my own customized patterns that more general and suitable for blog post contents. WordPress block patterns were introduced with the <a href=\"https:\/\/make.wordpress.org\/core\/2020\/07\/16\/block-patterns-in-wordpress-5-5\/\" target=\"_blank\" rel=\"noopener\">WordPress 5.8 release<\/a>.<\/p>\n<blockquote><p>New block patterns make it simple to create complex, beautiful page and post layouts, using combinations of blocks that you can mix and match. You will also find block patterns in a wide variety of plugins and themes, with more added all the time. <cite>WordPress 5.5 release<\/cite><\/p><\/blockquote>\n<p>I have been a big fan of <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noopener\">block patterns<\/a>, like many other developers. I fully agree that patterns are going to change the way we display and present our contents. For many creative designers, patterns provide an appropriate avenue to show their <a href=\"https:\/\/wordpress.org\/news\/2021\/03\/so-you-want-to-make-block-patterns\/\" target=\"_blank\" rel=\"noopener\">creativity<\/a>.<\/p>\n<div class=\"article-series\"><strong>Learning Goals<\/strong><br \/>\nPart<strong> 1<\/strong>: <a href=\"https:\/\/learncode.tinjurewp.com\/customizing-quadrat-a-blockbase-child-theme\/\" target=\"_blank\" rel=\"noopener\">Modifying Fonts &amp; Basic Typography<\/a><br \/>\n<strong>Part 2<\/strong>: Adding Custom Block Patterns (<strong>this post<\/strong>)<br \/>\nPart<strong> 3<\/strong>: Creating a RSS Blog Feed page using RSS Block<\/div>\n<p>The objective of this learning post is start exploring block patterns, learn to register and create customized patterns, and replace the Quadrat bundled patterns with my own customized patterns.<\/p>\n<h6><strong>Resources on Creating Patterns<\/strong><\/h6>\n<p>Before starting to create my own block patterns, I did a brief google search for useful guide and tutorials on creating patterns and found the following useful for my project.<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/fullsiteediting.com\/lessons\/introduction-to-block-patterns\/\" target=\"_blank\" rel=\"noopener\">Introduction to block patterns<\/a><\/strong>. In this article, Carolina describes what patterns are and a step-by-step procedure to create patterns with ready to use code snippets.<\/li>\n<li><a href=\"https:\/\/ithemes.com\/wordpress-block-patterns-ultimate-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Patterns<\/strong><\/a>: The Ultimate Guide. In this guide, <em>Kristen Wright<\/em> goes into detail describing patterns with step-by-step guide to create customized block patterns.<\/li>\n<li><a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\"><strong>Patterns<\/strong><\/a>. This WordPress official documentation of patterns describes the basic elements of registering customized block patterns and their properties.<\/li>\n<\/ul>\n<p>Block patterns can be created using <em>WordPress block pattern API<\/em> either as a <strong>custom plugin<\/strong> or bundled with a theme&#8217;s <strong><code>functions.php<\/code><\/strong> file.<\/p>\n<h4>An Overview of Block Patterns<\/h4>\n<p>Before creating our custom block patterns, let&#8217;s first briefly overview b<em>lock Pattern API<\/em>, <em>block pattern registration<\/em>, <em>block pattern properties<\/em>.<\/p>\n<h6><strong>Block Pattern API<\/strong><\/h6>\n<p>A custom block pattern <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#register_block_pattern\" target=\"_blank\" rel=\"noopener\">needs to be registered<\/a> using the\u00a0<code>register_block_pattern<\/code> function, which receives two arguments &#8211; <code>title<\/code> (name of the patterns), and <code>properties<\/code> ( an array describing properties of the pattern)<\/p>\n<h6>Block Pattern Registration<\/h6>\n<p>An example of registering a simple <em>hello world<\/em> paragraph pattern from this <a href=\"https:\/\/themeshaper.com\/2020\/04\/08\/adding-block-patterns-to-your-theme\/\" target=\"_blank\" rel=\"noopener\">Theme Shaper post<\/a>.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">register_block_pattern(\n    &#039;my-plugin\/hello-world&#039;,\n    array(\n        &#039;title&#039;       =&gt; __( &#039;Hello World&#039;, &#039;my-plugin&#039; ),\n        &#039;description&#039; =&gt; _x( &#039;Simple Paragraph.&#039;, &#039;Pattern description&#039;, &#039;my-plugin&#039; ),\n        &#039;categories&#039;  =&gt; An array of categories,\n        &#039;content&#039;     =&gt; &quot;&lt;!-- wp:paragraph --&gt;\\n&lt;p&gt;Hello World&lt;\/p&gt;\\n\n                          &lt;!-- \/wp:paragraph --&gt;&quot;,\n    )\n);<\/code><\/pre>\n<p>After registration, the <code>register_block_pattern()<\/code> function should be called from a handler attached to the <code>init<\/code> hook.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">function my_plugin_register_my_patterns() {\n  register_block_pattern( ... );\n}\n \nadd_action( &#039;init&#039;, &#039;my_plugin_register_my_patterns&#039; );<\/code><\/pre>\n<p>Once block patterns are registered they are visible in the block editor.<\/p>\n<p>More detailed documentation is found in this <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#register_block_pattern\" target=\"_blank\" rel=\"noopener\">Block Pattern Registration.<\/a><\/p>\n<h6>Block Pattern Properties<\/h6>\n<p>The <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noopener\">block editor handbook<\/a> lists the following <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#register_block_pattern\" target=\"_blank\" rel=\"noopener\">pattern properties<\/a>:<\/p>\n<ul>\n<li><code>title<\/code> (required): A human-readable title for the pattern.<\/li>\n<li><code>content<\/code> (required): Block HTML Markup for the pattern.<\/li>\n<li><code>description<\/code> (optional): A visually hidden text used to describe the pattern in the inserter. A description is optional but it is strongly encouraged when the title does not fully describe what the pattern does. The description will help users discover the pattern while searching.<\/li>\n<li><code>categories<\/code> (optional): An array of registered pattern categories used to group block patterns. Block patterns can be shown on multiple categories. A category must be registered separately in order to be used here.<\/li>\n<li><code>keywords<\/code> (optional): An array of aliases or keywords that help users discover the pattern while searching.<\/li>\n<li><code>viewportWidth<\/code> (optional): An integer specifying the intended width of the pattern to allow for a scaled preview of the pattern in the inserter.<\/li>\n<\/ul>\n<p>As indicated above, the <strong><code>title<\/code><\/strong> and <strong><code>content<\/code><\/strong> are required properties while others <em>properties<\/em> are optional.<\/p>\n<h6>Unregistering Block Patterns<\/h6>\n<p>Any previously registered block pattern(s) can also be <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#unregistering-block-patterns\" target=\"_blank\" rel=\"noopener\">unregistered<\/a> from themes and plugins with only one argument &#8211; title: the name of the block pattern to be unregistered, as shown in the following <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#unregistering-block-patterns\" target=\"_blank\" rel=\"noopener\">block pattern documentation example<\/a> below:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">unregister_block_pattern( &#039;hello world\/my-plugin&#039; );<\/code><\/pre>\n<p>Just like in the pattern registration, the <code>unregister_block_pattern()<\/code> should be called from a handler attached to the <code>init<\/code> hook.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">function my_plugin_unregister_my_patterns() {\n  unregister_block_pattern( ... );\n}\n \nadd_action( &#039;init&#039;, &#039;my_plugin_unregister_my_patterns&#039; );<\/code><\/pre>\n<p>Now let&#8217;s briefly look at how block patterns are used in the two WordPress default themes &#8211; <a href=\"https:\/\/github.com\/WordPress\/twentytwentyone\/blob\/trunk\/inc\/block-patterns.php\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-one<\/a> and Twenty Twenty v1.8. (<a href=\"https:\/\/core.trac.wordpress.org\/ticket\/51098\" target=\"_blank\" rel=\"noopener\">gitHub trac discussion here<\/a>). When Twenty Twenty theme was released, blocks patterns were not available but added later and now available in the latest (v1.8) update.<\/p>\n<h4>How to create a Custom Block Pattern?<\/h4>\n<p>Kristen Wright <a href=\"https:\/\/ithemes.com\/wordpress-block-patterns-ultimate-guide\/\" target=\"_blank\" rel=\"noopener\">in ithemes<\/a> and Carolina <a href=\"https:\/\/fullsiteediting.com\/lessons\/introduction-to-block-patterns\/\" target=\"_blank\" rel=\"noopener\">in Full Site Editing<\/a> describe <em>step-by-step<\/em> guide on how to create custom patterns using plugin method. The following steps adapted from Kristen&#8217;s article:<\/p>\n<ul>\n<li><strong>Step 1: Create a draft post<\/strong>. The first step is creating a new draft post with block editor, just like creating a new post.<\/li>\n<li><strong>Step 2: Add your preferred blocks<\/strong>. Then star adding preferred blocks. For example, text and quote in two column, cover image with two column text (eg. Kristen&#8217;s plugin example), two-column text with offset heading (used in <a href=\"https:\/\/wordpress.org\/patterns\/pattern\/two-columns-of-text-with-offset-heading\/\" target=\"_blank\" rel=\"noopener\">this example<\/a>), and any other pattern.<\/li>\n<li><strong>Step 3: For styling add CSS classes<\/strong>. For styling pattern, <a href=\"https:\/\/wordpress.com\/support\/adding-additional-css-classes-to-blocks\/\" target=\"_blank\" rel=\"noopener\">additional CSS classes can be added to blocks<\/a>.<\/li>\n<li><strong>Step 4: Select and copy your block codes<\/strong>. Next we should grab the source code, first select the desired blocks from the draft post and <em>click over on the \u201cMore Options\u201d button (it\u2019s three vertical dots) near the top of your editor<\/em> and <strong><em>copy<\/em><\/strong> the source code and paste in a code editor (eg. VSCode).<\/li>\n<li><strong>Step 5: Escape the HTML Output<\/strong>. Because the HTML output needs to be escaped which can run through a online tool (for example, <a href=\"https:\/\/codebeautify.org\/json-escape-unescape\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"undefined (opens in a new tab)\">JSON Escape\/Unescape tool<\/a>). Escaped code can be obtained by <em>clicking the Escape button<\/em>. Then <em>copy the Result String code<\/em> provided in the second box.<\/li>\n<li><strong>Step 6: Add the content to plugin<\/strong>. The escaped content can be copied in the plugin&#8217;s <code>content<\/code> section (example below).<\/li>\n<\/ul>\n<p>More detailed description with screenshot example is available in this Kristen Wright&#8217;s article &#8211; <a href=\"https:\/\/ithemes.com\/wordpress-block-patterns-ultimate-guide\/\" target=\"_blank\" rel=\"noopener\">WordPress Block Patterns: The Ultimate Guide<\/a>.<\/p>\n<p>The following code example of a <em>quote pattern example plugin<\/em> <a href=\"https:\/\/wordpress.org\/news\/2021\/03\/so-you-want-to-make-block-patterns\/\" target=\"_blank\" rel=\"noopener\">from WordPress blog<\/a>.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">\/* source:https:\/\/wordpress.org\/news\/2021\/03\/so-you-want-to-make-block-patterns\/ *\/\n&lt;?php \n\/*\nPlugin Name: Quote Pattern Example Plugin\n*\/\n\nregister_block_pattern(\n\t&#039;my-plugin\/my-quote-pattern&#039;,\n\tarray(\n\t\t&#039;title&#039;       =&gt; __( &#039;Quote with Avatar&#039;, &#039;my-plugin&#039; ),\n\t\t&#039;categories&#039;  =&gt; array( &#039;text&#039; ),\n\t\t&#039;description&#039; =&gt; _x( &#039;A big quote with an avatar&quot;.&#039;, &#039;Block pattern description&#039;, &#039;my-plugin&#039; ),\n\t\t&#039;content&#039;     =&gt; &#039;&lt;!-- wp:group --&gt;&lt;div class=&quot;wp-block-group&quot;&gt;&lt;div class=&quot;wp-block-group__inner-container&quot;&gt;&lt;!-- wp:separator {&quot;className&quot;:&quot;is-style-default&quot;} --&gt;&lt;hr class=&quot;wp-block-separator is-style-default&quot;\/&gt;&lt;!-- \/wp:separator --&gt;&lt;!-- wp:image {&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:553,&quot;width&quot;:150,&quot;height&quot;:150,&quot;sizeSlug&quot;:&quot;large&quot;,&quot;linkDestination&quot;:&quot;none&quot;,&quot;className&quot;:&quot;is-style-rounded&quot;} --&gt;&lt;div class=&quot;wp-block-image is-style-rounded&quot;&gt;&lt;figure class=&quot;aligncenter size-large is-resized&quot;&gt;&lt;img src=&quot;https:\/\/blockpatterndesigns.mystagingwebsite.com\/wp-content\/uploads\/2021\/02\/StockSnap_HQR8BJFZID-1.jpg&quot; alt=&quot;&quot; class=&quot;wp-image-553&quot; width=&quot;150&quot; height=&quot;150&quot;\/&gt;&lt;\/figure&gt;&lt;\/div&gt;&lt;!-- \/wp:image --&gt;&lt;!-- wp:quote {&quot;align&quot;:&quot;center&quot;,&quot;className&quot;:&quot;is-style-large&quot;} --&gt;&lt;blockquote class=&quot;wp-block-quote has-text-align-center is-style-large&quot;&gt;&lt;p&gt;&quot;Contributing makes me feel like I\\&#039;m being useful to the planet.&quot;&lt;\/p&gt;&lt;cite&gt;\u2014 Anna Wong, &lt;em&gt;Volunteer&lt;\/em&gt;&lt;\/cite&gt;&lt;\/blockquote&gt;&lt;!-- \/wp:quote --&gt;&lt;!-- wp:separator {&quot;className&quot;:&quot;is-style-default&quot;} --&gt;&lt;hr class=&quot;wp-block-separator is-style-default&quot;\/&gt;&lt;!-- \/wp:separator --&gt;&lt;\/div&gt;&lt;\/div&gt;&lt;!-- \/wp:group --&gt;&#039;,\n\t)\n);\n\n?&gt;<\/code><\/pre>\n<h6>Using Block Patterns in Themes<\/h6>\n<p>The <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\" target=\"_blank\" rel=\"noopener\">TT1 Blocks theme<\/a> and the default <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/blob\/master\/tt1-blocks\/inc\/block-patterns.php\" target=\"_blank\" rel=\"noopener\">Twenty Twenty-one theme<\/a> showcase how block patterns can be in the themes&#8217;s <code>functions.php<\/code> file.<\/p>\n<p>In the TT1 Blocks experimental-theme, this <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/blob\/master\/tt1-blocks\/inc\/block-patterns.php\" target=\"_blank\" rel=\"noopener\">block-pattern.php<\/a> file contains <strong>eight<\/strong> block patterns, which is added to the <code>functions.php<\/code> as an <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/blob\/master\/tt1-blocks\/functions.php#L89\" target=\"_blank\" rel=\"noopener\">include as shown here<\/a>.<\/p>\n<p>In the Quadrat theme, block patterns are used by refactoring <code>block-pattern.php<\/code> file into <code>block-patterns.php<\/code>, where <a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/quadrat\/inc\/block-patterns.php#L8-L43\" target=\"_blank\" rel=\"noopener\">blocks are registered<\/a> and patterns contents are called as return arrays as <a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/quadrat\/inc\/patterns\/cover-with-heading.php\" target=\"_blank\" rel=\"noopener\">shown in this code example<\/a>.<\/p>\n<h4>Adding Block Patterns Library in Labre Blocks<\/h4>\n<p>Because I have renamed the Quadrat theme as <a href=\"https:\/\/justwrite.atsixtyseven.com\/this-site-is-powered-by-labre-blocks\/\" target=\"_blank\" rel=\"noopener\">Labre Blocks<\/a> in my recent experimental theme, I wanted to add the block patterns that are more appropriate for my site, such as text with quote, <em>two column text with offset heading<\/em>, <em>heading-image-text<\/em> pattern like in the <a href=\"https:\/\/wordpress.org\/themes\/eksell\/\" target=\"_blank\" rel=\"noopener\">Eksell<\/a> theme and similar others.<\/p>\n<p>In this use case example, I am describing only one of the patterns from my <strong>Labre<\/strong> blocks library &#8211; <a href=\"https:\/\/wordpress.org\/patterns\/pattern\/two-columns-of-text-with-offset-heading\/\" target=\"_blank\" rel=\"noopener\">Two columns of text with offset heading<\/a> from WordPress pattern directory, following <a href=\"https:\/\/github.com\/Automattic\/themes\/tree\/trunk\/quadrat\/inc\" target=\"_blank\" rel=\"noopener\">Quadrat patterns<\/a> library method.<\/p>\n<p>Because the block patterns is already created, I just <a href=\"https:\/\/wordpress.org\/patterns\/pattern\/two-columns-of-text-with-offset-heading\/\" target=\"_blank\" rel=\"noopener\">copied the pattern<\/a> and modified some codes, curating text string for HTML escape with <span class=\"pl-en\"><code>esc_html__<\/code><\/span>( ) and little bit of styling.<\/p>\n<h6>Step 1: Copy the pattern and paste in VS Code editor<\/h6>\n<p>Copy the source code and paste in a VS Code editor.<\/p>\n<h6>Step 2: HTML Escape the Text Strings with <code>esc_html__()<\/code> function<\/h6>\n<p>Because the text strings in\u00a0 the heading, and paragraph blocks are not HTML escaped, they must be escaped before the code can be added in our pattern. For example the<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">\/* HTML string esc_html__() curation *\/\n&lt;h3 class=&quot;has-text-color has-primary-color&quot;&gt;&lt;strong&gt;&#039; . esc_html__(&#039;Oceanic Inspiration&#039;, labreblocks) . &#039; &lt;\/strong&gt;&lt;\/h3&gt;<\/code><\/pre>\n<p>Likewise, paragraph blocks text string were HTML escaped, manually.<\/p>\n<h6>Step 3: Adding the pattern in our theme<\/h6>\n<p>Because my <em>Labre<\/em> theme (renamed from <a href=\"https:\/\/github.com\/Automattic\/themes\/tree\/trunk\/quadrat\" target=\"_blank\" rel=\"noopener\">Quadrat<\/a> to preserve my changes from future updates), in Quadrat <a href=\"https:\/\/github.com\/Automattic\/themes\/blob\/trunk\/quadrat\/inc\/block-patterns.php#L19-L29\" target=\"_blank\" rel=\"noopener\">block pattern names are added<\/a> in <code>block-pattern.php<\/code> file. The modified <code>block-pattern.php<\/code> file in my Labre theme looks as follows:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;?php\n\/**\n * Labre Blocks Theme: Block Patterns\n *\n * @package Labre Blocks\n * @since   1.0.0\n *\/\nif ( ! function_exists( &#039;labreblocks_register_block_patterns&#039; ) ) :\n\n\tfunction labreblocks_register_block_patterns() {\n\n\t\tif ( function_exists( &#039;register_block_pattern_category&#039; ) ) {\n\t\t\tregister_block_pattern_category(\n\t\t\t\t&#039;labreblocks&#039;,\n\t\t\t\tarray( &#039;label&#039; =&gt; __( &#039;Labre&#039;, &#039;labreblocks&#039; ) )\n\t\t\t);\n\t\t}\n\n\t\tif ( function_exists( &#039;register_block_pattern&#039; ) ) {\n\t\t\t$block_patterns = array(\n\t\t\t\t&#039;headline-button&#039;,\n\t\t\t\t&#039;headlines-and-buttons&#039;,\n\t\t\t\t&#039;offset-heading-with-two-column-text&#039;,\n\t\t\t\t&#039;heading-image-text&#039;,\n\t\t\t\t&#039;media-text-button&#039;,\n\t\t\t\t&#039;paragraph-with-quote&#039;,\n\t\t\t);\n\n\t\t\tforeach ( $block_patterns as $block_pattern ) {\n\t\t\t\tregister_block_pattern(\n\t\t\t\t\t&#039;labreblocks\/&#039; . $block_pattern,\n\t\t\t\t\trequire __DIR__ . &#039;\/patterns\/&#039; . $block_pattern . &#039;.php&#039;\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\nendif;\n\nadd_action( &#039;init&#039;, &#039;labreblocks_register_block_patterns&#039;, 9 );<\/code><\/pre>\n<p>In the code example above, each pattern listed in the <code>$block_patterns = array ( )<\/code> is called by <code>foreach ()<\/code> statement (lines: 29-34) which requires &#8216;<code>patterns<\/code>&#8216; directory file with the listed pattern name in the array\u00a0 (line 32) which we will add in the next step.<\/p>\n<h6>Step 4: Adding pattern file in <code>\/inc\/patterns<\/code> folder<\/h6>\n<p>In this step, we should have all the listed patterns file in the <code>$block_patterns = array ( )<\/code> statement (lines: 21-26) and code example of one of the pattern file,\u00a0 <code>two-column-text-with-offset-heading.php<\/code> is shown below.<\/p>\n<pre class=\"line-numbers\"><code class=\"language-php\">&lt;?php\n\/**\n * Two column text with offset heading.\n *\n * @package labreblocks\n *\/\n\nreturn array(\n\t&#039;title&#039;      =&gt; __( &#039;Two column text with offset heading&#039;, &#039;labreblocks&#039; ),\n\t&#039;categories&#039; =&gt; array( &#039;labreblocks&#039; ),\n\t&#039;content&#039;    =&gt; &#039;&lt;!-- wp:group {&quot;align&quot;:&quot;wide&quot;} --&gt;\n\t\t&lt;div class=&quot;wp-block-group alignwide &quot;&gt;&lt;\/div&gt;&lt;!-- wp:spacer {&quot;height&quot;:70,&quot;className&quot;:&quot;two-columns-text-with-offset-heading&quot;} --&gt;\n\t\t&lt;div style=&quot;height:70px&quot; aria-hidden=&quot;true&quot; class=&quot;wp-block-spacer two-columns-text-with-offset-heading&quot;&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:spacer --&gt;\n\n\t\t&lt;!-- wp:columns {&quot;verticalAlignment&quot;:&quot;center&quot;,&quot;align&quot;:&quot;wide&quot;} --&gt;\n\t\t&lt;div class=&quot;wp-block-columns alignwide are-vertically-aligned-center&quot;&gt;&lt;!-- wp:column {&quot;width&quot;:&quot;50%&quot;} --&gt;\n\t\t&lt;div class=&quot;wp-block-column&quot; style=&quot;flex-basis:50%&quot;&gt;&lt;!-- wp:paragraph {&quot;style&quot;:{&quot;typography&quot;:{&quot;lineHeight&quot;:&quot;1.1&quot;},&quot;color&quot;:{&quot;text&quot;:&quot;inherit&quot;}},&quot;fontSize&quot;:&quot;extra-large&quot;} --&gt;\n\t\t&lt;h3&gt;&lt;strong&gt;&#039; . esc_html__( &#039;Oceanic Inspiration&#039;, &#039;labreblocks&#039; ) . &#039;&lt;\/strong&gt;&lt;\/h3&gt;\n\t\t&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:column --&gt;\n\n\t\t&lt;!-- wp:column {&quot;width&quot;:&quot;50%&quot;} --&gt;\n\t\t&lt;div class=&quot;wp-block-column&quot; style=&quot;flex-basis:50%&quot;&gt;&lt;!-- wp:separator {&quot;customColor&quot;:&quot;#b3b9c5&quot;,&quot;className&quot;:&quot;is-style-wide&quot;} --&gt;\n\t\t&lt;hr class=&quot;wp-block-separator has-text-color has-background is-style-wide&quot; style=&quot;background-color:#b3b9c5;color:#b3b9c5&quot;\/&gt;\n\t\t&lt;!-- \/wp:separator --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:columns --&gt;\n\n\t\t&lt;!-- wp:columns {&quot;align&quot;:&quot;wide&quot;} --&gt;\n\t\t&lt;div class=&quot;wp-block-columns alignwide&quot;&gt;&lt;!-- wp:column --&gt;\n\t\t&lt;div class=&quot;wp-block-column&quot;&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:column --&gt;\n\n\t\t&lt;!-- wp:column --&gt;\n\t\t&lt;div class=&quot;wp-block-column&quot;&gt;&lt;!-- wp:paragraph {&quot;dropCap&quot;:true,&quot;style&quot;:{&quot;color&quot;:{&quot;text&quot;:&quot;#b3b9c5&quot;}},&quot;fontSize&quot;:&quot;extra-small&quot;} --&gt;\n\t\t&lt;p class=&quot;has-drop-cap has-text-color has-extra-small-font-size&quot; style=&quot;color:#b3b9c5&quot;&gt;&#039; . esc_html__( &#039;Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.&#039;, &#039;labreblocks&#039; ) . &#039;&lt;\/p&gt;\n\t\t&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:column --&gt;\n\n\t\t&lt;!-- wp:column --&gt;\n\t\t&lt;div class=&quot;wp-block-column&quot;&gt;&lt;!-- wp:paragraph {&quot;dropCap&quot;:true,&quot;style&quot;:{&quot;color&quot;:{&quot;text&quot;:&quot;#b3b9c5&quot;}},&quot;fontSize&quot;:&quot;extra-small&quot;} --&gt;\n\t\t&lt;p class=&quot;has-drop-cap has-text-color has-extra-small-font-size&quot; style=&quot;color:#b3b9c5&quot;&gt;&#039; . esc_html__( &#039;No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.&#039;, &#039;labreblocks&#039; ) . &#039;&lt;\/p&gt;\n\t\t&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:column --&gt;&lt;\/div&gt;\n\t\t&lt;!-- \/wp:columns --&gt;&#039;,\n);<\/code><\/pre>\n<p>Now, if we look at the block patterns is visible in our block editor, the <em>Two columns of text with offset heading<\/em> should be available for our use.<\/p>\n<figure id=\"attachment_2530\" aria-describedby=\"caption-attachment-2530\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-2530 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel.png\" alt=\"\" width=\"1024\" height=\"1024\" \/><figcaption id=\"caption-attachment-2530\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-2530 lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel.png\" alt=\"\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel.png 1024w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel-300x300.png 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel-150x150.png 150w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel-768x768.png 768w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel-800x800.png 800w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/screenshot-admin-panel-200x200.png 200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/noscript> Screenshot showing custom patterns in block pattern pane.<\/figcaption><\/figure>\n<p>The following screenshot showing the newly created <em>Two columns of text with offset heading pattern<\/em> in use.<\/p>\n<figure id=\"attachment_2529\" aria-describedby=\"caption-attachment-2529\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"size-full wp-image-2529 lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot.png\" alt=\"\" width=\"1200\" height=\"494\" \/><figcaption id=\"caption-attachment-2529\" class=\"wp-caption-text\"><noscript><img decoding=\"async\" class=\"size-full wp-image-2529 lazyload\" src=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot.png\" alt=\"\" width=\"1200\" height=\"494\" srcset=\"https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot.png 1200w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot-300x124.png 300w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot-1024x422.png 1024w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot-768x316.png 768w, https:\/\/learncode.tinjurewp.com\/wp-content\/uploads\/2021\/08\/pattern-screenshot-200x82.png 200w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/noscript> Screenshot showing Two columns of text with offset heading pattern in use.<\/figcaption><\/figure>\n<h6>This is Work-in-Progress<\/h6>\n<p>Adding other desired patterns that I commonly use in my writing is <em>work-in-progress<\/em> learning project. In the immediate future I plan to add a few more patterns in my Labre theme.<\/p>\n<h6>Wrapping Up<\/h6>\n<p>In this learning post, we learned to register and create customized patterns and replaced the a most of the Quadrat bundled patterns with my own customized patterns. In the next part of this this learning series, we will explore how to create a page template using RSS Blocks to display contents from different sites <a href=\"https:\/\/ephemeralthemes.com\/2021\/07\/31\/creating-a-page-to-display-content-from-across-multiple-sites\/\" target=\"_blank\" rel=\"noopener\">after Tammie Lister<\/a>.<\/p>\n<p>NEXT: Creating a page template using RSS Blocks<\/p>\n<h6>Useful Resources<\/h6>\n<p>The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively.<\/p>\n<ul>\n<li><a href=\"https:\/\/fullsiteediting.com\/lessons\/introduction-to-block-patterns\/\" target=\"_blank\" rel=\"noopener\">Introduction to block patterns<\/a> | Full Site Editing<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noopener\">Block Patterns<\/a> | Block Editor Handbook<\/li>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/03\/so-you-want-to-make-block-patterns\/\" target=\"_blank\" rel=\"noopener\">So you want to make block patterns?<\/a> | WordPress.org Blog<\/li>\n<li><a href=\"https:\/\/ithemes.com\/wordpress-block-patterns-ultimate-guide\/\" target=\"_blank\" rel=\"noopener\">WordPress Block Patterns: The Ultimate Guide<\/a> | iThemes<\/li>\n<li><a href=\"https:\/\/themeshaper.com\/2020\/04\/08\/adding-block-patterns-to-your-theme\/\" target=\"_blank\" rel=\"noopener\">Adding Block Patterns to Your Theme<\/a> | ThemeShaper<\/li>\n<li><a href=\"https:\/\/melchoyce.design\/2020\/03\/30\/creating-a-simple-block-pattern-plugin-for-the-gutenberg-editor\/\" target=\"_blank\" rel=\"noopener\">Creating a simple block pattern plugin for the Gutenberg editor<\/a> | Melchoyce.design<\/li>\n<li><a href=\"https:\/\/wordpress.org\/patterns\/\" target=\"_blank\" rel=\"noopener\">Patterns<\/a> | WordPress Pattern Directory<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part 2 of leaning efforts to understand and use full site editing (FSE) and block-based themes. This learning post is still in active development and updated regularly. In the previous learning post, I partially customized Quadrat child theme for my own personal project site, by modifying the most basic fonts, typography, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[27],"tags":[],"class_list":["post-2518","post","type-post","status-publish","format-standard","hentry","category-full-site-editing"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=2518"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2518\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=2518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=2518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=2518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}