WordPress 5.8 対応 について検討・調査する

[miminari]

そろそろRCが出るので、対応チェック始めましょう。

参考：　https://github.com/vektor-inc/vk-blocks-pro/issues/137

5.8βのお知らせ https://wordpress.org/news/2021/06/wordpress-5-8-beta-1/

5.8のdev note一覧 https://make.wordpress.org/core/tag/5-8+dev-notes/

• リリース直前まで監視

Gutenbergのバージョンとして5.8に含まれるのは10.0-10.7 https://make.wordpress.org/core/tag/gutenberg-new/

• [x] 10.0 https://wp.me/p2AvED-mGu
• [x] 10.1 https://wp.me/p2AvED-mNG
• [x] 10.2 https://wp.me/p2AvED-mSZ
• [x] 10.3
• [x] 10.4
• [x] 10.5
• [x] 10.6
• [x] 10.7

一旦、VK Blocksに関わるかどうかは置いておいて全アップデート情報をまとめます。バグ修正と実験系などはスキップ。

[miminari]

5.8 dev note 第一弾

WebP サポート https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/

[miminari]

Gutenberg 10.0 https://wp.me/p2AvED-mGu

Features

• 新しいブロック：ページブロック WordPress/Gutenberg/28265　→入らないかも
• Make the parent block selector visible and offset in the block toolbar. (28598) (28721) 親ブロックのUIが変わる

Enhancements

• ❓要確認 → Update the social empty state for dark themes. (28838)　ダークテーマの時だけSNSアイコンが見えやすいように透過率下げた ダークテーマ対応してたっけ？してなければ関係ない
• Add the tag name selector to the advanced panel of the Group block. (28576)　カテゴリーブロック、中身がない時のメッセージ追加
• 🧪 テスト必要 → Show block patterns in the inserter for non-root level insert position. (28459)　カバーブロック内など、ルートではないブロックでもインサーターでブロックパターンが表示され追加できるように ブロックパターンがカバーブロックとかの中にインサートされても壊れないかチェックが必要かも
• 👍 良い変更（対応不要） → A11y: Improve the keyboard navigation in the block patterns inserter. (28520)　ブロックパターンにキーボードナビゲーション対応
• 👍 良い変更（対応不要） → Allow transforming Paragraph blocks to Buttons block. (28508)段落ブロックからボタンブロックへ変換できるように
• Better top toolbar arrow gap. (28832) ツールバー関連　良くわからない
• Update layout icon to use the new design language. (28651)　レイアウトアイコンが変わりました
• Update the buttons icons. (28583)　ボタンアイコン変わりました

New APIs

• wordpress/data: Graduate the experimentalResolveSelect function to a stable status. (28544)　registry.resolveSelect() function and the resolveSelect control がexperimentalでは無くなったよ！
• wordpress/compose: Add useMergeRef React hook. (27768) useMergeRefsフックが追加されたよ！
• Components: Allow extra props for RadioControl component. (28631) RadioControlコンポーネントに追加のpropsをもたせるようになったよ
• Add JustifyToolbar component to @wordpress/block-editor. (28439) JustifyToolbarコンポーネントが追加されたよ
• ❓要確認 → wordpress/i18n: Add new APIs for React bindings. (28784) (28725)　★　大事だけどまだちゃんと把握してない　https://github.com/WordPress/gutenberg/blob/trunk/packages/react-i18n/README.md

[miminari]

5.8 dev note 第2弾

Bootstrap/Load関連のアップデート https://make.wordpress.org/core/2021/06/09/bootstrap-load-changes-in-5-8/

• timer_float関数
• wp-config-sample.php のコメント変更
• Fatal errorの時のリカバーモード案内メールの送信条件変更
• enable_loading_object_cache_dropin　フィルター追加　このフィルターは、プラグインで使用される前に実行されます。ウェブ以外のランタイムのために設計されています。false を返した場合、object-cache.php は決してロードされません。

直接、LightningやVK Blocksなどに関連するアップデートはなさそう

