WordPress Gutenberg ブロックのカスタム スタイル: パート 1

バージョン 5.0 の正式リリースが目前に迫っており、WordPress 開発者にとってはエキサイティングな時期です。これは、コード名 Gutenberg という新しいエディタのデビューを意味します。開発者またはユーザーとして WordPress を定期的に扱っている場合は、これがなぜ大きなニュースなのかをおそらく理解しているでしょう。

ただし、新バージョンは WordPress にまったく異なる編集エクスペリエンスをもたらすため、誰もがこの新バージョンを楽しみにしているわけではありません。これがより広範な WordPress エコシステムにどのような影響を与えるかについては、若干の不確実性があります。ただし、新しいエディターは、WordPress サイトのコンテンツの作成方法に革命をもたらす可能性があります。ユーザーを引き付ける際に最初は抵抗があるかもしれませんが、最終的には、従来の TinyMCE エディターではできない方法で、コンテンツとのより具体的なつながりを生み出すことができると思います。 WordPress プラグイン リポジトリから Gutenberg プラグインをインストールすることで、予定されている WordPress 5.0 リリースに先立って新しいエディターを試すことができます。まだ試す機会がなかった場合は、WordPress での今後の編集エクスペリエンスをプレビューするために、ぜひ試してみることを強くお勧めします。

新しいエディターでのコンテンツの作成は完全にブロックに基づいています。エディターに追加する各コンテンツはブロックです。これには、スライダー、段落、ボタン、リスト、画像、紹介文などのお気に入りの要素がすべて含まれます。エディターにブロックを追加した後、その外観と動作を制御する設定を構成できます。これらは、ブロック自体で、または [インスペクター] パネル (エディター画面の右側にあります) を介して編集できます。ブロック設定が 2 か所で繰り返される場合がありますが、これはブロックごとに異なります。

ただし、ほとんどすべてのブロックには、ブロックをさらにカスタマイズできるように、1 つ以上の CSS クラス名を手動で追加するオプションが [インスペクター] パネルにあります。これは、コア ブロックまたはサードパーティ ブロックのスタイルをオーバーライドする場合に便利です。

これは問題なく機能しますが、この動作を拡張し、事前定義されたスタイル選択セットを通じてブロックのカスタマイズ オプションを追加できるようにすると有益です。これはまさにブロック スタイルの変更によってもたらされるものであり、このチュートリアルでは特にそれらに焦点を当てます。

前提条件

また、独自のブロックにブロック スタイルのバリエーションを追加する方法と、既存のブロックを拡張する方法についても説明します。そのため、続行するには、理想的には WordPress プラグイン開発の基本とプラグインの作成方法を理解しておく必要があります。ブロック。

ただし、パニックにならないでください。集中コースが必要な場合は、カスタム ブロックの作成に関する 4 部構成のチュートリアルをご覧ください。このチュートリアルでは、ブロック スタイルの変更を除いて、このチュートリアルについて知っておく必要があるほぼすべてのことをカバーしています。これは、この特定のチュートリアルの焦点です。

さらに、コードに従って、自分で試してみたい場合は、WordPress を実行するためのローカル開発サーバー (WAMP、MAMP など) とコード エディターが必要になります。

＃＃＃背景＃＃＃＃＃＃

ブロック スタイル バリアント API は、プラグイン v3.2 で Project Gutenberg に導入され、エディター インターフェイスから直接代替ブロック スタイルを適用できるようになります。

ブロック スタイルを変更する前に同じ結果を得るには、

詳細# # にあるブロック インスペクター パネルの 追加 CSS クラス

テキスト フィールドにカスタム CSS クラスを手動で入力する必要があります。 ＃ 一部。

ブロック スタイル変更の元の提案に興味がある場合は、公式 Gutenberg リポジトリのプル リクエストで詳細を読むことができます。 ブロックに定義されたスタイル バリアントには、ブロック ツールバーから直接アクセスできます。ブロックを選択し、ツールバーの左上隅にあるアイコンをクリックして、ブロック スタイル ペインを表示します。

前に、特定のブロック設定 および

検査グループにはブロック内で直接アクセスできると述べたのを覚えていますか?そうですね、まさにそれがブロック スタイルの変更で起こることです。ブロックが選択され、[インスペクター] パネルに表示されていることを確認します。

これは便宜上のものであり、最も適したスタイルのバリエーションを選択できます。たとえば、大きな画面では、マウスをクリックするだけでスタイルを切り替えることができるため、インスペクター パネルからブロック スタイルを変更することを選択できます。ただし、小型のデバイスでは、インスペクター パネルを非表示にして、ブロック ツールバーからスタイルを変更するだけにすることもできます。

コアブロックのサポート

一部のコア ブロックは現在、次のようなブロック スタイルのバリエーションをサポートしています。

＃＃＃ボタン＃＃＃ 引用をプルする

＃＃＃引用＃＃＃

区切り文字

＃＃＃テーブル＃＃＃

この機能がより広く採用されるにつれて、他のコア ブロックのサポートも将来追加されると確信しています。これは非常に柔軟であり、多くのユーザーは、ほとんどのブロックに対して事前定義されたスタイル オプションから選択することを楽しみにしていると思います。ブロック スタイルのバリエーションを使用すると、なぜこれが起こるのかが簡単にわかります。

• もちろん、独自のブロックにブロック スタイルのバリエーションを追加することもできます。次に、具体的な実装の詳細について説明します。

  ブロックスタイルの変更の実装

  カスタム ブロック スタイルの変更を実装するには 2 つの方法があります。ブロック定義にアクセスできる場合は、registerBlockType() 関数内で style 属性を使用してブロック スタイル バリアントを直接指定できます。

  たとえば、ボタン コア ブロック スタイルの属性定義は次のようになります。

  リーリー

  ここでは、3 つの新しいブロック スタイル バリアントが登録されています。 Rounded Corners スタイルもデフォルトのスタイルとして設定されていることに注意してください。

  ただし、ブロックのソース コードにアクセスできない場合は、別のアプローチを取ることができます。 Gutenberg 3.4 では、ブロック定義の外部からブロック スタイル バリアントを登録および登録解除するための 2 つの新しい関数が追加されました。

  カスタム ブロック スタイル バリアントを登録するには、registerBlockStyle() 関数を次のように使用します。 リーリー

  これにより、

  custom-button-style という新しいブロック スタイル バリアントがコア ボタン ブロックに追加されます。ボタン ブロックをエディタに挿入すると、利用可能な新しいブロック スタイルのバリエーションが表示されます。

  

  選択すると、ブロック スタイル バリアントが追加されます。

  is-style-custom-add the Button-style CSS クラスを ## ブロック インスペクター パネル #その他の CSS クラステキスト フィールド。

  これにより、ブロック出力の更新がトリガーされ、クラスが HTML マークアップに追加されます。

  

  registerBlockStyle()

  関数を独自のコードのどこに追加すればよいか疑問に思われるかもしれません。心配しないでください。次の記事で完全な例を説明します。最終的なプラグイン コードをダウンロードして、自分でテストできるようになります。 ちょっとした質問です！

  ブロック スタイル バリアントをサポートするブロックを初めて挿入するときは、ブロック スタイル バリアントをクリックするまでは、CSS クラスの 1 つがデフォルトで [選択済み] に表示されている場合でも、実際にはブロック タグに追加されないことに注意してください。

  自分で試してみてください。

  新しいボタン ブロックをエディタに挿入し、ブロック スタイル バリエーション オプションをオンにします。デフォルトで

  Rounded Corners

  オプションが選択されていることがわかります。ブロックインスペクターで Advanced セクションを開くと、CSS クラスがテキスト フィールドに追加されていません。したがって、CSS クラスはブロック タグに挿入されません。エディターのボタン ブロックからの HTML 出力を表示して、自分で確認してください。 Button ブロックの [ブロック スタイル バリアント] 設定に戻り、[デフォルト] オプション (選択されたオプション) またはその他のブロック スタイル オプションをクリックします。 CSS クラスが

  Other CSS Classes

  テキスト フィールドとブロック ラッパー タグに追加されたことがすぐにわかります。ブロック スタイル バリアントを選択すると、カスタム クラスに定義されたカスタム CSS ルールもすぐに適用されます。 この動作は、最初に遭遇したときは少し混乱します。直感的には、デフォルトで選択されたブロック スタイル バリアントに対して CSS クラスが自動的に追加されると予想されるからです。

  ＃＃＃結論は＃＃＃

  ブロック スタイル バリアントとは何か、そしてブロック スタイル バリアントがブロック編集エクスペリエンスに追加されるとなぜ役立つのかを学びました。また、ブロック スタイルのバリアントの基本的な実装も示します。

  次回の記事では、独自のブロックスタイルを登録し、プラグインや子テーマを介してCSSを接続する方法について詳しく説明します。

  ブロック スタイルの登録を解除する方法と、ブロックが最初にエディターに挿入されるときにデフォルトで選択されるスタイル バリアントを設定する方法についても説明します。

以上がWordPress Gutenberg ブロックのカスタム スタイル: パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。