2024年10月9日公開

ブロックテーマの作り方

ブロックテーマ(FSE対応)の作り方のメモです。
このページは制作中です。

ブロックテーマの主なスターターテーマ

Underscores(クラシックテーマ) のような定番のスターターテーマはまだないようです。

https://github.com/carolinan/fullsiteediting
https://github.com/webredone/theme-redone
https://github.com/bacoords/block-theme
https://github.com/them-es/starter-fse
Blockbase
Twenty Twenty-Four

Block Theme Examples

WordPressのGitHubアカウントから、Block Theme Examples が提供されています。
「WordPress のブロックに関連するさまざまな機能と、それらをテーマで使用する方法を紹介することを目的としています。目標はプロジェクトの基礎となる簡潔なコード例を提供することです。各サブフォルダはTwenty Twenty-Fourテーマの子テーマとなっています。子テーマを使うのはその機能に必要なコードだけを集めた小さな例を作るためです。WordPress 6.4以上、Twenty Twenty-Fourテーマがインストールされている必要があります。」とのことです。
以下は、付属のREADMEファイルの説明を参考に一覧にしたものです。

  • example-block-stylesheet
    例-ブロック-スタイルシート。
    この子テーマの目的は、テーマにカスタムブロックスタイルシートを追加する方法を紹介することです。
  • example-block-style-js
    例-ブロック-スタイル-JS。
    この子テーマの目的は、JavaScriptを使って、カスタムブロックスタイルを追加する方法を紹介することです。
  • example-block-style-php
    例-ブロック-スタイル-PHP。
    この子テーマの目的は、PHPを使って、カスタムブロックスタイルを追加する方法を紹介することです。
  • example-block-variation
    例-ブロック-バリエーション。
    この子テーマの目的は、カスタムブロックバリエーションを追加する方法を紹介することです。
  • example-build-process
    例-ビルド-プロセス。
    この子テーマの目的は、@wordpress/scripts パッケージをテーマと統合して、コアサポートの webpack ビルドプロセスを提供する方法を示すことです。
  • example-locked-pattern
    例-ロックされた-パターン。
    この子テーマの目的は、ユーザーがブロックの設定やスタイルを編集せずに、ブロックのコンテンツだけを編集できるようにするためにテンプレートロックを利用したブロックパターンの例を紹介することです。
  • example-template-part-area
    例-テンプレート-パート-エリア。
    この子テーマの目的は、カスタムテンプレートパーツエリアの登録と使用例を紹介することです。
  • twentytwentyfour-starter-content-patterns
    twentytwentyfour-スターター-コンテンツ-パターン。
    この子テーマの目的は、ユーザーが新しい投稿を追加したときにモーダルに表示されるブロックパターンの例を紹介することです。
  • twentytwentyfour-starter-template-patterns
    twentytwentyfour-スターター-テンプレート-パターン。
    この子テーマの目的は、ユーザーがサイトエディタから新しいテンプレートを追加したときにモーダルに表示されるブロックパターンの例を紹介することです。