Gutenberg Blocks チュートリアルの和訳と解説【カスタムブロックにスタイルを適用する】

前回に引き続き、Block Editor Handbook(ブロックエディターハンドブック)のブロックスチュートリアルを日本語化していきます。今日はApplying Styles From a Stylesheet です。カスタムブロックでエディター側とフロント側のCSSを適用させる方法ですね。前回の記事はこちらからどうぞ。

公式チュートリアルの和訳

公式チュートリアルの英文はこちらのページ↓

スタイルシートでスタイルを適用する

前回のステップでは、インラインスタイル属性によってブロックに独自のスタイルを適用しました。 これは非常に単純なコンポーネントには十分かもしれませんが、スタイルを別々のスタイルシートに分けて書く方が簡単になります。

エディタは、各ブロックタイプのクラス名を自動的に生成します。 それはeditおよびsave関数に渡されたオブジェクト引数からアクセスすることができます。 ステップ2では、そのクラス名を使用するためのスタイルシートを作成します。

クラス名は、wp-block-というプレフィックスが付いたブロックの名前で生成され、/の区切り記号は単一の – に置き換えられます。

エディタとフロントエンドのスタイルを登録

スクリプトと同じように、ブロックのスタイルを登録する必要があります。 前回のセクションで説明したように、エディタにのみ関連するスタイルにはeditor_styleハンドルを使用し、エディタ側とフロントエンド側の両方に適用される一般的なスタイルにはstyleハンドルを使用します。

styleによってエンキューされたスタイルシートはベーススタイルとなり、最初にロードされます。 その後にeditorスタイルシートがロードされます。

コードに移りましょう。 editor.cssというファイルを作成します。

そして下記のコードを含むstyle.cssファイルを作成します。

これらの新しいスタイルを使用するようにプラグインを設定します。

補足説明

メンテナンスしやすいように、プラグインのディレクトリ構成を変更

前回の記事で作ったオリジナルのプラグインに今回のExample: Stylesheetsを追加する場合は、プラグインのディレクトリ構成を下図のようにするとわかりやすいです。

Original-block(プラグイン名)のディレクトリ構造図

スクリプトやスタイルのファイルをプラグインで読み込む

そして、script、style.css、editor.cssのファイルを読み込むように、original-block.php(プラグイン用のPHPファイル)で設定します。公式チュートリアルのコードだと、「function gutenberg_examples_02_register_block() {…」の部分ですね。それぞれのファイルへのパスを変更するのを忘れずに〜!

この時点で、original-plugin.phpのコードは下記のようになりました。

これで、block02フォルダのcssを書き換えれば、エディタ側やフロント側のスタイルを変えられるようになりました。今回はこれで以上です!次のステップは編集可能なブロックのお話です。

次のステップの日本語訳はこちら

anchoko.

今回はIntroducing Attributes and Editable Fieldsを日本語化します。エディターで…

前回の記事はこちら

anchoko.

そろそろ新エディターGutenbergで独自のカスタムブロックを作ってみたくて、公式チュートリアルのBlock Edit…