Allow setting viewport tablet and mobile values in theme.json

backport-changelog/7.1/12395.md

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

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

@@ -1067,6 +1067,22 @@ Block styles can be scoped to two named breakpoints: `@mobile` and `@tablet`. An
 | `@mobile` | `@media (width <= 480px)` |
 | `@tablet` | `@media (480px < width <= 782px)` |
 
+Themes can override the default breakpoint widths with `settings.viewport.mobile` and `settings.viewport.tablet`. Breakpoint values can use `px`, `em`, or `rem` units.
+
+If only one valid breakpoint is configured, the breakpoint keeps its viewport key and uses a single max-width query. For example, a theme with only `settings.viewport.tablet` will expose `@tablet` styles using `@media (width <= value)`.
+
+```json
+{
+	"version": 3,
+	"settings": {
+		"viewport": {
+			"mobile": "640px",
+			"tablet": "960px"
+		}
+	}
+}
+```
+
 Responsive overrides can be placed directly on a block node:
 
 ```json

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -207,6 +207,17 @@ Settings related to typography.
 
 ---
 
+### viewport
+
+Viewport breakpoint settings used for responsive block styles and block visibility. Invalid breakpoint values are ignored. If only one valid breakpoint is declared, it remains keyed by its configured viewport and uses a single max-width query. If neither breakpoint is valid, the default breakpoints are used. If `mobile` is greater than or equal to `tablet`, only the `mobile` breakpoint is used.
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| mobile | Maximum viewport width for mobile styles. | `string` | `"480px"` |
+| tablet | Maximum viewport width for tablet styles. Tablet styles apply above the mobile width and up to this width when both breakpoints are configured, or up to this width when tablet is the only valid breakpoint. | `string` | `"782px"` |
+
+---
+
 ### custom
 
 Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.

lib/block-supports/block-style-variations.php

@@ -167,6 +167,11 @@ function gutenberg_render_block_style_variation_support_styles( $parsed_block )
 		),
 	);
 
+	// Ensure variation state styles know about any custom viewport breakpoints.
+	if ( isset( $theme_json['settings']['viewport'] ) ) {
+		$config['settings']['viewport'] = $theme_json['settings']['viewport'];
+	}
+
 	// Turn off filter that excludes block nodes. They are needed here for the variation's inner block types.
 	if ( ! is_admin() ) {
 		remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );

lib/block-supports/block-visibility.php

@@ -42,60 +42,24 @@ function gutenberg_render_block_visibility_support( $block_content, $block ) {
 			return $block_content;
 		}
 
-		/*
-		 * Viewport size definitions are in several places in WordPress packages.
-		 * The following are taken from: https://github.com/WordPress/gutenberg/blob/trunk/packages/base-styles/_breakpoints.scss
-		 * The array is in a future, potential JSON format, and will be centralized
-		 * as the feature is developed.
-		 *
-		 * Viewport sizes as array items are defined sequentially. The first item's size is the max value.
-		 * Each subsequent item starts after the previous size (using > operator), and its size is the max.
-		 * The last item starts after the previous size (using > operator), and it has no max.
-		 */
-		$viewport_sizes = array(
-			array(
-				'name' => 'Mobile',
-				'slug' => 'mobile',
-				'size' => '480px',
-			),
+		$viewport_settings      = gutenberg_get_global_settings( array( 'viewport' ) );
+		$viewport_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries(
+			$viewport_settings,
 			array(
-				'name' => 'Tablet',
-				'slug' => 'tablet',
-				'size' => '782px',
-			),
-			array(
-				'name' => 'Desktop',
-				'slug' => 'desktop',
-				/*
-				 * Note: the last item in the $viewport_sizes array does not technically require a 'size' key,
-				 * as the last item's media query is calculated using `width > previous size`.
-				 * The last item is present for validating the attribute values, and in order to indicate
-				 * that this is the final viewport size, and to calculate the previous media query accordingly.
-				 */
-			),
+				'include_desktop' => true,
+			)
 		);
 
 		/*
-		 * Build media queries from viewport size definitions using the CSS range syntax.
-		 * Could be absorbed into the style engine,
-		 * as well as classname building, and declaration of the display property, if required.
+		 * Viewport media queries are keyed by style-state names (`@mobile`,
+		 * `@tablet`, and `@desktop`). Block visibility metadata and generated
+		 * classes use plain viewport names, so map the keys at this boundary.
 		 */
-		$viewport_media_queries = array();
-		$previous_size          = null;
-		foreach ( $viewport_sizes as $index => $viewport_size ) {
-			// First item: width <= size.
-			if ( 0 === $index ) {
-				$viewport_media_queries[ $viewport_size['slug'] ] = "@media (width <= {$viewport_size['size']})";
-			} elseif ( count( $viewport_sizes ) - 1 === $index && $previous_size ) {
-				// Last item: width > previous size.
-				$viewport_media_queries[ $viewport_size['slug'] ] = "@media (width > $previous_size)";
-			} else {
-				// Middle items: previous size < width <= size.
-				$viewport_media_queries[ $viewport_size['slug'] ] = "@media ({$previous_size} < width <= {$viewport_size['size']})";
-			}
-
-			$previous_size = $viewport_size['size'] ?? null;
+		$block_visibility_media_queries = array();
+		foreach ( $viewport_media_queries as $viewport_state => $media_query ) {
+			$block_visibility_media_queries[ ltrim( $viewport_state, '@' ) ] = $media_query;
 		}
+		$viewport_media_queries = $block_visibility_media_queries;
 
 		$hidden_on = array();
 

lib/block-supports/layout.php

@@ -955,19 +955,22 @@ function gutenberg_unique_id_from_values( array $data, string $prefix = '' ): st
 function gutenberg_render_layout_support_flag( $block_content, $block ) {
 	static $global_styles = null;
 
-	$block_type            = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$block_supports_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
-	$style_attr            = gutenberg_resolve_style_state_aliases(
+	$block_type               = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$block_supports_layout    = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	$style_attr               = gutenberg_resolve_style_state_aliases(
 		$block['attrs']['style'] ?? array(),
 		$block['blockName']
 	);
+	$global_settings          = gutenberg_get_global_settings();
+	$viewport_settings        = $global_settings['viewport'] ?? null;
+	$responsive_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( $viewport_settings );
 	// If there is any value in style -> layout, the block has a child layout.
 	$child_layout = $style_attr['layout'] ?? null;
 
 	// Collect responsive viewport child layout overrides so that a block with
 	// only responsive child layout (no base child layout) is still processed.
 	$viewport_child_layouts = array();
-	foreach ( WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
 		$viewport_child = gutenberg_get_layout_child_values( $style_attr[ $breakpoint ]['layout'] ?? null );
 		if ( ! empty( $viewport_child ) ) {
 			$viewport_child_layouts[ $breakpoint ] = array(
@@ -1077,7 +1080,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$global_settings = gutenberg_get_global_settings();
 	$fallback_layout = $block_type->supports['layout']['default'] ?? array();
 	if ( empty( $fallback_layout ) ) {
 		$fallback_layout = $block_type->supports['__experimentalLayout']['default'] ?? array();
@@ -1189,7 +1191,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			$block_spacing,
 		);
 
-		foreach ( array_keys( WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS ) as $breakpoint ) {
+		foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) {
 			$viewport_style = $style_attr[ $breakpoint ] ?? null;
 			if ( ! is_array( $viewport_style ) ) {
 				continue;
@@ -1235,7 +1237,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		 * Emit responsive container layout styles using the same $container_class
 		 * selector as the base layout so they target the inner block wrapper.
 		 */
-		foreach ( WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
+		foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
 			$viewport_style = $style_attr[ $breakpoint ] ?? null;
 			if ( ! is_array( $viewport_style ) ) {
 				continue;

lib/block-supports/states.php

@@ -513,12 +513,14 @@ function gutenberg_render_block_states_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$supported_pseudo_states = WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
-	$style                   = gutenberg_resolve_style_state_aliases(
+	$supported_pseudo_states  = WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
+	$style                    = gutenberg_resolve_style_state_aliases(
 		$block['attrs']['style'] ?? array(),
 		$block_name
 	);
-	$css_rules               = array();
+	$css_rules                = array();
+	$viewport_settings        = gutenberg_get_global_settings( array( 'viewport' ) );
+	$responsive_media_queries = WP_Theme_JSON_Gutenberg::get_viewport_media_queries( $viewport_settings );
 
 	foreach ( $supported_pseudo_states as $pseudo_state ) {
 		if ( empty( $style[ $pseudo_state ] ) || ! is_array( $style[ $pseudo_state ] ) ) {
@@ -534,7 +536,7 @@ function gutenberg_render_block_states_support( $block_content, $block ) {
 		);
 	}
 
-	foreach ( WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
+	foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
 		if ( empty( $style[ $breakpoint ] ) || ! is_array( $style[ $breakpoint ] ) ) {
 			continue;
 		}