グローバルスタイルは、カラーバレットの変更を行わないという特徴

There are some excessive color settings in theme.json, and these become a hindrance when making global style changes.

This report describes a problem that occurs when the global style background color is set to black and the text color is set to white.

"core/post-date": {
	"color": {
		"text": "var(--wp--preset--color--contrast-2)"
	},
	
"core/post-terms": {
	"elements": {
	"css":"& .wp-block-post-terms__prefix{color: var(--wp--preset--color--contrast-2);}"
},
"core/site-tagline": {
	"color": {
		"text": "var(--wp--preset--color--contrast-2)"
},
...	

これらはの設定は、body 要素に設定されたcolorと同じものを意図して記述されていると思われます。

グローバルスタイルは、カラーバレットの変更を行わないという特徴があります。

パレットが変更されないために、実際にはデフォルトのテキスト色が適用されます。

グローバルスタイルの背景色を、黒色。テキスト色を白に変更した場合これらのブロックは、コントラストが失われます。

--wp--preset--color--contrast-2 を指定しなくても、カスケードされるので、これらの設定は、削除しても正常に動作するように思えます

追記

また副作用として、エディタのタイトルは黒文字で表示されるため、入力できなくなります。

これについては、実験的に button-outline.cssに、ちょっとCSSを書けば解決できるようでした。

It seems that these settings are intended to be the same as the color set for the body element.

Global styles are unique in that they do not change the color palette.

The default text color is actually applied because the palette is not changed.

The background color of the global style is black. If you change the text color to white, these blocks will lose their contrast.

Even if you don’t specify –wp–preset–color–contrast-2 it cascades, so these settings seem to work fine even if you remove them

postscript 1

Also, as a side effect, the editor title is displayed in black text, making it impossible to type.

As an experiment, it seemed like this could be solved by writing a little CSS in button-outline.css.

.is-dark-theme .wp-block-post-title{
    color:#fff;
}

postscript 2

Issues related to this are also seen in template parts

header.html

<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"20px","bottom":"20px"}}},"backgroundColor":"base","color":"contrast","layout":{"type":"constrained"}} -->

Since the background color is set in base, when the global style is applied, the background will be displayed in light gray, and since the text color is not specified, it will appear as white text.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

[emulsion_relate_posts]