カスタムブロックにカスタムブロックスタイルを適用する方法を見ていきます。
コンテンツ
ブロックの雛形を生成する
npx @wordpress/create-block@latest tape-style --template @block-developer-cookbook/tape-styleプラグインの構成
- tape-style
- css
- block.json
- tape.css
- css
- tape-style.php
- and more …
tape-style.php
ブロックスタイルを登録する
プラグインファイルにブロックスタイルを登録する関数を記述する。
<?php
/**
* Plugin Name: Tape Style
* Description: Create a custom block style to make images look like they're taped to the screen.
* Requires at least: 6.4
* Requires PHP: 7.0
* Version: 1.0.4
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: tape-style
*
* @package block-developers-cookbook
*/
namespace BlockDevelopersCookbook;
/**
* Register block styles.
*/
function register_image_block_styles() {
register_block_style(
'core/image',
array(
'name' => 'tape',
'label' => 'Tape'
)
);
}
add_action('init', __NAMESPACE__ . '\register_image_block_styles');
namespace
名前空間の宣言：BlockDevelopersCookbook という名前空間を定義する。これにより、このファイル内のすべての関数、クラス、定数は BlockDevelopersCookbook という名前空間に属することになる
namespace BlockDevelopersCookbook;関数 register_image_block_styles() は、このファイル内の名前空間 BlockDevelopersCookbook に属している。
関数の呼び出し：現在の名前空間を指す定数__NAMESPACE__ を使用。現在の名前空間に属する関数 register_image_block_stylesを参照している
add_action('init', __NAMESPACE__ . '\register_image_block_styles');
// __NAMESPACE__ . '\register_image_block_styles →
// BlockDevelopersCookbook\register_image_block_styles外部ファイルを適用する
上記と同じプラグインファイルにブロックスタイルを記述したCSSファイルの読み込みを記述する。
該当のブロックが使用されているページのみスタイルを適用する
ブロックが使用されていないページではスタイルを読み込まないように設定し、無駄なファイルの読み込みを防ぐ。
add_action('enqueue_block_assets', function () {
if (is_singular() && has_block('core/image')) {
wp_enqueue_style(
'block-developers-cookbook-block-core-image',
plugin_dir_url(__FILE__) . 'css/tape.css',
array(),
'1.0.0'
);
}
});has_block( string $block_name, int|null $post_id = null )
特定の投稿やページに特定のブロックが存在するかどうかを確認する関数
引数
$block_name(必須): チェックするブロックの名前（スラッグ）を指定$post_id(オプション): 投稿またはページのIDを指定。この引数を省略すると、現在表示中の投稿（get_the_ID()）が使われる
戻り値
- true or false
ブロックの使用にかかわらずスタイルを適用する
core/image ブロックにスタイルシート（CSS）を適用する処理。
wp_enqueue_block_style(
'core/image',
array(
'handle' => 'block-developers-cookbook-block-core-image',
'src' => plugin_dir_url(__FILE__) . 'css/tape.css',
'path' => plugin_dir_path(__FILE__) . 'css/tape.css',
'deps' => array(),
'ver' => '1'
)
);wp_enqueue_block_style
- 第一引数：スタイルを適用するブロックを定義
- 第二引数（配列）
handle：スタイルシートを識別するためのユニークな名前src：スタイルシートの URL を指定
CSS ファイルをクライアントがリクエストするための 公開URL（ブラウザが直接アクセスできる URL）path：スタイルシートの サーバー上のファイルシステム上のパス を指定
サーバー上のPHP がアクセスするための ファイルの物理パスdeps（依存関係）：スタイルシートが依存する他のスタイルシートやスクリプトを指定する配列。からの配列の場合は依存関係はないという意味になるver：スタイルシートのバージョン番号
srcとpathの比較
// src
http://example.com/wp-content/plugins/preset-block-bindings/css/tape.css
// path
サーバールート/public/wp-content/plugins/preset-block-bindings/css/tape.css参考：https://blockdevelopercookbook.com/recipes/custom-image-block-style/