概要
ブロックは、通常、スタイルを設定する投稿コンテンツにマークアップ (HTML) を挿入します。このガイドでは、ブロックエディタで CSS を使用するいくつかの方法と、スタイルとスタイルシートの操作方法について説明します。
はじめる前に
このガイドで紹介する例を実装するには、基本的なブロックと WordPress の開発環境が必要です。クイックスタートガイド、またはブロックチュートリアルを参照してください。
スタイルを追加する方法
以下では、エディター内部または保存時に、ブロックへスタイルを追加する異なる方法を紹介します。
方法 1: インラインスタイル
最初の方法では、インラインスタイルを追加します。定義されたスタイルを、挿入される要素上のプロパティに変換します。
useBlockProps React フックを使用して、ブロックのラッパー要素にプロパティをセットし、適用します。以下に例を示します。
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit() {
const greenBackground = {
backgroundColor: '#090',
color: '#fff',
padding: '20px',
};
const blockProps = useBlockProps( { style: greenBackground } );
return (
<p { ...blockProps }>Hello World (from the editor, in green).</p>
);
},
save() {
const redBackground = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
const blockProps = useBlockProps.save( { style: redBackground } );
return (
<p { ...blockProps }>Hello World (from the frontend, in red).</p>
);
},
} );
方法 2: ブロックのクラス名
インラインスタイルは、適用するCSSの量が少ない場合にはうまく動作します。しかし、多くの CSS がある場合は、別のスタイルシートファイルで管理する方が簡単でしょう。
useBlockProps フックは、ブロックのクラス名を自動的に含めます。ブロックの名前の前に wp-block- を付け、名前空間セパレータ「/」を1つの「-」に置き換えて、クラス名を生成します。
例えば、ブロック名「gutenberg-examples/example-02-stylesheets」は、クラス名「wp-block-gutenberg-examples-example-02-stylesheets」になります。少し長いかもしれませんが、他のブロックとの衝突を避けるためには最適です。
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
edit() {
const blockProps = useBlockProps();
return (
<p { ...blockProps }>Hello World (from the editor, in green).</p>
);
},
save() {
const blockProps = useBlockProps.save();
return (
<p { ...blockProps }>Hello World (from the frontend, in red).</p>
);
},
} );
依存関係のビルドまたは追加
blockEditor を依存関係として含めるには、ビルド手順を実行するか、アセット PHP ファイルを更新してください。
スクリプトをビルドし、依存関係やビルドバージョンの追跡に使用されるアセットファイルを更新します。
npm run build
スタイルシートのエンキュー
スクリプトと同様に、ブロックのスタイルも block.json ファイルを使用してエンキューできます。
エディタービューのみに読み込みたい CSS ファイルには editorStyle プロパティを使用してください。ブロックが使用されるときにエディタービューとフロントエンド上に読み込みたい CSS ファイルには style プロパティを使用してください。ブロックが使用されるときにフロントエンド上のみに読み込みたい CSS ファイルには viewStyle プロパティを使用してください。
注意として、エディターコンテンツが iframe 化されている場合、style と editorStyleの両方が iframe 内に読み込まれます。editorStyle は iframe の外側にも読み込まれるため、UI だけでなくエディターのコンテンツにも使用できます。
例:
{
"apiVersion": 3,
"name": "gutenberg-examples/example-02-stylesheets",
"title": "Example: Stylesheets",
"icon": "universal-access-alt",
"category": "layout",
"editorScript": "file:./block.js",
"editorStyle": "file:./editor.css",
"style": "file:./style.css"
}
プラグインディレクトリに、エディタビューで読み込む editor.css ファイルを作成します。
/* green background */
.wp-block-gutenberg-examples-example-02-stylesheets {
background: #090;
color: white;
padding: 20px;
}
そして、フロントエンドで読み込む style.css ファイルです。
/* red background */
.wp-block-gutenberg-examples-example-02-stylesheets {
background: #900;
color: white;
padding: 20px;
}
block.jsonで指定されたファイルは、自動的にエンキューされます。
wordpress/scriptsを使用している場合、@wordpress/scriptsがスタイルシートを処理するために、対応する JavaScript ファイル内にスタイルシートをインポートする必要があります。 例:
edit.js内にはimport './editor.scss';を起きます。index.js内にはimport './style.scss';を起きます。view.js内にはimport './view.scss';を起きます (インタラクティブブロックテンプレート)。
注意: インクルードするファイルが複数ある場合は、他のプラグインやテーマと同様に、標準の wp_enqueue_style 関数を使用できます。ブロックエディターでは、以下のフックを使用できます。
enqueue_block_editor_assets– エディタービュー内のみに読み込むenqueue_block_assets– フロントエンドとエディタービューの両方で読み込む
まとめ
このガイドでは、インラインまたは独自のスタイルシートによって、ブロックにスタイルを適用する方法を紹介しました。この方法はどちらも useBlockProps フックを使用します。詳細については、 ブロックラッパーリファレンスドキュメント を参照してください。
完全なサンプルコードは block-development-examples リポジトリ 内の stylesheets-79a4c3 を参照してください。