WordPressブロックテーマを作ってみた

下記サイトをもとに、自分のサイトをブロックテーマに変更しました
サイトの内容を自分用にまとめた備忘録です

WordPress5.9同時リリースされた「Twenty Twenty-Two」は、はじめての公式ブロックテーマです

*ブロックテーマはWordPress5.9が必要です(以前のバージョンのWordPressではGutenbergプラグインバージョン11.0以降が必要)

目次
  1. ブロックテーマって
  2. ブロックテーマ作成
    1. フォルダとファイルの準備
    2. テンプレートとテンプレートパーツ
    3. ブロックマークアップ
    4. 基本的なテンプレートを手動で作成
    5. テンプレートをエディタで作成するとき
  3. ナビゲーションブロックとクエリブロック
    1. ナビゲーションブロック
    2. クエリブロック
  4. theme.json
    1. theme.jsonの概要
    2. スタイルの変更について
    3. settingsとstyles
      1. settings
      2. styles
    4. customTemplatesとtemplateParts
    5. スタイルのバリエーション
  5. クラッシックテーマからの移行について
  6. ブロックの活用
    1. ブロックパターン
      1. パターンについて
      2. パターンの活用
    2. カスタムブロックスタイル
    3. バリエーション
    4. カスタム投稿タイプについて
  7. 最後に
  8. 追記
  9. 関連投稿

ブロックテーマって

ブロックテーマはユーザーにとっては

  • コードを編集することなくサイトのすべてのエリア(ヘッダー・フッター・サイドバーなども含む)が編集できます
  • ブロックとパターンからテンプレートが作れます(HTMLやCSS不要であらゆるページが作れます)
  • 色やフォントなどスタイルのカスタマイズができます

*「どれだけカスタマイズできるか」は使用するブロックテーマに依存します

ブロックテーマは制作者にとっては

  • 従来のテンプレートファイル(PHP)はブロックテンプレートファイル(HTML)になり、PHP関数ブロックマークアップ(ブロックマークアップは手書きしなくてもブロックエディタで編集してコピーできます)になります
  • theme.jsonでスタイルを管理します(CSS変数を作ったり、スタイリングしたりします)
    究極的にはCSSを書かなくてもできるのかもw(CSSの量は激減しました)
  • ブロックテーマのテンプレート部分はノーコードで作れます

サイトエディタは、「サイトテンプレート(テンプレート階層のindex・home・front-page・archive・404・single・page・search)の作成・編集をしたり」「スタイルインターフェイス(全体と個々のブロックの「デフォルトの色・タイポグラフィなど」を管理する)を使ったり」できるブロックテーマの新しい機能です
テンプレートのカスタマイズをクリアしたり、作成したテンプレートを削除したりできます

*カステムテンプレートの編集はできません(テンプレートエディタで編集します)

テンプレートエディタ(テンプレート編集)は、ページテンプレート(ページや投稿で使用するテンプレート)の作成や編集がブロックエディタからできる「ブロックテーマ」と「機能をオプトインしたクラシックテーマ」の機能です

*テンプレートの選択やテンプレート間の移動はテンプレートエディタからはできません

*備考

テンプレート階層

スタイルインターフェイス (サイトエディタの右上)を使用できるのはブロックテーマのみです

エディタのスタイルインターフェイス

ブロックテーマ作成

ブロックテーマにすると、ブロックのみでサイトを作成するため、カスタマイザーとウィジェットメニューはなくなります

*ユーザー補助機能(コンテンツにスキップ・キーボードナビゲーション・ランドマークなどの)は、自動で生成されます

フォルダ構成の例

theme
|_ style.css(必須)
|_editor-style.css(エディタのスタイル)
|_ functions.php
|_index.php(必須)
|_theme.json
|_templates (テンプレート階層は従来と同じ)
    |_ index.html(必須)
    |_ ...
|_ parts
    |_header.html
    |_footer.html
    |_...
|_styles(グローバルスタイルバリエーション)
    |_red.json
    |_blue.json
   

フォルダとファイルの準備

1.テーマフォルダを作成しますwp-content/themes。
2.style.cssファイルを作成します(Theme Name必須)

/*
Theme Name: my-theme
Author: 
Description: 
Version: 
Requires at least: 
Tested up to: 
Requires PHP:
License:
License URI: 
Text Domain: 
*/

3.空のindex.phpファイルを作成します(HTMLファイルを見つけられないときのフォールバック用の空のファイル)
4.templatesフォルダとpartsフォルダを作成します:
5.parts/header.htmlを作成します

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

6.templates/index.htmlを作成します

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:query -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title /-->
<!-- wp:post-date /-->
<!-- wp:post-content /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->

7. theme.jsonを作成します
スタイルはtheme.jsonに依存し、theme.jsonでは追加できないスタイル( 例えばメディアクエリなど)はCSSファイルで追加します

*ちなみに、最小値を設定するにはmax()、最大値を設定するmin()や、フォントサイズの設定でclamp(最小値、推奨値、最大値)を見かけます
clamp(2.75rem, 6vw, 3.25rem):6vw の計算値が 2.75remの値よりも大きくなるまで、3.25rem に設定

8.functions.phpを作成します

functions.phpは必須ではありませんが、「スタイル・スクリプト・フォントをエンキューするため」「ブロックパターンを作成するため(register_block_pattern)」「ブロックにスタイルを追加するため(register_block_style)」「ブロックで使用できないフックを使用するため」などに利用します

プラグインで対応した方がいいか?
*例えば、テーマを無効にすると、テーマでブロックにスタイルを設定した場合、スタイルは無効になります
またブロックパターンのスタイルがテーマに依存しているときは、パターンのブロックは残りスタイルが無効になります

