開発者ブログ

ハイライト
プラグインとツール
テーマ
リソース
変更履歴

ハイライト

プラグイン用のテンプレートを登録する新しいAPI

Gutenbergバージョン19.1では、プラグイン開発者が長年求めていたテンプレートを登録する簡素化された方法を受け取り、デフォルトのフロントエンド出力を提供できるようになりました。これらのテンプレートはサイトエディターによって読み込まれ、テーマ開発者やサイトビルダーがサイトのデザインに合わせて変更および調整できるようになります。

以下のコード例は基本的な使用例を示しています。このAPIには、テーマビルダーがそのようなテンプレートをカスタマイズする方法も含まれています。また、テンプレートを登録解除し、カスタムカテゴリテンプレートを作成することもできます。チュートリアルWordPress 6.7でのプラグインを介したブロックテンプレートの登録では、新しいAPIを使用して、カスタム投稿タイプ「Book」の単一、アーカイブ、およびカスタムテンプレートを提供する方法の例を説明しています。今後のDeveloper Hours: WordPress 6.7におけるテンプレート登録APIの初見では、(録音)貢献者がテンプレート登録APIの基本、テンプレート階層内での作業方法、カスタムフィールド、ブロックのバリエーションなどの統合方法を示します。あなたの質問はイベントのQ&A部分で回答されます。

