Block Supports: Add min width support to dimensions (#76949)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

Author: 3 people

backport-changelog/7.1/11465.md

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

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

@@ -239,6 +239,7 @@ The settings section has the following structure:
 			"aspectRatio": false,
 			"height": false,
 			"minHeight": false,
+			"minWidth": false,
 			"width": false,
 		},
 		"layout": {
@@ -304,7 +305,7 @@ There's one special setting property, `appearanceTools`, which is a boolean and
 - background: backgroundImage, backgroundSize
 - border: color, radius, style, width
 - color: link
-- dimensions: aspectRatio, height, minHeight, width
+- dimensions: aspectRatio, height, minHeight, minWidth, width
 - position: sticky
 - spacing: blockGap, margin, padding
 - typography: lineHeight
@@ -776,6 +777,7 @@ Each block declares which style properties it exposes via the [block supports me
 			"aspectRatio": "value",
 			"height": "value"
 			"minHeight": "value"
+			"minWidth": "value"
 			"width": "value"
 		},
 		"filter": {

docs/how-to-guides/themes/theme-support.md

@@ -475,7 +475,7 @@ Use this setting to enable the following Global Styles settings:
 - color: link
 - spacing: blockGap, margin, padding
 - typography: lineHeight
-- dimensions: aspectRatio, height, minHeight, width
+- dimensions: aspectRatio, height, minHeight, minWidth, width
 - position: sticky
 
 ```php

docs/reference-guides/block-api/block-supports.md

@@ -646,6 +646,7 @@ _**Note:** Since WordPress 6.2._
 -   Subproperties:
     -   `height`: type `boolean`, default value `false`
     -   `minHeight`: type `boolean`, default value `false`
+    -   `minWidth`: type `boolean`, default value `false`
     -   `width`: type `boolean`, default value `false`
 
 This value signals that a block supports some of the CSS style properties related to dimensions. When it does, the block editor will show UI controls for the user to set their values if [the theme declares support](/docs/how-to-guides/themes/global-settings-and-styles.md#opt-in-into-ui-controls).
@@ -656,14 +657,15 @@ supports: {
 		aspectRatio: true // Enable aspect ratio control.
 		height: true // Enable height control.
 		minHeight: true // Enable min height control.
+		minWidth: true // Enable min width control.
 		width: true // Enable width control.
 	}
 }
 ```
 
 When a block declares support for a specific dimensions property, its attributes definition is extended to include the `style` attribute.
 
--   `style`: an attribute of `object` type with no default assigned. This is added when `aspectRatio`, `height`, `minHeight`, or `width` support is declared. It stores the custom values set by the user. For example:
+-   `style`: an attribute of `object` type with no default assigned. This is added when `aspectRatio`, `height`, `minHeight`, `minWidth`, or `width` support is declared. It stores the custom values set by the user. For example:
 
 ```js
 attributes: {
@@ -672,6 +674,7 @@ attributes: {
             aspectRatio: "16/9",
             height: "40vh",
             minHeight: "50vh",
+            minWidth: "200px",
             width: "400px",
         }
     }

docs/reference-guides/core-blocks.md

@@ -398,7 +398,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 
 -	**Name:** core/group
 -	**Category:** design
--	**Supports:** align (full, wide), allowedBlocks, anchor, ariaLabel, background (backgroundImage, backgroundSize, gradient), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Supports:** align (full, wide), allowedBlocks, anchor, ariaLabel, background (backgroundImage, backgroundSize, gradient), color (background, button, gradients, heading, link, text), dimensions (minHeight, minWidth), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** tagName, templateLock
 
 ## Heading

docs/reference-guides/theme-json-reference/styles-versions.md

@@ -50,6 +50,7 @@ New styles options are integrated into theme.json on a regular basis. Knowing th
 | `spacing.blockGap`            | 5.9 | 5.9 |
 | `dimensions.height`           | 7.0 | N/A |
 | `dimensions.minHeight`        | 6.2 | N/A |
+| `dimensions.minWidth`         | 7.1 | 7.1 |
 | `dimensions.width`            | 7.0 | N/A |
 | `outline.color`               | 6.2 | N/A |
 | `outline.offset`              | 6.2 | N/A |

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

@@ -46,7 +46,7 @@ Setting that enables the following UI tools:
 - background: backgroundImage, backgroundSize
 - border: color, radius, style, width
 - color: link, heading, button, caption
-- dimensions: aspectRatio, height, minHeight, width
+- dimensions: aspectRatio, height, minHeight, minWidth, width
 - position: sticky
 - spacing: blockGap, margin, padding
 - typography: lineHeight
@@ -114,6 +114,7 @@ Settings related to dimensions.
 | aspectRatios | Allow users to define aspect ratios for some blocks. | `[ { name, slug, ratio } ]` |  |
 | height | Allow users to set custom height. | `boolean` | `false` |
 | minHeight | Allow users to set custom minimum height. | `boolean` | `false` |
+| minWidth | Allow users to set custom minimum width. | `boolean` | `false` |
 | width | Allow users to set custom width. | `boolean` | `false` |
 | dimensionSizes | Dimension size presets for dimension block supports. | `[ { name, slug, size } ]` |  |
 
@@ -274,6 +275,7 @@ Dimensions styles.
 | aspectRatio | Sets the `aspect-ratio` CSS property. | `string`, `{ ref }` |
 | height | Sets the `height` CSS property. | `string`, `{ ref }` |
 | minHeight | Sets the `min-height` CSS property. | `string`, `{ ref }` |
+| minWidth | Sets the `min-width` CSS property. | `string`, `{ ref }` |
 | width | Sets the `width` CSS property. | `string`, `{ ref }` |
 
 ---

lib/block-supports/dimensions.php

@@ -57,7 +57,7 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
 	}
 
 	$dimensions_block_styles = array();
-	$supported_features      = array( 'minHeight', 'height', 'width' );
+	$supported_features      = array( 'minHeight', 'minWidth', 'height', 'width' );
 
 	foreach ( $supported_features as $feature ) {
 		$has_support        = block_has_support( $block_type, array( 'dimensions', $feature ), false );

lib/class-wp-theme-json-gutenberg.php

@@ -290,6 +290,7 @@ class WP_Theme_JSON_Gutenberg {
 		'margin-bottom'                     => array( 'spacing', 'margin', 'bottom' ),
 		'margin-left'                       => array( 'spacing', 'margin', 'left' ),
 		'min-height'                        => array( 'dimensions', 'minHeight' ),
+		'min-width'                         => array( 'dimensions', 'minWidth' ),
 		'outline-color'                     => array( 'outline', 'color' ),
 		'outline-offset'                    => array( 'outline', 'offset' ),
 		'outline-style'                     => array( 'outline', 'style' ),
@@ -432,6 +433,7 @@ class WP_Theme_JSON_Gutenberg {
 			'dimensionSizes'      => null,
 			'height'              => null,
 			'minHeight'           => null,
+			'minWidth'            => null,
 			'width'               => null,
 		),
 		'layout'                        => array(
@@ -552,6 +554,7 @@ class WP_Theme_JSON_Gutenberg {
 			'aspectRatio' => null,
 			'height'      => null,
 			'minHeight'   => null,
+			'minWidth'    => null,
 			'width'       => null,
 		),
 		'filter'     => array(
@@ -797,6 +800,7 @@ public static function get_element_class_name( $element ) {
 		array( 'dimensions', 'aspectRatio' ),
 		array( 'dimensions', 'height' ),
 		array( 'dimensions', 'minHeight' ),
+		array( 'dimensions', 'minWidth' ),
 		array( 'dimensions', 'width' ),
 		// BEGIN EXPERIMENTAL.
 		// Allow `position.fixed` to be opted-in by default.