ブロックベーステーマ翻訳全文 – Capital P

この記事は2019年12月11日現在の「Block-based Themes (Experimental)」を翻訳したものです。

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

これは現段階での「ブロックベーステーマ」(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つは、スタイリングです。当面はスタイルを準備し、テーマが通常行うのと同じフックを使用してエンキューできるようになります。この部分は現在も調査中です。

リソース

Full Site Editing ラベル

議論

以下は https://github.com/WordPress/gutenberg/pull/18890 冒頭の議論です。

@youknowriad

これは実験レベルの「Full Site Editing」を有効化した際のブロックベーステーマの現在の様子を説明する、非常に初期段階の文書です。

ドキュメントのすべて、API や異なるコンセプトの名前も含めて変わる可能性があるので注意!

@joyously

このコンセプト全体がリグレッションです。

誰がせっかくうまく動的に生成しているものを、静的な HTML に切り替えたいの? 誰がテンプレートを編集して、結果的に HTML を変更したがるの、CSS が依存しているのに?

@mtias

> 誰がせっかくうまく動的に生成しているものを、静的な HTML に切り替えたいの?

静的 HTML ではありません。ブロックテンプレートは動的です。現在の PHP テンプレートがマークアップと混ざった関数コールで動作しているのと大きな違いはありません。テンプレートは json ファイルでも書けます。

> 誰がテンプレートを編集して、結果的に HTML を変更したがるの、CSS が依存しているのに?

ユーザーは今でも管理画面の「テーマエディター」で編集できています。インフラ部分は同様のサポートが必要です。実際の編集画面の UI はプロダクト、デザイン双方で、どこが編集可能で、どう編集するかの決定が必要です。