Example of Template Gallery in React Block Editor Component

All Controls
/
Block-editor
/
TemplateGallery

This sample demonstrates a Template Gallery for the Block Editor; use the horizontal card rail to choose a template, load its blocks into the editor, and customize the content with slash (/) commands, lists, and inline formatting.

More Details...

Loading....
Description

This sample implements a Template Gallery for the Block Editor. A horizontal set of cards acts as a template picker; selecting a card loads its predefined block structure into the editor without reloading the page.

  • Interactive cards: Click a card to select a template with active styling for the selected item.
  • Dynamic loading: Clicking a card calls {' '}renderBlocksFromJson to populate the editor with that template's blocks.
  • Responsive behavior: The card rail scrolls when content overflows.
  • Templates included: Blank Page, Project Brief, Team Decisions, Project Planning, and Meeting Notes.

Use this gallery to kickstart common document plan projects, record decisions, run meetings, and more then tailor the content with headings, lists, checklists, and rich inline styles.