ブロックテーマで自動的に有効になるadd_theme_support

  • post-thumbnails,
  • editor-styles,
  • responsive-embeds,
  • automatic-feed-links,
  • html5 styles・ html5 scripts

theme.css(ブロックスタイルのCSSファイル)を含める場合は、add_theme_support( 'wp-block-styles' )を追加します

theme.cssを見る

wp-includes/css/dist/block-library/theme.css

/* block-library/theme.css */
.wp-block-code {
  font-family: Menlo, Consolas, monaco, monospace;
  font-size: 14px;
  color: #23282d;
  padding: 0.8em 1em;
  border: 1px solid #e2e4e7;
  border-radius: 4px; }
 
.wp-block-preformatted pre {
  font-family: Menlo, Consolas, monaco, monospace;
  color: #23282d;
  /* Fonts smaller than 16px causes mobile safari to zoom. */
  font-size: 16px; }
  @media (min-width: 600px) {
    .wp-block-preformatted pre {
      font-size: 14px; } }
 
.wp-block-pullquote {
  border-top: 4px solid #555d66;
  border-bottom: 4px solid #555d66;
  color: #40464d; }
  .wp-block-pullquote cite,
  .wp-block-pullquote footer, .wp-block-pullquote__citation {
    color: #40464d;
    text-transform: uppercase;
    font-size: 13px;
    font-style: normal; }
 
.wp-block-quote {
  border-left: 4px solid #000;
  margin: 20px 0;
  padding-left: 1em; }
  .wp-block-quote cite,
  .wp-block-quote footer, .wp-block-quote__citation {
    color: #6c7781;
    font-size: 13px;
    margin-top: 1em;
    position: relative;
    font-style: normal; }
  .wp-block-quote[style*="text-align:right"], .wp-block-quote[style*="text-align: right"] {
    border-left: none;
    border-right: 4px solid #000;
    padding-left: 0;
    padding-right: 1em; }
  .wp-block-quote[style*="text-align:center"], .wp-block-quote[style*="text-align: center"] {
    border: none;
    padding-left: 0; }
  .wp-block-quote.is-style-large, .wp-block-quote.is-large {
    border: none; }
 
.wp-block-search .wp-block-search__label {
  font-weight: bold; }
 
.wp-block-separator {
  border: none;
  border-bottom: 2px solid #8f98a1;
  margin: 1.65em auto; }
  .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    max-width: 100px; }
 
.wp-block-table {
  width: 100%;
  min-width: 240px;
  border-collapse: collapse; }
  .wp-block-table td,
  .wp-block-table th {
    padding: 0.5em;
    border: 1px solid currentColor;
    word-break: break-all; }

とりあえず、最低限はこんな感じかなw
*エディタ側のスタイルやスクリプトが必要なときは’enqueue_block_editor_assets’フックを使います

<?php
function mytheme_enqueue_assets() {
    wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
//jsファイル
//   wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/main.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

//エディタ側
function mytheme_enqueue_editor_assets() {
    wp_enqueue_style( 'mytheme-editor-style', get_stylesheet_directory_uri() . '/editor-style.css', array( ), wp_get_theme()->get( 'Version' ) );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_editor_assets' );

if ( ! function_exists( 'mytheme_blocks_setup' ) ) {
    function mytheme_blocks_setup() {
    add_theme_support( 'wp-block-styles' );
 }
}
add_action( 'after_setup_theme', 'mytheme_blocks_setup' );

wp_enqueue_block_styleについて

ブロックテーマでは、 ページ上で使われているブロックのみ、CSSがインラインで出力されます
wp_enqueue_block_style(string $ block_name、 array $ args )を使用して、コアのブロック用CSSに、テーマで追加したブロック用CSSをアタッチできます(ブロックが使われているページでのみCSSをロードできます)
その場合は、ブロック名で新しいCSSファイルを作成します(ドキュメントの例だとassets/css/blocksの直下)
*wp_enqueue_block_style()にはWordPressバージョン5.9が必要です

ドキュメントのコードを見る

function myfirsttheme_setup() {
	/*
	 * Load additional block styles.
	 */
//対応するブロックの配列
	$styled_blocks = ['paragraph', 'code', 'cover', 'group' ];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "myfirsttheme-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
//pathを追加するとインラインで出力される
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

テンプレートとテンプレートパーツ

テンプレートは、単一のテンプレートで構成することも、テンプレートパーツの組み合わせで構成することもできます(共通する部分headerやfooterはテンプレートパーツに分割することができます)

テンプレートパーツは、サイトエディタとテンプレートエディタでのみ使用できる特別なブロックです

テンプレートとテンプレートパーツ作成する方法

  • 手動でブロックマークアップ(HTMLファイル)を作成
  • サイトエディタを使用
  • テンプレートエディタを使用

ブロックマークアップ

基本ブロックはHTMLコメント<!-- /-->を使用します
すべてのブロックコメントは、プレフィックスとブロック名で始まりますwp:ブロック名
自動閉鎖ブロックと複数行ブロックがあります
ブロック属性はブロックコメント内のJSONオブジェクトとして保存されます
ブロックマークアップにはHTMLコメントとHTMLタグの両方が含まれる場合もあります
ブロックの終了タグと開始タグは、同じテンプレートに配置する必要があります

HTMLコメントから、JSONデータをインラインスタイルおよびCSSクラスとして繰り返します
ブロックにスタイル属性を追加するときは、HTMLタグにも追加する必要があります
カラーパレットから事前定義された色を選択したときは、ブロックはクラス名が使用されます

//ブロックにスタイル属性を追加
<!-- wp:paragraph {style":{"color":{"text":"#ff7e7e"}}} -->
<p class="has-text-color" style="color:#ff7e7e"アイウエオ</h3>
<!-- /wp:paragraph -->

//カラーパレット
<!-- wp:paragraph {"textColor":"vivid-red"} -->
<p class="has-vivid-red-color has-text-color">アイウエオ</p>
<!-- /wp:paragraph -->

ブロックマークアップは書かなくても、ブロックエディタでブロックを追加して「コードエディタモード」で確認できます
*ブロックをコピーして貼り付けもできます

コードエディタモード

コードエディタモード

ブロックのコピー

ブロックのコピー

基本的なテンプレートを手動で作成

WordPressフック(<?php wp_head(); ?><?php wp_footer(); ?>など)や必要なHTML要素は追加されています

テンプレートはクラス「wp-site-blocks」で内部にロードされます

parts/header.htmlにサイトタイトルブロックを追加
1: グループブロックを全幅に設定しpaddingを追加(ラッパー)
2: グループ内に、サイトタイトルブロックを追加

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"right":"2em","left":"2em"}}}} -->
<div class="wp-block-group alignfull" style="padding-right:2em;padding-left:2em">
<!-- wp:site-title /--></div>
<!-- /wp:group -->
タグラインブロック(キャッチコピー)<!-- wp:site-tagline /-->
サイトロゴブロック<!-- wp:site-logo /-->

