コードの実装

基本的なブロックが作成できたので、次にスタイルを追加します。ここでは主に外部リソースの作成とロードを紹介しますが、好みで自由にスタイルを適用してください。まず Type with Pride から色付きの gilbert カラーフォントをロードします。

注意: ブラウザーによってはカラーフォントを適切にサポートしておらず、すべてのブラウザーでカラーフォントが動作しないかもしれません。ただしフォント自体はロードされスタイルが当たっています。ブラウザーサポートとカラーフォントの詳細については colorfonts.wtf を参照してください。

フォントファイルのロード

Type with Pride のサイトからフォントをダウンロードし解凍し、プラグインの src ディレクトリに gilbert-color.otf という名前でコピーしてください。フォントファイルをロードするには WordPress 標準のエンキューを使用してフォントファイルをロードする必要があります。Including CSS & JavaScript ドキュメント を参照してください。

gutenpride.php ファイルにはすでに生成されたスクリプトからのエンキュープロセスが設定されています。以下のコードで index.css ファイルと style-index.css ファイルがロードされます。

function create_block_gutenpride_block_init() {
    register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

この関数は block.json ファイルをチェックし、JavaScript や CSS ファイルが適切なページでロードされるよう enqueue に渡します。

build/index.css は、src/editor.scss からコンパイルされ、エディター内でのみ style-index.css 後にロードします。

build/style-index.css は src/style.scss からコンパイルされ、エディターと、公開された投稿のビューであるフロントエンドの両方にロードします。

ブロックへの CSS スタイルの追加

build/style-index.css にのみスタイルを追加すれば十分です。なぜなら、編集中にも、投稿の表示中にも表示するためです。src/style.scss を編集し、以下のコードを追加してください。

注意: ブロックのクラス名には接頭辞 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;
}

更新後、npm run build を使用してブロックをリビルドし、投稿をリロードし、ブラウザーを更新してください。Firefox などのカラーフォントをサポートするブラウザーを使用するとスタイルが当たったことが分かります。

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

原文

最終更新日: