Try responsive global block styles with states

backport-changelog/7.1/11706.md

@@ -0,0 +1,3 @@
+https://github.com/WordPress/wordpress-develop/pull/11706
+
+* https://github.com/WordPress/gutenberg/pull/77513

docs/how-to-guides/themes/global-settings-and-styles.md

@@ -1058,6 +1058,83 @@ Pseudo selectors `:hover`, `:focus`, `:focus-visible`, `:visited`, `:active`, `:
 	}
 ```
 
+#### Responsive styles
+
+Block styles can be scoped to two named breakpoints: `mobile` and `tablet`. Any style property that is valid at the block or element level can be nested under one of these keys.
+
+| Key | Media query applied |
+| --- | --- |
+| `mobile` | `@media (width <= 480px)` |
+| `tablet` | `@media (480px < width <= 782px)` |
+
+Responsive overrides can be placed directly on a block node:
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"blocks": {
+			"core/group": {
+				"color": {
+					"text": "black"
+				},
+				"mobile": {
+					"color": {
+						"text": "hotpink"
+					}
+				}
+			}
+		}
+	}
+}
+```
+
+```css
+:root :where(.wp-block-group) { color: black; }
+@media (width <= 480px) { :root :where(.wp-block-group) { color: hotpink; } }
+```
+
+They can also be placed on element nodes within a block:
+
+```json
+{
+	"version": 3,
+	"styles": {
+		"blocks": {
+			"core/group": {
+				"elements": {
+					"link": {
+						"color": { "text": "blue" },
+						":hover": {
+							"color": { "text": "navy" }
+						}
+					}
+				},
+				"mobile": {
+					"elements": {
+						"link": {
+							"color": { "text": "red" },
+							":hover": {
+								"color": { "text": "darkred" }
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+```
+
+```css
+:root :where(.wp-block-group a)        { color: blue; }
+@media (width <= 480px) { :root :where(.wp-block-group a)       { color: red; } }
+:root :where(.wp-block-group a:hover)  { color: navy; }
+@media (width <= 480px) { :root :where(.wp-block-group a:hover) { color: darkred; } }
+```
+
+Responsive overrides are always output after the default styles they override, so the cascade order is preserved without needing to increase specificity.
+
 #### Variations
 
 A block can have a "style variation," as defined in the [block.json specification](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/#styles-optional). Theme authors can define the style attributes for an existing style variation using the `theme.json` file. Styles for unregistered style variations will be ignored.