Block Style System: managed CSS for Global Styles (#20290)

This PR advances the use of experimental-theme.json by themes. This adds: - the ability to add presets (color, font-size, gradients) via the theme.json file - the presets declared by the theme (via this file or via functions.php) are now output as CSS Custom Properties available for themes to use - declare a set of "managed CSS" for some blocks, to match what a user can do in the editor
WordPress · May 21, 2020 · 1425211 · 1425211
1 parent 8ce6ad1
commit 1425211
Show file tree

Hide file tree

Showing 2 changed files with 437 additions and 134 deletions.
diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json
@@ -1,7 +1,128 @@
 {
-	"color": {
-		"primary": "#52accc",
-		"background": "white",
-		"text": "black"
+	"global": {
+		"presets": {
+			"color": [
+				{
+					"slug": "black",
+					"value": "#000000"
+				},
+				{
+					"slug": "cyan-bluish-gray",
+					"value": "#abb8c3"
+				},
+				{
+					"slug": "light-green-cyan",
+					"value": "#7bdcb5"
+				},
+				{
+					"slug": "luminous-vivid-amber",
+					"value": "#fcb900"
+				},
+				{
+					"slug": "luminous-vivid-orange",
+					"value": "#ff6900"
+				},
+				{
+					"slug": "pale-cyan-blue",
+					"value": "#8ed1fc"
+				},
+				{
+					"slug": "pale-pink",
+					"value": "#f78da7"
+				},
+				{
+					"slug": "vivid-cyan-blue",
+					"value": "#0693e3"
+				},
+				{
+					"slug": "vivid-green-cyan",
+					"value": "#00d084"
+				},
+				{
+					"slug": "vivid-purple",
+					"value": "#9b51e0"
+				},
+				{
+					"slug": "vivid-red",
+					"value": "#cf2e2e"
+				},
+				{
+					"slug": "white",
+					"value": "#ffffff"
+				}
+			],
+			"font-size": [
+				{
+					"slug": "small",
+					"value": 13
+				},
+				{
+					"slug": "normal",
+					"value": 16
+				},
+				{
+					"slug": "medium",
+					"value": 20
+				},
+				{
+					"slug": "large",
+					"value": 36
+				},
+				{
+					"slug": "huge",
+					"value": 48
+				}
+			],
+			"gradient": [
+				{
+					"slug": "blush-bordeaux",
+					"value": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
+				},
+				{
+					"slug": "blush-light-purple",
+					"value": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
+				},
+				{
+					"slug": "cool-to-warm-spectrum",
+					"value": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"
+				},
+				{
+					"slug": "electric-grass",
+					"value": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)"
+				},
+				{
+					"slug": "light-green-cyan-to-vivid-green-cyan",
+					"value": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"
+				},
+				{
+					"slug": "luminous-dusk",
+					"value": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
+				},
+				{
+					"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
+					"value": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)"
+				},
+				{
+					"slug": "luminous-vivid-orange-to-vivid-red",
+					"value": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)"
+				},
+				{
+					"slug": "midnight",
+					"value": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"
+				},
+				{
+					"slug": "pale-ocean",
+					"value": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)"
+				},
+				{
+					"slug": "very-light-gray-to-cyan-bluish-gray",
+					"value": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)"
+				},
+				{
+					"slug": "vivid-cyan-blue-to-vivid-purple",
+					"value": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
+				}
+			]
+		}
 	}
 }