リリース直後に個人感想であれこれ書いてるので間違いや後日訂正の多い記事です。
その点も加味してお読みください。

あるいは、WordPressフルサイト・エディティングとのつきあい方

まずはじめに「Twenty Twenty-Two」の機能については、どこより確かな WordPress 5.9 Josephine をリンクしておきます。
News記事が流れてもいいように。

タイトルに句読点。がついたら、億ちゃん散文形式はじまったな・・の合図かもしれない。今気づいた、無意識にやってるんだな、表題に句読点。

前POSTを書いた時点では、テーマエディターになって、ウィジェットメニューという過去に見慣れていた「テーマに関するメニュー」は何処へ? を書く予定でしたが、全部Gutenbergがまるっと持ってる、内包してるから大丈夫だぁ、で終わらせたいくらい。

それほど、すべてはGutenbergがもっていた。
「Twenty Twenty-Two」は「Twenty Twenty-One」とまったく構成が違った。

ごく単純な感想として、一からつきあうのは大変そう。
しかしゼロからつきあうのは、めちゃくちゃ面白そう。

そしてこれからのテーマは「アンナ・カレーニナ」のようであるべきなんだな・・・を何度も、何度も思った。

今後将来のテーマというか、フルサイト編集:WPでのフルサイト・エディティングには、アンナさんタイプが相応しかろう・・・という自分ではいちばんしっくりくる喩え。

骨格は骨太で、肉付きの部分はFatが良いと思えた。

ブロックエディタでは、再利用ブロックテンプレートブロックパターンを作り倒し、使いまわし、燃焼に使うのが効率的だ。

動く力はAPPで燃焼はテーマで、そのテーマはGutenbergがせっせと書き溜めた「テンプレートパーツ」や「パターン」の質と量で豊かなのか貧相なのか差がつく。
という全体像のイメージ。


実際に見たほうが早いテーマルートの構成。

前記事に後日加筆で書いたとおり、基本的なところはtheme.jsonで管理されており、ユーザーが追加したものは「parts」「templates」フォルダに保存される。


後日訂正

ダッシュボードのテーマ・エディターで保存したものはDBに記録され、リセットをしたときにテーマオリジナル版のHTMLテンプレートに戻る。

編集したものをDB以外にバックアップ保管しておきたい場合はテーマ・エディターからエクスポート機能を使う。

編集したものをオリジナルに上書きしたいような人は、ローカル+テキストエディターでテンプレート.htmlを書いてアップする。


「parts」と「templates」フォルダを展開した図。

入っているのは前記事で4つあると書いたヘッダーやフッター「テンプレートパーツ」とWP一般に使うページや検索といった「テンプレート」群。

ローカルでは「templates」にただファイルを置いてもtheme.jsonで反映させないと何も起こらないという一手間はあるが、これまでのようにPHPファイルではなくHTMLで書けるのがやたらな親近感。

そして、ここにfooter-watakushisei.html みたいなファイルを作り、theme.jsonで反映されるも良いが、それをせずともフッターに使えるパターンは2つあったし、入れ子で使うパターンなら、かなりたくさんあった。

デフォルトの白フッターは、登録パターンの中から「フッター」用途で選択したパターン中、白い「デフォルトフッター」を充てており、「暗いフッター・タイトル、引用元」と同じ内容で暗い背景色の別パターンに差し替え可能なフッター「テンプレートパーツ」というものだったのだ。

自作パーツをつくって登録するのは、テーマエディターで触るよりも、下書き投稿をつくって、その中で編集して登録してしまった方が早かった。


余談ですが、せっかく失敗したのでこのまま操作の話、Gutenberg可愛いや、可愛いや〜グーテンベルクぅぅ〜な一例を。

自分で編集したブロックを「テンプレートパーツ」に登録して、それを各「テンプレート」の中で「フッター」へ置換えてという流れを3枚画像で示したかったが、3分割じゃ狭かった。

こういうときブロックエディタで新しいカラムセットを置いて、リスト表示の中で複製した画像をドラックして運んでくるとかすごく楽で好きなんですよね。

ごく個人的に、はじめてGutenbergを触ったときに(うぉぉ、往年の「Go Live!」みたいだぜッ!!)オラわくわくすっぜ。となった熱は未だ続いてるんですが、さっき画像をリスト複製して別ブロックに移すとやってたら、Photoshopみたいやのぉ・・・と思った。で、ハタと気づく。あぁ「Go Live!」は生粋のAdobe製品だったんですねぇ。
今でもXDを触っていると、あぁこのライブ感Go Live!の系譜やわぁ「泣けちゃう!」と言いながら笑ってるんだけど。惜しいものをなくした、けどムダにはなってないんだな、と無駄話。


