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, enable HTML encode, get JSON data, get block count, select all blocks, and control focus.

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.
  • Click the getJsonData button to display the focused block JSON data in an alert window.
  • Click the getHtmlData button to display the editor content as HTML in an alert window.
  • Click the getBlockCount button to display the total number of blocks in an alert window.
  • Click the selectAllBlocks button to select all content in the editor.
  • Click the focusIn button to focus the editor.
  • Click the focusOut button to remove focus from the editor.
  • Click the print button to preview the content before printing from the editor.