The basic idea of making a block editor
Mainly refer to two block editors:
Gutenberg editor for WordPress: https://wordpress.org/gutenberg/
Editorjs editor: https://editorjs.io/
1. Architecture
MVVM Architecture
M layer: pure json, refer to editorjs for this. Gutenberg's M layer is heavily bound to WordPress itself (comments + shortcodes), so it is not worth referring to.
V layer: Gutenberg's method is more suitable.
VM layer: None.
Blocks
All blocks have two states: show and edit.
When viewing content created by the block editor, the state of the block is show.
When editing content using the block editor, the block status is edit.
The display of the two states remains consistent, achieving "what you see is what you get".
The edit state block is built on the basic block.
Basic Block
All blocks are built on this basic block.
The main interactions in the edit state of the block are here.
4. Editor page
The main page of the editor renders blocks based on data and data changes.
5. Block Renderer
When viewing the content created by the block editor, you need to parse the JSON data and render blocks based on the JSON data.