投稿ページでサイトに登録されている「固定ページリスト」を配置し、眺めつつ「リスト・ブロック」をつくり「ナビゲーション」テンプレートパーツとして登録したところ

リストの上に見出しを追加するなど、投稿の中でふだんしている操作のまま「テンプレートパーツ」も編集可能

それからテーマエディターへ行き、たとえば「404」テンプレートを開いてフッターを置換えるところ。

候補があってはじめて「置換」メニューが出るため、別の場所でつくっておいて、全テンプレートのフッターを置換えた。(空白)ページを除いて。


大括りな醍醐味みたいな話はこれで十分かと思う。
テンプレートをどんどん増やすのではなく、テンプレートパーツをつくり分けていき差し替える。
そのテンプレートパーツも、いくつかのパターンを入れ子にして作成するといった、小さな作業が大物づくりに積み上がる、
小さな部品をいくつも使って、大物を組み立てていく
フルサイト・エディティングはすべてブロックエディタでーの仕組み。


ゼロか一かの話

冒頭近くで、「一からつきあうのは大変そう。
しかしゼロからつきあうのは、めちゃくちゃ面白そう」と書きました。

それはまず引き継ぎ部分がどうなるのか、よく分かってない点はさておき、ブロックエディタですべて賄うというのは「HTML」とか書かないので、使わない知識はむしろ邪魔。

CSSの知識、使い慣れというのはいずれワンステップ上げるには必要だろうなというか、一助になるだろう予測は前評判的な機能から予想していますが、それもまたパターン登録が億劫でなければ、WordPressサイトしか作らないというのであれば、不要とも言えそうで。

今後のGutenbergは、ラグビーでいうスタープレーヤー
クォーターバックが独りで独走できるようなフィールドを用意されたんですねぇ。

あぁ、フィールドに敵がいないというのが、フルサイトまるっと自在に走れるエディティングに通じるのか。ようやくちゃんと内臓の腑に落ちてきたわ。


どんなときにHTMLが邪魔かなぁという例で
↑で作りかけたフッターには、たとえばsvgアイコンを配置したいとき、テキストエディタではさらりと4行くらいコードをコピペすれば済むものが、カスタムHTMLは入れても安定感があまり感じられない。つまり登録せいよ、いつでも挿入できるブロックとしてさ、という方向へ傾く。

SNSアイコンは最初から用意されていても、独自で使いたいsvgはブロックエディタ単独では難しいという意味。
やはり開発者がSNSアイコンを用意してくれた手法をなぞらえるのは裏方作業。

あとは広範囲で括りたいアンカータグ
ブロクサイトの一覧表示には、「フューチャーイメージ + 投稿タイトル + 抜粋文」が一纏まりのリンクになっているケースも、よく使われていると思う。

<a href="#" class="*">
	<svg class="*"...></svg>
	<g transform="...">
		<path d="...">
	</g></svg>
	<h4><img src="..."></h4>
</a>

まぁ一覧表示というクエリーループなら様々用意されていそうな気がするが、探すのが大変なのと、似たような広範囲アンカーを実装しようとして、この程度で躓いている。

ブロックの利点は、開始タグと終了タグがしっかり対で書かれているため、ブロック単位のドラック&ドロップができるわけで、そこを突き抜けようとはウマが良すぎるぞ、こんにゃろ…になっちゃうんですね。

とはいえ、「Twenty Twenty-One」のときから裏側でパターン登録コードを書いてきたり、勤勉にやってきた人は0でも1でもなく、5..6..7..8..スタートで無駄になるはずもない技術なので、そこは必要な人は追いつけば良いし、必要ない人は素敵Fatなテーマの中で裏側を気にすることなく、コンテンツ制作に注力していくことができる。


テーマに関するメニューは何処へ?

ここまで書いて、もう蛇足ではという気はするものの、昨日初見では気になる点と思っていたので一応、載せておきます。

この変化は「有効」指定したフルサイト編集テーマによって違うこともあるようですが、おそらくこれが過去初期値から新初期値と思われます。
過去:現在ともに公式テーマしか使わずアップデートした環境なため。

