theme.json 導入テスト #103
theme.json 導入テスト #103
Conversation
t-hamano
commented
Jan 8, 2023
t-hamano
commented
| add_theme_support( 'custom-line-height' ); | ||
| add_theme_support( 'custom-units', 'px', 'rem', 'em', '%', 'vw', 'vh' ); | ||
| add_theme_support( 'custom-spacing' ); |
There was a problem hiding this comment.
theme.jsonへサポート移行。
custom-units については、デフォルトで全ての単位をサポートしているため、移行せず削除のみ。
| width: calc(100% + var(--ark-alignwide_ex_width) * 2); | ||
| width: var(--wp--style--global--wide-size); |
There was a problem hiding this comment.
実質同じ値となりますが、theme.jsonの settings.layout.wideSize の定義から生成されるCSS変数に置き換えました。
| .u-fz-xs, | ||
| .has-xsmall-font-size { | ||
| .u-fz-xs { |
There was a problem hiding this comment.
フォントサイズの.has-XXX 系クラスは、エディター・フロントエンドともデフォルトで出力されるため削除。
|
|
||
|
|
||
| /* | ||
| テキストカラー | ||
| */ |
There was a problem hiding this comment.
カラー系クラスは、エディター・フロントエンドともデフォルトで出力されるためファイル自体を削除。
| "spacingSizes": [ | ||
| { | ||
| "name": "Small", | ||
| "slug": "s", | ||
| "size": "var(--ark-mt--s)" | ||
| }, | ||
| { | ||
| "name": "Normal", | ||
| "slug": "normal", | ||
| "size": "var(--ark-mt)" | ||
| }, | ||
| { | ||
| "name": "Normal", | ||
| "slug": "h", | ||
| "size": "var(--ark-h-mt--h)" | ||
| } | ||
| ] |
There was a problem hiding this comment.
一旦マージン用CSS変数でバリエーションを定義。
別途spacing用のバリエーションを作ってもよいかもしれません。
| "padding": true, | ||
| "margin": true, |
There was a problem hiding this comment.
paddingは、add_theme_support( 'custom-spacing' ) からの移行。
margin は便利そうなので仮でオプトイン。
| "border": { | ||
| "color": true, | ||
| "radius": true, | ||
| "style": true, | ||
| "width": true | ||
| } |
There was a problem hiding this comment.
こちらも便利そうなので仮でオプトイン。（グループ、カラムなどでborder設定が使えるようになる）
| "settings": { | ||
| "layout": { | ||
| "contentSize": "var(--ark-block_width)", | ||
| "wideSize": "calc(100% + var(--ark-alignwide_ex_width)*2)" |
There was a problem hiding this comment.
幅広の値は、これだとエディター側で上手く動かないため、何らかの調整が必要そう。
