diff --git a/backport-changelog/7.0/10470.md b/backport-changelog/7.0/10470.md new file mode 100644 index 00000000000000..d40383d5df14df --- /dev/null +++ b/backport-changelog/7.0/10470.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/10470 + +* https://github.com/WordPress/gutenberg/pull/71905 diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index e0b7653321413d..b8237ab3dc51a2 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -238,6 +238,7 @@ The settings section has the following structure: "dimensions": { "aspectRatio": false, "minHeight": false, + "width": false, }, "layout": { "contentSize": "800px", @@ -301,7 +302,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, minHeight +- dimensions: aspectRatio, minHeight, width - position: sticky - spacing: blockGap, margin, padding - typography: lineHeight @@ -772,6 +773,7 @@ Each block declares which style properties it exposes via the [block supports me "dimensions": { "aspectRatio": "value", "minHeight": "value" + "width": "value" }, "filter": { "duotone": "value" diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md index e5d6c34e4081ce..ad86be407a0b25 100644 --- a/docs/how-to-guides/themes/theme-support.md +++ b/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, minHeight +- dimensions: aspectRatio, minHeight, width - position: sticky ```php diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index eb726c426bdfc9..ec5a7ce75752ce 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -630,6 +630,7 @@ _**Note:** Since WordPress 6.2._ - Default value: null - Subproperties: - `minHeight`: 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). @@ -638,20 +639,22 @@ supports: { dimensions: { aspectRatio: true // Enable aspect ratio control. minHeight: true // Enable min height 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` or `minHeight` 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`, `minHeight`, or `width` support is declared. It stores the custom values set by the user. For example: ```js attributes: { style: { dimensions: { aspectRatio: "16/9", - minHeight: "50vh" + minHeight: "50vh", + width: "400px", } } } diff --git a/docs/reference-guides/theme-json-reference/styles-versions.md b/docs/reference-guides/theme-json-reference/styles-versions.md index 0cbffdc6ebfe07..cc80c6ca8388d9 100644 --- a/docs/reference-guides/theme-json-reference/styles-versions.md +++ b/docs/reference-guides/theme-json-reference/styles-versions.md @@ -49,6 +49,7 @@ New styles options are integrated into theme.json on a regular basis. Knowing th | `spacing.margin.bottom` | 5.8 | 5.9 | | `spacing.blockGap` | 5.9 | 5.9 | | `dimensions.minHeight` | 6.2 | N/A | +| `dimensions.width` | 7.0 | N/A | | `outline.color` | 6.2 | N/A | | `outline.offset` | 6.2 | N/A | | `outline.style` | 6.2 | N/A | diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 138e32f76505ee..95a599dd97fe27 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -2,7 +2,7 @@ > This is the living specification for **version 3** of `theme.json`. This version works with WordPress 6.6 or later, and the latest Gutenberg plugin. > -> There are some related documents that you may be interested in: +> There are some related documents that you may be interested in: > - the [theme.json v1](/docs/reference-guides/theme-json-reference/theme-json-v1.md) specification, > - the [theme.json v2](/docs/reference-guides/theme-json-reference/theme-json-v2.md) specification, and > - the [reference to migrate from older theme.json versions](/docs/reference-guides/theme-json-reference/theme-json-migrations.md). @@ -15,7 +15,7 @@ This documentation was generated from the JSON schema for theme.json. The latest schema for version 3, including all the latest changes from the Gutenberg plugin, is available at https://schemas.wp.org/trunk/theme.json. -Theme.json schemas for each WordPress version are available at https://schemas.wp.org/wp/{{version}}/theme.json. +Theme.json schemas for each WordPress version are available at https://schemas.wp.org/wp/{{version}}/theme.json. For example, a schema for WordPress 5.8 is available at https://schemas.wp.org/wp/5.8/theme.json. See [Developing with theme.json](/docs/how-to-guides/themes/global-settings-and-styles.md#developing-with-themejson) for how to use the JSON schema in your editor. @@ -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, minHeight +- dimensions: aspectRatio, minHeight, width - position: sticky - spacing: blockGap, margin, padding - typography: lineHeight @@ -112,6 +112,7 @@ Settings related to dimensions. | defaultAspectRatios | Allow users to choose aspect ratios from the default set of aspect ratios. | `boolean` | `true` | | aspectRatios | Allow users to define aspect ratios for some blocks. | `[ { name, slug, ratio } ]` | | | minHeight | Allow users to set custom minimum height. | `boolean` | `false` | +| width | Allow users to set custom width. | `boolean` | `false` | --- @@ -268,6 +269,7 @@ Dimensions styles. | -------- | ----------- | ---- | | aspectRatio | Sets the `aspect-ratio` CSS property. | `string`, `{ ref }` | | minHeight | Sets the `min-height` CSS property. | `string`, `{ ref }` | +| width | Sets the `width` CSS property. | `string`, `{ ref }` | --- diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php index 008f67adeccdde..e09c9553df5eba 100644 --- a/lib/block-supports/dimensions.php +++ b/lib/block-supports/dimensions.php @@ -43,28 +43,33 @@ function gutenberg_register_dimensions_support( $block_type ) { * * @return array Block dimensions CSS classes and inline styles. */ -function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable - if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) { - return array(); - } - +function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) { $attributes = array(); - // Width support to be added in near future. + if ( wp_should_skip_block_supports_serialization( $block_type, 'dimensions' ) ) { + return $attributes; + } - $has_min_height_support = block_has_support( $block_type, array( 'dimensions', 'minHeight' ), false ); - $block_styles = isset( $block_attributes['style'] ) ? $block_attributes['style'] : null; + $block_styles = $block_attributes['style'] ?? null; if ( ! $block_styles ) { return $attributes; } - $skip_min_height = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'minHeight' ); - $dimensions_block_styles = array(); - $dimensions_block_styles['minHeight'] = null; - if ( $has_min_height_support && ! $skip_min_height ) { - $dimensions_block_styles['minHeight'] = $block_styles['dimensions']['minHeight'] ?? null; + $dimensions_block_styles = array(); + $supported_features = array( 'minHeight', 'width' ); + + foreach ( $supported_features as $feature ) { + $has_support = block_has_support( $block_type, array( 'dimensions', $feature ), false ); + $skip_serialization = wp_should_skip_block_supports_serialization( $block_type, 'dimensions', $feature ); + + $dimensions_block_styles[ $feature ] = null; + + if ( $has_support && ! $skip_serialization ) { + $dimensions_block_styles[ $feature ] = $block_styles['dimensions'][ $feature ] ?? null; + } } + $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) ); if ( ! empty( $styles['css'] ) ) { diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 14d8dca5caa0b7..9d50162c7fc4ad 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -232,6 +232,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.2.0 Added `outline-*`, and `min-height` properties. * @since 6.3.0 Added `writing-mode` property. * @since 6.6.0 Added `background-[image|position|repeat|size]` properties. + * @since 7.0.0 Added `dimensions.width`. * * @var array */ @@ -297,6 +298,7 @@ class WP_Theme_JSON_Gutenberg { 'text-transform' => array( 'typography', 'textTransform' ), 'filter' => array( 'filter', 'duotone' ), 'box-shadow' => array( 'shadow' ), + 'width' => array( 'dimensions', 'width' ), 'writing-mode' => array( 'typography', 'writingMode' ), ); @@ -386,6 +388,7 @@ class WP_Theme_JSON_Gutenberg { * @since 6.4.0 Added `layout.allowEditing`. * @since 6.4.0 Added `lightbox`. * @since 7.0.0 Added type markers to the schema for boolean values. + * @since 7.0.0 Added `dimensions.width`. * @var array */ const VALID_SETTINGS = array( @@ -425,6 +428,7 @@ class WP_Theme_JSON_Gutenberg { 'aspectRatios' => null, 'defaultAspectRatios' => null, 'minHeight' => null, + 'width' => null, ), 'layout' => array( 'contentSize' => null, @@ -539,6 +543,7 @@ class WP_Theme_JSON_Gutenberg { 'dimensions' => array( 'aspectRatio' => null, 'minHeight' => null, + 'width' => null, ), 'filter' => array( 'duotone' => null, @@ -641,6 +646,7 @@ class WP_Theme_JSON_Gutenberg { const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array( '__experimentalBorder' => 'border', 'color' => 'color', + 'dimensions' => 'dimensions', 'spacing' => 'spacing', 'typography' => 'typography', ); @@ -741,6 +747,7 @@ public static function get_element_class_name( $element ) { * * @since 6.0.0 * @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`. + * @since 7.0.0 Added `dimensions.width`. * @var array */ const APPEARANCE_TOOLS_OPT_INS = array( @@ -756,6 +763,7 @@ public static function get_element_class_name( $element ) { array( 'color', 'caption' ), array( 'dimensions', 'aspectRatio' ), array( 'dimensions', 'minHeight' ), + array( 'dimensions', 'width' ), // BEGIN EXPERIMENTAL. // Allow `position.fixed` to be opted-in by default. // Sticky position support was backported to WordPress 6.2 in https://core.trac.wordpress.org/ticket/57618. diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js index 1e56f5f9490d9f..ef2aa8804f8aae 100644 --- a/packages/block-editor/src/components/global-styles/dimensions-panel.js +++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js @@ -39,6 +39,7 @@ export function useHasDimensionsPanel( settings ) { const hasMargin = useHasMargin( settings ); const hasGap = useHasGap( settings ); const hasMinHeight = useHasMinHeight( settings ); + const hasWidth = useHasWidth( settings ); const hasAspectRatio = useHasAspectRatio( settings ); const hasChildLayout = useHasChildLayout( settings ); @@ -50,6 +51,7 @@ export function useHasDimensionsPanel( settings ) { hasMargin || hasGap || hasMinHeight || + hasWidth || hasAspectRatio || hasChildLayout ) ); @@ -79,6 +81,10 @@ function useHasMinHeight( settings ) { return settings?.dimensions?.minHeight; } +function useHasWidth( settings ) { + return settings?.dimensions?.width; +} + function useHasAspectRatio( settings ) { return settings?.dimensions?.aspectRatio; } @@ -206,6 +212,7 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, + width: true, aspectRatio: true, childLayout: true, }; @@ -384,6 +391,17 @@ export default function DimensionsPanel( { }; const hasMinHeightValue = () => !! value?.dimensions?.minHeight; + // Width + const showWidthControl = useHasWidth( settings ); + const widthValue = decodeValue( inheritedValue?.dimensions?.width ); + const setWidthValue = ( newValue ) => { + onChange( setImmutably( value, [ 'dimensions', 'width' ], newValue ) ); + }; + const resetWidthValue = () => { + setWidthValue( undefined ); + }; + const hasWidthValue = () => !! value?.dimensions?.width; + // Aspect Ratio const showAspectRatioControl = useHasAspectRatio( settings ); const aspectRatioValue = decodeValue( @@ -439,6 +457,7 @@ export default function DimensionsPanel( { ...previousValue?.dimensions, minHeight: undefined, aspectRatio: undefined, + width: undefined, }, }; }, [] ); @@ -688,6 +707,23 @@ export default function DimensionsPanel( { /> ) } + { showWidthControl && ( + + + + ) } { showAspectRatioControl && ( { + [ 'aspectRatio', 'minHeight', 'width' ].forEach( ( key ) => { if ( ! supportedStyles.includes( key ) ) { updatedSettings.dimensions = { ...updatedSettings.dimensions, diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index e1206c12645552..f3b826eb107b28 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -81,6 +81,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) { }, [ clientId, isEnabled ] ); + const [ visualizedProperty, setVisualizedProperty ] = useVisualizer(); const onChange = ( newStyle ) => { setAttributes( { @@ -156,7 +157,11 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { } if ( feature === 'any' ) { - return !! ( support?.aspectRatio || !! support?.minHeight ); + return !! ( + support?.aspectRatio || + !! support?.minHeight || + !! support?.width + ); } return !! support?.[ feature ]; @@ -164,9 +169,9 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) { export default { useBlockProps, - attributeKeys: [ 'minHeight', 'style' ], + attributeKeys: [ 'minHeight', 'width', 'style' ], hasSupport( name ) { - return hasDimensionsSupport( name, 'aspectRatio' ); + return hasDimensionsSupport( name ); }, }; diff --git a/packages/block-editor/src/hooks/utils.js b/packages/block-editor/src/hooks/utils.js index f0fef67a548dcf..cf56da1203f982 100644 --- a/packages/block-editor/src/hooks/utils.js +++ b/packages/block-editor/src/hooks/utils.js @@ -263,6 +263,7 @@ export function useBlockSettings( name, parentLayout ) { units, aspectRatio, minHeight, + width, layout, borderColor, borderRadius, @@ -321,6 +322,7 @@ export function useBlockSettings( name, parentLayout ) { 'spacing.units', 'dimensions.aspectRatio', 'dimensions.minHeight', + 'dimensions.width', 'layout', 'border.color', 'border.radius', @@ -430,6 +432,7 @@ export function useBlockSettings( name, parentLayout ) { dimensions: { aspectRatio, minHeight, + width, }, layout, parentLayout, @@ -466,6 +469,7 @@ export function useBlockSettings( name, parentLayout ) { units, aspectRatio, minHeight, + width, layout, parentLayout, borderColor, diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 07e8072e9cd272..dacefd8d9c12cd 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -222,6 +222,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { support: [ 'dimensions', 'minHeight' ], useEngine: true, }, + width: { + value: [ 'dimensions', 'width' ], + support: [ 'dimensions', 'width' ], + useEngine: true, + }, padding: { value: [ 'spacing', 'padding' ], support: [ 'spacing', 'padding' ], diff --git a/packages/global-styles-engine/src/core/render.tsx b/packages/global-styles-engine/src/core/render.tsx index b4811d691cbd0a..4eefee3b143c68 100644 --- a/packages/global-styles-engine/src/core/render.tsx +++ b/packages/global-styles-engine/src/core/render.tsx @@ -155,6 +155,7 @@ const ELEMENT_CLASS_NAMES = { const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = { __experimentalBorder: 'border', color: 'color', + dimensions: 'dimensions', spacing: 'spacing', typography: 'typography', }; diff --git a/packages/global-styles-engine/src/settings/get-setting.ts b/packages/global-styles-engine/src/settings/get-setting.ts index e4c7889ad877f6..23a9a0388bf662 100644 --- a/packages/global-styles-engine/src/settings/get-setting.ts +++ b/packages/global-styles-engine/src/settings/get-setting.ts @@ -36,6 +36,7 @@ const VALID_SETTINGS = [ 'custom', 'dimensions.aspectRatio', 'dimensions.minHeight', + 'dimensions.width', 'layout.contentSize', 'layout.definitions', 'layout.wideSize', diff --git a/packages/global-styles-ui/src/dimensions-panel.tsx b/packages/global-styles-ui/src/dimensions-panel.tsx index e10a19d013e962..dd019b1d80cc77 100644 --- a/packages/global-styles-ui/src/dimensions-panel.tsx +++ b/packages/global-styles-ui/src/dimensions-panel.tsx @@ -21,6 +21,7 @@ const DEFAULT_CONTROLS = { margin: true, blockGap: true, minHeight: true, + width: true, childLayout: false, }; diff --git a/packages/style-engine/src/class-wp-style-engine.php b/packages/style-engine/src/class-wp-style-engine.php index d34132863cff48..db9e73a2c0641e 100644 --- a/packages/style-engine/src/class-wp-style-engine.php +++ b/packages/style-engine/src/class-wp-style-engine.php @@ -210,6 +210,12 @@ final class WP_Style_Engine { 'spacing' => '--wp--preset--spacing--$slug', ), ), + 'width' => array( + 'property_keys' => array( + 'default' => 'width', + ), + 'path' => array( 'dimensions', 'width' ), + ), ), 'spacing' => array( 'padding' => array( diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts index 4ffb33e65686d6..dd8c6a98d7b644 100644 --- a/packages/style-engine/src/styles/dimensions/index.ts +++ b/packages/style-engine/src/styles/dimensions/index.ts @@ -28,4 +28,16 @@ const aspectRatio = { }, }; -export default [ minHeight, aspectRatio ]; +const width = { + name: 'width', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( + style, + options, + [ 'dimensions', 'width' ], + 'width' + ); + }, +}; + +export default [ minHeight, aspectRatio, width ]; diff --git a/phpunit/block-supports/dimensions-test.php b/phpunit/block-supports/dimensions-test.php index c664a22975188f..f2041ec94bd3bf 100644 --- a/phpunit/block-supports/dimensions-test.php +++ b/phpunit/block-supports/dimensions-test.php @@ -135,4 +135,75 @@ public function test_min_height_with_individual_skipped_serialization_block_supp $this->assertSame( $expected, $actual ); } + + public function test_width_style_is_applied() { + $this->test_block_name = 'test/width-style-is-applied'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'width' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_attrs = array( + 'style' => array( + 'dimensions' => array( + 'width' => '300px', + ), + ), + ); + + $actual = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array( + 'style' => 'width:300px;', + ); + + $this->assertSame( $expected, $actual ); + } + + public function test_width_with_individual_skipped_serialization_block_supports() { + $this->test_block_name = 'test/width-with-individual-skipped-serialization-block-supports'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 3, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'dimensions' => array( + 'width' => true, + '__experimentalSkipSerialization' => array( 'width' ), + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_attrs = array( + 'style' => array( + 'dimensions' => array( + 'width' => '300px', + ), + ), + ); + + $actual = gutenberg_apply_dimensions_support( $block_type, $block_attrs ); + $expected = array(); + + $this->assertSame( $expected, $actual ); + } } diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index e4162eedc6ab9b..b953caefbd4bfb 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -322,6 +322,7 @@ public function test_get_settings_appearance_true_opts_in() { 'dimensions' => array( 'aspectRatio' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true, @@ -361,6 +362,7 @@ public function test_get_settings_appearance_true_opts_in() { 'dimensions' => array( 'aspectRatio' => true, 'minHeight' => true, + 'width' => true, ), 'position' => array( 'sticky' => true, diff --git a/schemas/json/block.json b/schemas/json/block.json index fc810bbc5eec14..d0e350b878f2a2 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -327,6 +327,11 @@ "description": "Allow blocks to define a minimum height value.", "type": "boolean", "default": false + }, + "width": { + "description": "Allow blocks to define a width value.", + "type": "boolean", + "default": false } } }, @@ -707,7 +712,8 @@ "properties": { "root": { "type": "string" }, "aspectRatio": { "type": "string" }, - "minHeight": { "type": "string" } + "minHeight": { "type": "string" }, + "width": { "type": "string" } } } ] diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 34f67f1ac00ee3..026313e2379a1b 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -21,7 +21,7 @@ "type": "object", "properties": { "appearanceTools": { - "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight", + "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage, backgroundSize\n- border: color, radius, style, width\n- color: link, heading, button, caption\n- dimensions: aspectRatio, minHeight, width\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight", "type": "boolean", "default": false } @@ -290,6 +290,11 @@ "description": "Allow users to set custom minimum height.", "type": "boolean", "default": false + }, + "width": { + "description": "Allow users to set custom width.", + "type": "boolean", + "default": false } }, "additionalProperties": false @@ -1497,6 +1502,13 @@ { "type": "string" }, { "$ref": "#/definitions/refComplete" } ] + }, + "width": { + "description": "Sets the `width` CSS property.", + "oneOf": [ + { "type": "string" }, + { "$ref": "#/definitions/refComplete" } + ] } } },