[miminari]

Gutenberg 10.1 https://wp.me/p2AvED-mNG

Features

• Use a modal for the reusable blocks creation flow. (29040) 再利用ブロックにモーダルが追加
• Normalize Image’s block toolbar. (29205)　イメージブロックのツールバーが標準化
• 🧪 テスト必要 → Add Items Justification to Social Links. (28980)　ソーシャルリンクボタンに位置揃えが追加

Enhancements

• Improve the sorting algorithm while searching parent pages. (29143) 親ページの検索時の並び替えのアルゴリズムが改善された
• 🧪 テスト必要 → Buttons: Add space-between justification controls. (29160) ボタンブロックにspace-betweenの位置揃えが追加
• Avoid focusing blocks when inserting them into the canvas. (28191)
• Create Block: Use register_block_type_from_metadata to register blocks on the server. (28883)
• Greatly improve dragging performance of the focal point picker. (28676)
• Improve block search input’s accessible name and placeholder. (28393)

[mthaichi]

Gutenberg 10.7 https://wp.me/p2AvED-ncV

Features

Enhancements

• Standardize block styles cursor on hover.(31188) ブロックエディタにおけるhover時のカーソルスタイルを改善。
• Support scripts in iframed editors. (31873) iframedエディタでスクリプトの読み込みをサポート。
• Normalize theme block toolbars. (31952) ブロックツールバーの統一化。
• Buttons: Use column-gap for styling. (31386) ボタンブロックでCSSのstyleにcolumn-gapを使用
• Column: Add color and padding support to individual column block. (31778) カラムブロック：個々のカラムブロックに色とパディングの指定が可能に
• Cover: Allow transforming from group block. (30890) カバーブロック：グループブロックから変換できるように
• Media & Text: Add media width control. (31002) 「メディアとテキスト」ブロック：横幅指定可能に
• Post Comments: Add basic CSS to the block. (30382) 最新のコメントブロック、基本CSSスタイリング追加
• Post Excerpt: Update read more placeholder text. (30959) 「続きを読む」のプレースホルダー表記変更
• Post Featured Image: Change wrapper element to figure. (31595) Post Featured Image: ラッパーをdivからfigureに変更
• Query クエリブロック
  • Add layout and color support. (31833) 「レイアウト」と「カラー」の設定が可能に。
  • Update bundled patterns to have inherit:False. (31856) バンドルされたパターンを"inherit:True"から"inherit:False" に変更
  • Allow term addition from user case-insensitive input. (31301) 大文字と小文字混ざっていても入力を受け付ける
• Site Logo: Add link toggle option. (31162) サイトロゴブロック [リンクの追加] オプション。
• Site Tagline: タグラインブロック
  • Add margin block support. (31809) 余白設定が可能に
  • Expand the site tagline block description. (31426) 拡張タグラインブロックの説明文をより詳しく
• Site Title: サイトタイトルブロック
  • Add additional text formatting options. (31734) 書式設定オプションを追加
  • Add margin block support. (31728) マージンサポート
• Social Links: Add some padding to the “click plus to add”. (31728) 「click plus to add」 にパディングを追加。
• Components: コンポーネンツ
  • Add Spacer. (31509) Spacerコンポーネント追加
  • Improve display for multiple action buttons in notices. (31799) Notice コンポーネントに複数ボタンを追加したときの表示を改善
  • Polish the switcher for horizontal blocks. (31645) 水平ブロックのツールバー表示まわりの改善
  • Promote Divider and use readable prop names. (31556) Dividerコンポーネントを追加、prop名の改善
  • Promote View. (31542) Viewコンポーネント追加
  • Promote VStack and HStack. (31300) VStack and HStack コンポーネント追加
  • UnitControl: Add support for unit step per unit type. (30376) UnitControl: ユニット単位毎にステップ値を指定可能に
