Tabs Blocks for Gutenberg

What the blocks do

1) Tabs (container block)

The Tabs block acts as the main wrapper:

• Automatically builds the tab navigation based on the child Tab blocks
  (titles and optional images are collected from the inner blocks)
• Layout options:
  • Horizontal / Vertical tab layout toggle
  • Optional centered labels mode
• Uses native Gutenberg design tools (colors, typography, spacing, alignment, anchors)

The saved markup includes a tab label list (<ul class="tab-labels">) and the tab content wrapper.

2) Tab (item block)

Each Tab block represents one panel:

• Editable tab label (RichText)
• Optional image for the tab label (MediaUpload)
• Any content inside the tab panel via InnerBlocks
• Editor productivity controls:
  • Copy item (duplicate tab)
  • Delete item
  • Quick image remove button

Each Tab saves as a clean panel wrapper (<div class="tab-panel">...</div>).

Output structure

On the frontend the container outputs:

• a generated tab label list (first item marked as active by default)
• a tab content area containing the tab panels (InnerBlocks content)

No hardcoded content templates: panels can contain any blocks and are fully theme-stylable.