WordPressブロックテーマのCSSスタイルの管理

WordPressテーマでCSSがどのように書かれているかは劇的に変化しています。私は最近、WordPressを介してWordPressでFluid Fontサポートを追加するテクノロジーを共有しました。WordPressによって大幅に宣伝されている新しいドキュメントは、サイト編集（FSE）機能をサポートするWordPressテーマスタイルを定義するための中心的な真実の源となります。 theme.json

待って、ファイルはありませんか？私たちはまだそれを持っています。実際、style.cssはブロックテーマの必要なファイルですが、効果が大幅に低下しており、トピックのメタ情報を登録するためにのみ使用されます。つまり、style.cssはまだ積極的な開発中です。つまり、theme.json、theme.json、さらにはブロックレベルで定義されたスタイルを見つける移行期にいることを意味します。 styles.css では、これらのWordPress fse時代のスタイルは実際にどのようなものですか？これが私がこの記事で紹介したいものです。 WordPressテーマ開発者マニュアルには、ブロックテーマスタイルに関するドキュメントがないため、ここで説明したのは、WordPressテーマに関する現在の状況と将来の議論について収集した情報です。

WordPress Styleの進化

WordPress 6.1に含まれる新しい開発機能は、スタイルを完全に定義するシステムに近づきますが、完全に頼る前にまだやるべきことがたくさんあります。通常、実験機能がテストされているGutenbergプラグインを使用して、将来のリリースに表示されるものを学ぶことができます。

theme.jsonデフォルトのWordPressテーマの進化を調べることで、現在のステータスについても学ぶことができます。これまでのところ、サイト全体の編集をサポートする3つのデフォルトのテーマがあります：

• Twenty21（TT1）：これは、ブロックと互換性のある最初の古典的なデフォルトテーマバージョンです。また、ブロックバージョン（TT1ブロック）もあり、それ以来ブロックテーマの信頼できるリソースとなっています。ただし、TT1のCSSの5900列はすべてstyle.cssにあります。いいえtheme.jsonファイル。 TT1ブロックは、ブロックエディターの時代でスタイルを見たのは初めてです。これは、モデルではなくトレーラーと考えることができます。
• 222（TT2）：これは、最初の真にブロックベースのデフォルトのWordPressテーマであり、theme.jsonに初めて遭遇したときです。このファイルには、373行のコードのみが含まれています。主な開発者は、CSSのないテーマにするための調整された努力をしています。 style.css theme.json
23（TT3）：
• これは、WordPress 6.1で公開されており、必要なファイルにCSSがない最初のテーマの例です。 style.css ただし、

のCSSをすぐに

のJSON属性値ペアに置き換えないでください。これを検討する前に、style.cssでサポートするCSSスタイルのルールがまだあります。現在、残りの重要な問題が議論されています。目標は、すべてのCSSスタイルのルールをtheme.jsonに完全に移動し、theme.jsonの異なるソースを1つのUIに統合して、WordPressサイトエディターにグローバルスタイルを直接セットアップすることです。 theme.json theme.jsonこれにより、比較的困難な状況になります。テーマスタイルをオーバーライドする明確なパスがないだけでなく、スタイルが何であるかは不明です - それらは

ファイル、

、Gutenbergプラグインまたは他の場所の異なるレイヤーからのものですか？ theme.json style.cssなぜstyle.cssの代わりにtheme.jsonを選択するのですか？

従来のCSSファイルではなく、WordPressがJSONベースのスタイルの定義に戻る理由を疑問に思うかもしれません。グーテンバーグの開発チームのベン・ドワイヤーは、

方法がトピック開発者にとって利点である理由を雄弁に説明しています。

theme.jsonベンの投稿を読む価値がありますが、ポイントはこの引用にあります：

レイアウト、プリセット、またはブロックスタイル、上書きCSSは、統合と相互運用性の障壁を引き起こす可能性があります。フロントエンドとエディターの視覚的な一貫性は、維持がより困難になり、ブロック内でのアップグレードがオーバーライドと競合する可能性があります。さらに、カスタムCSSは、他のブロックテーマではポータブルではありません。

「基本」定義されたスタイルの階層は、トピックの著者が

APIを可能な限り使用するよう奨励することで正しく解決できます。

CSSをJSONに移動することの主な利点の1つは、JSONが機械可読形式であることです。つまり、APIを取得してWordPressサイトエディターUIに公開できることを意味し、ユーザーがデフォルト値を変更し、CSSを作成せずにサイトの外観をカスタマイズできます。また、ブロックを一貫してスタイリングする方法を提供しながら、特定のレイヤーを作成する構造を提供して、ユーザー設定がtheme.jsonで定義された設定よりも優先度が高いようにします。グローバルスタイルのUIでのテーマレベルのスタイルとユーザー定義のスタイルとの間のこの相互作用により、JSONメソッドは非常に魅力的です。 theme.json

開発者はJSONの一貫性を維持し、ユーザーはコードレスカスタマイズを通じて柔軟性を獲得します。これは双方にとって有利な状況です。

もちろん、他の利点があり、WP EngineのMike McAlisterはこのTwitterスレッドにいくつかリストされています。 Make WordPress Coreブログに関する詳細な議論で、より多くの利点を見つけることができます。読んだ後、JSONメソッドの利点を、古典的なトピックでスタイルを定義および上書きする利用可能な方法と比較します。

JSON要素を使用してスタイルを定義します

テーマのどの部分を設定できるかという点で、多くの進歩が見られました。 WordPress 6.1の前に、本当にできることは、タイトルとリンクのスタイルだけでした。現在、WordPress 6.1を使用すると、ボタン、タイトル、引用符、タイトルを追加できます。

json要素theme.jsonを定義することにより、これを行います。要素は、WordPressブロックに存在する単一のコンポーネントとして扱うことができます。タイトル、段落、ボタンのブロックがあるとします。これらの個々の部分は要素であり、そのスタイルを定義する

オブジェクトがあります。

JSON要素を説明するより良い方法は、ブロックの複雑さを必要としないトピックとブロックの低レベルコンポーネントであることです。これらは、ブロックで定義されていないがブロック間で使用できるHTMLプリミティブの表現です。 WordPress（およびGutenbergプラグイン）でそれらがどのようにサポートされているかについては、ブロックエディターマニュアルおよびCarolina Nymarkによるこのサイト全体の編集チュートリアルで説明されています。 たとえば、theme.jsonelementsオブジェクトのリンクスタイルですが、ブロック自体ではありません。ただし、リンクはブロックで使用でき、

のオブジェクトで定義されているスタイルを継承します。ただし、一部の要素はタイトルやボタンブロックなどのブロックとして登録されているため、これは要素の定義を完全に要約するわけではありませんが、これらのブロックは他のブロックで使用できます。

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

以下は、ワードプレス6.1の前に

でスタイルを整えるために使用できるカロライナが提供する要素の表です。

ご覧のとおり、これはまだ初期段階にあり、GutenbergプラグインからWordPressコアに移動するものがまだたくさんあります。ただし、CSSファイルやDevtoolsでセレクターを検索せずに、テーマにすべてのタイトルをグローバルに設定することがどれだけ速くなるかを確認できます。 elementsさらに、グローバル要素（タイトルなど）から個々の要素（H1など）やブロックレベルのスタイル（ブロックに含まれるH1など）に至るまで、

の構造が特定のレイヤーをどのように形成するかを理解し始めることができます。 theme.json

JSON Elementsの詳細については、GutenbergプラグインGitHubリポジトリのWordPress提案とこのオープンチケットを参照してください。

jsonおよびcss特異性

CSS特異性について引き続き議論しましょう。前述したように、JSONのスタイル方法は階層を作成します。これは本当です。

のJSON要素で定義されているスタイルは、デフォルトのテーマスタイルと見なされます。 Global Style UIでユーザーが設定したものはすべて、デフォルト値をオーバーライドします。 theme.json

言い換えれば、

ユーザースタイルは、デフォルトのテーマスタイルよりも特異性が高くなっています。ボタンブロックを見て、それがどのように機能するかを理解しましょう。 emptyThemeを使用します。これは、CSSスタイルのない空白のWordPressテーマです。新しいページにボタンブロックを追加します。

わかりました、WordPress Coreにはいくつかの簡単なスタイルが付属していることがわかります。次に、WordPress 6.1のデフォルトのTT3テーマに切り替えてアクティブになります。ボタンでページを更新すると、ボタンのスタイルが変更されます。