*ナビゲーションメニューは、ナビゲーションブロックを使用します

parts/footer.htmlに段落ブロックでクレジットを追加
1:align属性で中央に配置(ブロック属性は{}内に配置されます)、HTML要素も対応するCSSクラス(has-text-align-center)を使用します
*ブロックマークアップは、ブロックエディタでブロックを追加してコードエディタモードで確認できます

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">
    by <a href="">hoge</a>.
</p>
<!-- /wp:paragraph -->

テンプレートパーツの読み込み
slug: テンプレートパーツを識別
theme: テーマのスラッグで、パーツがテンプレートの外側に配置されている場合に使用(たとえばブロックパターンで、テンプレートパーツを識別する)
tagName: HTMLのタグ( header・main・section・article・aside・footer divがデフォルト)から選択

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

CSSを使用して識別するときは、classNameで独自のクラスを追加しておきます

1 : コンテンツを埋め込むグループブロックを追加します<!-- wp:group--!><-- /wp:group -->
グループ内に(”layout”:{“inherit”:true})と要素を追加します
*”layout”:{“inherit”:true}はtheme.jsonで設定したコンテンツの幅を継承するという意味になります
2 :グループ内に「クエリループブロック」を追加します<!-- wp:query--><!-- /wp:query -->
3:「クエリページネーションブロック」<!-- wp:query-pagination --!><-- /wp:query-pagination -->は、クエリループ内でのみ使用、投稿テンプレートの外に配置します
4:投稿のタイトルには{“isLink”:true}でリンクを設定します

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:query -->
<div class="wp-block-query">
    <!-- wp:post-template -->
    <!-- wp:post-title {"isLink":true} /-->
    <!-- wp:post-date /-->
    <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->

    <!-- wp:query-pagination -->
    <div class="wp-block-query-pagination">
        <!-- wp:query-pagination-previous /-->
        <!-- wp:query-pagination-numbers /-->
        <!-- wp:query-pagination-next /-->
    </div>
    <!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

単一の投稿を表示するためのテンプレート(single.html)は、index.htmlをコピーして、グループブロック内を好みで編集します
*wp:post-excerptはwp:post-contentに変更して全文を表示、「クエリページネーションブロック」は不要、wp:post-titleのリンクは不要でh1にする

投稿内容:<!-- wp:post-content /-->
記事のタイトル:<!-- wp:post-title {"level":1} /-->
投稿者:<!-- wp:post-author /-->
投稿日:<!-- wp:post-date /-->
アイキャッチ画像を投稿する:<!-- wp:post-featured-image /-->
投稿タグ:<!-- wp:post-terms {"term":"post_tag"} /-->
投稿カテゴリ:<!-- wp:post-terms {"term":"category"} /-->
次と前の投稿:<!-- wp:post-navigation-link /--><!-- wp:post-navigation-link {"type":"previous"} /-->

アーカイブページ
クエリブロックにはinherit属性がありデフォルトで有効なので、なにもしなくても表示しているページに応じてクエリはフィルタリングされます
アーカイブ(archive.html)またはカテゴリテンプレートがないときは、インデックステンプレート(index.html)が使用されます
アーカイブ用のページでのタイトルや説明を表示するときはクエリの上に下記のメークアップを追加します

<!-- wp:query-title {"type":"archive"} /-->
<!-- wp:term-description /-->

テンプレートをエディタで作成するとき

サイトエディタ・テンプレートエディタで作成や編集されたテンプレート・テンプレートパーツはカスタム投稿タイプとしてデータベースに保存されます(wp_templateやwp_template_part)
*テーマフォルダ内のファイルが更新されるわけではありません

カスタマイズのクリアをしないとデータベースに保存されたままで、テーマフォルダ内のファイルより優先されます(例えばテンプレートのタイトルとしてsingleで保存しても、保存されたテンプレートがテーマのsingle.htmlファイルよりも優先されます)

コードを編集して反映しないときは、カスタマイズがクリアされていない場合があります

テンプレートが変更されているかどうかの確認は、サイトエディタのテンプレートのリストを表示、変更はテンプレート設定メニューの横にある青い点で示されます

「テンプレート」「テンプレートパーツ」の編集は3点ドットから初期化できます

サイトエディタで「フロントページテンプレート」を追加した場合、管理画面の「設定」 > 「表示設定」からどの設定を選んでも、常にフロントページとして使用されます

保存では次の3つの異なるものを保存できます

  • テンプレート
  • コンテンツ(コンテンツブロックにある投稿またはページ)
  • サイトブロック(サイトタイトル、サイトタグライン、サイトロゴ)

