ブロックエディターを作る基本的な考え方

著者：ネオヤン 時間：2021/12/12 読む： 4148

---

主に次の 2 つのブロック エディタを参照します。

Wordpress 用の Gutenberg エディター: https://wordpress.org/gutenberg/

editorjsエディター: https://editorjs.io/

1. アーキテクチャ

MVVMアーキテクチャ

M 層: 純粋な json、この点については editorjs を参照してください。 Gutenberg の M レイヤーは WordPress 自体 (注釈 + ショートコード) に大きく依存しているため、参照する価値はありません。

第 V 層: Gutenberg の方法の方が適しています。

VM 層: なし。

2.ブロック

すべてのブロックには、表示と編集という 2 つの状態があります。

ブロックエディターで作成したコンテンツを表示すると、ブロックのステータスが表示されます。

ブロックエディターを使用してコンテンツを編集すると、ブロックのステータスは編集になります。

2 つの状態の表示は一貫しており、「表示されているものがそのまま得られる」ことが実現されます。

編集状態ブロックは基本ブロックに基づいて構築されます。

3. 基本ブロック

すべてのブロックはこの基本ブロックに基づいています。

ブロックの編集状態での主な操作は次のとおりです。

4. エディターページ

エディターのメイン ページでは、データとデータの変更に基づいてブロックがレンダリングされます。

5. ブロックレンダラー

ブロック エディターで作成されたコンテンツを表示するときは、json データを解析し、json データに基づいてブロックをレンダリングする必要があります。