これらの新しいスタイルがTT3のファイルのどこにあるかを正確に見ることができます。これは、JSON要素のスタイルがWordPressコアスタイルよりも優先されることを示しています。

次に、TT3をChildテーマに上書きすることでTT3を変更します。ボタンブロックのデフォルトの背景色は赤に設定されています。 theme.json

ただし、最後のスクリーンショットの検索ボタンに注意してください。それも赤くなければなりませんよね？これは、私が行った変更がグローバルレベルにある場合、別のレベルでスタイリングする必要があることを意味します。 2つのボタンを変更したい場合は、サイトエディターのグローバルスタイルUIを使用してユーザーレベルで変更を加えることができます。

グローバルスタイルのUIを使用して、2つのボタンの背景色を青に変更し、テキストを変更しました。そこの青はテーマスタイルよりも優先されることに注意してください！

スタイルエンジン

これは非常に高速ですが、WordPressブロックテーマでCSS特異性を管理する方法についての良いアイデアです。しかし、これらのスタイルが生成される場所が明確ではないため、これは完全な絵ではありません。 WordPressには、どこかから来る独自のデフォルトスタイルがあります。

のデータを使用して、より多くのスタイルルールを取得し、それらのルールをグローバルスタイルで設定したもので上書きします。

これらのスタイルはインラリングされていますか？それらは別々のスタイルシートにいますか？たぶん彼らはページに注入されたのでしょうか？

これは、新しいスタイルのエンジンが解決することが期待される問題です。スタイルエンジンは、WordPress 6.1の新しいAPIであり、スタイルを生成し、スタイルのアプリケーションの場所を一貫して保つことを目指しています。言い換えれば、それはすべての可能なスタイルのソースを必要とし、ブロックスタイルを正しく生成することに個別に責任を負います。私は知っています、私は知っています。いくつかのスタイルを書くために、他の抽象化層の上に抽象化層が追加されました。ただし、スタイルが複数の場所から来ることができることを考えると、集中スタイルのAPIを持つことはおそらく最もエレガントなソリューションです。

初めてスタイルエンジンを見るだけです。実際、チケットによると、以下の作業はこれまでに行われています。

監査とマージバックエンドは、CSSコードの場所をサポートするブロックを生成し、同じ場所から（複数の場所ではなく）配信されます。これには、マージン、充填、タイポグラフィ、色、境界などのCSSルールが含まれます。
重複したレイアウト固有のスタイルを削除し、セマンティッククラス名を生成します。
ブロック、レイアウト、要素へのページへの印刷をサポートするインラインスタイルのタグの数を減らします。

基本的に、これは、どこから来たとしても、トピックのすべてのCSSスタイルルールを含む単一のAPIを構築するための基礎です。 WordPressが6.1の前にインラインスタイルを挿入し、セマンティッククラス名のシステムを構築する方法をクリーンアップします。

スタイルエンジンの長期的および短期的な目標の詳細については、WordPressコアディスカッションを行うことを参照してください。さらに更新するために、追跡の問題やプロジェクトボードをフォローすることもできます。

JSON要素を使用して

ファイルの

json要素のHTMLプリミティブと、タイトル、ボタン、リンクなどのデフォルトのコンテンツスタイルを基本的に定義する方法について説明しました。それでは、実際のtheme.jsonが json要素をどのように使用し、さまざまなスタイルのコンテキストでどのように動作するかを見てみましょう。

jSON要素には、通常、グローバルレベル

およびブロックレベルの2つのコンテキストがあります。グローバルレベルのスタイルの定義は、ブロック固有のスタイルが好まれるようにブロックレベルよりも低く、ブロックが使用される場所で一貫性が維持されるようにします。 json要素のグローバルスタイル

新しいデフォルトのTT3テーマを見て、ボタンのスタイルを確認しましょう。これは、TT3

ファイル（これは完全なコードです）の短いコピーパステで、グローバルスタイルのセクションを示していますが、元のコードはこちらから見つけることができます。

theme.json

code