データベースに保存されたテンプレートデータを、テーマファイルとしてエクスポートする手順
*個人的にはコードだけコピーする方が楽でしたw

  • 3点ドットメニューを選択
  • ツールでエクスポートを選択しzipファイルをダウンロード後に解凍します

ナビゲーションブロックとクエリブロック

ナビゲーションブロック

ナビゲーションメニューは、ナビゲーションブロックを使用します

ブロックテーマ間でメニューは再利用できます
ナビゲーションブロックで作成したメニューはクラシックテーマでは再利用できません

ナビゲーションブロックの挿入後のリンク追加方法

  • 既存のメニューから作成する(前のテーマで作成したメニュー)
  • 空のメニューを作成する(ナビゲーションで表示するリンクをそれぞれ手動で追加します)
  • すべてのページを追加(サイトにある既存の固定ページが自動的にリンクとして追加され、後で編集したり再配置したりできます(新しいページを追加すると、自動的にメニューに追加されます)

メニュー項目を移動するにはナビゲーションブロックの個々のメニュー項目を選択し、ブロックツールバーの「編集」をクリックします
表示されるポップアップで「変換」を選択します
メニュー項目がリンクに変換され、移動できるようになります

ナビゲーションに新しいリンクを追加(ナビゲーションブロックに追加できるブロック)
*[変換]メニューを使用して他のブロックに変換でき、さまざまなブロックを使用してメニュー作成ができます

  • ページリンク(固定ページ)
  • 投稿リンク(投稿ページ)
  • カテゴリーリンク( 特定のカテゴリーを持つすべての投稿)
  • タグリンク(特定のタグを持つすべての投稿)
  • リンク:(外部URL)
  • ソーシャルアイコン
  • 検索(検索ボックス)

ナビゲーション全体の編集

  • 幅を「幅広」または「全幅」に変更する (テーマが対応している場合)
  • 項目を左揃え、中央揃え、右揃えに配置する

ナビゲーションの個々の項目を編集

  • 項目を左または右に移動する
  • リンクを編集する
  • サブメニューを追加する
  • 太字、イタリック、その他の書式設定オプション

レスポンシブメニューオプション

  • オフ:画面サイズが小さい場合、メニューアイコンの表示をオフにします
  • モバイル:小さな画面でメニュー全体を表示するためにクリックできるメニューアイコンを表示します
  • 常に:画面サイズに関係なくメニューアイコンを表示します

クエリブロック

「クエリーループブロック」は、「投稿タイトルブロック」や「投稿の抜粋ブロック」などのさまざまなネストされたブロックで構成されています
「レイアウトオプション(ブロックパターンの形式)から選択」もしくは「新規からブロック構成を選択」します
外観とレイアウトはカスタマイズできます

queryのデフォルト値

"perPage": null,
"pages": 0,
"offset": 0,
"postType": "post",
"order": "desc",
"orderBy": "date",
"author": "",
"search": "",
"exclude": [],
"sticky": "",
"inherit": true,
"taxQuery": null

クエリーループブロックは、エディタのサイドバーで、オプションから下記のフィルタを設定できます
*フィルタは「テンプレートからクエリを継承する」設定をオフにする必要があります

  • 特定のカテゴリ–やタグ含めるリスト(コンマで区切り、複数指定も可)
  • 著者(著者のリストから選択)
  • キーワード(キーワードを入力します)

theme.json

theme.jsonの概要

theme.jsonはテーマスタイルとブロック設定の設定ファイルです(クラシックエディタでは動作しません)

テーマにtheme.jsonを追加すると、テンプレートエディタが有効になります

theme.jsonの大枠

{
    "schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {},
    "styles": {},
    "templateParts": [],
    "customTemplates": {},
}

「Visual Studio Code」でschemaを設定するとオートコンプリートなどが利用でき便利です

*(注意)theme.jsonのWordPressバージョン5.8(バージョン1)、WordPress 5.9(バージョン2)で使用できるものには重要な違いがあります。

ユーザー>テーマ>コアCSSの優先度が管理されます

個々のブロックについて

“blocks”:{}(blockをキーにしたオブジェクト)をネストさせて、ブロックごとに制御できます
個々のブロックに追加されたスタイルは、ブロックのマークアップにスタイルがふくまれます
サードパーティブロックを含むすべてのブロックのスタイルは、ブロックが対応するblock.jsonのsupportsで宣言している機能のみ、スタイルインターフェースから編集することができます

twentytwentytwoの例

{
	"version": 2,
	"customTemplates": [
		{
			"name": "blank",
			"title": "Blank",
			"postTypes": [
				"page",
				"post"
			]
		},
		{
			"name": "page-large-header",
			"title": "Page (Large Header)",
			"postTypes": [
				"page"
			]
		},
		{
			"name": "single-no-separators",
			"title": "Single Post (No Separators)",
			"postTypes": [
				"post"
			]
		},
		{
			"name": "page-no-separators",
			"title": "Page (No Separators)",
			"postTypes": [
				"page"
			]
		}
	],
	"settings": {
		"appearanceTools": true,
		"color": {
			"duotone": [
				{
					"colors": [ "#000000", "#ffffff" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#000000", "#ffe2c7" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#000000", "#f6f6f6" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#1a4548", "#ffffff" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#1a4548", "#ffe2c7" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#1a4548", "#f6f6f6" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"gradients": [
				{
					"slug": "vertical-secondary-to-tertiary",
					"gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--tertiary) 100%)",
					"name": "Vertical secondary to tertiary"
				},
				{
					"slug": "vertical-secondary-to-background",
					"gradient": "linear-gradient(to bottom,var(--wp--preset--color--secondary) 0%,var(--wp--preset--color--background) 100%)",
					"name": "Vertical secondary to background"
				},
				{
					"slug": "vertical-tertiary-to-background",
					"gradient": "linear-gradient(to bottom,var(--wp--preset--color--tertiary) 0%,var(--wp--preset--color--background) 100%)",
					"name": "Vertical tertiary to background"
				},
				{
					"slug": "diagonal-primary-to-foreground",
					"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%)",
					"name": "Diagonal primary to foreground"
				},
				{
					"slug": "diagonal-secondary-to-background",
					"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--secondary) 50%,var(--wp--preset--color--background) 50%)",
					"name": "Diagonal secondary to background"
				},
				{
					"slug": "diagonal-background-to-secondary",
					"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--secondary) 50%)",
					"name": "Diagonal background to secondary"
				},
				{
					"slug": "diagonal-tertiary-to-background",
					"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--tertiary) 50%,var(--wp--preset--color--background) 50%)",
					"name": "Diagonal tertiary to background"
				},
				{
					"slug": "diagonal-background-to-tertiary",
					"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--background) 50%,var(--wp--preset--color--tertiary) 50%)",
					"name": "Diagonal background to tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#000000",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#ffffff",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#1a4548",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#ffe2c7",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F6F6",
					"name": "Tertiary"
				}
			]
		},
		"custom": {
			"spacing": {
				"small": "max(1.25rem, 5vw)",
				"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
				"large": "clamp(4rem, 10vw, 8rem)",
				"outer": "var(--wp--custom--spacing--small, 1.25rem)"
			},
			"typography": {
				"font-size": {
					"huge": "clamp(2.25rem, 4vw, 2.75rem)",
					"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
					"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
				},
				"line-height": {
					"tiny": 1.15,
					"small": 1.2,
					"medium": 1.4,
					"normal": 1.6
				}
			}
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"dropCap": false,
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				}
			],
			"fontSizes": [
				{
					"size": "1rem",
					"slug": "small"
				},
				{
					"size": "1.125rem",
					"slug": "medium"
				},
				{
					"size": "1.75rem",
					"slug": "large"
				},
				{
					"size": "clamp(1.75rem, 3vw, 2.25rem)",
					"slug": "x-large"
				}
			]
		},
		"layout": {
			"contentSize": "650px",
			"wideSize": "1000px"
		}
	},
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"radius": "0"
				},
				"color": {
					"background": "var(--wp--preset--color--primary)",
					"text": "var(--wp--preset--color--background)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
				}
			},
			"core/post-comments": {
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--small)"
					}
				}
			},
			"core/pullquote": {
				"border": {
					"width": "1px 0"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--small)",
					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
				}
			},
			"core/quote": {
				"border": {
					"width": "1px"
				}
			},
			"core/site-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--system-font)",
					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
					"fontSize": "var(--wp--preset--font-size--medium)",
					"fontWeight": "normal"
				}
			}
		},
		"color": {
			"background": "var(--wp--preset--color--background)",
			"text": "var(--wp--preset--color--foreground)"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--colossal)"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--small)",
					"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--custom--typography--font-size--huge)"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
					"fontWeight": "300",
					"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
					"fontSize": "var(--wp--preset--font-size--x-large)"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--system-font)",
					"fontWeight": "700",
					"textTransform": "uppercase",
					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--system-font)",
					"fontWeight": "400",
					"textTransform": "uppercase",
					"lineHeight": "var(--wp--custom--typography--line-height--normal)",
					"fontSize": "var(--wp--preset--font-size--medium)"
				}
			},
			"link": {
				"color": {
					"text": "var(--wp--preset--color--foreground)"
				}
			}
		},
		"spacing": {
			"blockGap": "1.5rem"
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--system-font)",
			"lineHeight": "var(--wp--custom--typography--line-height--normal)",
			"fontSize": "var(--wp--preset--font-size--medium)"
		}
	},
	"templateParts": [
		{
			"name": "header",
			"title": "Header",
			"area": "header"
		},
		{
			"name": "header-large-dark",
			"title": "Header (Dark, large)",
			"area": "header"
		},
		{
			"name": "header-small-dark",
			"title": "Header (Dark, small)",
			"area": "header"
		},
		{
			"name": "footer",
			"title": "Footer",
			"area": "footer"
		}
	]
}

