WP Block Stile

Es gibt mit WP 6.9 noch keinen praktischen Weg, wie du z.B Core Button Stile Füllen und Kontur ganz einfach deaktivieren kannst. Es geht theoretisch via Filter + JS File im Theme – aber dann hast du immer noch deinen „Standard“ Stil.

Überschreibe einfach die vorhandenen Stile und setze nur für neue Variationen eigene!

Reminder: Eigene Block Stile setzen
JavaScript
/* in fse root /styles/blocks/mein-stil.json */
{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "title": "Checkmarks",
  "slug": "checkmarks",
  "blockTypes": [
    "core/list"
  ],
  "styles": {
    "css": "list-style: none; padding-left: 0; & li { padding-left: 1.8em; position: relative; margin-bottom: 4px; line-height: 1.2; } & li::before { content: ''; position: absolute; left: 0; top: 0; width: 1em; height: 1em; background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\"><path d=\"M249.9 66.8c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-106 145.7-37.5-37.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l128-176zm128 136c10.4-14.3 7.2-34.3-7.1-44.7s-34.3-7.2-44.7 7.1l-170 233.7-69.5-69.5c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c6.6 6.6 15.8 10 25.1 9.3s17.9-5.5 23.4-13.1l192-264z\"/></svg>'); background-repeat: no-repeat; background-size: contain; }"
  }
}

Folgendes Beispiel setzt den Standard-Buttonstil. Egal ob etwas angeklickt ist oder nicht bei den Stilen. Für Standardstile musst du keine Variationen anlegen. Nur für allfällige registrierte Stile wie in diesem Fall der Outline Stil.

CSS
"blocks": {
			"core/button": {
				"color": {
					"background": "var(--wp--preset--color--rot, #A61915)",
					"text": "var(--wp--preset--color--white, #ffffff)"
				},
				"typography": {
					"fontSize": "1rem",
					"fontWeight": "600",
					"lineHeight": "1",
					"textDecoration": "none"
				},
				"spacing": {
					"padding": {
						"top": "12px",
						"bottom": "12px",
						"left": "28px",
						"right": "28px"
					}
				},
				"border": {
					"radius": "8px"
				},
				"css": "transition: all 0.2s ease-in-out; &:hover { opacity: 0.8; } &:focus-visible { opacity: 0.8; }",
				"variations": {
					"outline": {
						"color": {
							"background": "transparent",
							"text": "var(--wp--preset--color--rot, #A61915)"
						},
						"border": {
							"color": "var(--wp--preset--color--rot, #A61915)",
							"style": "solid",
							"width": "2px"
						},
						"css": "&:hover { opacity: 0.8; } &:focus-visible { opacity: 0.8; }"
					}
				}
			}
		}

Alles via styles/blocks/buttons/button.json etc lösen. Es bruacht den Weg über die Block Stil Registrierung mit PHP und dann Stil in theme.json gestalten nicht. Alles direkt via styles/blocks machen – ist am einfachsten zu verwalten.