Explore WordPress 6.3

開発者向けまとめページ

含まれるGutenbergバージョン

Gutenberg とは

  • 「グーテンベルグ」とは、WordPressのサイト構築とパブリッシングにおけるまったく新しいパラダイムのコードネーム
  • ヨハネス・グーテンベルグが活字に革命を起こしたように、パブリッシング体験全体に革命を起こすことを目指している

WordPress 6.3 では

  • WordPress 6.3 では、編集、カスタマイズ（フルサイト編集、ブロックパターン、ブロックディレクトリ、ブロックベースのテーマを含む）、コラボレーション、多言語といった、WordPressのあらゆる部分に触れる4段階のプロセスの第2段階が終了
  • Gutenberg 15.2 から 16.1 までに開発された部分が WordPress 6.3 に含まれた

プラグインとテーマの更新失敗時の自動ロールバック機能

概要

  • 手動でのプラグインやテーマのアップデートが失敗した場合、ロールバック機能により自動的にインストール済みのバージョンが復元される
  • 加えてサイトヘルスで以下を確認するようになる
    • 避難先ディレクトリが書き込み可能かどうか
    • 退避するために必要な空き容量があるかどうか

処理の流れ

  1. プラグインやテーマを更新する
  2. 古いバージョンを以下の退避ディレクトリに移動させる
    • wp-content/upgrade-temp-backup/plugins/[plugin-name]
    • wp-content/upgrade-temp-backup/themes/[theme-name]
  3. 更新が成功したら /upgrade-temp-backup は削除される
  4. 更新が失敗したら退避ディレクトリのものを復元する
New in 6.3: Rollback for failed manual plugin and theme updates

エディターのiframe化

概要

  • 利用しているブロック（コア提供＆プラグインやテーマ提供）のバージョンが 3 の場合、エディターが iframe に変更になる
  • １つでもバージョンが 2 以下のブロックが使われていると適応されない

開発モードの追加

概要

  • WP_DEVELOPMENT_MODE という開発モードが追加された
  • 指定できる値は "core" "plugin" "theme" "all"
  • 空の文字列を指定した場合には、特定の開発モードが有効になっていないことを示す。これがデフォルト値。
  • 本番環境で使うことは推奨されない
  • 具体的に何ができるのか
    • 今後、ユースケースは増えるだろう
    • 現状は、theme.json のキャッシュに関するもの

設定方法

wp-config.php に以下のように記述する。

define( 'WP_DEVELOPMENT_MODE', 'plugin' );

スクリプトの読み込みに
`async` と `defer` が設定可能に

概要

  • 2010年に作成されたチケットがクローズされた
  • スクリプトタグに defer や async を追加することで、ページロードの残りの部分をブロックすることなくロードできるようになる
  • その結果、LCP(Largest Contentful Paint)のパフォーマンスが向上し、UXが向上することが期待できる

defer の処理

  1. HTML 描画中に script タグを発見
  2. script は非同期でダウンロードされ、HTML 描画は継続
  3. script のダウンロードが完了
  4. HTML 描画を中断
  5. script を実行
  6. HTML 描画を再開

script タグが書かれた順に実行されない可能性がある

async の処理

  1. HTML 描画中に script タグを発見
  2. script は非同期でダウンロードされ、HTML 描画は継続
  3. script のダウンロード完了。HTML 描画は継続
  4. HTML 描画完了
  5. script を実行

script タグが書かれた順に実行される。HTML描画が完了しているので、確実にDOM操作を行える。

記述例

defer を設定

wp_register_script( 
    'foo', 
    '/path/to/foo.js', 
    array(), 
    '1.0.0', 
    array(
        'strategy' => 'defer'
    ) 
);

フッターに出力させ async を設定

wp_register_script( 
    'bar', 
    '/path/to/bar.js', 
    array(), 
    '1.0.0', 
    array(
        'in_footer' => true,
        'strategy'  => 'async',
    )
)
Registering scripts with `async` and `defer` attributes in WordPress 6.3

Donec penatibus sed himenaeos faucibus euismod aliquam platea aenean rutrum nam mi potenti lobortis, posuere ipsum morbi erat congue sem natoque dis non hac ultrices. Iaculis taciti finibus platea nullam fermentum morbi aliquam, nam magnis fringilla ac et. Feugiat mauris varius purus rhoncus curae nullam efficitur conubia ultrices est aliquet parturient, bibendum aliquam platea blandit sagittis adipiscing volutpat pharetra odio faucibus ipsum. Tortor donec in fermentum rhoncus posuere consectetur proin libero venenatis aliquet semper bibendum penatibus erat, ridiculus sodales rutrum magnis turpis ante nec porta adipiscing conubia dis interdum. Aliquet in malesuada eleifend ante turpis vestibulum aenean penatibus quisque cursus elit vivamus diam curabitur, non cubilia dictum condimentum amet volutpat velit proin vitae odio porttitor metus eros.

Suscipit platea phasellus ante lacinia enim in dui rhoncus nulla scelerisque senectus aptent pharetra, cras proin ac lorem aliquam aenean mattis faucibus venenatis euismod vivamus. Posuere sociosqu diam congue rutrum facilisi volutpat enim felis pretium sagittis primis, ante nibh montes lectus consectetur purus dui facilisis a. Praesent diam conubia tellus nisi suscipit odio volutpat potenti nisl senectus elementum, habitant ligula augue mi bibendum condimentum purus mattis vivamus efficitur. Hac imperdiet suscipit mus a nisl pretium tellus enim viverra quis laoreet iaculis, justo sit quisque fames nec nunc sociosqu aliquam sapien ac ex. Elementum placerat dolor dui mi maximus convallis tellus nisi praesent vel, lectus mollis elit eu quam turpis metus condimentum class pulvinar, velit fames egestas facilisis est vivamus curabitur faucibus eget.

Conubia dapibus volutpat et turpis himenaeos in fames nullam quis enim, fusce lacus eleifend torquent sapien a venenatis posuere natoque nostra curabitur, vestibulum commodo suscipit lobortis rutrum suspendisse vulputate dictum tristique. Maximus posuere morbi magnis dolor efficitur sagittis facilisis fermentum lacinia lacus quis, magna felis mus adipiscing malesuada vivamus condimentum habitant risus. Ullamcorper suspendisse pretium risus volutpat gravida tortor nascetur posuere consectetur, nam ante varius cras dapibus neque mi molestie.