>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3572709. --> Reported by: [geocalleo](https://www.drupal.org/user/51019) Related to !658 >>> <p>Module : Canvas Block Twig Suggestions (<a href="https://www.drupal.org/project/canvas_block_twig_suggestions">https://www.drupal.org/project/canvas_block_twig_suggestions</a>)</p> <h3 id="overview">Overview</h3> <p>When a block is placed in a single Canvas region, the default template suggestion system works fine. The issue arises when the same block needs to appear in multiple regions with different markup.</p> <p><strong>Use case:</strong> A site has one main navigation menu using <code>system_menu_block:main</code>. The header displays it as a horizontal mega menu with dropdowns, while the footer displays it as a simplified stacked link list. Both use the same block and the same data &mdash; the only difference is the HTML and CSS.</p> <p>With Drupal's standard block placement, you would create two block instances with different machine names, each generating its own template suggestion. Canvas doesn't work this way. When you drag the same block into both the header and footer regions, Canvas assigns each instance a component UUID as its <code>#id</code>. Core then generates a template suggestion from that UUID (e.g., <code>block__a4ada991_2613_4901_99c4_f23c2efc02b0</code>), which contains characters that cause errors in the Twig engine and can never match a template file.</p> <p>More importantly, Canvas does not pass <code>#region</code> to individual block render arrays. Its <code>BlockComponent::renderComponent()</code> returns <code>#theme =&amp;gt; 'block'</code> with <code>#id =&amp;gt; $componentUuid</code> but no region context. This means Drupal's theme layer has no way to tell whether a block was placed in the header or the footer, so there is no path to giving the same block type different markup per region.</p> <p>The only template suggestion that works is the generic plugin-id suggestion (<code>block--system-menu-block--main.html.twig</code>), which applies to every instance of that block regardless of where it appears. This forces developers to either duplicate content by creating separate menu blocks for each region, or use workarounds outside the template system.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>I've prototyped a module (<code>canvas_block_twig_suggestions</code>) that adds region context to block template suggestions for Canvas-placed blocks. It works by:</p> <ol> <li>Injecting a <code>#pre_render</code> callback into each region render array during <code>hook_preprocess_page()</code>.</li> <li>Capturing the region name from the <code>#region</code> property that core's <code>HtmlRenderer::buildPageRenderArray()</code> already sets on region elements.</li> <li>In <code>hook_theme_suggestions_block_alter()</code>, stripping the UUID-based suggestion (which causes Twig errors) and adding a region-aware suggestion in the format <code>block__[region]__[plugin_id]</code>.</li> </ol> <p>This gives each instance of a block a region-specific template suggestion while keeping core's plugin-id suggestions intact as fallbacks:</p> <table> <thead> <tr> <th>Priority</th> <th>Suggestion</th> <th>Template File</th> </tr> </thead> <tbody> <tr> <td>Highest</td> <td><code>block__footer__system_menu_block__main</code></td> <td><code>block--footer--system-menu-block--main.html.twig</code></td> </tr> <tr> <td></td> <td><code>block__system_menu_block__main</code></td> <td><code>block--system-menu-block--main.html.twig</code></td> </tr> <tr> <td></td> <td><code>block__system_menu_block</code></td> <td><code>block--system-menu-block.html.twig</code></td> </tr> <tr> <td></td> <td><code>block__system</code></td> <td><code>block--system.html.twig</code></td> </tr> <tr> <td>Base</td> <td><code>block</code></td> <td><code>block.html.twig</code></td> </tr> </tbody> </table> <p>With this in place, a developer can drag <code>system_menu_block:main</code> into both the header and footer, then create:</p> <ul> <li><code>block--header--system-menu-block--main.html.twig</code> &mdash; horizontal mega menu markup</li> <li><code>block--footer--system-menu-block--main.html.twig</code> &mdash; simplified stacked link list</li> </ul> <p>No content duplication. One block, one data source, different presentation per region.</p> <p>The approach works because Canvas's <code>CanvasPageVariant</code> returns a render array keyed by region name, and core adds <code>#region</code> to each region element before child blocks render. The region information exists &mdash; it just isn't carried through to the block's theme suggestions.</p> <p><strong>I'm opening this as a discussion because I'd like guidance from the maintainers:</strong></p> <ul> <li>Should region-aware template suggestions be handled inside Canvas itself, or is a companion module the right approach?</li> <li>Is there a cleaner integration point within Canvas's rendering pipeline (e.g., <code>BlockComponent::renderComponent()</code> or the display variant level) where <code>#region</code> could be passed through?</li> <li>Are there plans to address this in an upcoming Canvas release?</li> </ul> <p>Happy to contribute a merge request against Canvas directly if that's the preferred path.</p> <h3 id="ui-changes">User interface changes</h3> <p>None. This change only affects the Twig template suggestion layer. Developers gain the ability to create region-specific block templates, but no admin UI or configuration changes are introduced.</p>