Example of Overview in React Block Editor Component

All Controls
/
Block-editor
/
Overview

This sample demonstrates the features of the Block Editor control. It showcases various block types, content formatting options, and interactive editing capabilities.

More Details...

Loading....
Description

The Block Editor is a modern, block-based content editing solution. It offers a powerful and intuitive interface for creating structured documents using discrete, interactive content blocks.

Key features demonstrated in this sample:

  • Multiple block types including Heading1-4, Paragraph, Table, BulletList, NumberedList, Checklist, Quote, Callout, Divider, Code, ToggleParagraph, and more.
  • Rich text formatting with styles like Bold, Italic, Underline, Strikethrough, Uppercase, and more.
  • Interactive Slash ("/") commands for quick block insertion and transformation.
  • Hierarchical organization with expandable Toggle Blocks.
  • Support for inline special content such as Links and Labels.
  • Interactive label ("$") options for quick insertion of the labels.
  • Block manipulation with Action menu, allowing move, delete, and duplicate operations.
  • Keyboard shortcuts for fast, accessible editing workflows.