`` `を表示します { 「バージョン」：2、 "設定"： {}、 // ... 「スタイル」：{ // ... 「要素」：{ "ボタン"： { "国境"： { 「半径」：「0」 }、 "色"： { 「バックグラウンド」：「var（ - wp-- preset-color-primary）」、 「テキスト」：「var（ - wp--preset-color - contrast）」 }、 "：ホバー"：{ "色"： { 「バックグラウンド」：「var（ - wp--- preset-color - contrast）」、 「テキスト」：「var（ - wp--preset-color-ベース）」 } }、 "：集中"： { "色"： { 「バックグラウンド」：「var（ - wp--- preset-color - contrast）」、 「テキスト」：「var（ - wp--preset-color-ベース）」 } }、 "：アクティブ"： { "色"： { 「バックグラウンド」：「var（ - wp-- preset-color-secondary）」、 「テキスト」：「var（ - wp--preset-color-ベース）」 } } }、 「H1」：{ 「タイポグラフィ」：{} }、 // ... 「見出し」：{ 「タイポグラフィ」：{ 「フォント級」：「400」、 「LineHeight」：「1.4」 } }、 "リンク"： { "色"： { 「テキスト」：「var（ - wp--preset-color - contrast）」 }、 "：ホバー"：{ 「タイポグラフィ」：{ 「TextDecoration」：「なし」 } }、 "：集中"： { 「タイポグラフィ」：{ 「TextDecoration」：「下線の破線」 } }、 "：アクティブ"： { "色"： { 「テキスト」：「var（ - wp-- preset-color-secondary）」 }、 「タイポグラフィ」：{ 「TextDecoration」：「なし」 } }、 「タイポグラフィ」：{ 「TextDecoration」：「下線」 } } }、 // ... }、 「TemplateParts」：{} }

<code>{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}</code>

{ 「バージョン」：2、 // ... 「スタイル」：{ //グローバルレベルスタイル 「要素」：{}、 //ブロックレベルスタイル 「ブロック」：{ 「コア/検索」：{ 「要素」：{ "ボタン"： { "色"： { 「バックグラウンド」：「var（ - wp---preset-color - Quaternary）」、 「テキスト」：「var（ - wp--preset-color-ベース）」 } } }、 // ... } } } }

<code>
</code>

所有按钮都在全局级别（`styles.elements.button`）设置样式。 我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。 同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。 顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。 我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。 但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。 #### 元素的块级样式 为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。 为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构：

{ 「バージョン」：2、 「スタイル」：{ //グローバルレベルスタイル 「要素」：{}、 //ブロックレベルスタイル 「ブロック」：{} } }

<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。

结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。

我们也可以在DevTools中看到更改。

如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。

### 示例：在每个级别设置标题样式

让我们用一个例子来巩固所有这些信息。这次，我们将：

- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式

首先，让我们从`theme.json`的基本结构开始：
</code>

{ 「バージョン」：2、 「スタイル」：{ //グローバルレベルスタイル 「要素」：{ 「見出し」：{ 「色」：「var（ - wp--preset-color-ベース）」 }、 }、 //ブロックレベルスタイル 「ブロック」：{} } }

<code>
这为我们的全局和块级样式建立了轮廓。

#### 全局设置所有标题的样式

让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</code>

{ 「バージョン」：2、 「スタイル」：{ //グローバルレベルスタイル 「要素」：{ 「見出し」：{ 「色」：「var（ - wp--preset-color-ベース）」 }、 「H2」：{ "color"： "var（ - wp--preset-color-primary）"、 「タイポグラフィ」：{ 「fontsize」：「クランプ（2.625rem、calc（2.625rem（（1vw -0.48rem） * 8.4135））、3.25rem） " } } }、 //ブロックレベルスタイル 「ブロック」：{} } }

<code>
这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小：
</code>

{ 「バージョン」：2、 「スタイル」：{ //グローバルレベルスタイル 「要素」：{ 「見出し」：{ 「色」：「var（ - wp--preset-color-ベース）」 }、 「H2」：{ "color"： "var（ - wp--preset-color-primary）"、 「タイポグラフィ」：{ 「fontsize」：「クランプ（2.625rem、calc（2.625rem（（1vw -0.48rem） * 8.4135））、3.25rem） " } } }、 //ブロックレベルスタイル 「ブロック」：{ 「コア/クエリ」：{ 「要素」：{ 「H2」：{ 「タイポグラフィ」：{ 「fontsize」：3.25rem } } } } } } }

<code>
现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定fontSize：
</code>

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