なくなった文言を順に追うと、カスタマイズ押下で開いていたカスタマイザーに変わるものがエディターなので=置き換わり。

ウィジェットはブロックエディタの中で、それはもうたくさん選ぶことができるので、「つくる」という行為が要らなくなったとも言えるし、エディターが内包したとも言える。

先にメニューもまた前Verまでは「メニュー」と呼んでいたデフォルトのウィジェットなので画像下から2段めの「固定ページリスト」がメニューにあたり、テンプレートパーツのヘッダーには最初から配置されていました。

ウェジェットで一般的に汎用されてきたのは、アーカイブカテゴリータグクラウド検索あたりが「サイドバー(sidebar)ウィジェット」に配置するか・しないか、をブログ開設時に選択するところからテーマ設定は始まるーーといったイメージでしたが、各テンプレートの中に、好きな位置へ個々ウィジェットを配置していくこともできるし、グループ化したパターンを一気に配置していくことも出来るでしょう。

ビギナーがテンプレートを編集するときの注意点としては、好きな位置といっても、クエリーループの中にウィジェットを配置するとタグクラウドが10箇所に表示された、などあり得ますし、複数ウィジェットをまとめて置く場合には、そのブロックがデバイスによって想定外の位置(レスポンシブの振る舞い)にならないよう、デスクトップ・タブレット・モバイルのプレビューをそれぞれ確認しておくと良いでしょう。

多くは、レスポンシブにすでに対応している「カラム」ブロックを配置した中に各ウィジェットをネスト挿入していけば無難かと思います。


つきあい方。

と表題にしたのは、もう少し大枠な話をしたかったテンションやモードが、操作の話や画像には、現実に引き戻されますね、否応なく。

なまじHTMLやCSSの知識があると、邪魔になるというより、面倒に感じるかも知れない、億劫だよそりゃ、テキストエディタに優る自由度はないわけで。

といったところから、HTMLとはなんぞ、CSSとはなんぞ、を派生して考えるタチなんですね。

毎度いろんな答えが浮かびますが、HTMLはやはり翻訳だと
ブラウザに伝える翻訳者、言語ですから、そこは毎度この答えに終始する場合が多い。

で、やはりHTML5で生き返った気がした生業の人間としてはナビゲーションを追加したら

<nav role="navigation" aria-label="main-navigation">

と書きたい。
その流儀をブロックエディタに任せきりタグはフラストレーションになるところもあるだろう。

それが「邪魔」と端的に書いていた裏の気持ち。
流儀を通すならまた余計な勉強しなきゃならんかと覚悟するか、便宜を採るか。

CSSとは何ぞは、今日は「太鼓持ち」と浮かんだ。
翻訳者が歩く道行きを華やかに賑やかすための太鼓持ち。

このヒトいないと地味ですからHTML。
そしていつも、いつの時代も実装したい表顔のために、デザインを「推して参る」させるために勉強してきたなぁと。

恋愛でも、外見から一目惚れたわ、になる俗物だったので、「Twenty Twenty-One」があれほどインパクトの強い子じゃなかったら、関わってなかったような気もするWP。

案件としてはあるけど、深く掘り下げて知りたいはまた別のもので。
そういう意味でココの筆者はWPというより、Gutenbergに痺れて熱に浮かされている状態ですから、つきあい方。なんて言葉がのっけから出てきましたが、追っかけてるだけで、プロポーズまで漕ぎ着けた人ではない。という点を留意のうえ読んでいただければ幸い。

リリースから日が経てば、役に立つ記事は山程書かれると思いますが念の為。


いったん記事を公開してから実作業に戻り、知りたいたいことをググってるうちに、やはり公式的なところが大変参考になりました。

冒頭にも貼った WordPress 5.9 Josephine / 開発ノート
また WordPress 5.9 をチェックしています は操作面で「フルスクリーンパターンエクスプローラーモーダル」などまったく気づいてなかったので感動。冷静で細かい検証がありがたく。


そして文中、HTMLは邪魔とか言葉の綾で連発してましたが、ローカル環境で子テーマを作成し、テンプレートを触りだしてから、HTMLベースのテンプレートに・・・こんなに簡単でいいの、これでいいの? と不安になるくらいたじろいでいます。

何よりも「Twenty Twenty-Two」テーマCSSの短く簡素なこと。
うちのMacはそこをいちばんありがたがっているかも。