コードの実装
基本的なブロックが作成できたので、次にスタイルを追加します。ここでは主に外部リソースの作成とロードを紹介しますが、好みで自由にスタイルを適用できます。まず Type with Pride から色付きの gilbert カラーフォントをロードします。
注意: ブラウザーによってはカラーフォントを適切にサポートしておらず、すべてのブラウザーでカラーフォントが動作しないかもしれません。ただしフォント自体はロードされスタイルが当たっています。ブラウザーサポートとカラーフォントの詳細については colorfonts.wtf を参照してください。
フォントファイルのロード
Type with Pride のサイトからフォントをダウンロードし解凍し、プラグインのディレクトリに gilbert-color.otf
という名前でコピーしてください。フォントファイルをロードするには WordPress 標準のエンキューを使用してフォントファイルをロードする必要があります。Including CSS & JavaScript ドキュメント を参照してください。
gutenpride.php
ファイルにはすでに生成されたスクリプトからのエンキュープロセスが設定されています。以下のコードで editor.css
ファイルと style.css
ファイルがロードされます。
register_block_type( 'create-block/gutenpride', array(
'apiVersion' => 2,
'editor_script' => 'create-block-gutenpride-block-editor',
'editor_style' => 'create-block-gutenpride-block-editor',
'style' => 'create-block-gutenpride-block',
) );
editor_style
と style
パラメータは wp_register_style
関数のハンドルにマッチするファイルを参照します。
注意: editor_style
は、style
のあとに、エディター内でのみロードされます。style
CSS はエディターとフロントエンドの両方でロードされます。ここでフロントエンドとは公開された投稿の表示画面を指します。
ブロックへの CSS スタイルの追加
style.css
は編集中にも、投稿の表示中にも使用されるため、こちらにのみスタイルを追加します。style.css を編集し以下のコードを追加してください。
注意: ブロックのクラス名には接頭辞 wp-block
が付きます。create-block/gutenpride
はクラス名 .wp-block-create-block-gutenpride
に変換されます。
@font-face {
font-family: Gilbert;
src: url( gilbert-color.otf );
font-weight: bold;
}
.wp-block-create-block-gutenpride {
font-family: Gilbert;
font-size: 64px;
}
更新後、投稿をリロードしブラウザーを更新してください。Firefox などのカラーフォントをサポートするブラウザーを使用するとスタイルが当たったことが分かります。
Sass を使用したスタイル (オプション)
wp-scripts パッケージは CSS 生成のために Sass/Scss 言語サポートを提供します。@wordpress/scripts v9.1.0 で追加されました。Sass についての詳細は Sass language サイト を参照してください。
Sass を使用するには index.js
JavaScript ファイルで editor.scss
または style.scss
をインポートする必要があります。ビルドで生成されたファイルは build ディレクトリーに出力されます。注意: PHP のエンキュー関数を更新して正しい場所からロードする必要があります。
index.js に次のインポートを追加してください。
import '../editor.scss';
import Edit from './edit';
import save from './save';
gutenpride.php を更新して生成したファイルの場所からエンキューしてください。
$editor_css = "build/index.css";
次のセクション: 執筆エクスペリエンス
最終更新日: