Gutenberg 22.1 アップデートガイド：新しいタブモジュール、HTML機能強化、エディター改善

声明：本文はGutenberg 22.1の新機能 (2025年11月18日)原文内容の整理・翻訳は、読者に業界情報と学習参考を提供することを目的としています。本文を以下のように整理します：

このバージョンではブロック機能の拡張、エディターのユーザーエクスペリエンス向上、およびパフォーマンスの改善に重点を置いています。新機能にはタブ式コンテンツ用の新しい core/tabs ブロックが含まれます。 HTML ブロックに新たに追加されたJavaScriptおよびCSS編集機能、ならびにエディター内で画像を拡大表示する際の画像プリフェッチ。その他の更新点には、多数のテーマ/カラー調整、DataViewsおよびDataFormの改善、コラボレーション機能の強化、アクセシビリティとパフォーマンスの最適化、ならびに多数のバグ修正とドキュメント更新が含まれます。

バージョンの中核となるハイライト

1️⃣ core/tabs ブロック（実験モジュール）を追加

記事、ページ、テンプレート内でタグ形式のコンテンツ構造を構築することをサポートします。
設定で「モジュール：実験的モジュールを追加」を有効にした後に使用してください。
複数のコンテンツの比較表示やFAQのグループ分けなどのシナリオに適用されます。

2️⃣ HTMLモジュールの強化 —— CSS/JSの直接編集をサポート

ユーザーはHTMLブロック内でJavaScript/CSSコードを挿入・編集できます。
カスタム拡張機能を強化し、フロントエンドのデバッグ効率を高める。

3️⃣ 画像展開時のプリフェッチ処理

エディタ内で画像をクリックして拡大する際に、事前に画像コンテンツを読み込む。
待ち時間を短縮し、大規模メディア処理の体験を向上させます。

機能強化の概要

モジュール/機能	更新情報
テーマ・スタイル	警告色のグラデーションを追加、コントラストパラメータを最適化、シード設定を調整
データビュー	表ヘッダーの右クリックメニュー、操作メニューの再編成、ページ分割とレイアウトの問題の修正
データフォーム	詳細レイアウトの追加、カード型フレームレスデザイン、フォーム構造の簡素化
パンくずナビゲーション	404エラーページ、検索機能、ページネーションのサポートを追加；ホームページ処理と最終項目の表示をサポート
コラボレーション（注釈/備考）	キーボードナビゲーションを有効化、サイドバーレイアウトを最適化、非通知モードでは追加ボタンを非表示
ブロックエディター	テキストの伸縮バリアント、内マージンの修正、テキスト適応のパフォーマンス最適化
カラーマネジメント	ColorPickerは完全な色値の貼り付けをサポートします
スケーラビリティ	見出しレベルの制御をサポート（levelOptions）

性能と補助機能

不要なサブスクリプションとレンダリングロジックを削減し、パネルが有効化されていない場合はリスナーを実行しない。
画像プリフェッチ機能の強化により、エディタの応答速度が向上しました。
SpacingVisualizers はアクティブ時にのみマウントされ、リソース利用率を向上させます。

主なエラー修正

MathMLブロックのスクリプト遅延読み込み問題を修正。
ブロックフォーカスの消失やテキストのちらつきなど、UIの問題を修正。
データベーステンプレート以外の編集/削除を禁止し、誤操作を防止します。
エディタ内のナビゲーションリンクの状態異常を修正。
複数の注釈の位置決め、アバターサイズ、サイドバーのロジックずれの問題を解決。

コラボレーション機能の詳細最適化

「メモを追加」ショートカットキーを追加；
キーボードはツリーナビゲーションをサポートします；
干渉防止モードではノート追加ボタンが自動的に非表示になります；
新しいサイドバータブは「すべてのメモ」です；
メモ作成時にフローティングバーを表示したままにし、本文を隠さない。

ビルドツールと開発強化

部分	改善点
タイプスクリプト	v5.9にアップグレード
ルーティングシステム	静的/遅延ルーティング読み込みをサポート、WC-Adminは拡張可能
CSS コンパイル	バンドルとインライン最適化
ESLint	セマンティックパーサーをアップグレードし、冗長な設定をクリーンアップする
CIテスト	クロスプラットフォームテストと安定性修正の追加

ドキュメント最適化

PHP関数プレフィックスの追加に関するドキュメント
Tabs モジュールの PHP ドキュメントを更新
READMEのスペルミスを修正
DataViews コンポーネントの使用方法の改善に関する解説

概要

Gutenberg 22.1 は編集機能の強化とフロントエンドの柔軟性向上に焦点を当て、タブ式コンテンツ構造（Tabs）、ブロック内での直接的なCSS/JavaScript編集をサポートし、画像読み込みとブロック間インタラクションのパフォーマンスを最適化。同時にDataViews/DataFormによる複雑なコンテンツ処理と注釈コラボレーションフローを強化。開発者とデザイナーは実験機能を有効化し、新たなTabs機能とHTML拡張機能をテストすることを推奨します。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み