ブロックバリエーションを使ってグループブロックでタイトル付ボックスを作成する方法
ブロックバリエーションという機能を使って、グループブロックでタイトル付ボックスを作成する方法について紹介します。
ブロックをゼロから自作すると面倒ですが、既存ブロックのバリエーションとしてブロックバリエーションを使えば、意外に簡単にタイトル付ボックスを作成可能です。
本記事ではグループブロックのバリエーションとして、次のような2種類のタイトル付ボックスを作成します。
上部タイトル付ボックス
シンプルタイトル付ボックス
カスタムHTMLブロックにHTMLをベタ打ちしたり、カスタムCSSを使って装飾ボックスを作成する方法に比べると次のメリットがあります。
- タイトル部のテキストをブロックエディターで入力できる
- 本文には段落・リスト・画像など各種ブロックを配置できる
ブロックバリエーションとは
既存のブロックのバリエーションとして別のブロックを作成する機能です。
https://developer.wordpress.org/block-editor/reference-guide...ブロックスタイルの場合（こちらの記事参照）は、同じブロックの中でスタイルを複数登録して切り替えることができますが、複数の既存ブロックを組み合わせて別のブロックを作り出すことはできません。
しかし、ブロックバリエーションを使えば、インナーブロックという機能を使って、既存ブロックの中に別の既存ブロックをあらかじめ配置することができるのです。
本記事ではグループブロックにバリエーションを作成します。内部に段落ブロックとグループブロックを配置して、段落ブロックをタイトル部、内部のグループブロックを本文入力欄をして使えるようにスタイルを整えていきます。
作成の概要手順
- 子テーマのフォルダー内にblock-script.jsを作成
（block-script.js内でブロックバリエーションを記述する） - 子テーマのフォルダー内にblock-style.cssを作成
（block-script.jsで記述したブロックバリエーションのクラス名に対してスタイルを記述する） - 子テーマのfunctions.phpでblock-script.jsとblock-style.cssを読み込む
詳細手順
①子テーマにblock-script.jsを作成
block-script.jsには次の記述をします。
// グループブロックのブロックバリエーションとしてタイトル付ボックスを作成する
wp.blocks.registerBlockVariation('core/group', [
{
name: 'uppertitle-box',
title: '上部タイトル付きボックス',
description: '上部タイトル付きのボックス（Groupのバリエーション）',
icon: 'edit-page',
attributes: {
className: 'uppertitle-box',
},
innerBlocks: [
[ 'core/paragraph',
{
className: 'uppertitle-box__title',
placeholder: 'タイトルをここに入力...',
}
],
[ 'core/group',
{
className: 'uppertitle-box__body',
},
[
[ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
],
],
],
scope: ['inserter'],
keywords: ['uppertitle-box'],
},
{
name: 's-title-box',
title: 'シンプルなタイトル付きボックス',
description: 'コアブロックで構成されるタイトル付きのボックスコンテンツ',
icon: 'edit-page',
attributes: {
className: 's-title-box',
},
innerBlocks: [
[ 'core/paragraph',
{
className: 's-title-box__title',
placeholder: 'タイトルをここに入力...',
}
],
[ 'core/group',
{
className: 's-title-box__body',
},
[
[ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
],
],
],
scope: ['inserter'],
keywords: ['s-title-box'],
},
]);ブロックにバリエーションを追加するには、wp.blocks.registerBlockVariation( )を使います。
書式は次の通りです。
wp.blocks.registerBlockVariation( 'ブロックのスラッグ’ , [ （登録するバリエーションの記述） ])
今回はグループブロックのバリエーションなので、第１引数は 'core/group’ となります。
作成するボックスが2種類なので、第２引数の[ ]内にも2種類の{ }を記述しています。
１つ目のバリエーション’uppertitle-box’
{
name: 'uppertitle-box',
title: '上部タイトル付きボックス',
description: '上部タイトル付きのボックス（Groupのバリエーション）',
icon: 'edit-page',
attributes: {
className: 'uppertitle-box',
},
innerBlocks: [
[ 'core/paragraph',
{
className: 'uppertitle-box__title',
placeholder: 'タイトルをここに入力...',
}
],
[ 'core/group',
{
className: 'uppertitle-box__body',
},
[
[ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
],
],
],
scope: ['inserter'],
keywords: ['uppertitle-box'],
}| key | value |
|---|---|
| name | バリエーションのスラッグ名 |
| title | エディター内で表示されるブロック名 |
| description | バリエーションの説明文 |
| icon | エディター内で表示されるブロックのアイコン |
| attributes | 属性（今回はクラス名を指定） |
| innerBlocks | ブロック内に配置する既存ブロックを指定 |
| scope | バリエーションの挿入方法（今回はinseterを指定したのでブロック一覧表に表示） |
| keywords | ブロックの検索に使う |
この中で、ブロックの構成のキーとなるのがattributesで記述したクラス名と、innerBlocksで記述した各既存ブロックとそのクラス名です。
バリエーション’uppertitle-box’の場合は次の構成となっています。
同様に２つ目のバリエーションである’s-title-box’の場合は次の構成となっています。
これらのクラス名をセレクターとして、次のblock-style.cssにスタイルを記述していきます。
②子テーマにblock-style.cssを作成
block-style.cssには次の記述をします。
/* 上部タイトル付 */
.uppertitle-box {
border: solid 1px #72bac1;
padding: 0 !important;
}
.uppertitle-box .uppertitle-box__title {
padding: .5em 1em !important;
color: #fff;
line-height: 1.5;
text-align: center;
background-color: #72bac1;
}
.uppertitle-box .uppertitle-box__body {
margin: 0 !important;
padding: 1.5em 1em !important;
}
/* シンプルタイトル付 */
.s-title-box {
border: solid 3px #72bac1;
position: relative;
padding: 0 !important;
border-radius: 10px;;
}
.s-title-box .s-title-box__title {
display: inline-block;
position: absolute;
background: #fff;
line-height: 1 !important;
color: #72bac1;
top: -0.5em;
left: 1.5em;
padding: 0 1em !important;
}
.s-title-box .s-title-box__body {
margin: 0 !important;
padding: 1.5em 1em !important;
}わざと詳細度を上げる形でセレクターを記述していますが、block-script.jsに記述した各ブロックの構成に合わせてクラス名を使っています。
③functions.phpでblock-script.jsとblock-style.cssを読み込む
子テーマのfunctions.phpに次を追記します。
//blockスタイルの読み込み
add_action( 'enqueue_block_editor_assets', function() {
// CSSの読み込み
$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );
// JSの読み込み
$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-script.js' ) );
wp_enqueue_script( 'my-block-script', get_stylesheet_directory_uri() . '/block-script.js', [], $timestamp, true );
} );
//web表示側でもblock-style.cssを読み込む
add_action( 'wp_enqueue_scripts', function() {
$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );
} );JSファイルとCSSファイルの読み込み方法は、ブロックスタイル紹介の記事と同じなので解説は割愛します。
ブロックバリエーションを使ってみる
以上でブロックバリエーションが無事登録できたら、ブロックエディターを開けてブロック一覧表を確認すると、登録したバリエーションが表示されます。
それぞれ記事内に挿入してみると以下の通りです。
上部タイトル付ボックス
実際に文字や画像を入力してweb表示するとこんな感じです。
タイトル部を太字化＆フォント拡大。本文入力部の背景色も変更。
シンプルタイトル付ボックス
エディター内で挿入直後。
コンテンツを入力してweb表示。
こちらもタイトル部の文字拡大や背景色変更も可能です。
まとめ
ブロックバリエーションを使ってタイトル付ボックスを作成してみました。
カスタムCSSを使った場合はタイトル部の文字をCSSであらかじめ決まってしまいますが、ブロックバリエーションの場合は既存ブロックの組み合わせなので、エディター内でタイトル文字を自由に変更できるのがいいですね。
次のようにシンプルなステップで作成可能なので、ちょっとしたブロックの自作にはおすすめです。
- 子テーマのフォルダー内にblock-script.jsを作成
（block-script.js内でブロックバリエーションを記述する） - 子テーマのフォルダー内にblock-style.cssを作成
（block-script.jsで記述したブロックバリエーションのクラス名に対してスタイルを記述する） - 子テーマのfunctions.phpでblock-script.jsとblock-style.cssを読み込む