Register Block Templatewp_register_block_template( 'devblog-plugin-templates//example', [
    'title'       => __( 'Example', 'devblog-plugin-templates' ),
    'description' => __( 'An example block template from a plugin.', 'devblog-plugin-templates' ),
    'content'     => '
        <!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
        <!-- wp:group {"tagName":"main"} -->
        <main class="wp-block-group">
            <!-- wp:group {"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
            <!-- wp:paragraph -->
            <p>This is a plugin-registered template.</p>
            <!-- /wp:paragraph -->
            </div>
            <!-- /wp:group -->
        </main>
        <!-- /wp:group -->
        <!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->'
] );

見出しレベルのカスタマイズ

Gutenberg 19.0では、コンテンツクリエイターのために見出しブロックのデフォルトレベルをカスタマイズするという長年のニーズが解決されました。新しいlevelOptionsブロック属性を使用すると、パターンやテンプレート内のブロックマークアップを介して利用可能な見出しレベルを制限できます。また、カスタムフィルターを使用して属性を変更することもできます。コード例はプルリクエストに提供されています。この新しい属性は、見出し要素を使用するコアブロックにも利用可能です: 投稿タイトル、クエリタイトル、サイトタグライン、サイトタイトル、およびコメントタイトル

コアブロックとカスタムブロックの見出しレベルのカスタマイズ

25のブロックに対するボーダーサポート

Gutenberg 19.0および19.1では、25のコアブロックに追加のデザインツールサポート、主にボーダーコントロールが追加されました。

ブロック	サポート
カラム	ボーダー半径
コメントテンプレート	ボーダー
コメントフォーム	ボーダー
読むのにかかる時間	ボーダー
カテゴリリスト	ボーダー
日付	ボーダー
抜粋	ボーダー
用語	ボーダー
タイトル	ボーダー
サイトタグライン	ボーダー
サイトタイトル	ボーダー
目次	ボーダー
コメント著者名	ボーダー
コメント内容	ボーダー
コメント日付	ボーダー
著者の略歴	ボーダー
著者名	ボーダー
著者	ボーダー
クエリタイトル	ボーダー
ファイル	ボーダー
リストアイテム	ボーダー
リスト	ボーダー
プレフォーマット	ボーダー
タグクラウド	ボーダー
引用ブロック	整列

WordPress Playground Docsの再構成

開発者とユーザーにより良い学習体験を提供するために、WordPress Playgroundのドキュメント構造がいくつかの更新を受けました。使用ケースに応じて、Blueprints、開発者のドキュメント、およびAPIリファレンスの3つのサブサイトが見つかります。次の計画は、特定の使用ケースに対するガイドをさらに作成することです。これらは、テーマデモやプラグインプレビューを構築するためのBlueprintステップの組み合わせをより深く掘り下げます。

Playgroundドキュメントのフロントページのスクリーンショット

Block Bindings UIの初版

Block Bindingsは、WordPress 6.5で開発者とテーマビルダーのために導入されました。Gutenberg 19.0では、コンテンツクリエイターがエディターのサイドバーでカスタムフィールドに保存された値を編集するためのユーザーインターフェースが導入されました。

この機能は最初のイテレーションに過ぎず、さらなるテストが必要です。現在、この機能はまだ実験的であり、Gutenberg > Experimentsページを介して有効にする必要があります。このPlaygroundインスタンスを使用すると、すべてがすでに設定されています。

Book reviewsの例のスクリーンショットにおけるBlock Bindings UI

プラグインとツール

データビューアクションの登録解除

データビューコンポーネントは、Gutenberg 19.1で追加の更新を受けました。このラウンドでは、コンポーネントがゴミ箱、完全削除、および復元に関するコアアクションを登録解除する方法を提供します。このアイデアに従い、コンポーネントのユーザーは投稿、パターン、またはテンプレートパーツを複製するアクションを登録解除することもできます。開発者は、投稿や投稿のリビジョンを表示するアクションを削除したり、ユーザーが投稿の名前を変更することやページの順序を変更することを防ぐこともできます。

このコンポーネントについてもっと知りたい場合は、そのStorybookページでドキュメントを見つけることができます。デザインチームは、コンポーネントの今後の改善について皆に知らせるためにData Views Update #1を公開しました。

スタイルを動的にオーバーライド

Gutenberg 19.0では、コアの貢献者がプラグイン開発者のためにフックuseStyleOverrideを利用可能にしました。これにより、スタイルをブロックによってキャンバスに追加できるようになります。これは、開発者にすべての正しい場所で別のスタイルシートをエンキューするよう指示するのではなく、カスタムスタイルを持つコンポーネントライブラリをパッケージ化する際に特に便利です。

TimePickerのサブコンポーネントとしての時間入力

時々、ユーザーはTimePicker.componentのための日時とは別に時間を入力する方法だけが必要です。開発者は、プラグインやアプリで別のTimePicker.TimeInputフィールドを提供できるようになりました。ドキュメントはStoryBoardを介して利用可能です。

RadioControlオプションのヘルプテキスト

Gutenberg 19.0のリリース以来、Radio Controlコンポーネントを使用している開発者は、options[].descriptionプロパティを追加することで、リストされた各オプションにヘルプテキストを追加できるようになりました。これは、新しいwp-adminを介して訪問者やユーザーのための入力フォームの文脈で使用される場合にさらに関連性が高くなります。

iPhone画像が自動的にJPGに変換

WordPress 6.7では、HEIC画像をJPEGに自動変換する機能がリリースされます。これにより、iPhoneのユーザーが画像をWordPressインスタンスにドラッグアンドドロップし、投稿やページで使用できるようになります。HEICのブラウザサポートは非常に低いため、変換が必要です。これを無効にする必要がある場合は、image_editor_output_formatフックを使用してください。

add_filter( 'image_editor_output_format', function( $output_format ) {
   unset( $output_format['image/heic'] );
   return $output_format;
} );

インタラクティビティAPIドキュメントの更新

最新のGutenbergプラグインリリースに伴い、インタラクティビティAPIのドキュメントが拡張され、APIの3つのコア概念に深く掘り下げています:

HTML APIを介したプレーンテキストのみの変更を有効にする

HTMLタグプロセッサーに新しい関数が追加されました: set_modifiable_text()。これにより、開発者はHTMLドキュメント内のHTMLテキストノードを適切にエスケープすることで安全に置き換えることができます。

テーマ

他のテーマからスタイルのバリエーションを取得

WP_Theme_JSON_Resolver_Gutenbergクラスには新しいget_style_variations_from_directory()メソッドが含まれています。これにより、アクティブテーマの外部からスタイルのバリエーションを取得できるようになります。たとえば、サイトにインストールされている他のテーマから取得できます。

この変更は、サイトエディターを拡張したいプラグイン開発者にとって便利です。

画像キャプションのテキストシャドウオーバーレイ

Gutenberg 19.1では、ギャラリーブロック設定の画像キャプションに対して素晴らしい生活の質の改善が行われました。テキストの背後にわずかなぼかしを伴うテキストシャドウオーバーレイにより、テキストが非常に読みやすくなり、低コントラストでキャプションが目立たなくなります。これにはかなりのCSS変更が必要だったため、既存のテーマがキャプションを表示する方法に影響を与える可能性があります。再確認する価値があります。PRの議論では、エッジケースとその修正方法が明らかになりました。

投稿コンテンツブロックのクリアフィックス

「クリアフィックス」ソリューションが投稿コンテンツブロックに適用されました。これは、投稿の最後に右または左に整列したブロックがある場合に、投稿コンテンツの下にブロックが配置されることを保証する古典的な技術です。これはかなりの間問題であったため、テーマ開発者がこの特定の問題を解決するための他の方法を見つけたことが期待されます。

コアブロックのために解決されたので、既存のサイトを再確認して、これが以前のレイアウトを壊さないことを確認する必要があるかもしれません。コンテンツクリエイターは、問題のある整列ブロックの後にスペーサーブロックを追加することで自分自身を助けたかもしれません。

theme.jsonからの背景画像の参照値

theme.jsonの背景画像は現在、参照値をサポートしています。たとえば、styles.background.backGroundImageを介して定義された背景画像を参照し、別の背景画像の{ ref: 'styles.background.backgroundImage' }の値を設定できます。この技術は、コードの再利用を通じてバグを回避するのに役立ちます。

その他の注目すべきバグ修正

テーマデザイン体験を改善する可能性のあるいくつかのバグ修正がリリースされました！

タグクラウドブロックのエディタービューが修正されました。もう重複したパディングとマージンスタイルを表示せず、フロントエンドビューと一致します。
WordPress 6.6では、CSSの変更により、グローバルスタイル/theme.jsonのブロックのカスタムCSSに適用された擬似クラスと擬似要素が意図せず壊れ、スタイリングの問題が発生しました。これが修正され、CSSが正しく出力されるようになりました。この修正は、後でリリースされるマイナーなWordPressリリース6.6.2に含まれます。
コアスタイルがブロックスタイルのバリエーションでtheme.jsonスタイルを上書きするケースがありました。特に、変数名がコア名と一致する場合です。これが修正されましたおよびtheme.jsonが優先されるようになりました。
ブロックスタイルのバリエーションを介して、テーマビルダーは引用ブロックが中央揃えまたは右揃えされているときに引用ブロックのボーダーサポートを変更できませんでした。これが修正されました。
非iframeブロックエディタキャンバスでクラシックテーマのtheme.jsonに設定された間隔値を上書きするバグがありました。この修正は、非iframeエディタ内の暗黙の間隔ルールよりもtheme.jsonの間隔ルールが優先されるようにします。これはWordPress 6.6.2でリリースされます。

リソース

他のWordPress.orgサイトからの以下のリソースと更新も開発者にとって利用可能で関連性があります。

WordPressニュース

WordPress Briefing エピソード85: 教育におけるWordPress
WordPressデザインシステムの進展

ホールウェイハングアウト

Gutenbergの今後についてのホールウェイハングアウトの録音と共有リンクは、Make Blogで見つけることができます: ホールウェイハングアウトの録音: Gutenbergの今後について話しましょう（2024年8月）

開発者時間

さらに2つのライブ開発者時間が録音され、あなたの閲覧のために利用可能です:

以前の開発者時間の録音を確認するには、開発者時間YouTubeプレイリストを参照してください。

最後の開発者向けの新機能まとめ記事以来、開発者ブログに3つの新しいブログ投稿が追加されました。

購読して、開発者ブログの新しい投稿を見逃さないようにしてください。

この投稿の共同執筆者@greenshadyと、これらのリソースの共同管理者@laurlittleに感謝します。

開発者向けの新機能は？（2024年9月）（What’s new for developers? (September 2024)）