最近のWordPress（Gutenberg）の動向

サイトエディタ新登場！

新しいブロック「クエリーループ」「最新の投稿一覧」など、デフォルトのブロックも充実。
Gutenbergとサイトエディタの使用方法さえ理解していれば、PHPの知識が無くてもサイトが作成できるようになりました。

theme.json

「CSSを使って見た目をコントールの時代」は終わり、theme.jsonでエディタ側から自由にスタイリングできるような時代を目指しています。

なお、公式テーマTwenty Twenty-ThreeからCSSが消えました…

ブロックパターン

ブロックパターンをみんなで共有することで、美しいデザインを簡単に作れるようになりました

カスタムブロック全盛期

「カスタムブロックの作成こそが、テーマ開発者の仕事」の時代が来ています。

カスタムブロックの開発が辛い方は、プラグイン「Advanced Custom Fields Pro（有料）」を使用するのが一つの手かもしれません。以前記事を書いてみたので参考にしてみてください。

クラシックテーマでもテンプレートパーツ利用可

クラシックテーマでもテンプレートパーツを追加できるようになりました。（WordPress6.1～）

これにより、サイトエディタの一部の機能が使えるようになりました。

例えば、特定のメッセージを出したい箇所があればそれ用のテンプレートパーツを作成しておけばクライアント側でメッセージの編集が容易にできるようになります。
何も出したくないときはテンプレートパーツの中身を空っぽにしておけばOKです。

Classic Editorの存在

しかし、昔から運用しているサイトだと、Classic Editorで構築されているサイトが多いです。

Classic Editorでの構築・運用をずっとやっているとGutenberg、サイトエディタの概念が理解しにくいです。

実際、以下のような意見があります。

サイトエディタの使いどこわからないし、Gutenbergのブロック操作方法慣れないと難しくてつらい
カスタムブロック作りたいけど、WordPressのバージョンアップ作業が3倍くらい時間かかりそう
デザイナーさんが作ってくれたデザイン、Gutenbergだと反映難しい
テキストと画像を並べるだけであれば、もはやWordPress使う意味あるのか
ノーコードを目指しているんだったら、既出のツール（STUDIOやWIXなど）に勝てる要素あるのかな

Classic EditorのWordPressと現在のWordPress

サイトエディタが導入された今のWordPressとClassic Editor時代のWordPressは、まったく別のCMSと考えてもらった方がいいです。

同じWordPressの概念で捉えていると、頭が混乱してしまします。

「Classic Editor時代のWordPressのほうが良かった」
という人はかなり多く、実際Classic Editorのほうが扱いやすいような感覚もあります。

しかし、現在のWordPressは100%Gutenberg推しなので、今のうちにGuntebergに慣れておかないと、これから先が大変です。
ということでGutenbergについて掘り下げていきます。

Gutenbergの何が嫌いか

デフォルトブロックの不具合

6.1以前に書かれた記事を6.1.1で編集すると、リストブロックの設定が消えてしまう。
というバグです。

Classic Editorに比べて、Gutenbergは複雑な機能を実装してあります。

そのため、デフォルトのブロックにおいてもアップデートによって不具合が起こることがあります。

こちらの人は、WordPressのバージョンアップによりfigureタグに余計なmarginを設定されて怒っています。

アップデートごとに全ブロックの表示確認が必要

GutenbergはデフォルトでたくさんのCSSが付与されています。
そして、そのCSSはアップデートのたびに変更されています。
そのため、Classic Editor時代のように、こちらの好きにスタイルを当ててしまうとアップデートのたびにすべてのブロックが正しく表示されているかの確認が必要になります。（もちろん昔もその必要はありましたが、その手間がかなり増えるというわけです。）

例としてcocoonさんのテーマのアップデートを見てみます。

以下はCSSではないですが、バージョンアップによる不具合です。

無料のテーマでここまでしてくれているのは凄いです…

Gutenbergをクライアントが使いこなせない

Gutenbergは機能がとっても豊富にあるので、使い方をマスターするのが大変です。
クライアントによっては、操作方法がわからず嫌がる方も多くいます。（特に過去Classic Editorを使用していた場合）

意図したデザインから外れる

カラムやカバーブロックなど、デザイン面の統率を取るのが非常に難しく、変なデザインが出来上がってしまう可能性があります。
PCでの見た目のみ確認して、SPの見た目を考慮しないで作成してしまうケースも多々あります。

バージョンアップによるブロックの仕様変更

デザイン上で使用してほしくないブロックを削除するのも一つの手かもしれません。

しかし、バージョンアップの際にブロック名が変更・削除されたり、新しいブロックが追加されることがあるので、バージョンアップの手間が増えます。

例えば、WordPress5.9のリリースの際はかなり多くのブロックが追加されました。

セキュリティとバージョンアップ

「WordPress本体のバージョンアップ自動更新は有効化しておくべき」というのがWordPressを使用するうえで基本となります。
しかし、メンテナンスリリースにおいても、ブロックのCSSが変更されることでデザインが崩れてしまうことがあります。

セキュリティを守るために自動更新を有効化するが、デザインの崩れは許容する
デザインを絶対に崩したくないので、自動更新は無効化する

という二つの選択肢を選ぶことになります。

Gutenbergの開発の流れが速い

サイトエディタに本格的に力を入れていることから、今後もWordPressはGutenbergの機能開発が活発に行われていくことと予想されます。
アップデートのたびにブロックの仕様などが変わる恐れがあるため、自己流のカスタマイズをしてしまうと、アップデートできなくなる恐れがあります。

Gutenbergのいいところ（サイトエディタも含む）

PHP無しでも複雑なことができる

冒頭でも記載した通り、ブロックテーマの導入により今までPHPで組み立てていたカテゴリー一覧ページや日付別一覧ページなどがGutenbergで組み立てられるようになりました。

ブロックテーマでは、今までは制作会社に依頼しないと変更できなかった部分が、クライアント側でも更新できるようになります。

デザインの幅が広がる

カラムやカバーブロック、ボタンブロックなど様々なブロックの導入により、色々なデザインを実現できるようになりました。
なので、記事を書く人は楽しく書くことができるかと思います。

プレビュー無しでも表示がある程度確認できる

これはだいぶ前からそうだったのですが、最近さらにプレビューとGutenberg投稿画面内のデザインの差が少なくなってきています。
プレビューとエディタ側の見た目を揃えるのは、当たり前になりつつあります。

開発が活発なので、今後のサポートが長い

GutenbergはWordPressで一番活発にアップデートされている機能です。
そのため、そう簡単にサポートが切れることはあり得ません。なので、安全に長く使用することができます。

ほぼノーコードでサイトが作れる

サイトエディタ対応のテーマも続々とリリースされ始めています。
メジャーな優良テーマを購入すれば後はサイトエディタでほとんどのページを変更できます。

クライアントへの提案方法

クライアントに対してどのような提案方法があるのか考えてみました。

①記事詳細ページは何もカスタマイズしない

Gutenberg関連に関するメンテナンスの手間が抑えられる
アップデートによる記事のスタイルの崩れ・バグをほとんど心配しなくてよい
公式のブロックパターンディレクトリに登録されているパターンが、意図通りに使用することができる

記事詳細はエディタ上で色々操作しないと簡素なページになる。

②CSSで最低限のスタイリング（見出し、リスト、iframe、画像等）

特定のタグにスタイリングを行うことで、見栄えを多少整えることができる

ブロックパターンディレクトリのものは、タグにスタイリングしてしまっていると一部デザインがおかしくなる可能性がある。
バージョンアップのたびに、全ブロックのスタイリングにバグがないか調査する必要があるので工数がかかる

※register_block_styleを使用して既存の各ブロックにカスタムスタイルを当てることもできます。各ブロックのオリジナルのデザインなどを作ることができます。

functions.php

register_block_style(
	'core/heading',
	[
		'name'         => 'border',
		'label'        => '左ボーダー茶色',
		'inline_style' => '.is-style-border {
            padding-left: 1.5em;
            border-left: 0.3125rem solid #beb899;
        }',
	]
);
register_block_style(
	'core/heading',
	[
		'name'         => 'border2',
		'label'        => '左ボーダー赤色',
		'inline_style' => '.is-style-border2 {
            padding-left: 1.5em;
            border-left: 0.3125rem solid red;
        }',
	]
);

③Advanced Custom Fields Proを使用してカスタムブロック作成

GutenbergのCSSの影響をほとんど受けないので、メンテナンスが楽
カスタムブロック開発と比べて、ブロック作成がとても簡単にできる
とてもメジャーなプラグインなので、メンテナンスが切られることはほぼあり得ないので安心
自分で好きなブロックを作成することができるので、大体のデザインには応用可能

年間$49と日本円ではなく、円安の影響を受けるので心配なクライアントも多いかも

④公式ブロックテーマを使用して構築

サイトエディタ対応のテーマなので、ヘッダー・フッターを含めたすべての部分がクライアントにより操作可能
費用が抑えられる

そのテーマの更新が止まった場合、大変なことになる。最悪の場合、サイトが壊れる可能性もあり
サイトエディタのことを深く理解しないと、構築に時間がかかる

ブロックのメンテナンス

一口にブロックのメンテナンスといっても確認すべきことがたくさんあります。

各ブロックごとに出てくる右サイドバーの設定項目が反映されているか、値はおかしくないか
設定項目の反映はエディタ・フロント側で出来ているのか
入れ子になったブロック（例えばカラムの中の見出し、ボタン等）の表示は崩れていないか
カスタムブロックであれば、独自に追加した機能（例えばjson-ldの自動付与）はしっかりと機能しているか

などなど、確認すべき項目は多岐にわたります。

バグの報告は世界中から毎日のようにたくさん上がっています。
なので、Gutenbergを使用する上で、100%不具合が起こらないようにするのは不可能です。

今後もWordPressを使用していくのであれば、ある程度のバグ（スタイルがちょっと崩れる等）を許容する寛容な心が必要です。

おまけ

デザインについて

記事詳細ページのデザイン、特にコンテンツ部分に関しては、特に色々やらなくてもいいと個人的には思います。

事実、Qiitaの記事は見出しの種類などは選べないですし、そんなにデザインの自由度は少ないですが、内容はとても見やすいです。

なので、受託開発において色々な種類のスタイリングを用意するのは必要ないと思ったりしています。

WordPress.comについて

WordPressにはWordPress.com と WordPress.orgの二つが存在します。

WordPress.comのいいところは、サーバーを用意してくれることや、メンテナンスを全部やってくれることです。

「特にデザイン上のこだわりはないけど、ある程度ちゃんとしたサイトを持ちたい！」という人はこちらを勧めてもいいかもしれません。

ノーコードツールについて

今日本で一番盛んなノーコードツールはSTUDIOだと思います。日本発のノーコードツールです。

こちらもサーバーを用意してくれて、なおかつNuxt.jsを使用しているため、めちゃくちゃページ遷移速度が速いです。

CMSの機能も付いているので、とっても便利です！

用語説明

サイトエディタ : WordPress5.9から導入されたフルサイト編集のこと。呼び方を親しみやすくするために名前が変わりました。
ブロックテーマ : ブロックのみで構成されたHTMLテンプレートから構築された新しいテーマ
クラシックテーマ : 今までのPHPベースのテンプレートで構築された古いテーマ
※クラシックテーマはClassic Editorを使用しているテーマという意味ではないので注意