Strategy for Reusable Blocks

Hey everyone :wave:

Does anyone have a good strategy for letting editors reuse blocks throughout a site?

For example, let’s say you have a Contact Block that is exactly the same across multiple pages. It needs to be editable but you want it to be editable in one place only.

Is there a neat way to have a Common Blocks section somewhere at a high level, then allow editors to select from these on other pages?

I would be keen to hear how people are thinking about this kind of challenge.



An option would be to create such blocks in a central place, and then use a block selector block type to reference such a central block.

Can you expand on what you mean by:

block selector block type

A custom block with a select field from which you can query any of the blocks defined in the central place, e.g. in the site object.

Update for anyone else coming to this in future, the basic structure I’m working with for now is:

Site Blueprint

  label: Reusable Blocks
  type: blocks
      extends: blocks/text
        label: Reusable ID
        type: text
        required: true
        help: |
          A reference for this block. Used to identify it on other pages.

Custom Selector Block Blueprint

  type: select
  label: Block
  options: query
    fetch: site.reusable_blocks.toBlocks
    text: "{{ block.reusable_id }}"
    value: "{{ }}"
  required: true
  help: |
    Manage reusable blocks from the <a href="{{ site.panel.url }}">Site blueprint</a>.

Custom Selector Block Snippet

//  Get the ID
$id = $block->block();

//  Find it in the $site object
$selected_block = $site->reusable_blocks()->toBlocks()->find($id);
if (!$selected_block) return;

//  Render it
echo $selected_block;
1 Like

Thank you @chriscorby, your structure worked well for me too with a similar use case.

But I’m also wondering if the same principle work with layouts. What do you think?

I haven’t tried it with layouts, but let us know how you get on!