{"id":4616,"date":"2022-08-17T08:00:00","date_gmt":"2022-08-17T14:00:00","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4616"},"modified":"2023-04-14T09:57:40","modified_gmt":"2023-04-14T15:57:40","slug":"wordpress-contextual-patterns","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/","title":{"rendered":"What are Contextual Patterns in WordPress?"},"content":{"rendered":"\n<p>Welcome to part one of a three-part series on advanced block patterns. Patterns have become a central component of modern theme development and are becoming more and more powerful with each release of WordPress. As a result, there are <a href=\"https:\/\/wordpress.tv\/2022\/06\/13\/nick-diego-builder-basics-everything-you-need-to-know-about-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">numerous resources<\/a> throughout the WordPress community to help you get started with the basics.<\/p>\n\n\n\n<p>On the other hand, this series will focus on lesser-known and more unique pattern functionality\u2014the goal is to help you take patterns to the next level. We will begin by discussing &#8220;contextual&#8221; patterns, what they are, and how you can implement them in your projects. Let&#8217;s get started.<br><br><em>Feel free to watch the video version of this article or continue reading. <br><\/em><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"What are Contextual Block Patterns in WordPress?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/fW4xhwjfyeY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-2c003d4a wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#overview\">Overview<\/a><\/li>\n\n\n\n<li><a href=\"#registration\">Pattern Registration<\/a> <\/li>\n\n\n\n<li><span style=\"color: var(--wp--preset--color--mirage); font-family: var(--wp--preset--font-family--primary); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font-weight--regular);\"><a href=\"#single\">Example: Single Block Type<\/a><\/span><\/li>\n\n\n\n<li><a href=\"#multiple\">Example: Multiple Block Types<\/a><\/li>\n\n\n\n<li><a href=\"#query-loop\">Example: Query Loops<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Unlike standard block patterns, contextual patterns are attached to one or more block types. When configured, they function like any other pattern but appear in the attached block&#8217;s transformation menu. This allows you to convert the existing block into a pattern. Let&#8217;s look at an example.<\/p>\n\n\n\n<p>The screenshot below shows a List block with its transformation menu opened. A contextual pattern has been attached to the List block type causing the &#8220;Patterns&#8221; menu item to be displayed. You can now transform that list content into any available block pattern shown in the preview panel. There&#8217;s only one in this example. The resulting pattern will contain the content in the original List block. In other words, the List block you are transforming replaces the List block within the pattern.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1361\" height=\"596\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-transform-menu-with-patterns.png\" alt=\"The pattern transform menu on List blocks when a contextual pattern is configured.\" class=\"wp-image-4615\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-transform-menu-with-patterns.png 1361w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-transform-menu-with-patterns-300x131.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-transform-menu-with-patterns-1024x448.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/block-transform-menu-with-patterns-768x336.png 768w\" sizes=\"auto, (max-width: 1361px) 100vw, 1361px\" \/><figcaption class=\"wp-element-caption\">The pattern transform menu on List blocks when a contextual pattern is configured.<\/figcaption><\/figure>\n\n\n\n<p>The primary benefit of contextual patterns is an improved workflow. Using our List block example, a post author can start writing a list of links without having to find and manually insert the Table of Contents pattern. They can then transform the list into the correct pattern on the fly. <\/p>\n\n\n\n<p>There are some caveats to be aware of, which we will explore later in more detailed examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>While there are some exceptions, transformations are only available on blocks <strong>without<\/strong> inner blocks. <\/li>\n\n\n\n<li>When attempting a transform, all selected blocks must be present in the pattern for the pattern to appear in the transformation menu.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Registration<\/h2>\n\n\n\n<p>This article does not cover all the nuances of pattern registration, only those specific to contextual patterns. For general information, you can learn more by visiting the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook<\/a>. <\/p>\n\n\n\n<p>Registering a contextual pattern is virtually the same as any regular block pattern, you just need to apply an additional property. However, there are two ways to register patterns in WordPress, and the implementation of pattern properties is slightly different depending on your method.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Function Method<\/h3>\n\n\n\n<p>The first method uses the function <code>register_block_pattern()<\/code> and can be applied in both themes and plugins. To create a contextual pattern, you must use the property <code>blockTypes<\/code> and pass an array of block names that the pattern is intended to be attached to. Block names follow the <code>namespace\/title<\/code> naming convention. The pattern is attached to the List block provided by WordPress core in the example below.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>functions.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>register_block_pattern(\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-string\">'example-theme\/contextual-pattern'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>        <span class=\"hljs-string\">'title'<\/span>      =&gt; __( <span class=\"hljs-string\">'A contextual pattern.'<\/span>, <span class=\"hljs-string\">'example-theme'<\/span> ),\n<\/span><\/span><mark class='shcb-loc'><span>        <span class=\"hljs-string\">'blockTypes'<\/span> =&gt; <span class=\"hljs-keyword\">array<\/span>( <span class=\"hljs-string\">'core\/list'<\/span> ),\n<\/span><\/mark><span class='shcb-loc'><span>        <span class=\"hljs-string\">'content'<\/span>    =&gt; <span class=\"hljs-string\">'&lt;!-- Insert Pattern Content --&gt;'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>    )\n<\/span><\/span><span class='shcb-loc'><span>);\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Folder Method<\/h3>\n\n\n\n<p>The <a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/02\/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0\/\" target=\"_blank\" rel=\"noreferrer noopener\">second method<\/a> is explicitly designed for <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">block themes<\/a> where patterns can be automatically registered by WordPress if placed in the <code>patterns\/<\/code> folder in a theme&#8217;s root directory. With this implementation, you represent each pattern by its own PHP file, and the property syntax is slightly different.<\/p>\n\n\n\n<p>Instead of an array structure, we use the property <code>Block Types<\/code> and a comma-separated list of block names that the pattern is used with, for example, <code>core\/paragraph, core\/header<\/code>. In the code snippet below, we have the List block to remain consistent with the previous example.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>patterns\/contextual-pattern.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\">\/**<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Title: A contextual pattern.<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Slug: example-theme\/contextual-pattern<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Block Types: core\/list<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> *\/<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- Insert Pattern Content --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>While both methods of pattern registration are valid, we will use the second method throughout this article. This is because patterns are commonly implemented in themes, and we want to let WordPress handle the registration. If you are using <code>register_block_pattern()<\/code>, that&#8217;s perfectly fine. You will need to modify the code examples accordingly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Single Block Type<\/h2>\n\n\n\n<p>Let&#8217;s take a closer look at the List block example mentioned above. The Table of Contents layout at the top of this article is a contextual pattern. Below is the pattern without any modifications and the code behind it. Note the pattern&#8217;s <code>Block Types<\/code> has been set to <code>core\/list<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Raw Pattern<\/h4>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-2c003d4a wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<p class=\"has-large-font-size\"><strong>Table of Contents<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#\">Table of Contents List Item #1<\/a><\/li>\n\n\n\n<li><a href=\"#\">Table of Contents List Item #2<\/a><\/li>\n\n\n\n<li><a href=\"#\">Table of Contents List Item #3<\/a><\/li>\n\n\n\n<li><a href=\"#\">Table of Contents List Item #4<\/a><\/li>\n\n\n\n<li><a href=\"#\">Table of Contents List Item #5<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Pattern File<\/h4>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code>patterns\/general-toc.php<\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\">\/**<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Title: Table of Contents with heading, list.<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Slug: builders\/general-toc<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Block Types: core\/list<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> *\/<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"10px\",\"margin\":{\"bottom\":\"50px\"},\"padding\":{\"top\":\"30px\",\"right\":\"30px\",\"bottom\":\"30px\",\"left\":\"30px\"}}},\"backgroundColor\":\"polar\"} --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"wp-block-group has-polar-background-color has-background\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\"<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- wp:paragraph {\"fontSize\":\"large\"} --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"has-large-font-size\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>Table of Contents<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:paragraph --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- wp:list --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Table of Contents List Item #1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Table of Contents List Item #2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Table of Contents List Item #3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Table of Contents List Item #4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Table of Contents List Item #5<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:list --&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:group --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>This pattern can be inserted into the Editor just like any other pattern. A user can then update the list of links. But what if we could start by simply typing a list of links and then transform that List block into the Table of Contents pattern?<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1180\" height=\"700\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/pattern-types-toclist-example.gif\" alt=\"\" class=\"wp-image-4614\"\/><figcaption class=\"wp-element-caption\">Transforming a list into a contextual pattern.<\/figcaption><\/figure>\n\n\n\n<p>The graphic above highlights how easy this workflow becomes with a designated contextual pattern for List blocks. What about multiple block types?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Multiple Block Types<\/h2>\n\n\n\n<p>Contextual patterns can also support multiple block types, which allows for delightful transformations. Again, let&#8217;s look at an example from this article to see how it works. <\/p>\n\n\n\n<p>On this website, we use a contextual pattern for code snippets. It&#8217;s often helpful to include a header on Code blocks that indicates the location of the code in your theme or the file name. The header is a Paragraph block, and the code itself is a Code block, but the pattern also includes a number of style settings and both a Row and Group block. <\/p>\n\n\n\n<p>Below is what the raw pattern would look like if it were to be inserted directly into the Editor along with the actual pattern file. Note the pattern&#8217;s <code>Block Types<\/code> has been set to both <code>core\/code<\/code> and <code>core\/paragraph<\/code>.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Raw Pattern<\/h4>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code><strong>filename.php<\/strong><\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>Start writing code...\n<\/span><\/span><\/code><\/span><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Pattern File<\/h4>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-47e5a185 wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group has-polar-background-color has-background is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-931901aa wp-block-group-is-layout-flex\" style=\"padding-top:10px;padding-bottom:10px\">\n<p><code><strong>patterns\/code-block.php<\/strong><\/code><\/p>\n<\/div>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">&lt;?php<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\">\/**<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Title: A stylized code block with a header.<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Slug: builders\/code-block<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> * Block Types: core\/code, core\/paragraph<\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-comment\"> *\/<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"php\"><span class=\"hljs-meta\">?&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- wp:group {\"style\":{\"spacing\":{\"blockGap\":\"0px\"}}} --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"wp-block-group\"<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- wp:group {\"style\":{\"spacing\":{\"padding\":{\"top\":\"10px\",\"bottom\":\"10px\"}}},\"backgroundColor\":\"polar\",\"layout\":{\"type\":\"flex\",\"flexWrap\":\"nowrap\",\"justifyContent\":\"center\"}} --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"wp-block-group has-polar-background-color has-background\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"padding-top:10px;padding-bottom:10px\"<\/span>&gt;<\/span><span class=\"hljs-comment\">&lt;!-- wp:paragraph --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">strong<\/span>&gt;<\/span>filename.php<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">strong<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:paragraph --&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:group --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- wp:code --&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">pre<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"wp-block-code\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">code<\/span>&gt;<\/span>Start writing code...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">code<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">pre<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:code --&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">&lt;!-- \/wp:group --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Since this pattern has two block types, it allows for multiple transformations:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform a Code block, and the pattern will be inserted with the default <code>filename.php<\/code> header.<\/li>\n\n\n\n<li>Transform a Paragraph block and the pattern will be inserted with the default <code>Start writing code...<\/code> code. <\/li>\n\n\n\n<li>Transform a Code and a Paragraph block and the pattern will be inserted with your custom content.  <\/li>\n<\/ul>\n\n\n\n<p>The graphic below highlights the third option. Notice how the Pattern and Code blocks are inserted into the Group block, and the header is wrapped in a Row block. This is a simple example. Imagine a multi-block contextual pattern that includes an image, paragraphs, headings, etc.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1180\" height=\"700\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/pattern-types-code-example.gif\" alt=\"\" class=\"wp-image-4610\"\/><figcaption class=\"wp-element-caption\">Using contextual patterns with multiple block types.<\/figcaption><\/figure>\n\n\n\n<p>For the pattern to appear in the transformation menu, all selected blocks much exist within the pattern. Therefore, the contextual pattern in this example will not be available if you choose any other block beside a Code or Paragraph block.<\/p>\n\n\n\n<p>Furthermore, you cannot transform multiple Code or Paragraph blocks <strong>unless<\/strong> the pattern contains multiple Code or Paragraph blocks. The number of blocks of a given type must be less than or equal to the number of blocks in the contextual pattern. <\/p>\n\n\n\n<p>In cases where you have multiple blocks of the same type, WordPress will transform them in the order they appear before the transformation. So, for example, the first Paragraph block is transformed into the pattern&#8217;s first Paragraph block. Then, the second Paragraph block is transformed into the pattern&#8217;s second Paragraph block, and so on.<\/p>\n\n\n\n<p>These nuances can make contextual blocks sound more complicated than they are. The best way to explore these multi-block transformations is to dive in and begin experimenting with your own!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Example: Query Loops<\/h2>\n\n\n\n<p>Finally, we need to discuss Query Loop blocks, which are a special case. Patterns that use <code>core\/query<\/code> as the <code>Block Types<\/code> tend to function more like <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/#semantic-block-patterns\" target=\"_blank\" rel=\"noreferrer noopener\">semantic patterns<\/a>, which will be reviewed in a future article.<\/p>\n\n\n\n<p>Furthermore, as mentioned in the caveats above, we generally cannot use contextual blocks with block types that have inner blocks. Yet Query Loops do have inner blocks. <\/p>\n\n\n\n<p>Suffice to say, terminology and definitions can get tricky in WordPress. But don&#8217;t let that detract from how powerful Query Loop patterns can be regardless of whether they are actually &#8220;contextual&#8221; or &#8220;semantic.&#8221;<\/p>\n\n\n\n<p>When inserting a Query Loop block into the Editor, you are presented with the default placeholder and only have the option to &#8220;Start Blank.&#8221; For new users or to ensure brand consistency, this is not an ideal experience. Query Loops are often some of the most complicated block layouts on a website.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"392\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/query-loop-placeholder-e1660416732866.png\" alt=\"\" class=\"wp-image-4617\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/query-loop-placeholder-e1660416732866.png 908w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/query-loop-placeholder-e1660416732866-300x130.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/query-loop-placeholder-e1660416732866-768x332.png 768w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><figcaption class=\"wp-element-caption\">Query Loop placeholder content.<\/figcaption><\/figure>\n\n\n\n<p>Now, if patterns are created with the <code>Block Types: core\/query<\/code> property, users can choose from one of those patterns after inserting a Query Loop block. The <a href=\"https:\/\/wordpress.org\/themes\/twentytwentytwo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Twenty Twenty-Two<\/a> theme contains a broad selection of Query Loop contextual patterns, which you can see in the graphic below.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1180\" height=\"840\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/pattern-query-loop-example.gif\" alt=\"Query Loop contextual block patterns in the Twenty Twenty-Two theme.\" class=\"wp-image-4624\"\/><figcaption class=\"wp-element-caption\">Query Loop contextual patterns in the Twenty Twenty-Two theme.<\/figcaption><\/figure>\n\n\n\n<p>Unlike the previous examples, you will notice that the contextual patterns are not located in the block transform menu. Instead, they are directly available from a &#8220;Replace&#8221; button in the Query Loop toolbar. This functionality makes it easy for users to switch designs quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full is-style-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1607\" height=\"486\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace.png\" alt=\"Switch between Query Loop contextual patterns using the &quot;Replace&quot; button. \" class=\"wp-image-4618\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace.png 1607w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace-300x91.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace-1024x310.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace-768x232.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/tt2-query-loop-replace-1536x465.png 1536w\" sizes=\"auto, (max-width: 1607px) 100vw, 1607px\" \/><figcaption class=\"wp-element-caption\">Switch between Query Loop contextual patterns using the &#8220;Replace&#8221; button. <\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Contextual block patterns are all about improving the workflow in WordPress. Rather than inserting block patterns manually, users can transform existing blocks or choose from a predefined selection of patterns, such as the case with Query Loops. Review your patterns if you have designed a theme with patterns but have not employed the <code>Block Types<\/code> property, and consider if any can become contextual.<\/p>\n\n\n\n<p>External links referenced in this article and other related resources are listed below. In parts two and three of this article series on advanced patterns, where we discuss <a href=\"https:\/\/wpengine.com\/builders\/page-creation-patterns\/\">page creation<\/a> and <a href=\"https:\/\/wpengine.com\/builders\/semantic-patterns\/\">semantic<\/a> patterns. Both also use the <code>Block Types<\/code> property, are easy to implement, and can profoundly impact the editing experience within WordPress.<\/p>\n\n\n\n<p>That&#8217;s all for now. If you end up designing a contextual pattern for a future project\u2014tag me on Twitter <a href=\"https:\/\/twitter.com\/nickmdiego\" target=\"_blank\" rel=\"noreferrer noopener\">@nickmdiego<\/a> and I would love to take a look!<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background is-layout-flow wp-container-core-group-is-layout-2c003d4a wp-block-group-is-layout-flow\" style=\"margin-bottom:50px;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px\">\n<p class=\"has-large-font-size\"><strong><strong>External Resources<\/strong><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.tv\/2022\/06\/13\/nick-diego-builder-basics-everything-you-need-to-know-about-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress TV video on block patterns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2022\/05\/02\/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0\/\" target=\"_blank\" rel=\"noreferrer noopener\">Developer Note for pattern registration in block themes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-patterns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook article on patterns<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Block Editor Handbook article on block themes<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_pattern\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Code Reference on pattern registration<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><br><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Take block patterns to the next level by making them &#8220;contextual.&#8221; <\/p>\n","protected":false},"author":5,"featured_media":4626,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What are Contextual Patterns in WordPress?<\/title>\n<meta name=\"description\" content=\"Take block patterns to the next level by making them &quot;contextual&quot; in part one of our three part series on advanced patterns in WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are Contextual Block Patterns in WordPress?\" \/>\n<meta property=\"og:description\" content=\"Take block patterns to the next level by making them &quot;contextual&quot; in part one of our three part series on advanced patterns in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-17T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T15:57:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-opengraph.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nick Diego\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"What are Contextual Block Patterns in WordPress?\" \/>\n<meta name=\"twitter:description\" content=\"Take block patterns to the next level by making them &quot;contextual&quot; in part one of our three part series on advanced patterns in WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-opengraph.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@nickmdiego\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nick Diego\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/\"},\"author\":{\"name\":\"Nick Diego\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\"},\"headline\":\"What are Contextual Patterns in WordPress?\",\"datePublished\":\"2022-08-17T14:00:00+00:00\",\"dateModified\":\"2023-04-14T15:57:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/\"},\"wordCount\":1689,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/contextual-patterns-featured-image.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/\",\"name\":\"What are Contextual Patterns in WordPress?\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/contextual-patterns-featured-image.jpg\",\"datePublished\":\"2022-08-17T14:00:00+00:00\",\"dateModified\":\"2023-04-14T15:57:40+00:00\",\"description\":\"Take block patterns to the next level by making them \\\"contextual\\\" in part one of our three part series on advanced patterns in WordPress.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/contextual-patterns-featured-image.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/contextual-patterns-featured-image.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wordpress-contextual-patterns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are Contextual Patterns in WordPress?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/ec4573512f14a40d8ec517f312d1879b\",\"name\":\"Nick Diego\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g\",\"caption\":\"Nick Diego\"},\"description\":\"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/nickmdiego\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/nick-diego\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are Contextual Patterns in WordPress?","description":"Take block patterns to the next level by making them \"contextual\" in part one of our three part series on advanced patterns in WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/","og_locale":"en_US","og_type":"article","og_title":"What are Contextual Block Patterns in WordPress?","og_description":"Take block patterns to the next level by making them \"contextual\" in part one of our three part series on advanced patterns in WordPress.","og_url":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/","og_site_name":"Builders","article_published_time":"2022-08-17T14:00:00+00:00","article_modified_time":"2023-04-14T15:57:40+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-opengraph.jpg","type":"image\/jpeg"}],"author":"Nick Diego","twitter_card":"summary_large_image","twitter_title":"What are Contextual Block Patterns in WordPress?","twitter_description":"Take block patterns to the next level by making them \"contextual\" in part one of our three part series on advanced patterns in WordPress.","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-opengraph.jpg","twitter_creator":"@nickmdiego","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Nick Diego","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/"},"author":{"name":"Nick Diego","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b"},"headline":"What are Contextual Patterns in WordPress?","datePublished":"2022-08-17T14:00:00+00:00","dateModified":"2023-04-14T15:57:40+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/"},"wordCount":1689,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-featured-image.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/","url":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/","name":"What are Contextual Patterns in WordPress?","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-featured-image.jpg","datePublished":"2022-08-17T14:00:00+00:00","dateModified":"2023-04-14T15:57:40+00:00","description":"Take block patterns to the next level by making them \"contextual\" in part one of our three part series on advanced patterns in WordPress.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-featured-image.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/contextual-patterns-featured-image.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/wordpress-contextual-patterns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"What are Contextual Patterns in WordPress?"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/ec4573512f14a40d8ec517f312d1879b","name":"Nick Diego","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9cf33028d58e055272db2100732089b772bb9887c69e916b06512473ed3e4861?s=96&d=mm&r=g","caption":"Nick Diego"},"description":"Nick Diego is a Sr. Developer Advocate at WP Engine. He can be found creating educational content, building plugins and themes, and contributing to WordPress Core. Connect with him on Twitter, LinkedIn, or WordPress Slack.","sameAs":["https:\/\/x.com\/nickmdiego"],"url":"https:\/\/wpengine.com\/builders\/author\/nick-diego\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=4616"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4616\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4626"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=4616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=4616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=4616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}