From 15caba65f20fa2a652abdd7c5dc422e98f7d3fc4 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 8 Dec 2023 16:36:47 +1100
Subject: [PATCH 01/14] Try: Dimensions Aspect Ratio block support
---
docs/reference-guides/core-blocks.md | 26 +++++++-------
lib/class-wp-theme-json-gutenberg.php | 7 ++--
.../dimensions-tool/aspect-ratio-tool.js | 5 ++-
.../global-styles/dimensions-panel.js | 36 +++++++++++++++++++
packages/block-editor/src/hooks/style.js | 1 +
packages/block-editor/src/hooks/utils.js | 4 +++
packages/block-library/src/cover/block.json | 3 ++
packages/block-library/src/group/block.json | 1 +
.../src/styles/dimensions/index.ts | 14 +++++++-
9 files changed, 80 insertions(+), 17 deletions(-)
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index bee68530eeb239..a46121b219a3fa 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
- **Name:** core/buttons
- **Category:** design
- **Supports:** align (full, wide), anchor, layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:**
+- **Attributes:**
## Calendar
@@ -172,7 +172,7 @@ Contains the block elements used to display a comment, like the title, date, aut
- **Category:** design
- **Parent:** core/comments
- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Comments
@@ -211,7 +211,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
- **Category:** theme
- **Parent:** core/comments-pagination
- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Comments Previous Page
@@ -238,7 +238,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
- **Name:** core/cover
- **Category:** media
-- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
## Details
@@ -275,7 +275,7 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
- **Name:** core/footnotes
- **Category:** text
- **Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Form
@@ -304,7 +304,7 @@ Provide a notification message after the form has been submitted. ([Source](http
- **Name:** core/form-submission-notification
- **Experimental:** true
- **Category:** common
-- **Supports:**
+- **Supports:**
- **Attributes:** type
## Form Submit Button
@@ -314,8 +314,8 @@ A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/
- **Name:** core/form-submit-button
- **Experimental:** true
- **Category:** common
-- **Supports:**
-- **Attributes:**
+- **Supports:**
+- **Attributes:**
## Classic
@@ -341,7 +341,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
- **Name:** core/group
- **Category:** design
-- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (aspectRatio, minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** allowedBlocks, tagName, templateLock
## Heading
@@ -491,7 +491,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
- **Category:** design
- **Parent:** core/post-content
- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~
-- **Attributes:**
+- **Attributes:**
## Page List
@@ -603,7 +603,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
- **Name:** core/post-content
- **Category:** theme
- **Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:**
+- **Attributes:**
## Date
@@ -649,7 +649,7 @@ Contains the block elements used to render a post, like the title, date, feature
- **Category:** theme
- **Parent:** core/query
- **Supports:** align (full, wide), color (background, gradients, link, text), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Post Terms
@@ -714,7 +714,7 @@ Contains the block elements used to render content when no query results are fou
- **Category:** theme
- **Parent:** core/query
- **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Pagination
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index a063ab34d9069c..3016891b66ad2e 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -381,7 +381,8 @@ class WP_Theme_JSON_Gutenberg {
),
'custom' => null,
'dimensions' => array(
- 'minHeight' => null,
+ 'aspectRatio' => null,
+ 'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
@@ -486,7 +487,8 @@ class WP_Theme_JSON_Gutenberg {
'text' => null,
),
'dimensions' => array(
- 'minHeight' => null,
+ 'aspectRatio' => null,
+ 'minHeight' => null,
),
'filter' => array(
'duotone' => null,
@@ -661,6 +663,7 @@ public static function get_element_class_name( $element ) {
array( 'color', 'heading' ),
array( 'color', 'button' ),
array( 'color', 'caption' ),
+ array( 'dimensions', 'aspectRatio' ),
array( 'dimensions', 'minHeight' ),
// BEGIN EXPERIMENTAL.
// Allow `position.fixed` to be opted-in by default.
diff --git a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
index 988c6b5c286869..5ff35ae0e0c888 100644
--- a/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
+++ b/packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
@@ -98,6 +98,7 @@ export default function AspectRatioTool( {
onChange = () => {},
options = DEFAULT_ASPECT_RATIO_OPTIONS,
defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value,
+ hasValue,
isShownByDefault = true,
} ) {
// Match the CSS default so if the value is used directly in CSS it will look correct in the control.
@@ -105,7 +106,9 @@ export default function AspectRatioTool( {
return (
displayValue !== defaultValue }
+ hasValue={
+ hasValue ? hasValue : () => displayValue !== defaultValue
+ }
label={ __( 'Aspect ratio' ) }
onDeselect={ () => onChange( undefined ) }
isShownByDefault={ isShownByDefault }
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 47e50aa515e3c6..7b1fcdba43ee43 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -27,6 +27,7 @@ import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
import SpacingSizesControl from '../spacing-sizes-control';
import HeightControl from '../height-control';
import ChildLayoutControl from '../child-layout-control';
+import AspectRatioTool from '../dimensions-tool/aspect-ratio-tool';
import { cleanEmptyObject } from '../../hooks/utils';
import { setImmutably } from '../../utils/object';
@@ -39,6 +40,7 @@ export function useHasDimensionsPanel( settings ) {
const hasMargin = useHasMargin( settings );
const hasGap = useHasGap( settings );
const hasMinHeight = useHasMinHeight( settings );
+ const hasAspectRatio = useHasAspectRatio( settings );
const hasChildLayout = useHasChildLayout( settings );
return (
@@ -49,6 +51,7 @@ export function useHasDimensionsPanel( settings ) {
hasMargin ||
hasGap ||
hasMinHeight ||
+ hasAspectRatio ||
hasChildLayout )
);
}
@@ -77,6 +80,10 @@ function useHasMinHeight( settings ) {
return settings?.dimensions?.minHeight;
}
+function useHasAspectRatio( settings ) {
+ return settings?.dimensions?.aspectRatio;
+}
+
function useHasChildLayout( settings ) {
const {
type: parentLayoutType = 'default',
@@ -192,6 +199,7 @@ const DEFAULT_CONTROLS = {
margin: true,
blockGap: true,
minHeight: true,
+ aspectRatio: true,
childLayout: true,
};
@@ -355,6 +363,21 @@ export default function DimensionsPanel( {
};
const hasMinHeightValue = () => !! value?.dimensions?.minHeight;
+ // Aspect Ratio
+ const showAspectRatioControl = useHasAspectRatio( settings );
+ const aspectRatioValue = decodeValue(
+ inheritedValue?.dimensions?.aspectRatio
+ );
+ const setAspectRatioValue = ( newValue ) => {
+ onChange(
+ setImmutably( value, [ 'dimensions', 'aspectRatio' ], newValue )
+ );
+ };
+ // const resetAspectRatioValue = () => {
+ // setAspectRatioValue( undefined );
+ // };
+ const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
+
// Child Layout
const showChildLayoutControl = useHasChildLayout( settings );
const childLayout = inheritedValue?.layout;
@@ -397,6 +420,7 @@ export default function DimensionsPanel( {
dimensions: {
...previousValue?.dimensions,
minHeight: undefined,
+ aspectRatio: undefined,
},
};
}, [] );
@@ -617,6 +641,18 @@ export default function DimensionsPanel( {
/>
) }
+ { showAspectRatioControl && (
+
+ ) }
{ showChildLayoutControl && (
{
+ return generateRule(
+ style,
+ options,
+ [ 'dimensions', 'aspectRatio' ],
+ 'aspectRatio'
+ );
+ },
+};
+
+export default [ minHeight, aspectRatio ];
From 280dda53ab13054db6f47d08a6cddd5e0bc5a3fd Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Dec 2023 14:18:51 +1100
Subject: [PATCH 02/14] Try server-rendering output
---
lib/block-supports/dimensions.php | 59 +++++++++++++++++++
packages/block-editor/src/hooks/style.js | 3 +
packages/block-library/src/cover/style.scss | 11 +++-
.../style-engine/class-wp-style-engine.php | 11 +++-
4 files changed, 82 insertions(+), 2 deletions(-)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 1ef43133c2cdfb..8c1a64bdb4dda7 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -74,6 +74,65 @@ function gutenberg_apply_dimensions_support( $block_type, $block_attributes ) {
return $attributes;
}
+/**
+ * Renders server-side dimensions styles to the block wrapper.
+ * This block support uses the `render_block` hook to ensure that
+ * it is also applied to non-server-rendered blocks.
+ *
+ * @param string $block_content Rendered block content.
+ * @param array $block Block object.
+ * @return string Filtered block content.
+ */
+function gutenberg_render_dimensions_support( $block_content, $block ) {
+ $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+ $block_attributes = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
+ $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
+
+ if (
+ ! $has_aspect_ratio_support ||
+ wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
+ ) {
+ return $block_content;
+ }
+
+ $dimensions_block_styles = array();
+ $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
+
+ $styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
+
+ if ( ! empty( $styles['css'] ) ) {
+ // Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
+ $tags = new WP_HTML_Tag_Processor( $block_content );
+
+ if ( $tags->next_tag() ) {
+ $existing_style = $tags->get_attribute( 'style' );
+ $updated_style = '';
+
+ if ( ! empty( $existing_style ) ) {
+ $updated_style = $existing_style;
+ if ( ! str_ends_with( $existing_style, ';' ) ) {
+ $updated_style .= ';';
+ }
+ }
+
+ $updated_style .= $styles['css'];
+ $tags->set_attribute( 'style', $updated_style );
+
+ if ( ! empty( $styles['classnames'] ) ) {
+ foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
+ $tags->add_class( $class_name );
+ }
+ }
+ }
+
+ return $tags->get_updated_html();
+ }
+
+ return $block_content;
+}
+
+add_filter( 'render_block', 'gutenberg_render_dimensions_support', 10, 2 );
+
// Register the block support.
WP_Block_Supports::get_instance()->register(
'dimensions',
diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js
index 82b58c576780dc..c2b3a72af70247 100644
--- a/packages/block-editor/src/hooks/style.js
+++ b/packages/block-editor/src/hooks/style.js
@@ -126,6 +126,9 @@ const skipSerializationPathsEdit = {
*/
const skipSerializationPathsSave = {
...skipSerializationPathsEdit,
+ [ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [
+ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,
+ ], // Skip serialization of aspect ratio in save mode.
[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.
};
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 837e3834e2e1ba..5ead64d1fe83a1 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -2,7 +2,6 @@
.wp-block-cover {
position: relative;
background-position: center center;
- min-height: 430px;
display: flex;
justify-content: center;
align-items: center;
@@ -17,6 +16,16 @@
// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
/*rtl:raw: direction: ltr; */
+ // When an aspect ratio is set, the height is calculated based on the width, so don't
+ // manually set a min-height.
+ &:where(:not(.has-aspect-ratio)) {
+ min-height: 430px;
+ }
+
+ &:where(.has-aspect-ratio) {
+ width: 100%;
+ }
+
/**
* Set a default background color for has-background-dim _unless_ it includes another
* background-color class (e.g. has-green-background-color). The presence of another
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index f0ecb9f9038065..31c18e56e34d86 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -185,7 +185,16 @@ final class WP_Style_Engine {
),
),
'dimensions' => array(
- 'minHeight' => array(
+ 'aspectRatio' => array(
+ 'property_keys' => array(
+ 'default' => 'aspect-ratio',
+ ),
+ 'path' => array( 'dimensions', 'aspectRatio' ),
+ 'classnames' => array(
+ 'has-aspect-ratio' => true,
+ ),
+ ),
+ 'minHeight' => array(
'property_keys' => array(
'default' => 'min-height',
),
From 5008b5250a10f5225044c71ba92898cb0fa1e1ab Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 11 Dec 2023 17:01:21 +1100
Subject: [PATCH 03/14] Try outputting has-aspect-ratio classname
---
packages/block-editor/src/hooks/dimensions.js | 50 ++++++++++++++++++-
packages/block-editor/src/hooks/index.js | 2 +
packages/block-library/src/common.scss | 5 ++
3 files changed, 55 insertions(+), 2 deletions(-)
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index bbf5b12ca27cf8..2229a0ec4f84c2 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { getBlockSupport } from '@wordpress/blocks';
import deprecated from '@wordpress/deprecated';
@@ -18,7 +23,6 @@ import { MarginVisualizer } from './margin';
import { PaddingVisualizer } from './padding';
import { store as blockEditorStore } from '../store';
import { unlock } from '../lock-unlock';
-
import { cleanEmptyObject } from './utils';
export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
@@ -125,6 +129,48 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
);
}
+/**
+ * Determine whether there is block support for dimensions.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasDimensionsSupport( blockName, feature = 'any' ) {
+ if ( Platform.OS !== 'web' ) {
+ return false;
+ }
+
+ const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
+
+ if ( support === true ) {
+ return true;
+ }
+
+ if ( feature === 'any' ) {
+ return !! support?.dimensions;
+ }
+
+ return !! support?.[ feature ];
+}
+
+export default {
+ useBlockProps,
+ attributeKeys: [ 'style' ],
+ hasSupport( name ) {
+ return hasDimensionsSupport( name, 'aspectRatio' );
+ },
+};
+
+function useBlockProps( { style } ) {
+ const className = classnames( {
+ 'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+ } );
+
+ return { className };
+}
+
/**
* @deprecated
*/
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index f17c0a22166e4e..3548518c5ece5c 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -16,6 +16,7 @@ import './generated-class-name';
import style from './style';
import './settings';
import color from './color';
+import dimensions from './dimensions';
import duotone from './duotone';
import fontFamily from './font-family';
import fontSize from './font-size';
@@ -46,6 +47,7 @@ createBlockListBlockFilter( [
align,
style,
color,
+ dimensions,
duotone,
fontFamily,
fontSize,
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index 2e1c2b8b706bce..7243811bb4af7a 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -180,3 +180,8 @@ html :where(.is-position-sticky) {
/* stylelint-enable length-zero-no-unit */
}
}
+
+// TODO: Put this rule somewhere else
+.has-aspect-ratio {
+ width: 100%;
+}
From 2748fd002ffcdc385bca27be5a922786d606b400 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 12 Dec 2023 12:03:19 +1100
Subject: [PATCH 04/14] Ensure block support is checked properly
---
.../components/global-styles/dimensions-panel.js | 3 ---
.../src/components/global-styles/hooks.js | 15 +++++++++------
packages/blocks/src/api/constants.js | 5 +++++
3 files changed, 14 insertions(+), 9 deletions(-)
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 7b1fcdba43ee43..5ed65aa281d57c 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -373,9 +373,6 @@ export default function DimensionsPanel( {
setImmutably( value, [ 'dimensions', 'aspectRatio' ], newValue )
);
};
- // const resetAspectRatioValue = () => {
- // setAspectRatioValue( undefined );
- // };
const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
// Child Layout
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
index 2652732807cfd7..7c5cf4cbf3e0fa 100644
--- a/packages/block-editor/src/components/global-styles/hooks.js
+++ b/packages/block-editor/src/components/global-styles/hooks.js
@@ -49,6 +49,7 @@ const VALID_SETTINGS = [
'color.palette',
'color.text',
'custom',
+ 'dimensions.aspectRatio',
'dimensions.minHeight',
'layout.contentSize',
'layout.definitions',
@@ -344,12 +345,14 @@ export function useSettingsForBlockElement(
}
} );
- if ( ! supportedStyles.includes( 'minHeight' ) ) {
- updatedSettings.dimensions = {
- ...updatedSettings.dimensions,
- minHeight: false,
- };
- }
+ [ 'aspectRatio', 'minHeight' ].forEach( ( key ) => {
+ if ( ! supportedStyles.includes( key ) ) {
+ updatedSettings.dimensions = {
+ ...updatedSettings.dimensions,
+ [ key ]: false,
+ };
+ }
+ } );
[ 'radius', 'color', 'style', 'width' ].forEach( ( key ) => {
if (
diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js
index f08717592cb4b2..8af2d0940c8fcc 100644
--- a/packages/blocks/src/api/constants.js
+++ b/packages/blocks/src/api/constants.js
@@ -20,6 +20,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
value: [ 'color', 'link' ],
support: [ 'color', 'link' ],
},
+ aspectRatio: {
+ value: [ 'dimensions', 'aspectRatio' ],
+ support: [ 'dimensions', 'aspectRatio' ],
+ useEngine: true,
+ },
background: {
value: [ 'color', 'gradient' ],
support: [ 'color', 'gradients' ],
From aed99ad0a532faf2e46d140e0c84836672a5ee19 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 20 Dec 2023 12:27:33 +1100
Subject: [PATCH 05/14] Try adding global styles support
---
lib/block-supports/dimensions.php | 10 ++++++
lib/class-wp-theme-json-gutenberg.php | 11 +++++++
packages/block-library/src/common.scss | 5 ---
packages/block-library/src/cover/style.scss | 4 ---
.../style-engine/class-wp-style-engine.php | 6 ++++
.../src/styles/dimensions/index.ts | 33 +++++++++++++++----
packages/style-engine/src/types.ts | 1 +
7 files changed, 55 insertions(+), 15 deletions(-)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 8c1a64bdb4dda7..357f132b2b6d99 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -98,6 +98,16 @@ function gutenberg_render_dimensions_support( $block_content, $block ) {
$dimensions_block_styles = array();
$dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
+ // For aspect ratio to work, the width must be 100%.
+ // While there is not (yet) a width block support, the following is a defensive check.
+ // The `width: 100%;` rule will only be output if the block does not have a width set.
+ if (
+ isset( $dimensions_block_styles['aspectRatio'] ) &&
+ ! isset( $block_attributes['style']['dimensions']['width'] )
+ ) {
+ $dimensions_block_styles['width'] = '100%';
+ }
+
$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 3016891b66ad2e..48624f74ffcfdf 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -211,6 +211,7 @@ class WP_Theme_JSON_Gutenberg {
* @var array
*/
const PROPERTIES_METADATA = array(
+ 'aspect-ratio' => array( 'dimensions', 'aspectRatio' ),
'background' => array( 'color', 'gradient' ),
'background-color' => array( 'color', 'background' ),
'border-radius' => array( 'border', 'radius' ),
@@ -2096,6 +2097,16 @@ protected static function compute_style_properties( $styles, $settings = array()
$value = gutenberg_get_typography_font_size_value( array( 'size' => $value ) );
}
+ if ( 'aspect-ratio' === $css_property ) {
+ // For aspect ratio to work, the width must be 100%.
+ // If a width support is added in the future, this should be updated
+ // to check if a width value is present before outputting this rule.
+ $declarations[] = array(
+ 'name' => 'width',
+ 'value' => '100%',
+ );
+ }
+
$declarations[] = array(
'name' => $css_property,
'value' => $value,
diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index 7243811bb4af7a..2e1c2b8b706bce 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -180,8 +180,3 @@ html :where(.is-position-sticky) {
/* stylelint-enable length-zero-no-unit */
}
}
-
-// TODO: Put this rule somewhere else
-.has-aspect-ratio {
- width: 100%;
-}
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 5ead64d1fe83a1..2857d48fea279a 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -22,10 +22,6 @@
min-height: 430px;
}
- &:where(.has-aspect-ratio) {
- width: 100%;
- }
-
/**
* Set a default background color for has-background-dim _unless_ it includes another
* background-color class (e.g. has-green-background-color). The presence of another
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 31c18e56e34d86..42f926e8592f41 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -203,6 +203,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..a9b510a60e5fca 100644
--- a/packages/style-engine/src/styles/dimensions/index.ts
+++ b/packages/style-engine/src/styles/dimensions/index.ts
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import type { Style, StyleOptions } from '../../types';
+import type { GeneratedCSSRule, Style, StyleOptions } from '../../types';
import { generateRule } from '../utils';
const minHeight = {
@@ -19,12 +19,33 @@ const minHeight = {
const aspectRatio = {
name: 'aspectRatio',
generate: ( style: Style, options: StyleOptions ) => {
- return generateRule(
- style,
- options,
- [ 'dimensions', 'aspectRatio' ],
- 'aspectRatio'
+ const _aspectRatio = style?.dimensions?.aspectRatio;
+
+ const styleRules: GeneratedCSSRule[] = [];
+
+ if ( ! _aspectRatio ) {
+ return styleRules;
+ }
+
+ // For aspect ratio to work, the width must be 100%.
+ // If a width support is added in the future, this should be updated
+ // to check if a width value is present before outputting this rule.
+ styleRules.push( {
+ selector: options.selector,
+ key: 'width',
+ value: '100%',
+ } );
+
+ styleRules.push(
+ ...generateRule(
+ style,
+ options,
+ [ 'dimensions', 'aspectRatio' ],
+ 'aspectRatio'
+ )
);
+
+ return styleRules;
},
};
diff --git a/packages/style-engine/src/types.ts b/packages/style-engine/src/types.ts
index 91a73e158e1cee..b5085ce53f1363 100644
--- a/packages/style-engine/src/types.ts
+++ b/packages/style-engine/src/types.ts
@@ -48,6 +48,7 @@ export interface Style {
left?: BorderIndividualStyles< 'left' >;
};
dimensions?: {
+ aspectRatio?: CSSProperties[ 'aspectRatio' ];
minHeight?: CSSProperties[ 'minHeight' ];
};
spacing?: {
From d1ce660cab363ca29bda84bf24f2148f2b4fae42 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 20 Dec 2023 14:44:34 +1100
Subject: [PATCH 06/14] Update docs, add appropriate checks
---
.../themes/global-settings-and-styles.md | 2 ++
docs/how-to-guides/themes/theme-support.md | 2 +-
.../block-api/block-supports.md | 4 +++-
.../theme-json-reference/theme-json-living.md | 4 +++-
packages/block-editor/src/hooks/dimensions.js | 13 ++++++++++---
schemas/json/block.json | 6 ++++++
schemas/json/theme.json | 18 +++++++++++++++++-
7 files changed, 42 insertions(+), 7 deletions(-)
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 130b6271d13bdf..617c435b6d70c5 100644
--- a/docs/how-to-guides/themes/global-settings-and-styles.md
+++ b/docs/how-to-guides/themes/global-settings-and-styles.md
@@ -233,6 +233,7 @@ The settings section has the following structure:
},
"custom": {},
"dimensions": {
+ "aspectRatio": false,
"minHeight": false,
},
"layout": {
@@ -773,6 +774,7 @@ Each block declares which style properties it exposes via the [block supports me
"text": "value"
},
"dimensions": {
+ "aspectRatio": "value",
"minHeight": "value"
},
"filter": {
diff --git a/docs/how-to-guides/themes/theme-support.md b/docs/how-to-guides/themes/theme-support.md
index 88e69938737b7a..4a952c4de657d1 100644
--- a/docs/how-to-guides/themes/theme-support.md
+++ b/docs/how-to-guides/themes/theme-support.md
@@ -472,7 +472,7 @@ Use this setting to enable the following Global Styles settings:
- color: link
- spacing: blockGap, margin, padding
- typography: lineHeight
-- dimensions: minHeight
+- dimensions: aspectRatio, minHeight
- position: sticky
```php
diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md
index 4a59c34813448f..f035e026ff2e11 100644
--- a/docs/reference-guides/block-api/block-supports.md
+++ b/docs/reference-guides/block-api/block-supports.md
@@ -442,6 +442,7 @@ This value signals that a block supports some of the CSS style properties relate
```js
supports: {
dimensions: {
+ aspectRatio: true // Enable aspect ratio control.
minHeight: true // Enable min height control.
}
}
@@ -449,12 +450,13 @@ supports: {
When a block declares support for a specific dimensions property, its attributes definition is extended to include the `style` attribute.
-- `style`: attribute of `object` type with no default assigned. This is added when `minHeight` support is declared. It stores the custom values set by the user, e.g.:
+- `style`: 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, e.g.:
```js
attributes: {
style: {
dimensions: {
+ aspectRatio: "16/9",
minHeight: "50vh"
}
}
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 ee88f779ace1ce..5565336ffedb7f 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -34,7 +34,7 @@ Setting that enables the following UI tools:
- background: backgroundImage
- border: color, radius, style, width
- color: link
-- dimensions: minHeight
+- dimensions: aspectRatio, minHeight
- position: sticky
- spacing: blockGap, margin, padding
- typography: lineHeight
@@ -116,6 +116,7 @@ Settings related to dimensions.
| Property | Type | Default | Props |
| --- | --- | --- |--- |
+| aspectRatio | boolean | false | |
| minHeight | boolean | false | |
---
@@ -237,6 +238,7 @@ Dimensions styles
| Property | Type | Props |
| --- | --- |--- |
+| aspectRatio | string, object | |
| minHeight | string, object | |
---
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 2229a0ec4f84c2..1ea6610496bec8 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -23,7 +23,7 @@ import { MarginVisualizer } from './margin';
import { PaddingVisualizer } from './padding';
import { store as blockEditorStore } from '../store';
import { unlock } from '../lock-unlock';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
export const SPACING_SUPPORT_KEY = 'spacing';
@@ -149,7 +149,7 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
}
if ( feature === 'any' ) {
- return !! support?.dimensions;
+ return !! ( support?.aspectRatio || !! support?.minHeight );
}
return !! support?.[ feature ];
@@ -163,7 +163,14 @@ export default {
},
};
-function useBlockProps( { style } ) {
+function useBlockProps( { name, style } ) {
+ if (
+ ! hasDimensionsSupport( name, 'aspectRatio' ) ||
+ shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
+ ) {
+ return {};
+ }
+
const className = classnames( {
'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
} );
diff --git a/schemas/json/block.json b/schemas/json/block.json
index fd69ea1badb339..4d2d2531b6f4df 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -316,6 +316,11 @@
"type": "object",
"description": "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.\n\nWhen the block declares support for a specific dimensions property, its attributes definition is extended to include the style attribute.",
"properties": {
+ "aspectRatio": {
+ "type": "boolean",
+ "description": "Allow blocks to define an aspect ratio value.",
+ "default": false
+ },
"minHeight": {
"type": "boolean",
"description": "Allow blocks to define a minimum height value.",
@@ -614,6 +619,7 @@
"type": "object",
"properties": {
"root": { "type": "string" },
+ "aspectRatio": { "type": "string" },
"minHeight": { "type": "string" }
}
}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index 6ae8d15df63d2d..7f12e4f7097765 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -20,7 +20,7 @@
"type": "object",
"properties": {
"appearanceTools": {
- "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage\n- border: color, radius, style, width\n- color: link\n- dimensions: minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight",
+ "description": "Setting that enables the following UI tools:\n\n- background: backgroundImage\n- border: color, radius, style, width\n- color: link\n- dimensions: aspectRatio, minHeight\n- position: sticky\n- spacing: blockGap, margin, padding\n- typography: lineHeight",
"type": "boolean",
"default": false
}
@@ -271,6 +271,11 @@
"description": "Settings related to dimensions.",
"type": "object",
"properties": {
+ "aspectRatio": {
+ "description": "Allow users to set an aspect ratio.",
+ "type": "boolean",
+ "default": false
+ },
"minHeight": {
"description": "Allow users to set custom minimum height.",
"type": "boolean",
@@ -1419,6 +1424,17 @@
"description": "Dimensions styles",
"type": "object",
"properties": {
+ "aspectRatio": {
+ "description": "Sets the `aspect-ratio` CSS property.",
+ "oneOf": [
+ {
+ "type": "string"
+ },
+ {
+ "$ref": "#/definitions/refComplete"
+ }
+ ]
+ },
"minHeight": {
"description": "Sets the `min-height` CSS property.",
"oneOf": [
From 176860a67dd5f23f181983210552b2ae240deb43 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 11 Jan 2024 16:44:03 +1100
Subject: [PATCH 07/14] Try unsetting minHeight
---
lib/block-supports/dimensions.php | 9 +++------
packages/style-engine/src/styles/dimensions/index.ts | 8 +++-----
2 files changed, 6 insertions(+), 11 deletions(-)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 357f132b2b6d99..6f6bd7fb707666 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -98,14 +98,11 @@ function gutenberg_render_dimensions_support( $block_content, $block ) {
$dimensions_block_styles = array();
$dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
- // For aspect ratio to work, the width must be 100%.
- // While there is not (yet) a width block support, the following is a defensive check.
- // The `width: 100%;` rule will only be output if the block does not have a width set.
+ // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
if (
- isset( $dimensions_block_styles['aspectRatio'] ) &&
- ! isset( $block_attributes['style']['dimensions']['width'] )
+ isset( $dimensions_block_styles['aspectRatio'] )
) {
- $dimensions_block_styles['width'] = '100%';
+ $dimensions_block_styles['minHeight'] = 'unset';
}
$styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
diff --git a/packages/style-engine/src/styles/dimensions/index.ts b/packages/style-engine/src/styles/dimensions/index.ts
index a9b510a60e5fca..6222861664f48c 100644
--- a/packages/style-engine/src/styles/dimensions/index.ts
+++ b/packages/style-engine/src/styles/dimensions/index.ts
@@ -27,13 +27,11 @@ const aspectRatio = {
return styleRules;
}
- // For aspect ratio to work, the width must be 100%.
- // If a width support is added in the future, this should be updated
- // to check if a width value is present before outputting this rule.
+ // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
styleRules.push( {
selector: options.selector,
- key: 'width',
- value: '100%',
+ key: 'minHeight',
+ value: 'unset',
} );
styleRules.push(
From bbc68680c76d3f6708e4148468786461a193b565 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 17 Jan 2024 17:04:54 +1100
Subject: [PATCH 08/14] Try unsetting min-height when applying aspect ratio and
vice versa
---
docs/reference-guides/core-blocks.md | 22 +++++++++----------
lib/class-wp-theme-json-gutenberg.php | 9 ++++----
.../global-styles/dimensions-panel.js | 21 ++++++++++++++++--
3 files changed, 34 insertions(+), 18 deletions(-)
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index a46121b219a3fa..964252e4d0b522 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -61,7 +61,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
- **Name:** core/buttons
- **Category:** design
- **Supports:** align (full, wide), anchor, layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:**
+- **Attributes:**
## Calendar
@@ -172,7 +172,7 @@ Contains the block elements used to display a comment, like the title, date, aut
- **Category:** design
- **Parent:** core/comments
- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Comments
@@ -211,7 +211,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
- **Category:** theme
- **Parent:** core/comments-pagination
- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Comments Previous Page
@@ -275,7 +275,7 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
- **Name:** core/footnotes
- **Category:** text
- **Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Form
@@ -304,7 +304,7 @@ Provide a notification message after the form has been submitted. ([Source](http
- **Name:** core/form-submission-notification
- **Experimental:** true
- **Category:** common
-- **Supports:**
+- **Supports:**
- **Attributes:** type
## Form Submit Button
@@ -314,8 +314,8 @@ A submission button for forms. ([Source](https://github.com/WordPress/gutenberg/
- **Name:** core/form-submit-button
- **Experimental:** true
- **Category:** common
-- **Supports:**
-- **Attributes:**
+- **Supports:**
+- **Attributes:**
## Classic
@@ -491,7 +491,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
- **Category:** design
- **Parent:** core/post-content
- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~
-- **Attributes:**
+- **Attributes:**
## Page List
@@ -603,7 +603,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
- **Name:** core/post-content
- **Category:** theme
- **Supports:** align (full, wide), color (background, gradients, link, text), dimensions (minHeight), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:**
+- **Attributes:**
## Date
@@ -649,7 +649,7 @@ Contains the block elements used to render a post, like the title, date, feature
- **Category:** theme
- **Parent:** core/query
- **Supports:** align (full, wide), color (background, gradients, link, text), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Post Terms
@@ -714,7 +714,7 @@ Contains the block elements used to render content when no query results are fou
- **Category:** theme
- **Parent:** core/query
- **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:**
## Pagination
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 48624f74ffcfdf..2af604acb00512 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -2098,12 +2098,11 @@ protected static function compute_style_properties( $styles, $settings = array()
}
if ( 'aspect-ratio' === $css_property ) {
- // For aspect ratio to work, the width must be 100%.
- // If a width support is added in the future, this should be updated
- // to check if a width value is present before outputting this rule.
+ // For aspect ratio to work, other dimensions rules must be unset.
+ // This ensures that a fixed height does not override the aspect ratio.
$declarations[] = array(
- 'name' => 'width',
- 'value' => '100%',
+ 'name' => 'min-height',
+ 'value' => 'unset',
);
}
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 5ed65aa281d57c..218d3b98151809 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -354,8 +354,18 @@ export default function DimensionsPanel( {
const showMinHeightControl = useHasMinHeight( settings );
const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
const setMinHeightValue = ( newValue ) => {
+ const tempValue = setImmutably(
+ value,
+ [ 'dimensions', 'minHeight' ],
+ newValue
+ );
+ // Apply min-height, while removing any applied aspect ratio.
onChange(
- setImmutably( value, [ 'dimensions', 'minHeight' ], newValue )
+ setImmutably(
+ tempValue,
+ [ 'dimensions', 'aspectRatio' ],
+ undefined
+ )
);
};
const resetMinHeightValue = () => {
@@ -368,9 +378,16 @@ export default function DimensionsPanel( {
const aspectRatioValue = decodeValue(
inheritedValue?.dimensions?.aspectRatio
);
+ // Gotta change something here
const setAspectRatioValue = ( newValue ) => {
+ const tempValue = setImmutably(
+ value,
+ [ 'dimensions', 'aspectRatio' ],
+ newValue
+ );
+ // Apply aspect-ratio, while removing any applied min-height.
onChange(
- setImmutably( value, [ 'dimensions', 'aspectRatio' ], newValue )
+ setImmutably( tempValue, [ 'dimensions', 'minHeight' ], undefined )
);
};
const hasAspectRatioValue = () => !! value?.dimensions?.aspectRatio;
From 96daf32db673a6a284dc6e74988eb142aaae09d1 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 18 Jan 2024 15:07:41 +1100
Subject: [PATCH 09/14] Allow Cover block to expand when the content extends
beyond the boundaries of the aspect-ratio
---
packages/block-library/src/cover/style.scss | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 2857d48fea279a..a619318c5dbe87 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -7,10 +7,9 @@
align-items: center;
padding: 1em;
// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
- // `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
- overflow: hidden;
// Use clip instead of overflow: hidden so that sticky position works on child elements.
- overflow: clip;
+ // Use overflow-x instead of overflow so that aspect-ratio allows content to expand the area of the cover block.
+ overflow-x: clip;
// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;
// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
From 051bb7f718615d3440c49a76226e5df3299f75ea Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 18 Jan 2024 15:30:53 +1100
Subject: [PATCH 10/14] Hide cover block resize handle when aspect ratio is
set, clear aspect ratio when updating cover block min height
---
packages/block-library/src/cover/edit/index.js | 3 ++-
.../src/cover/edit/inspector-controls.js | 15 ++++++++++++++-
2 files changed, 16 insertions(+), 2 deletions(-)
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 8c5488584094c6..098a3fe6f5d773 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -431,7 +431,8 @@ function CoverEdit( {
toggleSelection( true );
setAttributes( { minHeight: newMinHeight } );
},
- showHandle: true,
+ // Hide the resize handle if an aspect ratio is set, as the aspect ratio takes precedence.
+ showHandle: ! attributes.style?.dimensions?.aspectRatio ? true : false,
size: resizableBoxDimensions,
width,
};
diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 4aa655b7229e50..6ac708d0462232 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -24,6 +24,7 @@ import {
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
__experimentalUseGradient,
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+ privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
@@ -31,6 +32,9 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
function CoverHeightInput( {
onChange,
@@ -306,7 +310,16 @@ export default function CoverInspectorControls( {
value={ minHeight }
unit={ minHeightUnit }
onChange={ ( newMinHeight ) =>
- setAttributes( { minHeight: newMinHeight } )
+ setAttributes( {
+ minHeight: newMinHeight,
+ style: cleanEmptyObject( {
+ ...attributes?.style,
+ dimensions: {
+ ...attributes?.style?.dimensions,
+ aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+ },
+ } ),
+ } )
}
onUnitChange={ ( nextUnit ) =>
setAttributes( {
From ef7149df4dd95dcb33c80b1ffe3d95bac55f5622 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:20:53 +1100
Subject: [PATCH 11/14] Clear aspect-ratio if minHeight is set on the site
frontend
---
lib/block-supports/dimensions.php | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 6f6bd7fb707666..6aeaed25238712 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -103,6 +103,11 @@ function gutenberg_render_dimensions_support( $block_content, $block ) {
isset( $dimensions_block_styles['aspectRatio'] )
) {
$dimensions_block_styles['minHeight'] = 'unset';
+ } elseif (
+ isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
+ isset( $block_attributes['minHeight'] )
+ ) {
+ $dimensions_block_styles['aspectRatio'] = 'unset';
}
$styles = gutenberg_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
From 2c9107d2ff9a04b660053b5cf28fb1e7d04c5247 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 19 Jan 2024 15:39:12 +1100
Subject: [PATCH 12/14] Attempt to get unset rules playing nicely in the editor
with global styles
---
.../global-styles/dimensions-panel.js | 1 -
.../global-styles/use-global-styles-output.js | 6 ++++
packages/block-editor/src/hooks/dimensions.js | 24 ++++++++++++--
packages/block-library/src/cover/style.scss | 7 +----
.../style-engine/class-wp-style-engine.php | 6 ----
.../src/styles/dimensions/index.ts | 31 ++++---------------
6 files changed, 34 insertions(+), 41 deletions(-)
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 218d3b98151809..0d486e29452637 100644
--- a/packages/block-editor/src/components/global-styles/dimensions-panel.js
+++ b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -378,7 +378,6 @@ export default function DimensionsPanel( {
const aspectRatioValue = decodeValue(
inheritedValue?.dimensions?.aspectRatio
);
- // Gotta change something here
const setAspectRatioValue = ( newValue ) => {
const tempValue = setImmutably(
value,
diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
index 1cd63ef4d03f00..ac51a0ca443db6 100644
--- a/packages/block-editor/src/components/global-styles/use-global-styles-output.js
+++ b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -434,6 +434,12 @@ export function getStylesDeclarations(
);
}
+ // For aspect ratio to work, other dimensions rules (and Cover block defaults) must be unset.
+ // This ensures that a fixed height does not override the aspect ratio.
+ if ( cssProperty === 'aspect-ratio' ) {
+ output.push( 'min-height: unset' );
+ }
+
output.push( `${ cssProperty }: ${ ruleValue }` );
} );
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
index 1ea6610496bec8..6f03ddac2c6504 100644
--- a/packages/block-editor/src/hooks/dimensions.js
+++ b/packages/block-editor/src/hooks/dimensions.js
@@ -157,13 +157,13 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
export default {
useBlockProps,
- attributeKeys: [ 'style' ],
+ attributeKeys: [ 'minHeight', 'style' ],
hasSupport( name ) {
return hasDimensionsSupport( name, 'aspectRatio' );
},
};
-function useBlockProps( { name, style } ) {
+function useBlockProps( { name, minHeight, style } ) {
if (
! hasDimensionsSupport( name, 'aspectRatio' ) ||
shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
@@ -175,7 +175,25 @@ function useBlockProps( { name, style } ) {
'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
} );
- return { className };
+ // Allow dimensions-based inline style overrides to override any global styles rules that
+ // might be set for the block, and therefore affect the display of the aspect ratio.
+ const inlineStyleOverrides = {};
+
+ // Apply rules to unset incompatible styles.
+ // Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
+ // This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
+ // that is set should be intentional and should override any existing minHeight. The Cover block
+ // and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
+ // is set.
+ if ( style?.dimensions?.aspectRatio ) {
+ // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+ inlineStyleOverrides.minHeight = 'unset';
+ } else if ( minHeight || style?.dimensions?.minHeight ) {
+ // To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
+ inlineStyleOverrides.aspectRatio = 'unset';
+ }
+
+ return { className, style: inlineStyleOverrides };
}
/**
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index a619318c5dbe87..3b4eac41a0d3b4 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -2,6 +2,7 @@
.wp-block-cover {
position: relative;
background-position: center center;
+ min-height: 430px;
display: flex;
justify-content: center;
align-items: center;
@@ -15,12 +16,6 @@
// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
/*rtl:raw: direction: ltr; */
- // When an aspect ratio is set, the height is calculated based on the width, so don't
- // manually set a min-height.
- &:where(:not(.has-aspect-ratio)) {
- min-height: 430px;
- }
-
/**
* Set a default background color for has-background-dim _unless_ it includes another
* background-color class (e.g. has-green-background-color). The presence of another
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
index 42f926e8592f41..31c18e56e34d86 100644
--- a/packages/style-engine/class-wp-style-engine.php
+++ b/packages/style-engine/class-wp-style-engine.php
@@ -203,12 +203,6 @@ 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 6222861664f48c..4ffb33e65686d6 100644
--- a/packages/style-engine/src/styles/dimensions/index.ts
+++ b/packages/style-engine/src/styles/dimensions/index.ts
@@ -1,7 +1,7 @@
/**
* Internal dependencies
*/
-import type { GeneratedCSSRule, Style, StyleOptions } from '../../types';
+import type { Style, StyleOptions } from '../../types';
import { generateRule } from '../utils';
const minHeight = {
@@ -19,31 +19,12 @@ const minHeight = {
const aspectRatio = {
name: 'aspectRatio',
generate: ( style: Style, options: StyleOptions ) => {
- const _aspectRatio = style?.dimensions?.aspectRatio;
-
- const styleRules: GeneratedCSSRule[] = [];
-
- if ( ! _aspectRatio ) {
- return styleRules;
- }
-
- // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
- styleRules.push( {
- selector: options.selector,
- key: 'minHeight',
- value: 'unset',
- } );
-
- styleRules.push(
- ...generateRule(
- style,
- options,
- [ 'dimensions', 'aspectRatio' ],
- 'aspectRatio'
- )
+ return generateRule(
+ style,
+ options,
+ [ 'dimensions', 'aspectRatio' ],
+ 'aspectRatio'
);
-
- return styleRules;
},
};
From 39873bf9e2ec0e32194d94b76b5e5e7cc0550bd6 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:34:40 +1100
Subject: [PATCH 13/14] Hide aspectRatio control from global styles for the
group block
---
.../src/components/global-styles/screen-block.js | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index def7d1d627fe46..aaeb1a4a833fa7 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -109,6 +109,16 @@ function ScreenBlock( { name, variation } ) {
settings.spacing.blockGap = false;
}
+ // Only allow `aspectRatio` support if the block is not the grouping block.
+ // The grouping block allows the user to use Group, Row and Stack variations,
+ // and it is highly likely that the user will not want to set an aspect ratio
+ // for all three at once. Until there is the ability to set a different aspect
+ // ratio for each variation, we disable the aspect ratio controls for the
+ // grouping block in global styles.
+ if ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {
+ settings.dimensions.aspectRatio = false;
+ }
+
const blockVariations = useBlockVariations( name );
const hasTypographyPanel = useHasTypographyPanel( settings );
const hasColorPanel = useHasColorPanel( settings );
From 7e14457ce2ec28ed2cbd8756ca85c17051284d5c Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 24 Jan 2024 11:49:07 +1100
Subject: [PATCH 14/14] Skip output of has-aspect-ratio if value isn't set
---
lib/block-supports/dimensions.php | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/lib/block-supports/dimensions.php b/lib/block-supports/dimensions.php
index 6aeaed25238712..1980faba278175 100644
--- a/lib/block-supports/dimensions.php
+++ b/lib/block-supports/dimensions.php
@@ -132,6 +132,12 @@ function gutenberg_render_dimensions_support( $block_content, $block ) {
if ( ! empty( $styles['classnames'] ) ) {
foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
+ if (
+ str_contains( $class_name, 'aspect-ratio' ) &&
+ ! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
+ ) {
+ continue;
+ }
$tags->add_class( $class_name );
}
}