Example of API in React Block Editor Component

All Controls
/
Block-editor
/
API

This sample demonstrates the usage of API in Block Editor. Use the properties panel to change read-only mode, enable/disable drag and drop, get JSON data, get HTML data, get block count and select all blocks

More Details...

Loading....
Description

In this demo, you can explore the API behaviors by:

  • Click the readOnly checkbox to enable/disable editable and non-editable mode of the Block Editor.
  • Click the enableDragDrop checkbox to enable/disable drag and drop functionality.
  • Use the grouped buttons:
    • JSON: Shows the editor’s data as JSON in a predefined dialog.
    • HTML: Shows the editor’s HTML output as text in a predefined dialog.
  • Click the getBlockCount button to display the total number of blocks in an predefined dialog.
  • Click the selectAllBlocks button to select all content in the editor.
  • Click the print button to preview the content before printing from the editor.