Layout: Try adding centralised attribute-based styles defined via cla…

…ssnames
WordPress · Aug 2, 2022 · abfc3b0 · abfc3b0
1 parent d0bbcf6
commit abfc3b0
Showing 1 changed file with 84 additions and 1 deletion.
diff --git a/lib/compat/wordpress-6.1/theme.json b/lib/compat/wordpress-6.1/theme.json
@@ -261,7 +261,90 @@
 								"gap": null
 							}
 						}
-					]
+					],
+					"attributeStyles": {
+						"flexWrap": [
+							{
+								"className": "is-$slug",
+								"selector": ".is-$slug",
+								"validValues": [ "nowrap", "wrap" ],
+								"property": "flex-wrap",
+								"values": {
+									"nowrap": "nowrap",
+									"wrap": "wrap"
+								}
+							}
+						],
+						"orientation": [
+							{
+								"className": "is-$slug",
+								"selector": ".is-$slug",
+								"validValues": [ "vertical" ],
+								"property": "flex-direction",
+								"values": {
+									"vertical": "column"
+								},
+								"rules": {
+									"align-items": "flex-start"
+								}
+							}
+						],
+						"justifyContent": [
+							{
+								"className": "is-content-justification-$slug",
+								"selector": ".is-content-justification-$slug",
+								"dependsOn": {
+									"orientation": [ "horizontal", null ]
+								},
+								"property": "justify-content",
+								"validValues": [
+									"left",
+									"right",
+									"center",
+									"space-between"
+								],
+								"values": {
+									"left": "flex-start",
+									"right": "flex-end",
+									"center": "center"
+								}
+							},
+							{
+								"className": "is-content-justification-$slug",
+								"selector": ".is-vertical.is-content-justification-$slug",
+								"dependsOn": {
+									"orientation": [ "vertical" ]
+								},
+								"property": "justify-content",
+								"validValues": [
+									"left",
+									"right",
+									"center",
+									"space-between"
+								],
+								"values": {
+									"left": "flex-start",
+									"right": "flex-end",
+									"center": "center"
+								}
+							}
+						],
+						"verticalAlignment": [
+							{
+								"className": "is-vertical-alignment-$slug",
+								"selector": ".is-vertical-alignment-$slug",
+								"dependsOn": {
+									"orientation": [ "horizontal", null ]
+								},
+								"property": "align-items",
+								"values": {
+									"top": "flex-start",
+									"center": "center",
+									"bottom": "flex-end"
+								}
+							}
+						]
+					}
 				}
 			}
 		},