ブロックベーステーマ (実験レベル)

これは現段階での「ブロックベーステーマ」(block-based theme) 実装に関する文書です。「ブロックベーステーマ」は、「フルサイトエディティング」(Full Site Editing)、または「ブロックコンテントエリア」(Block Content Area) とも呼ばれ、これらの機能はまだプラグインの実験レベルの機能です。ここで「実験レベル」とは早い段階での実装を意味し、ユーザー、コントリビューター、作成者のフィードバックに基づくイテレーションによっては、大きく互換性を失う形で変更される可能性があります。

早い段階で文書を共有する理由は、作業の様子を明らかにし、API を利用した実験からフィードバックを得るためです。フィードバックは、最新の進捗を共有、議論している #core-editor 週次ミーティングで行うか、または Github の issue を通して非同期に行えます。

注意: この機能を使用するには、Gutenberg プラグインの「Experiments」ページの「Full Site Editing」フラグを有効にしてください。

ブロックベーステーマとは何か?

「ブロックベーステーマ」は、完全にブロックで構成されたテンプレートを持つ WordPress テーマです。「page」「post」など異なる投稿タイプのコンテンツに加え、サイトのすべてのエリア、ヘッダー、フッター、サイドバー等をブロックエディターで編集できます。

ブロックベーステーマの構造は?

シンプルなブロックベーステーマは次のような構造になります。

theme
|__ style.css
|__ functions.php
|__ block-templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ block-template-parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

既存の WordPress テーマとの違いは、テンプレート階層内の異なるテンプレート、およびテンプレートパーツがこれまでの PHP ファイルでなく、「ブロックテンプレート」である点です。

ブロックテンプレートとは何か?

「ブロックテンプレート」は、一連のブロックから構成されます。あらゆる WordPress ブロックをブロックテンプレート内で使用できます。また、テンプレートは、「テンプレートパーツ」を使用してコンテンツの一部を再利用できます。たとえば、すべてのブロックテンプレートに、個別のテンプレートパート「header.html」から同じヘッダーを含めることができます。

以下はブロックテンプレートの例です:

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->

<!-- wp:group -->
<div class="wp-block-group">
    <div class="wp-block-group__inner-container">
        <!-- wp:post-title /-->
        <!-- wp:post-content /-->
    </div>
</div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group">
    <div class="wp-block-group__inner-container">
        <!-- wp:heading -->
        <h2>Footer</h2>
        <!-- /wp:heading -->
    </div>
</div>
<!-- /wp:group -->

テンプレートの書き方と編集方法は ?

最終的には、適切な権限、例えば管理者権限を持つすべての WordPress ユーザーが管理画面からテンプレートにアクセスし、専用のビューで編集し、テーマとしてエクスポートできるようになります。

この文書を書いている段階の現在のイテレーションでは、「外観」下の一時的な管理メニュー「Templates」 wp-admin/edit.php?post_type=wp_template に移動してテンプレートを編集できます。

編集を終えたら、「コードエディター」モードに切り替え、テンプレートの HTML をコピーして、テーマディレクトリ内の正しいファイルに貼り付けます。

テンプレートカスタム投稿タイプ

一時的な Templates 管理メニューから直接テンプレートを保存すると、テーマのテンプレートを上書きできます。

例: テンプレートのタイトルに「single」を使用して保存すると、保存されたテンプレートはテーマの single.html ファイルよりも優先されます。

注意: テンプレート階層で高位にあるテーマのテンプレートには優先しません。テンプレート解決は、詳細なテンプレートから簡単なテンプレートへ、各レベルで、まずカスタム投稿タイプの投稿、次にテーマテンプレートを探します。

テーマブロック

ブロックベーステーマ専用のブロックがいくつかあります。たとえばサイトのヘッダーでは「サイトタイトルブロック」(Site Title block) を使用できます。単一のブロックテンプレートでは「投稿タイトルブロック」(Post Title block) や「投稿コンテンツブロック」(Post Content block)を含めることができます。

まだプロジェクトの初期段階のため、ブロックテンプレートに特化したブロックの数は少なめですが、プロジェクトが進むに連れ、ブロックの数は増えていくはずです。

スタイリング

テーマのもっとも重要、でなければ重要な要素の1つは、スタイリングです。当面はスタイルを準備し、テーマが通常行うのと同じフックを使用してエンキューできるようになります。この部分は現在も調査中です。

リソース

最終更新日: