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

概要

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

Top ↑

はじめる前に

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

Top ↑

スタイルを追加する方法

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

Top ↑

方法 1: インラインスタイル

最初の方法では、インラインスタイルを追加します。定義されたスタイルを、挿入される要素上のプロパティに変換します。

useBlockProps React フックを使用して、ブロックのラッパー要素にプロパティをセットし、適用します。以下に例を示します。

JSX

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

Plain

( function ( blocks, element, blockEditor ) {
	var el = element.createElement;

	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
		edit: function ( props ) {
			const greenBackground = {
				backgroundColor: '#090',
				color: '#fff',
				padding: '20px',
			};
			const blockProps = blockEditor.useBlockProps( {
				style: greenBackground,
			} );
			return el(
				'p',
				blockProps,
				'Hello World (from the editor, in green).'
			);
		},
		save: function () {
			const redBackground = {
				backgroundColor: '#090',
				color: '#fff',
				padding: '20px',
			};
			const blockProps = blockEditor.useBlockProps.save( {
				style: redBackground,
			} );
			return el(
				'p',
				blockProps,
				'Hello World (from the frontend, in red).'
			);
		},
	} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

Top ↑

方法 2: ブロックのクラス名

インラインスタイルは、適用するCSSの量が少ない場合にはうまく動作します。しかし、多くの CSS がある場合は、別のスタイルシートファイルで管理する方が簡単でしょう。

useBlockProps フックは、ブロックのクラス名を自動的に含めます。ブロックの名前の前に wp-block- を付け、名前空間セパレータ「/」を1つの「-」に置き換えて、クラス名を生成します。

例えば、ブロック名「gutenberg-examples/example-02-stylesheets」は、クラス名「wp-block-gutenberg-examples-example-02-stylesheets」になります。少し長いかもしれませんが、他のブロックとの衝突を避けるためには最適です。

JSX

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

Plain

( function ( blocks, element, blockEditor ) {
	var el = element.createElement;

	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
		edit: function ( props ) {
			var blockProps = blockEditor.useBlockProps();
			return el(
				'p',
				blockProps,
				'Hello World (from the editor, in green).'
			);
		},
		save: function () {
			var blockProps = blockEditor.useBlockProps.save();
			return el(
				'p',
				blockProps,
				'Hello World (from the frontend, in red).'
			);
		},
	} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

Top ↑

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

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

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

例:

{
	"apiVersion": 2,
	"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 フックを使用します。詳細については、 ブロックラッパーリファレンスドキュメント を参照してください。

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

原文

最終更新日: