-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Bootstrap some documentation for the block editor module #14566
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -1,6 +1,6 @@ | ||||||||||||
| # Block Editor | ||||||||||||
|
|
||||||||||||
| Generic block editor module. | ||||||||||||
| This module allows you to create and use standalone block editors. | ||||||||||||
|
|
||||||||||||
| ## Installation | ||||||||||||
|
|
||||||||||||
|
|
@@ -12,6 +12,58 @@ npm install @wordpress/block-editor --save | |||||||||||
|
|
||||||||||||
| _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._ | ||||||||||||
|
|
||||||||||||
| ## Usage | ||||||||||||
|
|
||||||||||||
| ```js | ||||||||||||
| import { | ||||||||||||
| BlockEditorProvider | ||||||||||||
| BlockList | ||||||||||||
| } from '@wordpress/block-editor'; | ||||||||||||
| import { useState } from '@wordpress/element'; | ||||||||||||
|
|
||||||||||||
| function MyEditorComponent () { | ||||||||||||
| const [ blocks, updateBlocks ] = useState( [] ); | ||||||||||||
|
|
||||||||||||
| return ( | ||||||||||||
| <BlockEditorProvider | ||||||||||||
| value={ blocks } | ||||||||||||
| onInput={ updateBlocks } | ||||||||||||
| onChange={ updateBlocks } | ||||||||||||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. For someone who doesn't care about "Undo" levels, I wonder if the simplest example can just include Though as I write this, I guess it assumes that gutenberg/packages/block-editor/src/components/provider/index.js Lines 95 to 99 in d9768ad
The original thinking being that you could have
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good thoughts, and yeah I think you're right, it would have been better to have the two calls at the same time. I recall something related to the state making this harder for us but I think we can probably revisit specifically.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. IIRC, #14105 was partly toward this goal as well. |
||||||||||||
| > | ||||||||||||
| <WritingFlow> | ||||||||||||
| <ObserveTyping> | ||||||||||||
| <BlockList /> | ||||||||||||
| </ObserveTyping> | ||||||||||||
| </WritingFlow> | ||||||||||||
| <Popover.Slot /> | ||||||||||||
| </BlockEditorProvider> | ||||||||||||
| ); | ||||||||||||
| } | ||||||||||||
|
|
||||||||||||
| // Make sure to load the block editor stylesheets too | ||||||||||||
| // import '@wordpress/components/build-style/style.css'; | ||||||||||||
| // 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. | ||||||||||||
|
|
||||||||||||
| 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). | ||||||||||||
|
|
||||||||||||
| 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 | ||||||||||||
| import { registerCoreBlocks } from '@wordpress/block-library'; | ||||||||||||
|
|
||||||||||||
| registerCoreBlockTypes(); | ||||||||||||
|
|
||||||||||||
| // Make sure to load the block stylesheets too | ||||||||||||
| // import '@wordpress/block-library/build-style/style.css'; | ||||||||||||
| // import '@wordpress/block-library/build-style/editor.css'; | ||||||||||||
| // import '@wordpress/block-library/build-style/theme.css'; | ||||||||||||
| ``` | ||||||||||||
|
|
||||||||||||
| ## API | ||||||||||||
|
|
||||||||||||
| <!-- START TOKEN(Autogenerated API docs) --> | ||||||||||||
|
|
||||||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any plans to introduce another wrapping component to make it as simple as:
or something like that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I ultimately think all these wrappers I'm using here should be part of
BlockEditorProviderwhich is basically what you're proposing.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome, I like where it is heading 👍