スタイルの変更について

theme.jsonを利用してサイトのスタイルを変更できます
クラシックテーマで使うときはエディタ側だけで、フロントのスタイルはCSSファイルが必要です

「settings」と「styles」

「settingsセクション」で、定義したプリセットが解析されCSS変数やクラスにフォーマットされ、「stylesセクション」などで、ブロックや要素にCSS変数を使用するなどしてスタイリングします
*CSS変数は、他のCSSファイルでも使用できます
*CSS変数以外の値を直接設定することもできます

CSS変数の利用:プリセットを定義

ユーザーに表示される値(例えばカラーパレットの色など)と、ブロックコントロールに対応する「CSSクラスやCSS変数」に変換してキューに入れます

CSS変数の利用:カスタムプリセット(独自のプロパティ)を定義
*個人的にはSCSS変数をここで管理するようなイメージ

"custom"{}:customをキーにしたオブジェクト内に定義
どこでも使用できるCSS変数を作成します(ブロックコントロールには影響しません)

CSS変数の命名の形式
「styles」セクションでは、生成されたCSS変数などを使いブロックや要素をスタイリング(:var(CSS変数))

プリセットのCSS変数:–wp–preset–{preset-category}–{preset-slug}
クラスは:.has-{preset-slug}-{preset-category}
カスタムのCSS変数:–wp–custom–<ariable-name>
*(注意)フィールドではキャメルケース(例:line-heightはフィールドではlineHeigh)

settingsとstyles

settings

settingsはブロックコントロールとカラーパレット、フォントサイズなどを定義します

  • どのカスタマイズオプションを有効または無効にするのか
  • プリセット値を定義
    プリセットのカテゴリー(color・typography・layout・spacing・border・custom)とサブカテゴリ(block.jsonのsupportsと同じ)を使用して定義します

各ブロックごとに設定することができ、add_theme_supportよりも細かな設定ができます
*theme.jsonの設定は、 add_theme_support()よりも優先されます

add_theme_support()Theme.json設定
( ‘align-wide’)settings.layout
( ‘editor-font-sizes’、array())settings.typography.fontSizes
( ‘custom-line-height’)settings.typography.lineHeight
( ‘editor-color-palette’、array())settings.color.palette
( ‘editor-gradient-presets’、array())settings.color.gradients
( ‘custom-spacing’)settings.spacing
( ‘custom-units’、array())settings.spacing.units

プリセットを定義
対応するCSS変数を使って「stylesのセクション」でブロックや要素をスタイリングします
“name”:エディタに表示される名前
“slug”:CSSのフォーマットで使用

color.duotone:クラスまたはCSS変数を生成しません
color.gradients:プリセット値ごとに単一のCSS変数とクラスを生成します
color.palette:プリセット値ごとに単一のCSS変数、「color・background-color・border-color」のクラスを生成します
typography.fontSizes:プリセット値ごとに単一のCSS変数とクラスを生成します
typography.fontFamilies:プリセット値ごとに1つのCSS変数を生成します

appearanceToolsは、デフォルト値がfalseです、tureにすることで下記が有効になります
“appearanceTools”: true,
blockGapについて(–wp–style–block-gap)
最初のブロックにはマージンがなく、次のブロックには上マージンがつきます
そのためblockGapでブロックの位置に応じてマージンを調整します(デフォルトは2em)
*無効にするときは、”blockGap”: null

{
	'settings': {
		'border': {
			'color': true,
			'radius': true,
			'style': true,
			'width': true
		},
		'color': {
			'link': true
		},
		'spacing': {
			'blockGap': true,
			'margin': true,
			'padding': true
		},
		'typography': {
			'lineHeight': true
		}
	}
}

contentの幅
layout設定を有効にしない場合、ブロックは全幅になり、ブロックエディターで左揃えになります
layout設定により、グループブロックとテンプレートパーツの幅設定が有効になります
設定することで、エディタ「デフォルトのレイアウトを継承する」という新しいトグルコントロールが有効になり、「on」にするとブロックツールバーに幅をnone(デフォルト、contentSize)・wide(wideSize)・fullが表示されます
contentSize:デフォルトのブロック幅
wideSize:align-wideが有効になっているブロックの幅

"layout": {
	"contentSize": "840px",
	"wideSize": "1100px"
}

fontSizesのデフォルトのslugと値(*slugを再利用して上書きすることも可能)

  • –wp–preset–font-size–small: 13px;
  • –wp–preset–font-size–medium: 20px;
  • –wp–preset–font-size–large: 36px;
  • –wp–preset–font-size–x-large: 42px;
{ 
   "slug": "small", 
   "size": "1rem", 
   "name": "Small"
 },

デフォルトで有効(true)になっている機能
無効にするには、falseにします

  • 「typography」では
    customFontSize
    dropCap(段落の先頭の文字が大きい:first-letter)
    fontWeight
    fontStyle
    letterSpacing
    lineHeightはデフォルトがfalse
  • 「color」では
    custom(カラーピッカーのこと)
    customGradient
    customDuotone
    background
    text
    linkはデフォルトがfalse

デフォルトのカラーパレットを非表示にするときは

	"settings": {
		"color": {
			"defaultPalette": false
		}
	}

styles

stylesはスタイルを適用します

  • トップレベルのスタイルは、bodyセレクタ
  • "elements"は、要素セレクタ(トップレベルとブロックレベル両方の場所で使用する)
  • "blocks"ブロックセレクタ(デフォルトをオーバーライドするために!importantが使用できます)

サイトのテキストの色をCSS変数から設定する例

"styles": {
		"color": {
			"text": "var(--wp--preset--color--black)"
		}
}

styles全体のイメージを見る

	"styles": {
		"color": {},
		"typography": {},
		"spacing": {},
		"elements": {
			"link": {
				"color": {}
			},
			"h1": {
				"color": {},
				"typography": {},
        "spacing": {}
			},
		},
		"blocks": {
			"core/post-title": {},
			"core/paragraph": {},
			"core/latest-posts": {}
    }
 }

customTemplatesとtemplateParts

customTemplates(ブロックテンプレートの一覧)
ここにリストされたテンプレートはサイトエディタで選択できます
テーマのフォルダに存在するカスタムテンプレートを一覧表示します
テンプレートをテンプレートエディタで編集できるようにするには、テンプレートのファイル名の前に投稿タイプ(page-・post-)をつけます
name:必須(テンプレートパーツのファイル名)
title:必須(エディタに表示される名前)
postTypes:オプション、サポートされている投稿タイプの配列

  "customTemplates": [
        {
            "name": "page-contact",
            "title": "Contact", 
            "postTypes": [ "page" ]
        }
    ]

templateParts (header・footer ・uncategorized)はテンプレートパーツに表示されるデフォルトのテンプレートパーツを割り当てます
ブロックインサーターで選択できるようになります
name:必須(例:my-template-part.html)
title:必須 (エディタに表示される名前)
area:パーツを表示する場所(オプション) uncategorized・header ・footerから選択します
デフォルトはuncategorized

  "templateParts": [
        {
            "name": "my-template-part",
            "title": "Header",
            "area": "header"
        }
    ]

スタイルのバリエーション

グローバルスタイルのバリエーションを用意できます(theme.jsonを継承するので、必要な箇所だけ上書きします)
stylesディレクトリを作りその直下に任意の名前のjsonファイルを作成します(例:styles/dark.json)

クラッシックテーマからの移行について

考慮する点は、「子テーマへの影響」と「Internet Explorer11を切ってもいいか」

クラシックテーマで使用できない機能は「サイトエディタ」と「スタイルインターフェイス」の2つです
クラシックテーマでウィジェットとカスタマイザーを保持して「テンプレート編集」を追加しできます

テーマは下記のように分類されるようです

  • クラシックテーマ:従来テーマ
  • ハイブリッドテーマ:theme.jsonやテンプレートエディター機能に対応している従来のテーマ
  • ブロックテーマ:フルサイト編集向けに設計されたテーマ
  • ユニバーサルテーマ:カスタマイザー、サイトエディタ両方で利用できるテーマ(’customize_register’フックでカスタマイザーを利用する)

テンプレートエディタを有効にする方法は2つ

  • theme.jsonを追加する
  • add_theme_support( ‘block-templates’ )を追加する

ユーザーが新しいカスタムテンプレートを作成する場合、サイトタイトル、投稿タイトル、投稿コンテンツを含むデフォルトテンプレートが使用されますが、テーマの作成者は、エディタ設定にフックしてHTMLとして defaultBlockTemplateを提供することにより、独自のスタイルのデフォルトカスタムテンプレートを提供するこができます

add_filter( 'block_editor_settings_all', function( $settings ) {
     $settings['defaultBlockTemplate'] = file_get_contents( get_theme_file_path( 'block-template-default.html' ) );
     return $settings;
});

クラシックテーマでは、「ページテンプレートをサポートするページ」や「カスタム投稿タイプ」でカスタムブロックテンプレートを作成し、使用することがでます

クラシックテーマのルートディレクトリにtheme.jsonを作成することで、theme.jsonを追加できます
下記が注意点だそうです

  • グループブロックの内部divが削除されます
    CSSでこのdivをターゲットにしている場合、これにより問題が発生します。
  • エディタのデフォルトのフォントファミリースタイルはキューに入れられません
    theme.jsonでフォントファミリーを定義します
  • ブロックの配置と幅は、theme.jsonのレイアウト設定に依存しますが、クラシックテーマではこの設定はエディタに追加されますが、フロントには追加しません
    フロントのスタイルは手動でキューに入れる必要があります(要するにalign-wideの扱いが従来と同じということだと思いますw)

theme.jsonを使い、テンプレートエディタを無効にするときは

remove_theme_support( ‘block-templates’ )を追加する

カスタマイザーオプション

templates/index.htmlを追加すると、サイトエディタとテンプレートエディタが有効になり、カスタマイザーメニューが非表示になります
customize_register(カスタマイザー画面用のセクション・テーマ設定・コントロールを定義)を追加することにより、カスタマイザーを復元できます

パフォーマンスのためのブロックスタイル最適化
クラッシックテーマでページ内にレンダリングされたブロックのスタイルのみロードを有効にする
*WordPress 5.8以降

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

すべてのブロックのスタイルは、style.cssに読み込まれるファイルに含まれていました(wp-block-library)が、変更後は、はるかに小さいファイルをロードするようになります(wp-includes/css/dist/block-library/style.css ・wp-includes/css/dist/block-library/common.css ・.screen-reader-text)
*フロントエンドに変更が適用されます

通常はheadでブロックスタイルがレンダリングされますが、変更すると
クラシックテーマでは、フッターに追加されます(ページのレンダリング開始時には存在するブロックと存在しないブロックを認識できないため)
ブロックに追加したスタイルがあれば、コアスタイルよりも優先されていることを確認する必要があります

クラッシックテーマでブロックにスタイルを追加する場合、既存のブロックのインラインスタイルにスタイルをアタッチする方法
ブロックごとに1つのファイルを作成し、ブロックがページに存在する場合にのみ、ブロックスタイルをロードできます
ブロック名.cssファイルと ブロック名-editor.cssファイルを作成します

ドキュメントの実装例をみる

