WordPressブロックテーマのスタイリングボタン

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

theme.json

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

• 要素
  • オブジェクト
    • プロパティ
      • 値
ボタンのデフォルトおよびインタラクティブなスタイルの完全な定義を完了しました。しかし、他のブロックにネストされたいくつかのボタンをスタイリングしたい場合はどうでしょうか？

各ブロックにネストされたボタンのスタイルを設定します

1つの例外を除いて、すべてのボタンに基本的なスタイルを持っていると仮定しましょう。記事のコメントフォームブロックの送信ボタンを青色にしたいと思います。どのように達成すべきですか？

このブロックは、フォーム、入力、記述テキスト、ボタンなど、よりアクティブな部分が含まれているため、ボタンブロックよりも複雑です。このブロック内のボタンを見つけるには、ボタン要素と同じJSON構造をたどる必要がありますが、

core/post-comments-form

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

elements JSON構造は、要素内の要素をサポートします。したがって、記事のコメントフォームブロックにボタン要素がある場合、blocksブロック：

このセレクターは、特定のブロックを見つけるだけでなく、そのブロックに含まれる特定の要素を見つけていることを意味します。これで、トピックのすべてのボタンに適用されるデフォルトボタンスタイルのセットと、記事コメントフォームブロックに含まれる特定のボタンに適用される一連のスタイルがあります。 core/post-comments-form

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        }
      }
    }
  }
}

ブロック内で定義されていることを除きます。

<div>
  <a>Button 1</a>
</div>
<p>
  </p>

ブロックのボタンの場合はどうすればよいですか？

WordPressは、これらのボタンスタイルを出力するために、正しいクラスを自動的に生成および適用します。しかし、ブロックとサイト全体の編集をサポートしているが、「クラシック」PHPテンプレートも含まれている「ハイブリッド」WordPressテーマを使用した場合はどうでしょうか？または、カスタムブロックを作成した場合、ボタン付きのショートコードの古いバージョンでも作成した場合はどうなりますか？これらは、WordPressスタイルのエンジンによって処理されません！

心配しないでください。これらのすべての場合、テンプレート、ブロック、またはショートコードタグに.wp-element-buttonクラスを追加します。 WordPressによって生成されたスタイルが適用されます。

場合によっては、マーキングを制御できない場合があります。たとえば、一部のブロックプラグインはあまりにも任意であり、独自のスタイルを自由に適用する場合があります。この時点で、通常、ブロック設定パネルのAdvancedオプションに移動し、そこにクラスを適用できます。

theme.jsonそして、

theme.json

1. CSSは、将来のWordPressの更新と互換性があります。
2. 生成されたスタイルは、ブロックのテーマとクラシックテーマと互換性があります。別のスタイルシートにコピーする必要はありません。
プロジェクトで