サイドバープラグインを使用して、GutenbergのWordPressメタデータの管理

この記事では、サイドバープラグインを使用して、Gutenbergエディター内のWordPressメタデータの管理について説明します。 WordPressのブロックエディターであるGutenbergは、ブロックのコレクションとして投稿を表しています。メタデータはブロックを使用して管理できますが、この記事では、頻繁に使用するためにサイドバー管理に焦点を当てています。 Gutenbergがこれらのテクノロジーを頻繁に利用しているため、このチュートリアルではReactJとReduxに精通しています。

GutenbergのコアはReactアプリケーションです。すべてのエディター要素（ポストタイトル、コンテンツエリア、ツールバー、サイドバー）は、反応コンポーネントです。アプリケーション状態は、WordPressのデータモジュールによって管理される集中javaScriptオブジェクト（「ストア」）に保存されます。これらのストアには、ポストデータ（コンテンツ、タイトル、カテゴリ）およびグローバルWebサイト情報（カテゴリ、タグ、投稿）が保持されます。これらのストアの変更は、Gutenberg UIを更新し、保存すると、WordPress REST APIがデータベースを更新します。

ただし、Gutenbergは、デフォルトではこれらのグローバルストアを介してメタデータを管理していません。レガシーPHPメタボックスは依然として機能していますが、WordPressは、グローバルストアを使用してJavaScriptアプローチに移行し、統一されたエクスペリエンスを対応することを推奨しています。

GutenbergのReduxのような店にアクセスして修正します

これらのストアにアクセスするには、Gutenbergの編集者でブラウザのコンソールを開き、 wp.dataを使用します。たとえば、 wp.data.select('core/editor').getBlocks()現在の投稿のブロックを取得します。 wp.data.select('core/editor').getEditedPostAttribute('title')投稿タイトルを取得します。データを変更するには、 wp.data.dispatch()を使用します。たとえば、 wp.data.dispatch('core/editor').editPost({title: 'My new title'})投稿タイトルを更新します。その他の関連するストアには、 core （グローバルWebサイト情報）およびcore/edit-post （Editor UI State）が含まれます。

Gutenbergサイドバー用のWordPressプラグインを作成します

React SideBarコンポーネントを追加するには、WordPressプラグインを作成します。これには、プラグインフォルダー（ gutenberg-sidebarなど）のセットアップ、 plugin.phpファイル（プラグインのエントリポイント）の作成、 npmを使用してJavaScript依存関係（ @wordpress/scripts 、 @wordpress/edit-post 、 @wordpress/plugins 、 @wordpress/i18n 、 @wordpress/components 、 @components、 @conponents、 @wordpress/data plugin.php npm run buildによって作成されたJavaScriptバンドルをエンキューします。

Gutenbergプラグインとサイドバーの登録

JavaScriptコード（ src/index.js ）は@wordpress/pluginsのregisterPluginを使用してプラグインを登録します。 @wordpress/edit-postのPluginSidebarとPluginSidebarMoreMenuItemは、それを切り替えるためのサイドバーとメニュー項目を作成します。

古典的な編集者のメタデータの取り扱い

チュートリアルでは、 add_meta_box 、 get_post_meta 、 update_post_meta 、 wp_verify_nonceなどのPHPメタボックスと関数を使用して、クラシックエディターのメタデータの管理を示しています。 __back_compat_meta_boxオプションは、GutenbergがアクティブなときにMetaboxを隠します。

JavaScriptを使用したメタデータの管理

gutenbergのカスタムフィールド（ _myprefix_text_metafieldなど）をJavascriptを使用して管理するには、 show_in_rest: true 、 sanitize_callback 、およびauth_callbackを使用してregister_metaを使用してフィールドを登録して、rest apiアップデートを許可します。 wp.data.select('core/editor').getEditedPostAttribute('meta')を使用して、 wp.data.dispatch('core/editor').editPost({meta: {_myprefix_text_metafield: 'new value'}})使用してメタダタを更新します。

Reactコンポーネントの作成

Reactコンポーネント（ PluginMetaFields ）は@wordpress/componentsのPanelBodyとTextControlを使用して作成されます。 @wordpress/dataからのwithSelect and withDispatch使用して、コンポーネントをReduxのようなストアに接続し、データの取得と更新を可能にします。 onChangeイベントは、ストアに更新を派遣します。最後に、 @wordpress/componentsの他のコンポーネントを使用してデモンストレーションするために、 ColorPickerコンポーネントが追加されます。完全なコードはGitHubで利用できます。

以上がサイドバープラグインを使用して、GutenbergのWordPressメタデータの管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。