Block Templates

It may be nice to be able to have some kind of control to select from a set of predefined defaults. Currently we can define block defaults, but what if we want to change those defaults to a separate block configuration easily without requiring users to manually set the 10+ block settings manually each time they want a different kind of block? Block templates could be a good solution to this problem.

For example:

export const myBlock = {
  Component: Block,
  templates: [
    {
      name: 'title-body-features',
      label: 'Title Body and Features',
      defaultItems: {
        title: 'Block title',
        subtitle: 'A really cool block',
        body: 'Lorem ipsum dolar, yadda, yadda, yadda...',
        backgroundColor: 'white',
        features: [
          {
            title: 'Feature One',
            description: 'This is an awesome description for feature one',
          },
          {
            title: 'Feature Two',
            description: 'This is an awesome description for feature one',
          },
          {
            title: 'Feature Three',
            description: 'This is an awesome description for feature one',
          },
        ]
      }
    },
    {
      name: 'title-and-body-on-black',
      label: 'Title and Body on Black',
      defaultItems: {
        supertitle: 'Blocks are cool',
        title: 'Block title',
        body: 'Lorem ipsum dolar, yadda, yadda, yadda...',
        bodyColumnCount: 2,
        backgroundColor: 'black',
        color: 'white',
        cta: {
          type: 'button',
          label: 'Click me!',
          link: '/epic-page',
        }
      }
    }
  ],
  fields: [...],
}
1 Like

I really should have titled this “Block Presets” because there are three different concepts here.

Block presets is what I mentioned above where the presets would set the current block to a specific configuration using existing fields on the block.

Block templates may pull from a library of starter nested block structures for specific kinds of content. Think Elementor Template Library.

Block symbols would be more in line with React components. A block symbol could be a call-to-action that appears on multiple pages. When one changes, they all change. It could even be smaller like a title and paragraph within a parent block, the content could change per instance, but the overall configuration remains consistent across other instances of that symbol (exactly what fields could even be user-configurable). This may help with a more consistent look throughout the site or it might help when you have a group of features on a page for example.

Edit Issue created here…