Make WordPress から開発者向けの新しい月刊連載が開始 #2
Description
参照リンク
https://developer.wordpress.org/news/2023/02/whats-new-for-developers-february-2023/
感想や配信で伝えたいことなど自由にメモしてください
introduction
- 目標は、忙しいリリースサイクルの雑音を切り抜け、皆さんに最新の情報を提供するためのリソースの完全なリストを提示すること
- プラグインやテーマの開発に特化したメモや、WordPressコミュニティメンバーによって作成された教育的リソースのリストも含まれる
Highlight
Style Book
- Gutenberg 14.8 でスタイルインターフェイスの一部として、サイトエディタに新しいスタイルブック機能が導入された
- ユーザーは、編集中のテンプレートには無いブロックでも、各ブロックに加えた変更を確認することができる
- テーマデザイナーにとっては、各ブロックのデザインをテーマでテストし、修正するのに便利な場所となるだろう
- スタイルブックは、プラグインなどから提供されるサードパーティのブロックも自動的にサポートする
Box Shadow
- Gutenberg 14.9 では、theme.jsonを介したボックスシャドウのサポートが導入された
- これによりテーマ作者は、カスタムシャドウプリセットのグループを追加し、ブロックや要素に割り当てることができるようになった
- Gutenberg 15.1 では、ブロックエディターのUIにシャドウデザインツールが追加された
- テーマのシャドウ機能を使用するには Dev Blog を確認
Custom CSS
-
Gutenberg 14.8 で Custom CSS 機能の最初にイテレーションが着地した
-
目的はカスタマイザーの「Additional CSS（邦訳：追加CSS）」フィールドと機能を同等にすること
-
ユーザーや開発者がサイトエディタ経由で直接スタイルを変更できるようにすること
-
アクセス方法は、サイトエディタにアクセスし任意のテンプレートの編集ボタンをクリックすることで見つけることができる。
-
次に、Style メニューを洗濯し、垂直の省略ボタン(⋮)をクリックします。
-
最後に、ドロップダウンメニューの「Additional CSS」項目をクリックします。カスタムCSSが追加されると、そのオプションがサイドバーに恒久的に表示されるようになります。
-
Gutenberg 15.1 では、ブロックごとのCSSカスタマイズが可能
-
開発者は、theme.json を介して個々のブロックのCSSを追加することも可能
-
現在、正しい記述をされていないCSSのバリデーションメッセージが表示されますが、完全な機能ではありません。
-
これらの拡張ツールの完成は WordPress 6.2 以降になりそう
致命的な変更などについて
- Query Loop ブロックはカラーをサポートしなくなる
get_page_by_title()関数は WordPress 6.2 で非推奨になる予定
ブロックツールの分割
- Gutenberg 14.7 では、ブロックツールパネルがスタイルと設定という別々のタブに分割される
- スタイルにはデザイン関連のツールを、設定にはその他のオプションをすべて収容
- ブロック開発者は、カスタムブロックをテストして、カスタム設定が正しいタブにあることを確認する必要がある
- そうで無い場合、今回のアップデートで InspectorControls の group 属性が導入され、プラグイン作者はコントロールを適切なタブにアタッチすることができるようになった
- デフォルトでは、登録されているコントロールは設定タブに配置される
コンポーネントのボトムマージン
- コンポーネントのデフォルトの下マージンを削除し、さまざまな文脈でより簡単に使用できるようにするためにオーバーホールされた
- いくつかのコンポーネントには下マージンが削除され、
__nextHasNoMarginBottomプロパティが指定された
テーマが theme.json を持っているかどうかを確認する
wp_theme_has_theme_json()で判断できる
テーマ
タイポグラフィーアップデート
- WordPress 6.1 で導入されたフルードタイポグラフィー機能により、テーマデザイナーはテーマ.json でいくつかの設定を行うだけで、簡単に固有のデザインに足を踏み入れることができるようになった
- 今回、最小フォントサイズを設定することで、フォントサイズをより細かく設定できるようになった
- より多くのブロックが互いに同等になり、タイポグラフィ関連のデザインツールを完全にサポートできるようになった
- 先月には、ページ一覧ブロックがオプション一式をサポートするようになった
レイアウト アップデート
WordPress 6.1では、テーマ作成者向けにレイアウトシステムが大幅に改良されましたが、コントリビューターはその基盤の上に構築し続けています。
Flex レイアウトは、より多くのディメンションオプションをサポートするようになりました。
行ブロックの子ブロックには、新しい幅のコントロールがあります。同様に、Stackブロックの子ブロックにもheightコントロールがあります。 これらのコントロールには、それぞれ3つのオプションがあります。
- Fit：ブロックが必要なスペースに収まるようにフィットします。
- Fill ： ブ ロ ッ ク が伸縮 し て、 あ ら ゆ る 空間を満た し ます。この場合、Stackブロックが伸びるためには、高さを固定する必要があります。
- fixed：選択すると、ブロックに特定の単位ベースの幅と高さを設定することができます。
ポジションのサポートは現在作業中で、最初のイテレーションである「スティッキー」ポジションは、Gutenberg 15.1を通じて利用可能です。
これにより、デザイナーはスティッキーヘッダーなどの機能を持つテーマを作成できるようになります。この機能の基盤は、WordPress 6.2で出荷されるはずです。
しかし、この機能を具体化するためのいくつかのフォローアップタスクがあり、WordPress 6.3の開発サイクルに先送りされました。
ブロックテーマでポストエディタがiframe内に表示される
ブロックテーマがアクティブな場合、ポストエディタのコンテンツキャンバスはサイトエディタと同様のiframe内に表示されます。
これは既存のコードには直接影響しませんが、テーマの作成者がエッジケース用の CSS ハックをいくつかカットできるようになるかもしれません。基本的には、この変更により、CSS の衝突が少なくなるはずです。
更新：現在、iframed ポストエディタにおけるサードパーティのスクリプト依存のサポートに関するオープンチケットがあり、一部のカスタムブロックに影響を与える可能性があります。
パターンのテンプレートタイプ
Patterns APIは、テンプレートタイプへのパターン登録をサポートするようになった。これはWordPress 6.2の開発サイクルにおいて、テーマ制作者が注目すべき機能である。
テンプレート作成のワークフローにおいて重要な役割を果たす可能性があるが、まだUIに統合されていない。
スタイルインターフェイスからのブロックスタイルバリエーションの編集
サイトエディタ内のスタイルインターフェイスから、既存のブロックスタイルバリエーションを編集できるようになりました。
これは、一般にカスタム CSS が関連付けられているテーマ登録されたスタイルに影響を与える可能性があります。長期的な目標は、UI から直接カスタム ブロック スタイルを作成することです。
ブロックパターンカテゴリと説明文をアップデート
- WordPress 6.2 では、ブロックパターンカテゴリーの説明文がサポートされる
- コアではテーマ作者が利用できる新しいデフォルトのブロックパターンカテゴリが導入される
- バナー、CTA、コンタクト、ポートフォリオ、投稿、サービス、チーム、お客様の声
functions.phpによる外観ツールのサポート
WordPress 6.1 で追加されたテーマでは、テーマ.json を介していくつかの外観関連のデフォルトを有効にすることができました。バージョン6.2では、テーマサポートに相当する機能が導入され、開発者はfunctions.phpを介してこれを選択することができます。