コードの実装

基本的なブロックが作成できたので、次にスタイルを追加します。ここでは主に外部リソースの作成とロードを紹介しますが、好みで自由にスタイルを適用できます。まず 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";

次のセクション: 執筆エクスペリエンス

原文

最終更新日: