エディター設定

エディターを変更する最も一般的な方法の1つは、設定が初期化されたエディターに送信される前に適用されるblock_editor_settings_all PHPフィルターを使用することです。このフィルターは、プラグインやテーマの作者にエディターの動作を広範囲に制御することを可能にします。

WordPress 5.8以前では、このフックはblock_editor_settingsとして知られていましたが、現在は非推奨です。古いバージョンのWordPressをサポートする必要がある場合、どのフィルターを使用すべきかを検出する方法が必要になるかもしれません。WP_Block_Editor_Contextクラスが存在するかどうかを確認することで、block_editor_settingsが安全に使用できるかどうかを確認できます。このクラスは5.8で導入されました。 

  2. - `````$settings````` – エディターの設定を構成するための配列。  
  3. - `````$context````` – 現在のエディターに関する情報を含む[`````WP_Block_Editor_Context`````](https://developer.wordpress.org/reference/classes/wp_block_editor_context/)のインスタンス。  
  5. 以下の例は、最大アップロードファイルサイズを変更します。これをプラグインまたはテーマの`````functions.php`````ファイルに追加してテストしてください。  
  8. ``````bash
  9. add_filter( 'block_editor_settings_all', 'example_filter_block_editor_settings_when_post_provided', 10, 2 );
  11. function example_filter_block_editor_settings_when_post_provided( $editor_settings, $editor_context ) {
  12.    if ( ! empty( $editor_context->post ) ) {
  13.    $editor_settings['maxUploadFileSize'] = 12345;
  14.    }
  15.    return $editor_settings;
  16. }
  17. `

エディター設定は数十種類あり、このドキュメント記事にすべてをリストするには多すぎますが、block_editor_settings_allフィルターでできることのいくつかの例を以下に示します。

すべての利用可能な設定を表示するには、エディターを開き、ブラウザの開発者ツールでコンソールを開きます。コマンドwp.data.select( 'core/block-editor' ).getSettings()を入力して、すべてのエディター設定の現在の値を表示します。

コードエディターアクセスの制限

  2. この設定が`````false`````に設定されている場合、ユーザーはビジュアルエディターとコードエディターの間を切り替えることができません。設定メニューのオプションは利用できず、エディタータイプを切り替えるためのキーボードショートカットは発動しません。以下はその例です：  
  5. ``````bash
  6. add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
  8. function example_restrict_code_editor( $settings ) {
  9.    $can_active_plugins = current_user_can( 'activate_plugins' );
  11.    // Disable the Code Editor for users that cannot activate plugins (Administrators).
  12.    if ( ! $can_active_plugins ) {
  13.    $settings[ 'codeEditingEnabled' ] = false;
  14.    }
  16.    return $settings;
  17. }
  18. `

ビジュアルエディターアクセスの制限

  2. この設定は、[`````user_can_richedit`````](https://developer.wordpress.org/reference/functions/user_can_richedit/)関数の返される値がデフォルトです。この関数は、ユーザーがビジュアルエディターにアクセスできるかどうか、そしてユーザーのブラウザがそれをサポートしているかどうかを確認します。  
  3.  <a name="set-a-default-image-size"></a>
  6. ### デフォルトの画像サイズを設定
  8. 画像はデフォルトでエディターの`````large`````画像サイズに設定されています。`````imageDefaultSize`````設定を使用してこれを変更できます。これは、独自のカスタム画像サイズを設定している場合に特に便利です。以下の例は、デフォルトの画像サイズを`````medium`````に変更します。  
  11. ``````bash
  12. add_filter( 'block_editor_settings_all', 'example_set_default_image_size' );
  14. function example_set_default_image_size( $settings ) {
  15.    $settings['imageDefaultSize'] = 'medium';
  16.    return $settings;
  17. }
  18. `

Openverseを無効にする

Openverse統合は、デフォルトですべてのWordPressサイトに対して有効であり、enableOpenverseMediaCategory設定によって制御されます。Openverseを無効にするには、以下のフィルターを適用します： 

  1. add_filter( 'block_editor_settings_all', 'example_disable_openverse' );
  3. function example_disable_openverse( $settings ) {
  4.    $settings['enableOpenverseMediaCategory'] = false;
  5.    return $settings;
  6. }

フォントライブラリを無効にする

フォントライブラリは、ユーザーがサイトに新しいフォントをインストールできるようにし、デフォルトで有効になっており、fontLibraryEnabled設定によって制御されます。フォントライブラリを無効にするには、以下のフィルターを適用します： 

  1. add_filter( 'block_editor_settings_all', 'example_disable_font_library' );
  3. function example_disable_font_library( $settings ) {
  4.    $settings['fontLibraryEnabled'] = false;
  5.    return $settings;
  6. }

ブロックインスペクタタブを無効にする

ほとんどのブロックは、インスペクタに[https://make.wordpress.org/core/2023/03/07/introduction-of-block-inspector-tabs/]の[2つのタブ]を表示します。1つは設定用、もう1つはスタイル用です。`````blockInspectorTabs`````設定を使用してこれらのタブを無効にできます。 

  1. add_filter( 'block_editor_settings_all', 'example_disable_inspector_tabs_by_default' );
  3. function example_disable_inspector_tabs_by_default( $settings ) {
  4.    $settings['blockInspectorTabs'] = array( 'default' => false );
  5.    return $settings;
  6. }

また、どのブロックにインスペクタタブがあるかを変更することもできます。以下は、特定のブロックのタブを無効にする例です。 

  1. add_filter( 'block_editor_settings_all', 'example_disable_tabs_for_my_custom_block' );
  3. function example_disable_tabs_for_my_custom_block( $settings ) {
  4.    $current_tab_settings = _wp_array_get( $settings, array( 'blockInspectorTabs' ), array() );
  5.    $settings['blockInspectorTabs'] = array_merge(
  6.    $current_tab_settings,
  7.    array( 'my-plugin/my-custom-block' => false )
  8.    );
  10.    return $settings;
  11. }

ブロックディレクトリ

ブロックディレクトリは、ユーザーがWordPress.orgのプラグインディレクトリからエディター内で新しいブロックプラグインを直接インストールできるようにします。この機能を無効にするには、それをキューに追加するアクションであるwp_enqueue_editor_block_directory_assetsを削除します。これを行うには、remove_actionを次のように使用します： 

  1. remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );

ブロックパターン

WordPress.orgのパターンディレクトリからのリモートパターンは、デフォルトでエディターのユーザーに利用可能です。この機能はshould_load_remote_block_patternsによって制御され、デフォルトでtrueに設定されています。フィルターをfalse（return_false）に設定することで、リモートパターンを無効にできます。 

  1. add_filter( 'should_load_remote_block_patterns', '__return_false' );

エディタ機能

以下のフィルターは、エディターの機能を拡張するために利用可能です。

editor.PostFeaturedImage.imageSize

このフィルターを使用して、投稿のフィーチャー画像コンポーネントに表示される画像サイズを変更できます。デフォルトは'post-thumbnail'で、指定された画像サイズがメディアオブジェクトに存在しない場合はfull画像サイズにフォールバックします。これは、クラシックエディターのadmin_post_thumbnail_sizeフィルターをモデルにしています。 

  1. import { addFilter } from '@wordpress/hooks';
  3. const withImageSize = function ( size, mediaId, postId ) {
  4.    return 'large';
  5. };
  7. addFilter(
  8.    'editor.PostFeaturedImage.imageSize',
  9.    'my-plugin/with-image-size',
  10.    withImageSize
  11. );

editor.PostPreview.interstitialMarkup

プレビューを生成する際に表示される中間メッセージをフィルタリングすることもできます。以下はその例です： 

  1. import { addFilter } from '@wordpress/hooks';
  3. const customPreviewMessage = function () {
  4.    return '<b>Post preview is being generated!</b>';
  5. };
  7. addFilter(
  8.    'editor.PostPreview.interstitialMarkup',
  9.    'my-plugin/custom-preview-message',
  10.    customPreviewMessage
  11. );

media.crossOrigin

このフィルターは、外国起源のメディア要素（すなわち、<audio>、<img>、<link>、<script>、<video>）のcrossOrigin属性を設定または変更するために使用されます。crossOrigin属性、その値、および各要素への適用方法についての詳細は、この記事[https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin]を参照してください。

その実行例の1つは、画像ブロックの変換機能で、クロスオリジン画像を<canvas>で使用できるようにします。以下はその例です： 

  1. import { addFilter } from '@wordpress/hooks';
  3. addFilter(
  4.    'media.crossOrigin',
  5.    'my-plugin/with-cors-media',
  6.    // The callback accepts a second `mediaSrc` argument which references
  7.    // the url to actual foreign media, useful if you want to decide
  8.    // the value of crossOrigin based upon it.
  9.    ( crossOrigin, mediaSrc ) => {
  10.    if ( mediaSrc.startsWith( 'https://example.com' ) ) {
  11.    return 'use-credentials';
  12.    }
  13.    return crossOrigin;
  14.    }
  15. );

エディターREST APIプリロードパス

block_editor_rest_api_preload_pathsを使用して、ブロックエディターで使用するために一般的なデータをプリロードするために使用されるREST APIパスの配列をフィルタリングできます。以下はその例です： 

  1. add_filter( 'block_editor_rest_api_preload_paths', 'example_filter_block_editor_rest_api_preload_paths_when_post_provided', 10, 2 );
  3. function example_filter_block_editor_rest_api_preload_paths_when_post_provided( $preload_paths, $editor_context ) {
  4.    if ( ! empty( $editor_context->post ) ) {
  5.    array_push( $preload_paths, array( '/wp/v2/blocks', 'OPTIONS' ) );
  6.    }
  7.    return $preload_paths;
  8. }

エラーのログ記録

UIの一部でJavaScriptエラーが発生しても、アプリ全体が壊れるべきではありません。この問題をユーザーのために解決するために、Reactライブラリは“エラーバウンダリー”の概念を使用します。エラーバウンダリーは、子コンポーネントツリー内のどこでもJavaScriptエラーをキャッチし、クラッシュしたコンポーネントツリーの代わりにフォールバックUIを表示するReactコンポーネントです。 

  2. このアクションを使用して、バウンダリーによって処理されたエラーオブジェクトを取得できます。たとえば、外部のエラートラッキングツールに送信したい場合があります。以下はその例です：  
  5. ``````bash
  6. import { addAction } from '@wordpress/hooks';
  8. addAction(
  9.    'editor.ErrorBoundary.errorLogged',
  10.    'mu-plugin/error-capture-setup',
  11.    ( error ) => {
  12.    // Error is the exception's error object.
  13.    // You can console.log it or send it to an external error-tracking tool.
  14.    console.log ( error );
  15.    }
  16. );
  17. `