EditorPlusWordPressプラグインを介したコントロールブロックデザイン

先週、私が彼のGutenberg Formsプロジェクトのレビューの最終編集を行っていたとき、MunirKamalはブロックエディター用の別の種類のWordPressプラグインの立ち上げの準備をしていました。 これはEditorPlusと呼ばれ、ブロックのデザインシステムを作成します。 カマルと彼のチームは静かにバージョン1.0の仕上げを行い、数日後にWordPressプラグインリポジトリでプラグインをリリースしました。

特定のデザイン結果を達成するためにカスタムブロックを作成する他の多くのプラグインとは異なり、EditorPlusは、手元にあるものでページをカスタマイズする柔軟性をユーザーに提供します。 WordPressの既存の各ブロックに多数のデザインオプションを追加します。 フロントエンドでは、そのページに必要なCSSのみをその場で出力することにより、フットプリントを軽くします。

おそらく、このプラグインの現在の最良の点は、グーテンベルクに恒久的な家を見つけ、最終的にはWordPressのコアとなる可能性のある多くのデザイン関連機能の基礎を築くことです。 グーテンベルクのチームは、アイデアを借りたり、繰り返したり、改善したりすることができます。 グーテンベルク8.3の実験的なパディングコントロールランドはすでに見ました。 開発チームが今後追加の設計管理を行うことは理にかなっています。 サードパーティのプラグインで最初に展開されるこれらのコントロールの良い点は、チームがユーザーがそれらにどのように反応するかを確認し、何かにコミットする前に、ユーザーがグーテンベルクで直接作業するかどうかを把握できることです。

EditorPlusには、コードに触れることなく多くの設計の自由を手に入れたい人のための便利な機能がたくさんあります。 基本的に、プラグインはCSSを知らなくてもCSSエディターです。 エンドユーザーに、ブロックオプションを介して最も必要なCSS機能のオプションを提供します。 これは、デザインをいじくり回したい人のための遊び場であり、フロントエンドのサイトを肥大化させることなくユニークなレイアウトを作成するのに十分強力です。

EditorPlusの仕組み

EditorPlusプラグインをアクティブ化した後、エンドユーザーは投稿またはページエディターに移動することで、すぐにそのオプションの使用を開始できます。 ブロックを挿入した後、プラグインはブロックオプションパネルの下で次の8つのタブを使用できるようにします（それぞれの前に+記号が付きます）。

• 国境
• ボックスシャドウ
• サイジング
• バックグラウンド
• マージン
• パディング
• 境界半径
• エクストラ

これらのタブは、現時点ではコアのWordPressブロックにのみ表示され、サードパーティのプラグインブロックには表示されません。 [エクストラ]タブを除いて、各タブは対応するCSSに対応しています。 [エクストラ]タブには、より高度な[表示]オプションがあり、ユーザーはCSSでブロックラッピング要素のdisplay値を変更できます。 このオプションは、上級ユーザーに任せるのが最善です。 また、ホバースタイルでうまく機能する移行オプションも提供します。

各ブロックオプションタブには、不思議な「R」ボタンと「H」ボタンもあります。 「R」ボタンを使用すると、ユーザーはレスポンシブオプションを有効にできます。つまり、デスクトップ、タブレット、モバイルの画面に基づいてブロックスタイルを変更できます。 「H」ボタンを使用すると、ユーザーはマウスのホバー状態に基づいてデザインを変更できます。

プラグインは、少しのスペースに多くのオプションを詰め込んでいます。 新しいデザインタブはすべて、最初は少し圧倒されるかもしれません。 ただし、少し使用するだけで、筋肉の記憶を獲得し、カスタムレイアウトをすばやく作成するのは簡単です。

プラグインの各オプションはかなり簡単です。 また、そうでない場合は、ブロックエディターを介して即座にフィードバックを得ることができます。

テーマが特定のブロックをどのようにスタイリングするかによっては、一部のユーザーにとって問題となる可能性のある領域がいくつかあります。 たとえば、[サイズ設定]タブの幅の設定が常に機能するとは限りません。 一部のテーマでは、ブロックに最大幅が追加され、サイズに関係なく全体の幅が制限されます。 プラグインを介してこれを無効にすることは可能ですが、Kamalはバージョン1.0ではこれを行わないことを選択しました。

余白に注意してください。 テーマのデザインによっては、コンテンツを配置するために左右の余白を使用する場合があります。 上または下の余白だけを設定する場合でも、プラグインは左右の余白に自動的に0を出力します。 これにより、一部のテーマのコンテンツレイアウトが破損する可能性があります。

プラグインで発生した問題の1つは、アクティブなテーマのスタイルがプラグインのスタイルを一般的に覆していることでした。 たとえば、デフォルトのTwenty Twentyテーマは、CSSでp.has-backgroundをターゲットにして、カスタムパディングを追加します。 したがって、EditorPlusプラグインのCSSをより高い特異性で無効にします。 この問題は予想されたものであり、プラグイン開発者は、各設計オプションの「重要な」チェックボックスの形でその解決策を追加しました。 ユーザーがこのボックスにチェックマークを付けると、出力のスタイルルールに!importantが追加され、テーマスタイルを無効にすることができます。 これは100％絶対確実なソリューションではありません。 マイレージはテーマによって異なる場合がありますが、ほとんどのユースケースで機能するはずです。

UIの重要なチェックボックスのアイデアは好きではありません。 これは、ユーザーが心配しなければならないことではありません。 ただし、テーマとプラグインには、どのデザインルールが他のルールよりも重要であるかを伝える実際の方法がないというのが現実です。 UIにこれを含めたくないにもかかわらず、それを含めることは賢明な決断でした。 そうしないと、テーマのスタイルルールが多すぎると、プラグインのCSSが上書きされてしまいます。

最終的な考え

バージョン1.0リリースの場合、EditorPlusは順調なスタートを切っています。 私のテストでは、いくつかの欠陥が見つかりました。 平均的なユーザーにとっての問題は、テーマの競合という形で発生する可能性があります。これらの競合は、CSSで高い特異性または!importantを使用するテーマに関連する可能性があります。

Kamalは、プラグインのWebページで、このプラグインからさらに多くのものが得られることを明確にしています。 彼がどのような機能を考えているのかはわかりませんが、それらを見るのを楽しみにしています。 見出しや段落などのテキスト関連のブロックにテキストシャドウオプションを表示したいと思います。 また、ラッピング要素だけでなく、Galleryブロック内の画像のいくつかのデザインオプションを確認すると便利です。

EditorPlusを使用する必要があるかどうかは、追加のデザインコントロールが必要かどうかによって異なります。 EditorPlusは、軽量のページビルダーに似たものを必要としているが、ネイティブのWordPressに固執したい人を対象としています。 このプラグインは、何が可能かを示す優れたショーケースであり、いつかWordPressに登場する可能性のある潜在的なデザインオプションの優れた指標です。