• Design Tools デザインツール
  • Add margin block support with configurable sides. (30608) BoxControlで上下もしくは左右のみといったマージン指定が可能に。
  • Add option to disable duotone. (32002) デュオトーンフィルターの無効オプション指定が可能に
  • Add reset button to Layout controls. (30828)

New APIs

• Blocks: Deprecate registerBlockTypeFromMetadata in favor of registerBlockType. (32030) registerBlockTypeFromMetadata は非推奨に。ブラウザコンソールで警告がでます。

[shimotmk]

Gutenberg 10.5 https://wp.me/p2AvED-n33

Enhancements

• ボタンブロック:
  • Add Typography support. (30394) : ボタンブロックにフォントサイズとフォントファミリのサポート
  • Explicitly add text-align-center to legacy buttons. (30525) : ボタンブロックにtext-align-centerを追加
• Update to use color support utils to retrieve classes and styles. (30870) : クラスとスタイルの取得にカラーサポートユーティリティーを使用するように更新
• カラムブロック: Add column count to the column block label. (30248) : カラムブロックにラベルに列数を追加された (aria-labelで1/3的な感じになる)
• ファイルブロック: PDF埋め込みに対応. (30857)
• リストブロック: placeholder が追加された (30958)
• Post Comments Link Block: 新しいブロックを追加 (29564) ←確認再現出来ない❓
• サイトロゴブロック
  • サイトロゴの説明文をより分かりやすいものに変更 (30909)
  • サイトロゴブロックにdefaultWidthを設定 (30907)
• サイトタイトルブロック:
  • ツールバーを正しくする(30999)
  • ツールバーを正しくする (II). (31032)
• ソーシャルリンクブロック:
  • テキストのプレースホルダーを追加(29851)
  • ハードコードされたフォーカススタイルを削除 (30721)
• Template Part Block: 親ブロックセレクターにアクティブなブロック情報を追加。 (30731)
• Term Description Block: 説明文がない場合は出力しない。 (30564)
• Verse Block: カスタムカラーを追加. (27736)
• Video Block: アップロードステータスを追加. (30837)
• Block Patterns:
  • バンドルされたブロックパターンの調整。 (29973)
  • 文脈に沿ったブロックパターン変換を提案 (30469)
  • バンドルされたブロックパターンの微調整。 (31105)
  • Query Patterns:
    • クエリブロックパターンの調整. (30763)
    • クエリブロックパターンの抜粋の長さ調整(30817)
• Components: コンポーネントの生成するスタイルを調整 (30509)
• Design Tools:
  • ボーダーの色、スタイル、幅のサポートを追加 (30124)
  • BoxControl: Allow configurable sides. (30606)
  • Color Block Support: 設定可能なサイドを調整 (30869)
• General Interface:
  • キャンパストランジションのアニメーション(テンプレート作成時) (30802)
  • ブロックスイッチャーのラベルにブロックタイトルを入れる。 (30808)
  • インスペクターコントロールのカラー設定を命名調整 (30075)
  • リサイズハンドルのデザインを更新 (30339)
  • テキストオーバーレイとトリミングのアイコンを更新します(30673)
• i18n: resetLocaleData メソッドを追加
• Publishing Flow: 投稿スケジュールカレンダーにポストイベントを表示する。 (29716)
• Template Editing Mode:
  • クラシックテーマでカスタムブロックテンプレートを作成できるように(30438)
  • テンプレートモードの編集と新規リンクを専用のテンプレートパネルに移動 (30900)
  • テンプレートモードでドキュメントタブ(サイドバー)をテンプレートタブに置き換える30860)
  • テンプレートモードとデフォルトモードの間の保存の流れを統一する。 (30793)
  • テンプレートモードのパディングを更新し、バックリンクを追加しました。. (30658)
• Site Editor:
  • テンプレート・パート・フローに変換するための「エリア」選択を追加。(ヘッダーとかフッターとか) (30395)
  • do_block_template_part関数を追加 (非FSEテーマでヘッダーやフッターをブロックで表示させたいときに使用できます)(30345)
  • Site Editorでブロックテンプレートのスキップリンクを追加 (30336)
  • デフォルトのテンプレートセットからsingle-postを削除しました。 (29668)
  • テーマ テンプレート・ヒエラルキー・フォールバックの修正(block-templateがtemplate slugと一致した場合、ループを解除します。) (30599)
