ブロック別CSSの自動読み込み機能について

ブロック別CSSの自動読み込み機能について

メニュー
上級者向け
PHPカスタマイズ
yStandard

yStandardではルールに沿ったディレクトリ・ファイル名でCSSを配置することにより、ブロック用のCSSを自動で読み込むようになっています。

ブロック用CSSの自動読み込み機能のルール、プラグインで同様の機能を利用する方法について紹介します。

  • yStandard v4.41.0で追加された機能です

このページは上級者向けマニュアルです。

自作のプラグインや子テーマを使ってPHPでカスタマイズする内容が含まれます。

WordPress勉強中の方は知らない単語や関数などを調べながらカスタマイズにチャレンジしてみてください。

目次

ブロック別のCSSについて

テーブルブロック用、カラム用…など、特定のブロック用のCSSを読み込ませる方法として wp_enqueue_block_style を使ってブロックを登録していく方法があります。

yStandardでは後述するルールでCSSを配置することで自動的にwp_enqueue_block_style を使いCSSの読み込みを行う機能があります。

これは主に制作者向けの機能となり、register_block_style などでブロックに独自のスタイルを追加し、対応するCSSを用意することで、ブロックの開発の必要もなく、少しのPHPカスタマイズと必要なファイルを用意するだけでサイトの仕様に合わせたレイアウトを作りやすくすることを目的としています。

yStandardが自動で登録するCSSのルールはこちら▼

[ブロック用CSS保存ディレクトリ]/{ネームスペース}__{ブロック名}/ブロック名.css

// 例：テーブルブロックの場合
[ブロック用CSS保存ディレクトリ]/core__table/table.css

「[ブロック用CSS保存ディレクトリ]」については子テーマとプラグインで違いがあるので後述します。

ファイルの配置方法（子テーマ）

前述の「[ブロック用CSS保存ディレクトリ]」について、子テーマの場合は /css/block-styles になります。

yStandard本体と同じディレクトリ構造になりますが、yStandardで用意されているCSSの代わりに子テーマで用意したCSSが読み込まれるわけではなく、yStandard本体に含まれるCSSと子テーマで用意したCSSの2つが読み込まれることになります

/css/block-styles/{ネームスペース}__{ブロック名}/ブロック名.css

// 例：テーブルブロックの場合
/css/block-styles/core__table/table.css

プラグインの場合

独自プラグインでカスタマイズする場合は下記フックを利用して「[ブロック用CSS保存ディレクトリ]」に当たるディレクトリのパスを追加してください。

add_filter( 'ys_block_styles_dir_path', function ( $path ) {
	$path[] = 'path/to/dir'; // 「[ブロック用CSS保存ディレクトリ]」に当たるディレクトリのパス
	
	return $path;
} );