スタイルとスタイルシートの利用

Topics

  • 概要
  • はじめる前に
  • スタイルを追加する方法
  • 方法 1: インラインスタイル
  • 方法 2: ブロックのクラス名
    • 依存関係のビルドまたは追加
    • スタイルシートのエンキュー
  • まとめ

概要

ブロックは、通常、スタイルを設定する投稿コンテンツにマークアップ (HTML) を挿入します。このガイドでは、ブロックエディタで CSS を使用するいくつかの方法と、スタイルとスタイルシートの操作方法について説明します。

Top ↑

はじめる前に

このガイドで紹介する例を実装するには、基本的なブロックと WordPress の開発環境が必要です。基本ブロックの作成 または ブロックチュートリアル を参照して、セットアップしてください。

Top ↑

スタイルを追加する方法

以下では、エディター内部または保存時に、ブロックへスタイルを追加する異なる方法を紹介します。

Top ↑

方法 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>
		);
	},
} );

Top ↑

方法 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>
		);
	},
} );

Top ↑

依存関係のビルドまたは追加

blockEditor を依存関係として含めるには、ビルド手順を実行するか、アセット PHP ファイルを更新してください。

スクリプトをビルドし、依存関係やビルドバージョンの追跡に使用されるアセットファイルを更新します。

npm run build

Top ↑

スタイルシートのエンキュー

スクリプトと同様に、ブロックのスタイルも block.json ファイルを使用してエンキューできます。

エディタービューでロードしたい CSS ファイルには editorStyle プロパティを、ブロックが使用されたときにフロントエンドでロードしたい CSS ファイルには style プロパティを使用します。

注意として、エディターコンテンツが iframe 化されている場合、これらの両方が 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で指定されたファイルは、自動的にエンキューされます。

注意: インクルードするファイルが複数ある場合は、他のプラグインやテーマと同様に、標準の wp_enqueue_style 関数を使用できます。ブロックエディタでは、以下のフックを使用できます。

  • enqueue_block_editor_assets – エディタービューのみにロードする
  • enqueue_block_assets – フロントエンドとエディタービューの両方にロードする

Top ↑

まとめ

このガイドでは、インラインまたは独自のスタイルシートによって、ブロックにスタイルを適用する方法を紹介しました。この方法はどちらも useBlockProps フックを使用します。詳細については、 ブロックラッパーリファレンスドキュメント を参照してください。

完全なサンプルコードは block-development-examples リポジトリ 内の stylesheets-79a4c3 を参照してください。

原文

最終更新日: