WordPress 5.3 ブロックエディタ gutenberg CSSの変更の準備できてますか?

WordPress 5.3のリリースが、来月に予定されています。(リリーススケジュール

ブロックエディタは、5.0でコアに実装され、機能の改善やバグの修正は gutenberg プラグインで行われてきました。

残念ながら、有効インストール数は20万と低調で、クラッシックエディタの500万と比較すると微々たるもので、このことは、5.0以降の多くのWEBサイトでは、gutenbergプラグインは、利用されていないことをうかがわせる結果です。

gutenbergプラグインが有効化されていない状態のサイトが、5.3にアップデートした場合に何が起こるでしょうか?

これまでのプラグインの機能の改善や、バグ修正といったものがコアに実装されるために、さまざまな問題が起きる可能性が否定できません。

コアチームは、Block Editor Theme-related updates in WordPress 5.3 を公開して、主な変更について言及しています。

この記事について、私見を交えて、みていきたいと思います。

この記事は、ブロックエディタ使っているけど、gutenbergプラグインは使っていないという人向けの記事です

Group block

グループブロックは、5.3で実装される新しいブロックです。このブロックは、従来のブロックを複数選択してグループ化します。平たく言うと、div要素で、複数ブロックをラップします。
見出しや段落、といった複数のブロックをグループ化して、再利用ブロックとして登録することも可能なので、実用性の高い機能です。

グループブロックは、テーマのfunctions.phpで

が設定されている場合には、全幅画像などに対応したCSSを個別独自に実装しているため、レイアウトの問題が生じる可能性があります。

全幅設定のサンプルコードについては、ネガティブマージンの設定例がありますが、併せて、以下のようなスタイルも検討する余地がありそうだと思います。

text-align テキストの左右揃え

従来は、以下のようなインラインスタイルで、テキストの左右揃えを行ってきましたが

5.3以降では、

インラインスタイルが、クラス名に変更になりましたので、独自テーマを作成している場合などでは、新たにテーマに対応したスタイルを追加しないと、右揃えや左揃えが、新規投稿では聞かなくなるといった問題がありそうです。

カラムブロック

カラムブロックでは、列ごとの幅を設定できるようになったため、has-x-columnsクラスは廃止されました。
テーマで、このクラス名に依存したCSSを設定している場合には、期待通りに機能しなくなるでしょう。

ヘアラインに色設定機能が追加

ヘアラインブロックに色設定機能が付くようになったので、色設定がない場合のみ、テーマのデフォルトの色設定を適用するべきとしている模様
設定サンプル

カスタムカラーパレットを設定している場合は、色設定機能はカスタムカラーパレットの色と同じになるので、必ずしも色設定が適用されていない場合の色だけというわけでもないようにも思う。

カラーパレット

最近の投稿ウィジェットブロック機能追加

投稿本文、概要、等を選択できる機能が追加されています。align-wideが設定されている場合、aliginfullクラスが追加された要素がオーバーフローしていないか確認をお勧めします。(ウィジェットブロックは、カラムブロックやグループブロック内に挿入される場合も少なくありません。)

テーブル要素のHTML構造を変更

tableブロックの機能は、強化されてthead tfoot セルの左右位置揃え等機能が強化されているので、背景色付きスタイルなどが反映しなくなるケースが多いと思います。見直しをお勧めします。

また、galleryは、クラッシックエディタのショートコード、サイドバーのギャラリーウィジェット、それとブロックギャラリーのhtml構造は、それぞれ異なります。
一貫性がないので、それぞれCSSを記述する必要があります。類似したクラスも使われているためコンフリクトには注意が必要そうです。

従来

wordpress 5.3

ギャラリーブロックのhtml構造

wordPress 5.2 gallery

wordpress 5.3 gallery

ソーシャルメニューブロックの追加

ソーシャルメニューブロックが追加されます。スタイルのコンフリクトが発生していないか確認してみましょう。

PHPでブロックスタイルを登録するAPI

従来ブロックスタイルの追加は、javascriptを使っていましたが、PHPでもできるようになります。


Block Editor Theme-related updates in WordPress 5.3 – Make WordPress Core

ブロックスタイルを追加した場合、エディタ側のスタイル、フロントエンドのスタイル両方にスタイルが適用されますが、設定によっては、詳細度の関係でエディタ側と、フロントエンド用の、両方のスタイルを指定する必要があるかもしれません。

robot.txtの変更

「検索エンジンによるこのサイトのインデックス作成をやめる」オプションを選択した場合、
robot.txtに

が、追加されなくなる模様

検証はしていないので、コアの変更部分をメモします。

従来

WordPress5.3より

ナビゲーションにaria-label属性サポート

5.3の機能強化:ナビゲーションにaria-label属性が追加される – WordPress私的マニュアル

画像サイズ

Introducing handling of big images in WordPress 5.3 – Make WordPress Core
5.3への準備:投稿写真を使っているサイトは準備しておこう – WordPress私的マニュアル


新着記事

コメントは受け付けていません。