エディター設定
エディターを変更する最も一般的な方法の1つは、設定が初期化されたエディターに送信される前に適用されるblock_editor_settings_all
PHPフィルターを使用することです。
- `````$settings````` – エディターのための[設定可能な設定](d557d2565c4a24b1.md#editor-settings)の配列。
- `````$context````` – 現在のエディターに関する情報を含む[`````WP_Block_Editor_Context`````](https://developer.wordpress.org/reference/classes/wp_block_editor_context/)のインスタンス。
以下の例は、プラグインをアクティブにできないユーザー(管理者)のためにコードエディターを無効にします。これをプラグインまたはテーマの`````functions.php`````ファイルに追加してテストしてください。
``````bash
add_filter( 'block_editor_settings_all', 'example_restrict_code_editor' );
function example_restrict_code_editor( $settings ) {
$can_active_plugins = current_user_can( 'activate_plugins' );
// Disable the Code Editor for users that cannot activate plugins (Administrators).
if ( ! $can_active_plugins ) {
$settings[ 'codeEditingEnabled' ] = false;
}
return $settings;
}
`
さらに多くの例については、以下のユースケースを含むエディターフックのドキュメントを確認してください:
サーバーサイドのtheme.jsonフィルター
theme.jsonファイルはインターフェースオプションを制御する素晴らしい方法ですが、グローバルまたはブロックレベルの変更のみを許可するため、いくつかのシナリオでは制限があります。
たとえば、前のセクションでは、theme.jsonを使用して色とタイポグラフィのコントロールがグローバルに無効にされました。しかし、管理者のユーザーに対して色設定を有効にしたいとしましょう。
柔軟性を提供するために、WordPress 6.1は、4つの異なるデータレイヤーでtheme.jsonデータをカスタマイズできるサーバーサイドフィルターを導入しました。
wp_theme_json_data_default
– WordPressが提供するデフォルトデータにフックします。wp_theme_json_data_blocks
– ブロックが提供するデータにフックします。wp_theme_json_data_theme
– 現在のテーマが提供するデータにフックします。wp_theme_json_data_user
– ユーザーが提供するデータにフックします。
以下の例では、現在のテーマのtheme.jsonファイルからのデータがwp_theme_json_data_theme
フィルターを使用して更新されます。現在のユーザーが管理者である場合、色コントロールが復元されます。
// Disable color controls for all users except Administrators.
function example_filter_theme_json_data_theme( $theme_json ){
$is_administrator = current_user_can( 'edit_theme_options' );
if ( $is_administrator ) {
$new_data = array(
'version' => 2,
'settings' => array(
'color' => array(
'background' => true,
'custom' => true,
'customDuotone' => true,
'customGradient' => true,
'defaultGradients' => true,
'defaultPalette' => true,
'text' => true,
),
),
);
}
return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_theme', 'example_filter_theme_json_data_theme' );
フィルターは、各レイヤーのデータを持つWP_Theme_JSON_Data class
のインスタンスを受け取ります。次に、update_with( $new_data )
メソッドに有効なtheme.jsonのような構造で新しいデータを渡します。$new_data
ではtheme.jsonのバージョン番号が必要です。
クライアントサイド(エディター)フィルター
WordPress 6.2は、エディターがレンダリングされる前にブロックレベルのtheme.json設定を変更できる新しいクライアントサイドフィルターを導入しました。
フィルターはblockEditor.useSetting.before
と呼ばれ、JavaScriptコードで次のように使用できます:
import { addFilter } from '@wordpress/hooks';
/**
* Limit the Column block's spacing options to pixels.
*/
addFilter(
'blockEditor.useSetting.before',
'example/useSetting.before',
( settingValue, settingName, clientId, blockName ) => {
if ( blockName === 'core/column' && settingName === 'spacing.units' ) {
return [ 'px' ];
}
return settingValue;
}
);
この例では、カラムブロックの利用可能なスペーシングユニットをピクセルのみに制限します。上記で説明したように、同様の制限はtheme.jsonフィルターを使用するか、テーマのtheme.jsonファイルでブロックレベルの設定を使用して直接適用できます。
ただし、blockEditor.useSetting.before
フィルターはユニークで、ブロックの位置、隣接するブロック、現在のユーザーの役割などに応じて設定を変更できます。カスタマイズの可能性は広範です。
以下の例では、メディア&テキストブロック内にブロックが配置されると、見出しブロックのテキストカラーコントロールが無効になります。
import { select } from '@wordpress/data';
import { addFilter } from '@wordpress/hooks';
/**
* Disable text color controls on Heading blocks when placed inside of Media & Text blocks.
*/
addFilter(
'blockEditor.useSetting.before',
'example/useSetting.before',
( settingValue, settingName, clientId, blockName ) => {
if ( blockName === 'core/heading' ) {
const { getBlockParents, getBlockName } = select( 'core/block-editor' );
const blockParents = getBlockParents( clientId, true );
const inMediaText = blockParents.some( ( ancestorId ) => getBlockName( ancestorId ) === 'core/media-text' );
if ( inMediaText && settingName === 'color.text' ) {
return false;
}
}
return settingValue;
}
);
ブロックフィルター
エディター自体をキュレーションすることを超えて、個々のブロックを変更する方法はたくさんあります。特定のブロックサポート(背景色など)を無効にしたり、特定のブロックにデフォルトで表示される設定を定義したりしたいかもしれません。
最も一般的に使用されるフィルターの1つはblock_type_metadata
です。これは、PHPでサーバーにブロックタイプが登録されるときに、ブロックのblock.json
ファイルから読み込まれる生のメタデータをフィルタリングすることを可能にします。
フィルターは1つのパラメータを取ります:
$metadata
(array
) – ブロックタイプを登録するためのblock.json
から読み込まれたメタデータ。
以下の例では、見出しブロックの背景色とグラデーションサポートが無効になります。
``````bash
function example_disable_heading_background_color_and_gradients( $metadata ) {
// Only apply the filter to Heading blocks.
if ( ! isset( $metadata['name'] ) || 'core/heading' !== $metadata['name'] ) {
return $metadata;
}
// Check if 'supports' key exists.
if ( isset( $metadata['supports'] ) && isset( $metadata['supports']['color'] ) ) {
// Remove Background color and Gradients support.
$metadata['supports']['color']['background'] = false;
$metadata['supports']['color']['gradients'] = false;
}
return $metadata;
}
add_filter( 'block_type_metadata', 'example_disable_heading_background_color_and_gradients' );
`
利用可能なブロックフィルターについては、ブロックフィルターのドキュメントで詳しく学ぶことができます。
追加リソース
- サーバーサイドフィルターを使用してtheme.jsonデータを変更する方法 (WordPress開発者ブログ)
- クライアントサイドフィルターでエディター体験をキュレーションする (WordPress開発者ブログ)