GutenbergエディターがWordPressに導入されたのは、2018年にリリースされたバージョン5.0でのこと。ブロックを組み合わせるように固定ページや投稿を作成するこの新たなアプローチは、それまでのコンテンツ作成に大きな影響を与えました。リリース当初のブロックはかなり基本的なものでしたが、現在では柔軟性と編集体験に優れたエディターへと進化しています。
とはいえ、特定の機能の削除や追加、特定のスタイルのデフォルトでの適用、設定へのアクセスの簡素化など、ブロックでは実現できないこともあります。このような場合、ゼロからカスタムブロックを作成することが真っ先に思いつくかもしれませんが、ちょっとした微調整のためにカスタムブロックを作成するのは面倒です。
そんな時に役に立つのがBlocks APIです。今回は、Blocks APIを使ってWordPress既存のブロックを拡張する方法を実用的な例とともにご紹介していきます。
WordPressのBlocks APIとは
WordPressのBlocks APIはブロックエディターの基盤であり、開発者がブロックを作成、変更、拡張することを可能にします。具体的には、以下のようなことを実現できます。
- ブロック設定の変更─ブロックの属性、デフォルト値、動作を変更する
- ブロックサポートの追加と削除─タイポグラフィ、色、余白などの設定を有効または無効にする
- カスタムコントロールの挿入─ブロックの設定パネル内にオプションを追加する
- ブロックバリエーションの作成─既存のブロックの設定済みバージョンを作成し、コンテンツ作成を効率化する
WordPressのブロックは、段落、画像、ボタンブロックなど、その種類を問わず、block.jsonファイルに格納された属性と設定のセットによって定義されます。ファイルにはブロック名、カテゴリー、デフォルト属性、サポートする機能などのメタデータが含まれています。
これらの値はPHPまたはJavaScriptを使用して変更できますが、今回はBlocks APIのフィルターフックを使った方法を取り上げます。この方法では、JavaScriptファイルをエンキューすることなく、変更が確実にサーバーに登録されます。
例えば、ブロックの特定の機能を有効または無効にしたい場合には、PHPのregister_block_type_argsフィルターを使用するのが最善です。block.jsonファイルを直接編集することなく、ブロックの設定を動的に変更することができます。
ブロックサポートの変更
WordPressのブロックには、エディターで利用可能なオプションを制御するサポートがあらかじめ設定されてます。画像ブロック（core/image）などの一部ブロックにはデフォルトでデュオトーンフィルターが有効になっており、カラーオーバーレイが適用できるようになっています。
しかし、メディアとテキストブロック（core/media-text）は、画像を挿入できるにもかかわらず、デュオトーンフィルターをサポートしていません。単体の画像ブロックには適用できるフィルターが、メディアとテキストブロック内に配置した画像には適用できないということになります。
メディアとテキストブロックには画像を挿入できるため、デュオトーンフィルターを適用することは理にかなっています。これを実現するには、supports配列を変更して正しい CSSセレクタを指定します。これにはPHPのregister_block_type_argsフィルターを使用します。
以下のコードをテーマのfunctions.phpファイルに追加します。
function enable_duotone_for_media_text_block($args, $block_type) {
// メディアとテキストブロックのみ修正
if ( 'core/media-text' === $block_type ) {
$args['supports'] ??= [];
$args['supports']['filter'] ??= [];
$args['supports']['filter']['duotone'] = true;
$args['selectors'] ??= [];
$args['selectors']['filter'] ??= [];
$args['selectors']['filter']['duotone'] = '.wp-block-media-text .wp-block-media-text__media';
}
return $args;
}
add_filter('register_block_type_args', 'enable_duotone_for_media_text_block', 10, 2);上記のコードでは、supports配列内でデュオトーンフィルターを有効にし、メディアとテキストブロック内の画像にデュオトーンを適用するためのCSSセレクタを定義しています。add_filter()は10を優先順位（フィルター実行時）として使用し、2で渡される引数の数を指定します（$args、$block_type）。
ファイルを保存して再読み込みすると、メディアとテキストブロックの「フィルター」セクションに「デュオトーン」設定が表示されるようになります。
register_block_type_argsを使う方法は、ブロックの動作を動的に効果的に変更する方法ですが、block_type_metadataを使ってブロックのメタデータを上書きするという手もあります。
いずれの方法もブロックをカスタマイズすることができますが、ブロックの登録プロセスの異なる段階で機能します。
例えば、段落ブロック（core/paragraph）でマージン（要素の外側の余白）の調整のみを有効にし、パディング（要素の内側の余白）を無効にするには、register_block_type_argsを使用できます。
function modify_paragraph_spacing_args($args, $block_type) {
if ($block_type === 'core/paragraph') {
$args['supports']['spacing'] = [
'margin' => true,
'padding' => false
];
}
return $args;
}
add_filter('register_block_type_args', 'modify_paragraph_spacing_args', 10, 2);これで大体の場合はうまくいきますが、登録された後にブロックを修正するため、同じブロックを後から修正する他のプラグインやテーマによって上書きされてしまうことがあります。
その場合は、block_type_metadataを使ってブロックのメタデータを直接上書きするのが得策です。
function mytheme_modify_paragraph_spacing($metadata) {
if ($metadata['name'] === 'core/paragraph') {
$metadata['supports']['spacing'] = [
'margin' => true,
'padding' => false
];
}
return $metadata;
}
add_filter('block_type_metadata', 'mytheme_modify_paragraph_spacing');どちらの方法を取るのが良いかは、ブロックを変更するタイミングと、変更をどの程度維持したいかによって異なります。
ブロックスタイルの登録
WordPressの多くのブロックには、あらかじめスタイルが設定されており、ユーザーがエディターで選択できるようになっています。この良い例が画像ブロック（core/image）です。デフォルトで角丸スタイルが含まれていますが、これは極端すぎる場合が多く、以下のように繊細さにかける仕上がりになってしまいます。
各画像の境界線の半径を手動で調整する代わりに、ボタンをクリックするだけでより洗練された半径が適用されるようにデフォルトの設定をカスタマイズしたいところです。
以下、画像ブロックの角丸スタイルを調整し、より美しい見た目のためにbox-shadowが追加されるようにしてみます。ブロックエディターではブロックスタイルの登録と解除ができるため、デフォルトの角丸スタイルを削除して独自のバージョンに置き換えることができます。
function modify_image_block_rounded_style() {
// デフォルトの角丸スタイルを削除
unregister_block_style( 'core/image', 'rounded' );
// カスタムCSSで新たな角丸スタイルを登録
register_block_style(
'core/image',
array(
'name' => 'rounded',
'label' => __( 'Rounded', 'your-text-domain' ),
'inline_style' => '
.wp-block-image.is-style-rounded img {
border-radius: 20px; /* この値を調整 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 任意の影 */
}
',
)
);
}
add_action( 'init', 'modify_image_block_rounded_style' );上記のコードでは、デフォルトの過剰な丸みを削除して、border-radius: 20px;を適用して角を滑らかにし、box-shadowを適用して微妙に持ち上げるより美しいバージョンに置き換えます（以下参照）。
インラインスタイルの代わりに外部CSSファイルを使用する
インラインスタイルは、シンプルなスタイルには有効ですが、保守性を考慮すると理想的ではありません。代わりに、外部CSSファイルでスタイルを定義してエンキューすることをおすすめします。
これを行うには、新規CSSファイル（例：custom-block-styles.css）を作成して以下を貼り付けます。
/* 画像ブロックの独自の角丸スタイル */
.wp-block-image.is-style-rounded img {
border-radius: 20px; /* 調整した角丸 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 若干の影 */
}次にfunctions.phpのCSSファイルをエンキューします。
function enqueue_custom_block_styles() {
wp_enqueue_style(
'custom-block-styles',
get_template_directory_uri() . '/css/custom-block-styles.css',
array(),
'1.0'
);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_block_styles');
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_styles');これでインラインスタイルの代わりに、PHPに直接CSSを埋め込まずにスタイルを登録できるようになります。
register_block_style(
'core/image',
array(
'name' => 'rounded',
'label' => __( 'Rounded', 'your-text-domain' ),
'style_handle' => 'custom-block-styles'
)
);この方法では、PHPに触れることなくスタイルを変更できます。
ブロックバリエーションの登録
ブロックバリエーションを使用すると、独自の設定を持つブロックを作成できるため、ユーザーがワンクリックで簡単に一貫したデザインを適用することができます。毎回手動でブロックの設定を変更する代わりに、適切な属性、スタイル、または設定が適用されたブロックを挿入可能です。
WordPressのコアブロックのいくつかはこの方法で動作します。埋め込みブロックは単一のブロックではなく、YouTube、X、Spotifyなど、異なるサービスごとにバリエーションが用意されています。行ブロックやスタックブロックもグループブロックのバリエーションであり、それぞれにレイアウト設定が異なります。
このアプローチにより、WordPressはモジュール化を維持し、共有された基本構造を使用しながら、それぞれの要件に合わせた体験を提供することができます。
引用ブロックに「お客様の声」用のバリエーションを作成する
WordPressには「お客様の声」ブロックはありませんが、引用ブロック（core/quote）を活用することができます。引用ブロックにお客様の声用のバリエーションを定義すれば、ユーザーは画像の追加、テキストの調整、全体のフォーマットを手動で行う必要がなくなります。
このバリエーションには、画像ブロック、引用ブロック、そして人名と会社名用の2つの段落ブロックが自動的に追加されるため、調整を加えることなく、すべてのお客様の声が同じ構造の形式に従うことになります。
WordPressでブロックバリエーションを登録するには、JavaScriptのregisterBlockVariation()を使用します。ブロックバリエーションはクライアント側で処理されるため、独自のお客様の声用のバリエーションを登録するJavaScriptファイルをエンキューする必要があります。
これを実装するには、テーマのassets/js/ディレクトリJavaScriptファイル（例：custom-block-variations.js）を作成し、以下のコードを貼り付けます。
wp.domReady(() => {
wp.blocks.registerBlockVariation(
'core/quote',
{
name: 'testimonial',
title: 'お客様の声',
description: 'お客様の声用の引用ブロックのバリエーション',
category: 'text',
attributes: {
className: 'is-style-testimonial',
},
innerBlocks: [
['core/image', { align: 'center', width: 100, height: 100 }],
['core/quote'],
['core/paragraph', { placeholder: '名前', align: 'center', fontSize: 'medium', className: 'testimonial-name' }],
['core/paragraph', { placeholder: '会社名/役職', align: 'center', fontSize: 'small', className: 'testimonial-company' }]
],
scope: ['inserter'],
}
);
// エディタープレビューにインラインスタイルを注入
const style = document.createElement('style');
style.innerHTML = `
.wp-block-quote.is-style-testimonial {
background-color: #f9f9f9;
padding: 24px;
border: none !important;
border-radius: 8px;
text-align: center;
font-size: 1.2em;
font-style: normal;
color: #333;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.wp-block-quote.is-style-testimonial p {
margin-bottom: 12px;
font-size: 1.1em;
}
.wp-block-quote.is-style-testimonial cite {
font-weight: bold;
display: block;
margin-top: 10px;
color: #0073aa;
}
.wp-block-quote.is-style-testimonial .wp-block-image {
display: flex;
justify-content: center;
margin: 0 auto 12px;
}
.wp-block-quote.is-style-testimonial .wp-block-image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 12px;
}
.wp-block-quote.is-style-testimonial .testimonial-name {
font-weight: bold;
font-size: 1.2em;
margin-top: 12px;
color: #222;
}
.wp-block-quote.is-style-testimonial .testimonial-company {
font-size: 0.9em;
color: #555;
}
`;
document.head.appendChild(style);
});上のコードは、registerBlockVariation()が引用ブロックのお客様の声バリエーションを定義し、画像ブロック、引用ブロック、および人名と会社名用の2つの段落ブロックを事前読み込みします。画像ブロックは100×100ピクセルで中央に配置されるため、統一されたレイアウトでプロフィール画像が表示されます。
スタイリングのためにカスタムクラス（is-style-testimonial）が適用され、ブロックに明るい背景、若干の影、中央寄せのテキストが与えられます。デフォルトの左枠線は削除され、画像は縦横比を維持し、美しい見た目のためわずかに角が丸くなります。
続いて、ブロックエディター内でJavaScriptファイルを読み込むため、functions.phpでエンキューします。
function enqueue_custom_block_variations() {
wp_enqueue_script(
'custom-block-variations',
get_template_directory_uri() . '/assets/js/custom-block-variations.js',
array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
filemtime( get_template_directory() . '/assets/js/custom-block-variations.js' ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'enqueue_custom_block_variations' );これにより、引用ブロックのお客様の声バリエーションがブロックエディター内に表示されるようになります。
JavaScriptのコードを使ってエディターでブロックが正し表示されるようにしながら、公開時にお客様の声が正しく表示されるようにフロントエンドにスタイルを適用する必要があります。これには、以下のコードをfunctions.phpに追加します。
function register_testimonial_block_style() {
register_block_style(
'core/quote',
array(
'name' => 'testimonial',
'label' => __( 'お客様の声', 'your-text-domain' ),
'inline_style' => '
.wp-block-quote.is-style-testimonial {
background-color: #f9f9f9;
padding: 24px;
border: none !important;
border-radius: 8px;
text-align: center;
font-size: 1.2em;
font-style: normal;
color: #333;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
.wp-block-quote.is-style-testimonial .wp-block-image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 12px;
}
.wp-block-quote.is-style-testimonial .testimonial-name {
font-weight: bold;
font-size: 1.2em;
margin-top: 12px;
color: #222;
}
.wp-block-quote.is-style-testimonial .testimonial-company {
font-size: 0.9em;
color: #555;
}
',
)
);
}
add_action( 'init', 'register_testimonial_block_style' );これで、引用ブロックを挿入する際には、画像、引用、名前、会社名のフィールドが統一された形式で表示されるようになります。ユーザーは手動で調整を行うことなく、素早くお客様の声を作成できます。
サイトデザインの一貫性も維持され、コンテンツ制作のワークフローも改善されます。
SupportsとStyles APIを組み合わせてボタンスタイルを統一（応用編）
それぞれのAPIでできることと仕組みを押さえたところで、最後に一歩進んでみましょう。Supports APIやStyles APIを別々に使う代わりに、併用して1つの問題を解決することができます。ユーザーに適切なスタイルを適用するための構造化された方法を提供しながら、デザインの一貫性を維持します。
例えば、企業サイトで厳格なブランドガイドラインに従って全てのボタンをデザインしたい場合、ユーザーにランダムな色を選んだり、余白を変更したり、ガイドラインから外れたフォントを適用したりしてほしくないものです。この場合は、承認した2つのボタンスタイルからユーザーが選択するようにできると便利です。
- プライマリーボタン：メインのCTAボタン
- セカンダリーボタン：一般にセカンダリーアクションに使用されるより繊細でアウトライン化されたボタン
これには以下が必要になります。
- Styles APIを使って2つのボタンスタイルを定義する
- Supports APIを使って不要な設定を削除し、ユーザーが色、余白、タイポグラフィを変更してデザインを上書きできないようにする
両方のAPIを組み合わせることで、ユーザーがデザインシステムを壊すことを防ぎながら、構造的な選択を可能にします。
ステップ1. ボタンのスタイルを定義する
まず、functions.phpファイルに以下のコードを貼り付けます。
function register_custom_button_styles() {
register_block_style(
'core/button',
array(
'name' => 'primary-button',
'label' => __( 'プライマリボタン', 'your-text-domain' ),
'inline_style' => '
.wp-block-button.is-style-primary-button .wp-block-button__link {
background-color: #4D4D4D;
color: #ffffff;
padding: 12px 24px;
border-radius: 4px;
font-size: 1em;
font-weight: 500;
text-transform: none;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}
',
)
);
register_block_style(
'core/button',
array(
'name' => 'secondary-button',
'label' => __( 'セカンダリーボタン', 'your-text-domain' ),
'inline_style' => '
.wp-block-button.is-style-secondary-button .wp-block-button__link {
background-color: transparent;
color: #4D4D4D;
padding: 12px 24px;
border: 1px solid #4D4D4D;
border-radius: 4px;
font-size: 1em;
font-weight: 500;
text-transform: none;
box-shadow: none;
}
',
)
);
}
add_action( 'init', 'register_custom_button_styles' );これで、ユーザーがボタンブロックを挿入すると、「プライマリボタン」または「セカンダリボタン」の選択肢が表示されるようになります。
プライマリボタンの背景は濃いグレーで、セカンダリボタンの背景は透明で枠線のあるデザインになっています。いずれにも一貫した余白、枠線の半径、フォントスタイルが定義されているため、サイト全体でプロフェッショナルな外観を維持できます。
ステップ2. ボタンのカスタマイズを制限する
ボタンのスタイルは定義しましたが、このままではGutenbergの設定を使ってユーザーが手動でデザインを変更することができてしまいます。色、余白、タイポグラフィに変更が加えられると、ボタンデザインがガイドラインから外れてしまう可能性があります。
Supports APIを使用してカスタマイズオプションを無効にすることで、これを防ぐことができます。以下をfunctions.phpに追加します。
function restrict_button_customization($args, $block_type) {
if ($block_type === 'core/button') {
// 特定の色設定を無効にする（テキスト、背景、リンク）
$args['supports']['color'] = [
'text' => false,
'background' => false,
'link' => false,
];
// 組版設定を無効にする（フォントサイズ、フォントの太さ、行の高さ）
$args['supports']['typography'] = false;
// 余白の設定を無効にする（パディング、マージン）
$args['supports']['spacing'] = false;
}
return $args;
}
add_filter('register_block_type_args', 'restrict_button_customization', 10, 2);これにより、以下が実行されます。
- ユーザーがボタンの色を変更できなくなるため、すべてのボタンがブランドの配色に統一される
- タイポグラフィの制御ができなくなるため、テキストの書式が統一される
- 余白の調整ができなくなり、パディングやマージンの変更ができなくなる
これでユーザーの操作をプライマリボタンかセカンダリボタンのいずれかを選択するだけにとどめ、プロフェッショナルで構造的なデザインを保つことができます。
まとめ
今回ご紹介したカスタマイズは、WordPressでできることのほんの一部です。WordPressは、ブロックの拡張やカスタマイズを簡素化するAPIを豊富に提供しているため、構造的かつユーザーフレンドリーな状態を維持しながら、エディター体験を改善することができます。
ブロックのカスタマイズを本気で習得するのであれば、さらに探求あるのみです。WordPress公式の開発者向けドキュメントに目を通したり、WordCampやミートアップに参加したり、Kinstaブログなどの有益なリソースを活用したりして、学習を続けてみてください。
また、信頼できるサーバーを味方につければ、開発のテストや変更を簡単に行うことができます。ブロックに実験的に加えた変更を試すにしても、トラフィックの多いサイトを管理しているにしても、高性能サーバーは確かなパフォーマンスとスケーラビリティを保証してくれます。KinstaのWordPress専用マネージドクラウドサーバーは、最近世界的レビューサイトG2でWordPressサーバー部門で1位に選出されました。サーバーに関する問題にお悩みの方、サーバー移行を検討中の方は、ぜひKinstaをお試しください。WordPress体験を強化することができます。
