バージョン 5.0 の正式リリースが目前に迫っており、WordPress 開発者にとってはエキサイティングな時期です。これは、コード名 Gutenberg という新しいエディタのデビューを意味します。開発者またはユーザーとして WordPress を定期的に扱っている場合は、これがなぜ大きなニュースなのかをおそらく理解しているでしょう。
ただし、新バージョンは WordPress にまったく異なる編集エクスペリエンスをもたらすため、誰もがこの新バージョンを楽しみにしているわけではありません。これがより広範な WordPress エコシステムにどのような影響を与えるかについては、若干の不確実性があります。ただし、新しいエディターは、WordPress サイトのコンテンツの作成方法に革命をもたらす可能性があります。ユーザーを引き付ける際に最初は抵抗があるかもしれませんが、最終的には、従来の TinyMCE エディターではできない方法で、コンテンツとのより具体的なつながりを生み出すことができると思います。 WordPress プラグイン リポジトリから Gutenberg プラグインをインストールすることで、予定されている WordPress 5.0 リリースに先立って新しいエディターを試すことができます。まだ試す機会がなかった場合は、WordPress での今後の編集エクスペリエンスをプレビューするために、ぜひ試してみることを強くお勧めします。
新しいエディターでのコンテンツの作成は完全にブロックに基づいています。エディターに追加する各コンテンツはブロックです。これには、スライダー、段落、ボタン、リスト、画像、紹介文などのお気に入りの要素がすべて含まれます。エディターにブロックを追加した後、その外観と動作を制御する設定を構成できます。これらは、ブロック自体で、または [インスペクター] パネル (エディター画面の右側にあります) を介して編集できます。ブロック設定が 2 か所で繰り返される場合がありますが、これはブロックごとに異なります。
ただし、ほとんどすべてのブロックには、ブロックをさらにカスタマイズできるように、1 つ以上の CSS クラス名を手動で追加するオプションが [インスペクター] パネルにあります。これは、コア ブロックまたはサードパーティ ブロックのスタイルをオーバーライドする場合に便利です。
これは問題なく機能しますが、この動作を拡張し、事前定義されたスタイル選択セットを通じてブロックのカスタマイズ オプションを追加できるようにすると有益です。これはまさにブロック スタイルの変更によってもたらされるものであり、このチュートリアルでは特にそれらに焦点を当てます。
前提条件
ただし、パニックにならないでください。集中コースが必要な場合は、カスタム ブロックの作成に関する 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 マークアップに追加されます。
関数を独自のコードのどこに追加すればよいか疑問に思われるかもしれません。心配しないでください。次の記事で完全な例を説明します。最終的なプラグイン コードをダウンロードして、自分でテストできるようになります。
ちょっとした質問です！
自分で試してみてください。
新しいボタン ブロックをエディタに挿入し、ブロック スタイル バリエーション オプションをオンにします。デフォルトで
Rounded Cornersオプションが選択されていることがわかります。ブロックインスペクターで Advanced セクションを開くと、CSS クラスがテキスト フィールドに追加されていません。したがって、CSS クラスはブロック タグに挿入されません。エディターのボタン ブロックからの HTML 出力を表示して、自分で確認してください。 Button ブロックの [ブロック スタイル バリアント] 設定に戻り、[デフォルト] オプション (選択されたオプション) またはその他のブロック スタイル オプションをクリックします。 CSS クラスが
Other CSS Classesテキスト フィールドとブロック ラッパー タグに追加されたことがすぐにわかります。ブロック スタイル バリアントを選択すると、カスタム クラスに定義されたカスタム CSS ルールもすぐに適用されます。 この動作は、最初に遭遇したときは少し混乱します。直感的には、デフォルトで選択されたブロック スタイル バリアントに対して CSS クラスが自動的に追加されると予想されるからです。
＃＃＃結論は＃＃＃ブロック スタイル バリアントとは何か、そしてブロック スタイル バリアントがブロック編集エクスペリエンスに追加されるとなぜ役立つのかを学びました。また、ブロック スタイルのバリアントの基本的な実装も示します。
ブロック スタイルの登録を解除する方法と、ブロックが最初にエディターに挿入されるときにデフォルトで選択されるスタイル バリアントを設定する方法についても説明します。
以上がWordPress Gutenberg ブロックのカスタム スタイル: パート 1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
