スタイルとスタイルシートの使用（Use styles and stylesheets）

概要

ブロックは通常、投稿コンテンツにスタイルを適用したいマークアップ（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-を接頭辞として付けて各ブロックの名前を生成し、/名前空間セパレーターを単一の-に置き換えます。

例えば、ブロック名: 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フックを使用しています。追加の詳細については、ブロックラッパーリファレンスドキュメントを参照してください。

完全なstylesheets-79a4c3コードは、block-development-examplesリポジトリで確認できます。