Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions backport-changelog/7.1/11465.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
https://github.com/WordPress/wordpress-develop/pull/11465

* https://github.com/WordPress/gutenberg/pull/76949
4 changes: 3 additions & 1 deletion docs/how-to-guides/themes/global-settings-and-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ The settings section has the following structure:
"aspectRatio": false,
"height": false,
"minHeight": false,
"minWidth": false,
"width": false,
},
"layout": {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to-guides/themes/theme-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 4 additions & 1 deletion docs/reference-guides/block-api/block-supports.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand All @@ -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: {
Expand All @@ -672,6 +674,7 @@ attributes: {
aspectRatio: "16/9",
height: "40vh",
minHeight: "50vh",
minWidth: "200px",
width: "400px",
}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 } ]` | |

Expand Down Expand Up @@ -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 }` |

---
Expand Down
2 changes: 1 addition & 1 deletion lib/block-supports/dimensions.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
4 changes: 4 additions & 0 deletions lib/class-wp-theme-json-gutenberg.php
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down Expand Up @@ -432,6 +433,7 @@ class WP_Theme_JSON_Gutenberg {
'dimensionSizes' => null,
'height' => null,
'minHeight' => null,
'minWidth' => null,
'width' => null,
),
'layout' => array(
Expand Down Expand Up @@ -552,6 +554,7 @@ class WP_Theme_JSON_Gutenberg {
'aspectRatio' => null,
'height' => null,
'minHeight' => null,
'minWidth' => null,
'width' => null,
),
'filter' => array(
Expand Down Expand Up @@ -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.
Expand Down
Loading
Loading