• Writing Flow: フォーカスがない場合にのみ選択したブロックをスクロールします(今までは見えないブロックを選択するとページが自動的にスクロールされていて) (30924)

[shimotmk]

10.4 https://wp.me/p2AvED-mZM

Enhancements

• フロントエンド/エディタのブロックスタイルの互換性:
  • Archives.のスタイル調整 (30141)
  • Latest Comments.最新のコメントブロックスタイル調整 (30134)
  • Quote.引用ブロックスタイル調整 (30190)
  • Separator.スペーサーブロックスタイル (30255) (30235)
  • デフォルトのパディングを、ブラウザのデフォルトのパディングと一致させる。reset.css (30277) (30520)
• Block Library:
  • 最近のコメントブロック: padding and margin削除. (29402)
  • Post Date: PostDateをリンクにするオプションの追加. (30499)
  • Post Excerpt: 記事の抜粋の警告を表示するツールバーを修正. (30280)
  • Post Title: 未定義の "length "エラーを修正しました(consoleでエラー) (30208)
  • Preformatted: preformattedブロックにカラーを選択出来るようにした. (28396)
  • Query: クエリーブロックには、WordPressのループを使用。get_postsではなくWP_Query. (30405)
  • Search: 検索ボックスにborder radiusをサポート (30227)
  • Site Logo: スタイルの調整。タイトル、ディスクリプションの調整 (30526)
  • Template Part: template partsにpaddingをサポート. (29779)
  • ブロック間のプレースホルダーテキストを更新. (30404)
• RichText:
  • 空のインラインコンテナを表示するための最小幅を追加する。 (30224)
  • 選択/フォーカスされている場合でもプレースホルダーを表示 (30393)
• General Interaface:
  • 投稿画面にサイトのアイコンと名前を追加します。 (30231)
  • キャンパスカラーを濃いものに変更 (30282)
  • サイトエディタの保存ボタンのラベルを更新しました。(30439)
• Icons:
  • メディアとテキストのアイコンを調整 (30239)
  • インスペクターを閉じるアイコンの形状を、「追加」アイコンと寸法的に一致させる。 (30014)
  • サイトロゴのブロックアイコンを更新しました。 (30211)
• Inserter: インサーターが開いている状態で、トップバーの「＋」ボタンをクリックすると、インサーターが閉じることを明示する. (29759)
• Writing Flow: 短い説明ライティングに変更 (29611)
• List View: リストビューアイコンのサイズと間隔を更新 (30455) (30303)
• Block Themes: 空のブロックテンプレートの出力文字列を修正 (30145)
• Site Editor:
  • (少しよくわからない❓)サイトエディタ。カスタムテンプレートをテーマごとに用意されたファイルに戻す . (28141)
  • 保存パネルでグローバルなスタイル変更があることを示すために、「Custom Styles」ラベルを使用します。(30521)

APIs:

• paddingのサーバーサイドブロックのサポートを追加。(30332)
• WordPress 5.2で非推奨となった小さなAPIを削除。(hasUploadPermissions) (30283)
• ブロックパターン。Queryパターンからスコープを削除し、blockTypesを導入。. (30471)

[miminari]

@shimotmk @mthaichi 調査協力ありがとうございました！

https://www.vektor-inc.co.jp/post/wordpress-5-8-dev-note-note/ ざーっとダイジェスト版を記事として公開しました。

ここからVK Blocksとして対応するべき変更点を個別のIssue化していきたいと思います。 みなさんもこれは、というものがあればどんどんIssue化してみてください。その際は、5.8対応プロジェクトにも追加していただくと助かります！

よろしくお願いしますー！

[miminari]

調査・検討段階は取り敢えず完了ということでこのIssueは閉じますー