function my_theme_enqueue_block_styles() {
    // 対応するブロック名の配列
    $styled_blocks = [ 'paragraph', 'code', 'cover', 'group' ];
 
    foreach ( $styled_blocks as $block_name ) {
//レンダリング時にコアブロックに個別のスタイルをロードする必要があるかどうかを確認
        $handle = (
            function_exists( 'wp_should_load_separate_core_block_assets' ) &&
            wp_should_load_separate_core_block_assets()
        ) ? "wp-block-$block_name" : 'wp-block-library';
 
        // スタイルシートのpath
        $styles = file_get_contents( get_theme_file_path( "styles/blocks/$block_name.css" ) );
 
        // インラインに出力する
        wp_add_inline_style( $handle, $styles );
 
        // エディタのスタイル
        add_editor_style( "styles/blocks/$block_name.css" );
        if ( file_exists( get_theme_file_path( "styles/blocks/$block_name-editor.css" ) ) ) {
            add_editor_style( "styles/blocks/$block_name-editor.css" );
        }
    }
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_block_styles' );
add_action( 'admin_init', 'my_theme_enqueue_block_styles' );

PHPベースのテンプレートにブロックをレンダリングする
引数は1つで、関数が解析する必要のあるコンテンツを含む文字列

echo do_blocks( 'ブロックマークアップ' );

ブロックテーマでPHPテンプレートを使用するとき
PHPテンプレートは、サイトエディタまたはテンプレートエディタで編集できません
必要なWordPressフックとマークアップを含める必要があります
do_blocks()を利用してブロックをレンダリングできます

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div class="wp-site-blocks">

 <?php echo do_blocks( '
<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-group">
//省略
</main>
<!-- /wp:group -->
' );
; ?>

</div>
<?php wp_footer(); ?>
</body>
</html>

ブロックを充実させる

  • ブロックパターンを追加する
  • 既存のブロックに新しいスタイルを追加
  • ブロックのバリエーションを追加

ブロックの活用

ブロックパターン

パターンについて

ブロックパターンは、投稿、固定ページ、またはカスタム投稿タイプに挿入して、独自のコンテンツでカスタマイズできる「事前定義されたブロックのグループ」です
ブロックパターンに加えられた変更は「登録されたブロックパターン」や「ブロックパターンを使用しているその他のコンテンツ」に影響しません(*再利用可能ブロックと異なる点です)

デフォルトパターン(カラム・ギャラリー・テキスト・ヘッダー・ボタン・画像)が登録されています

ブロックパターンディレクトにある、さまざまなパターンが利用できます

ブロックパターンの利用はコピーを貼り付けるだけでできます
カスタムのブロックパターンを登録するには、PHPが必要です

パターンの活用

テーマオリジナルのパターンの登録は、php(register_block_pattern)で登録する必要があります
例:patterns.phpを作り「テーマのパターンカテゴリーを登録」して、そのカテゴリーに「オリジナルパターン」を登録
functions.phpで呼び出す
*WordPress 5.5より前のバージョンのWordPressをサポートしている場合はif文をつける

<?php
//テーマのパターンカテゴリーを登録
if ( function_exists( 'register_block_pattern_category' ) ) {
    register_block_pattern_category(
//hoge-blocksカテゴリー
        'hoge-blocks',
        array( 'label' => esc_html( 'テーマ名パターン' ))
    );
}
//オリジナルパターンを登録
if ( function_exists( 'register_block_pattern' ) ) {
    register_block_pattern(
//機械が読めるタイトル、命名規約はnamespace/title
        'koro-fse/text',
        array(
            'title'         => esc_html( 'text' ),
            'categories'    => array( 'hoge-blocks' ),
            'content'       => 'マークアップを貼り付ける',
           //その他利用可能なプロパティdescription,viewportWidth,keywords
        )
    );
}
require get_template_directory() . '/patterns.php';

パターンごとに1つのファイルを使用します(パターンの将来を保証するために重要だそうです)

ブロックパターンをテンプレートに配置するマークアップ

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

カスタムブロックスタイル

既存のブロックに新しいスタイルを追加できます
*複数登録するときは別ファイルに

スタイルの選択
register_block_style(
//ブロックの名前
'core/paragraph',
     array(
         'name'  => 'rounded',
	    'label' => 'Rounded',
//インラインスタイルまたはエンキューしているスタイルシートのハンドルを追加
         'inline_style' => '.is-style-rounded {  
	          border-radius: 6px;
        }',
    )
);

バリエーション

バリエーションの例は、埋め込みブロックのTwitterやYoutubeなどのざまざまなバリエーションです

ブロックバリエーションは、JavaScriptを使用してのみ登録できます
*enqueue_block_editor_assetsフックで、エディタでのみスクリプトをロード(wp.blocksを依存関係に含めます)

function mytheme_editor_assets() {
    wp_enqueue_script(
        'mytheme-block-variations',
        get_template_directory_uri() . '/block-variations.js',
        array( 'wp-blocks' )
     );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_editor_assets' );
wp.blocks.registerBlockVariation(
    //グループブロックにバリエーションを登録
    'core/group',
    {
    //一意の識別子である
        name: 'full-width-group',
    //エディターに表示される名前
        title: 'Full width group',
    //ブロック属性をオーバーライドする値
        attributes: {
                align: 'full'
            },
    //デフォルトにする
    //isDefault: true
     }
);

*属性はブロックタイプ固有です

インサーター

カスタム投稿タイプについて

ブロックテーマは、カスタム投稿タイプを登録することはできません(プラグインでは可能、プラグインは、カスタム投稿タイプを登録するときにブロックテンプレートを登録できます)

プログラムでカスタム投稿タイプのブロックテンプレートを作成するには、基本的に3つの方法があります1

  • テンプレート階層に一致する、投稿タイプの完全なサイト編集HTMLテンプレートファイルを追加すします(カスタム投稿タイプが「books」のときは、テンプレートにsingle-books.htmlという名前を付けます)
  • 投稿タイプに従来のPHPテンプレートファイルを追加(テンプレートエディタでテンプレートを編集することはできません)
  • 投稿タイプを登録するときにブロックテンプレートを追加するか、投稿タイプテンプレート引数をフィルタリング(テンプレートエディタまたはサイトエディタでこのテンプレートを編集することはできません)

最後に

テーマのコードを見たいときの参考

ブロックのコードを見たいとき

エラーの覚書

属性のオブジェクトのかっこが一致しないときにサイトエディタで、「ブロックリカバリー試行」のエラーが表示されます
「VSCode拡張機能」にどっぷり依存しているため^^;
チェックが入らないマークアップや、オブジェクトのネストが深くなると確認が大変でしたw

デフォルトのCSSの備忘録

  • blockGapを有効の場合、次のブロックにはmargin-top: 2emがつきます
    .wp-site-blocks > * + * {
    margin-top: var( --wp--style--block-gap )
    }
    *flex-boxのハマりポイント(子供のmargin-topは0にw)
    *行グループにはalign-item:centerがついています
  • カラムブロック(.wp-block-columns)はmargin-bottom:1.75emがつきます

追記

WordPress6では
validate_current_theme(テーマが必須ファイルを含んでいるかどうかをチェックする関数)で、index.php が無くてもtrueを返すようになり、ブロックテーマにおいて、index.phpが必須ではなくなるそうです

,