スタイルとスタイルシートの利用
概要
ブロックは、通常、スタイルを設定する投稿コンテンツにマークアップ (HTML) を挿入します。このガイドでは、ブロックエディタで CSS を使用するいくつかの方法と、スタイルとスタイルシートの操作方法について説明します。
はじめる前に
このガイドで紹介する例を実装するには、基本的なブロックと WordPress の開発環境が必要です。基本ブロックの作成 または ブロックチュートリアル を参照して、セットアップしてください。
スタイルを追加する方法
以下では、エディター内部または保存時に、ブロックへスタイルを追加する異なる方法を紹介します。
方法 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 );
方法 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 );
依存関係のビルドまたは追加
blockEditor を依存関係として含めるには、ビルド手順を実行するか、アセット PHP ファイルを更新してください。
JSX
スクリプトをビルドし、依存関係やビルドバージョンの追跡に使用されるアセットファイルを更新します。
npm run build
Plain
アセットファイルを編集して、スクリプトに block-editor 依存関係を含めます。
<?php return
array( 'dependencies' =>
array(
'wp-blocks',
'wp-element',
'wp-block-editor',
'wp-polyfill'
),
'version' => '0.1'
);
スタイルシートのエンキュー
スクリプトと同様に、ブロックのスタイルも 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– フロントエンドとエディタービューの両方にロードする
まとめ
このガイドでは、インラインまたは独自のスタイルシートによって、ブロックにスタイルを適用する方法を紹介しました。この方法はどちらも useBlockProps フックを使用します。詳細については、 ブロックラッパーリファレンスドキュメント を参照してください。
完全なサンプルコードは gutenberg-examples リポジトリ 内の example-02-stylesheets を参照してください。
最終更新日: