Skip to content

Commit

Permalink
Update block editor docs (#22308)
Browse files Browse the repository at this point in the history
  • Loading branch information
talldan authored May 13, 2020
1 parent f13c1d2 commit 754c472
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion packages/block-editor/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ function MyEditorComponent () {
onInput={ updateBlocks }
onChange={ updateBlocks }
>
<Popover.Slot name="block-toolbar" />
<WritingFlow>
<ObserveTyping>
<BlockList />
Expand All @@ -48,12 +49,14 @@ function MyEditorComponent () {
// import '@wordpress/block-editor/build-style/style.css';
```

In this example, we're instantiating a block editor. A block editor is composed by a `BlockEditorProvider` wrapper component where you passe the current array of blocks and on each change the `onInput` or `onChange` callbacks are called depending on whether the change is considered persistent or not.
In this example, we're instantiating a block editor. A block editor is composed by a `BlockEditorProvider` wrapper component where you pass the current array of blocks and on each change the `onInput` or `onChange` callbacks are called depending on whether the change is considered persistent or not.

Inside `BlockEditorProvider`, you can nest any of the available `@wordpress/block-editor` UI components to build the UI of your editor.

In the example above we're rendering the `BlockList` to show and edit the block list. For instance we could add a custom sidebar and use the `BlockInspector` component to be able to edit the advanced settings for the currently selected block. (See the [API](#API) for the list of all the available components).

The `Popover.Slot` with the `name="block-toolbar"` prop is used to render the toolbar for a selected block.

In the example above, there's no registered block type, in order to use the block editor successfully make sure to register some block types. For instance, registering the core block types can be done like so:

```js
Expand Down

0 comments on commit 754c472

Please sign in to comment.