From ca594c84b167202aeb66d6894effc2eeb7d4b57d Mon Sep 17 00:00:00 2001
From: Patrick Bollenbach <patrick@bollenbach.ca>
Date: Tue, 24 Feb 2026 10:08:27 -0800
Subject: [PATCH] Allow app blocks between article sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, app blocks on the article page are forced to render below
all article content. Unlike the product page where app blocks can be
placed between sections (e.g. between title and price), the article
page pins its blocks to fixed positions using static content_for calls.

This changes the article section to use content_for 'blocks' so that
all blocks — including app blocks — render in the order merchants
arrange them in the theme editor.

Changes:
- Replace pinned content_for 'block' calls with content_for 'blocks'
- Remove static: true from article template blocks
- Add block_order to preserve default ordering
- Add _blog-post-* types to section schema (required for non-static)
- Move image nil guard into _blog-post-featured-image block itself
---
 blocks/_blog-post-featured-image.liquid | 66 +++++++++++++------------
 sections/main-blog-post.liquid          | 20 ++++----
 templates/article.json                  | 10 ++--
 3 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/blocks/_blog-post-featured-image.liquid b/blocks/_blog-post-featured-image.liquid
index f4fc47cf2..c09231270 100644
--- a/blocks/_blog-post-featured-image.liquid
+++ b/blocks/_blog-post-featured-image.liquid
@@ -7,39 +7,41 @@
   assign image = closest.article.image
 %}
 
-<div
-  class="blog-post-featured-image blog-post-featured-image--{{ block.id }} blog-post-featured-image--height-{{ block_settings.height }} spacing-style size-style"
-  style="
-    --ratio: {% case block_settings.image_ratio %}
-      {% when 'landscape' %}16 / 9
-      {% when 'portrait' %}4 / 5
-      {% when 'adapt' %}{{ image.aspect_ratio | default: 1 }}
-      {% else %}1
-    {% endcase %};
-    {% render 'size-style', settings: block_settings %}
-    {% render 'spacing-style', settings: block_settings %}
-  "
-  {{ block.shopify_attributes }}
->
-  {%- capture image_border_style -%}
-    {% render 'border-override', settings: block_settings %}
-  {%- endcapture -%}
+{% if image != blank %}
+  <div
+    class="blog-post-featured-image blog-post-featured-image--{{ block.id }} blog-post-featured-image--height-{{ block_settings.height }} spacing-style size-style"
+    style="
+      --ratio: {% case block_settings.image_ratio %}
+        {% when 'landscape' %}16 / 9
+        {% when 'portrait' %}4 / 5
+        {% when 'adapt' %}{{ image.aspect_ratio | default: 1 }}
+        {% else %}1
+      {% endcase %};
+      {% render 'size-style', settings: block_settings %}
+      {% render 'spacing-style', settings: block_settings %}
+    "
+    {{ block.shopify_attributes }}
+  >
+    {%- capture image_border_style -%}
+      {% render 'border-override', settings: block_settings %}
+    {%- endcapture -%}
 
-  {{
-    image
-    | image_url: width: 3840
-    | image_tag:
-      width: image.width,
-      widths: '240, 352, 832, 1200, 1600, 1920, 2560, 3840',
-      height: image.height,
-      class: 'blog-post-featured-image__image border-style',
-      style: image_border_style,
-      sizes: 'auto, (min-width: 750px) 100vw, 100vw',
-      loading: 'eager',
-      fetchpriority: 'high',
-      alt: image.alt
-  }}
-</div>
+    {{
+      image
+      | image_url: width: 3840
+      | image_tag:
+        width: image.width,
+        widths: '240, 352, 832, 1200, 1600, 1920, 2560, 3840',
+        height: image.height,
+        class: 'blog-post-featured-image__image border-style',
+        style: image_border_style,
+        sizes: 'auto, (min-width: 750px) 100vw, 100vw',
+        loading: 'eager',
+        fetchpriority: 'high',
+        alt: image.alt
+    }}
+  </div>
+{% endif %}
 
 {% stylesheet %}
   .blog-post-featured-image {
diff --git a/sections/main-blog-post.liquid b/sections/main-blog-post.liquid
index e77758e07..6deb378e1 100644
--- a/sections/main-blog-post.liquid
+++ b/sections/main-blog-post.liquid
@@ -13,17 +13,6 @@
       {% render 'spacing-style', settings: section.settings %}
     "
   >
-    <header>
-      {%- content_for 'block', id: 'blog-post-title', type: 'text' %}
-      {%- content_for 'block', id: 'blog-post-details', type: '_blog-post-info-text' %}
-    </header>
-
-    {%- if article.image -%}
-      {%- content_for 'block', id: 'blog-post-image', type: '_blog-post-featured-image' %}
-    {%- endif -%}
-    {%- content_for 'block', id: 'blog-post-content', type: '_blog-post-content' %}
-
-    {% comment %} Dynamic area for @app blocks only, at the bottom {% endcomment %}
     {% content_for 'blocks' %}
 
     {% if blog.comments_enabled? %}
@@ -119,6 +108,15 @@
     },
     {
       "type": "@app"
+    },
+    {
+      "type": "_blog-post-info-text"
+    },
+    {
+      "type": "_blog-post-featured-image"
+    },
+    {
+      "type": "_blog-post-content"
     }
   ],
   "class": "section-wrapper",
diff --git a/templates/article.json b/templates/article.json
index 587f3e2df..1f2eb5d8d 100644
--- a/templates/article.json
+++ b/templates/article.json
@@ -15,7 +15,6 @@
         "blog-post-title": {
           "type": "text",
           "name": "Title",
-          "static": true,
           "settings": {
             "text": "<h1>{{ article.title }}</h1>",
             "width": "100%",
@@ -42,7 +41,6 @@
         "blog-post-details": {
           "type": "_blog-post-info-text",
           "name": "Details",
-          "static": true,
           "settings": {
             "show_date": true,
             "show_author": false,
@@ -57,7 +55,6 @@
         "blog-post-image": {
           "type": "_blog-post-featured-image",
           "name": "Featured image",
-          "static": true,
           "settings": {
             "image_ratio": "landscape",
             "width": "fill",
@@ -78,11 +75,16 @@
         },
         "blog-post-content": {
           "type": "_blog-post-content",
-          "static": true,
           "settings": {},
           "blocks": {}
         }
       },
+      "block_order": [
+        "blog-post-title",
+        "blog-post-details",
+        "blog-post-image",
+        "blog-post-content"
+      ],
       "settings": {
         "content_direction": "column",
         "gap": 32,