Gutenberg 12.7は、リストビューにマルチブロック選択を追加し、グループブロックにマージンサポートをもたらします

公開: 2022-03-04

さらに2週間が経過し、別のGutenbergプラグインの更新が本にあります。このリリースは前回ほど機能が多くありませんが、全体的にはしっかりしているように感じます。 1つの重大な問題を除いて、バージョン12.7にはいくつかの便利な機能拡張が含まれています。

最新のアップデートには、新しいスタイルのエンジンの初期の作業が含まれています。これは、ブロックスタイルの保存とレンダリングを改善する長期的なプロジェクトです。

テンプレートとサイトの編集者は、テンプレートのルートレベルなど、特定の条件下でクイックインサーターのブロック上にパターンを表示する必要があります。しかし、私はこれが実際に動いているのを見ることができませんでした。インストールを更新する必要があるかもしれません。

Columnsブロックは、境界線の幅、スタイル、色、および半径のオプションもサポートしています。これが最終的にすべてのブロックに当てはまるのを楽しみにしています。

リストビューでの複数選択

投稿エディタでリストビューを開きます。複数のブロックが選択されています。 — リストビューで複数のブロックを選択します。

Shiftキーを選択すると、ユーザーはリストビューで複数のブロックを選択できるようになりました。キーを押したままにすると、ユーザーはマウスを使用して他のユーザーをクリックしたり、追加または削除したりできます。上/下矢印キーは、マウスを使用する代わりの方法です。

この機能拡張により、ユーザーは選択したブロックのグループをドラッグアンドドロップすることもできます。

壊れた画像

コンテナに準拠していないストレッチ画像を使用したWordPressサイトエディタ。 — パターンからの画像が応答しません。

警戒を怠った。私は、WordPressとGutenbergが、過去のテーマに常に含めていた基本的なCSS作業の一部を処理することに慣れました。物事はとてもうまくいっているようでした。

グーテンベルク、あなたと私はあなたが何も壊さなかったところに甘い筋を持っていました。 さて、古い「インシデントなしのリリース」カウンターをリセットする時が来ました。

以前は、デフォルトのブロックライブラリスタイルシートが画像のベースライン応答スタイルを提供していました。そのCSSは、クラスにwp-image-が含まれている場合にのみ、 <img>タグをターゲットにするようになりました。これは、一部のブロックパターンの画像では特に問題になります。他の画像インスタンスでも同じ場合があります。

以前のセレクターは広すぎて、サードパーティのプラグインの画像を壊していました。

最善の行動は、テーマの作成者が画像用に次のCSSを含めることです。

 img { max-width: 100%; height: auto; }

グループブロックマージン

中央にグループブロックがあるWordPressコンテンツエディター。その上にたくさんの空白が表示されます。 — Groupブロックに追加の上部マージンを追加します。

マージンのカスタマイズは、「Webデザイン」という用語とほぼ同義です。グループブロック（フラグシップコンテナ）は、これまでマージン管理のサポートを欠いていました。スペーサーを使用することでこの制限を回避した人もいますが、それはブロック間のスペースを増やすだけです。

ほとんどの問題は、マージンの削減に関するものです。テーマ設計者は、回避策を採用する必要があることがよくあります。これは、ニックディエゴがチケットで言及した問題です。

テーマ開発者（私自身を含む）は、ブロックのマージンをゼロにする、または変更するために「マジッククラス」に頼っています。テーマがグループマージンのサポートにオプトインできるようにすると、柔軟性が高まり、テーマのスタイルシートのカスタムCSS/クラスへの依存度が低下します。

段落を含む他の多くのブロックでは、マージンのサポートがまだ不足しています。ユーザーはいつでもグループ内でそれらをラップして、今のところ変更することができます。

ブロック変換はクラスを維持します

クラスを介してカスタムスタイルが適用されたエディターの段落ブロック。変換ドロップダウンは、見出しブロックが選択された状態で開きます。 — ブロックを変換するときに維持されるカスタムブロックスタイルクラス。

2週間前にリリースされたGutenberg12.6は、ユーザーが1つのブロックを別のブロックに切り替えることができる機能であるブロック変換の改善に多くの作業を行いました。以前のアップデートでの主な改善点の1つには、フォントサイズと色のオプションの維持が含まれていました。

バージョン12.7は、カスタムCSSクラスをミックスに追加します。これには、手動で追加されたユーザーと、カスタムブロックスタイルメカニズムによって追加されたユーザーが含まれます。

カスタムブロックスタイルクラスを維持することの利点は、サポートされている場合、新しいブロックが選択されたスタイルを維持することです。欠点は、そうでない場合はジャンククラスになることです。

テキストベースのブロックを変換することで維持してほしいオプションがまだいくつかあります。特に、テキストの配置を同じに保つことは、私のワークフローに役立ちます。

テーマはディレクトリからパターンを登録できます

2列の404ページデザインのブロックエディター。 — 登録されたパターンをエディターに挿入します。

Gutenberg 12.7を使用すると、テーマの作成者はWordPress.orgのパターンディレクトリからユーザーのパターンを読み込むことができます。追加されたものは、インサーターのそれぞれのカテゴリーに表示されます。

現在、選択したパターンを強調表示する方法はなく、登録された順序に基づいてのみ表示されます。残念ながら、WordPress.orgの注目のパターンは、テーマで選択されていなくても、リストの上位に表示されます。

これは確かな最初の反復です。今すぐ入手することで、テーマの作成者はフィードバックを提供し、貢献者は基盤の上に構築することができます。

theme.jsonハウツーガイドには、これらのパターンを登録するための新しいドキュメントが含まれています。

アライメントラッパーが削除されました

私がブロックファンであることは周知の事実です。しかし、長年の問題が1つあり、システムを捨てたくなりました。実は、この問題のせいで、昨年は無料のブロックテーマの開発を完全にやめました。

Gutenberg 12.7は、少なくともレイアウト機能をサポートするテーマの場合、エディター内のワイドブロックとフル幅ブロックの余分な<div>ラッパーを削除します。このラッパー要素は、以前はバックエンドデザインとフロントエンドデザインの間に競合を引き起こしていました。場合によっては、テーマの作成者が一貫してスタイルを設定できないことがありました。

たとえば、テーマの作成者が兄弟ブロック（別のブロックに続くブロック）に余分な間隔を設定したい場合、CSSを使用してエディターでそれをターゲットにすることはできませんでした。追加のラッパーは、ドキュメント構造内の兄弟ではなくなったことを意味します。

WordPress 5.9で導入された最近のblockGap機能は、間隔に関連する問題をある程度軽減しました。いくつかの設計がまだ不可能であることを知っていたので、壊れたシステムを許容するのに十分な安心でした。

今日は、デザイナーにとって新しい可能性の世界の始まりです。これは、私が取り残されているのを見てうれしい障害の1つです。ほとんどの場合、私はいくつかの古いアイデアを再検討して実装したいと思います。