(旧)コードの実装

(2024/1/20) この文書の原文は削除されました。以後は「チュートリアル: はじめてのブロック作成」を参照ください。便宜上、しばらく訳文を掲載しますが、内容は更新されず、一部古くなっていますので注意してお読みください。

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

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

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

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

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

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

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

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

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

注意: ブロックのクラス名には接頭辞 wp-block が付きます。create-block/gutenpride はクラス名 .wp-block-create-block-gutenpride に変換されます。

@font-face {
	font-family: Gilbert;
	src: url( ../assets/gilbert-color.otf );
	font-weight: 700;
}

.wp-block-create-block-gutenpride {
	font-family: Gilbert, sans-serif;
	font-size: 64px;
}

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

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

原文

最終更新日: 2024年1月20日