From 90e223494b2b06aaf0477773602785f57bde300d Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 19:22:53 -0600 Subject: [PATCH 01/28] Add support for aspect ratios. --- .../theme-json-reference/theme-json-living.md | 6 +++ lib/class-wp-theme-json-gutenberg.php | 17 +++++-- lib/theme.json | 45 +++++++++++++++++++ schemas/json/theme.json | 23 ++++++++++ 4 files changed, 88 insertions(+), 3 deletions(-) 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 0c852324ba59d..819c167b5744d 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -3,6 +3,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: +> > - 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). @@ -113,8 +114,11 @@ Settings related to background. Settings related to dimensions. | Property | Type | Default | Props | +<<<<<<< HEAD | --- | --- | --- |--- | | aspectRatio | boolean | false | | +| defaultAspectRatios | boolean | true | | +| aspectRatios | array | 1/1,16/9,4/3,3/2,10/16,9/16,3/4 | name, ratio, slug | | minHeight | boolean | false | | --- @@ -199,6 +203,7 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested- --- + ## Styles @@ -310,6 +315,7 @@ Sets custom CSS to apply styling not covered by other theme.json properties. --- + ## customTemplates Additional metadata for custom templates defined in the templates folder. diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 72c9057aa2af0..1b1c94f0277d7 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -123,9 +123,19 @@ class WP_Theme_JSON_Gutenberg { * @since 6.0.0 Replaced `override` with `prevent_override` and updated the * `prevent_override` value for `color.duotone` to use `color.defaultDuotone`. * @since 6.2.0 Added 'shadow' presets. + * @since 6.6.0 Added `aspectRatios`. * @var array */ const PRESETS_METADATA = array( + array( + 'path' => array( 'dimensions', 'aspectRatios' ), + 'prevent_override' => array( 'dimensions', 'defaultAspectRatios' ), + 'use_default_names' => false, + 'value_key' => 'ratio', + 'css_vars' => '--wp--preset--aspectRatio--$slug', + 'classes' => array(), + 'properties' => array( 'aspect-ratio' ), + ), array( 'path' => array( 'color', 'palette' ), 'prevent_override' => array( 'color', 'defaultPalette' ), @@ -397,8 +407,9 @@ class WP_Theme_JSON_Gutenberg { ), 'custom' => null, 'dimensions' => array( - 'aspectRatio' => null, - 'minHeight' => null, + 'aspectRatio' => null, + 'aspectRatios' => null, + 'minHeight' => null, ), 'layout' => array( 'contentSize' => null, @@ -483,7 +494,7 @@ class WP_Theme_JSON_Gutenberg { * updated `blockGap` to be allowed at any level. * @since 6.2.0 Added `outline`, and `minHeight` properties. * @since 6.6.0 Added `background` sub properties to top-level only. - * + * @since 6.6.0 Added `dimensions.aspectRatio`. * @var array */ const VALID_STYLES = array( diff --git a/lib/theme.json b/lib/theme.json index 90a5d975e68d6..25fc084616a5b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -190,6 +190,51 @@ ], "text": true }, + "dimensions": { + "defaultAspectRatios": false, + "aspectRatio": [ + { + "name": "1:1", + "slug": "1-1", + "ratio": "1/1" + }, + { + "name": "16:10", + "slug": "16-10", + "ratio": "16/10" + }, + { + "name": "16:9", + "slug": "16-9", + "ratio": "16/9" + }, + { + "name": "4:3", + "slug": "4-3", + "ratio": "4/3" + }, + { + "name": "3:2", + "slug": "3-2", + "ratio": "3/2" + }, + { + "name": "10:16", + "slug": "10-16", + "ratio": "10/16" + }, + { + "name": "9:16", + "slug": "9-16", + "ratio": "9/16" + }, + { + "name": "3:4", + "slug": "3-4", + "ratio": "3/4" + } + ] + }, "shadow": { "defaultPresets": true, "presets": [ diff --git a/schemas/json/theme.json b/schemas/json/theme.json index ccd2ee7f2ce53..1e167610814c3 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -286,6 +286,29 @@ "type": "boolean", "default": false }, + "defaultAspectRatios": { + "description": "Allow users to choose aspect ratios from the default set of aspect ratios.", + "type": "boolean", + "default": true + }, + "aspectRatios": { + "description": "Allow users to define aspect ratios for some blocks.", + "type": "array", + "default": false, + "items": { + "type": "object", + "properties": { + "name": { + "description": "Name of the aspect ratio.", + "type": "string" + }, + "ratio": { + "description": "Aspect ratio expressed as a division or decimal.", + "type": "string" + } + } + } + }, "minHeight": { "description": "Allow users to set custom minimum height.", "type": "boolean", From 7a7c0beedca8b94828e7e8c5821782fe087219e2 Mon Sep 17 00:00:00 2001 From: Jeff Ong Date: Thu, 19 Jan 2023 16:51:08 +0800 Subject: [PATCH 02/28] Remove defaultAspectRatio false. --- lib/theme.json | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/theme.json b/lib/theme.json index 25fc084616a5b..070d7a7b35f3a 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -191,7 +191,6 @@ "text": true }, "dimensions": { - "defaultAspectRatios": false, "aspectRatio": [ { "name": "1:1", From d84e3022d7344273a34a52b335382f27ba18fa52 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 17:33:29 -0600 Subject: [PATCH 03/28] Rename 1:1 to square --- lib/theme.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index 070d7a7b35f3a..686b2c8930db9 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -193,8 +193,8 @@ "dimensions": { "aspectRatio": [ { - "name": "1:1", - "slug": "1-1", + "name": "Square", + "slug": "square", "ratio": "1/1" }, { From 5d3fb1ea9cb5a2c936d9dbe93f555cee73a5c209 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 17:37:15 -0600 Subject: [PATCH 04/28] Rename aspectRatio to aspectRatios --- lib/theme.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/theme.json b/lib/theme.json index 686b2c8930db9..224879a8762a0 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -191,7 +191,7 @@ "text": true }, "dimensions": { - "aspectRatio": [ + "aspectRatios": [ { "name": "Square", "slug": "square", From da7bd3bca80a6ed99c7f5cb8d180830806947a2a Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 17:37:28 -0600 Subject: [PATCH 05/28] Add defaultAspectRatios --- lib/theme.json | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/theme.json b/lib/theme.json index 224879a8762a0..94ec01c70dbcd 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -191,6 +191,7 @@ "text": true }, "dimensions": { + "defaultAspectRatios": true, "aspectRatios": [ { "name": "Square", From 106a1eee9b64b80afe4a12371524266b90cfa7e7 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 17:48:50 -0600 Subject: [PATCH 06/28] Add defaultAspectRatios setting --- lib/class-wp-theme-json-gutenberg.php | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1b1c94f0277d7..03defd5aa3500 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -407,9 +407,10 @@ class WP_Theme_JSON_Gutenberg { ), 'custom' => null, 'dimensions' => array( - 'aspectRatio' => null, - 'aspectRatios' => null, - 'minHeight' => null, + 'aspectRatio' => null, + 'aspectRatios' => null, + 'defaultAspectRatios' => null, + 'minHeight' => null, ), 'layout' => array( 'contentSize' => null, From a4d19dbdd5aa590ec8c5c1af15b03be7e6d1cc79 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 17:53:17 -0600 Subject: [PATCH 07/28] Add dimensions to settingPropertiesComplete --- schemas/json/theme.json | 1 + 1 file changed, 1 insertion(+) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 1e167610814c3..2cede62825e72 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -2297,6 +2297,7 @@ }, "background": {}, "color": {}, + "dimensions": {}, "layout": {}, "lightbox": {}, "spacing": {}, From 319ff9a993a23b94710a59f71d9aaf9c21c47339 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 18:24:00 -0600 Subject: [PATCH 08/28] Add dimensions.aspectRatios to PATHS_WITH_MERGE --- packages/blocks/src/api/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 08b4e084e2ec9..68877c280d4dc 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -288,6 +288,7 @@ export const __EXPERIMENTAL_PATHS_WITH_OVERRIDE = { 'color.duotone': true, 'color.gradients': true, 'color.palette': true, + 'dimensions.aspectRatios': true, 'typography.fontSizes': true, 'spacing.spacingSizes': true, }; From 2c5c27770ffc3d08c31cbff3cabaa51d3e4ade44 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 18:24:34 -0600 Subject: [PATCH 09/28] Add theme presets to aspect ratio dropdown --- .../image-editor/aspect-ratio-dropdown.js | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js index a15c9f42b9e8e..fadcb71936dae 100644 --- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js +++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js @@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import useSetting from '../use-setting'; import { POPOVER_PROPS } from './constants'; import { useImageEditingContext } from './context'; @@ -32,10 +33,26 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { ); } +function ratioToNumber( str ) { + const [ a, b, ...rest ] = str.split( '/' ).map( Number ); + if ( + a <= 0 || + b <= 0 || + Number.isNaN( a ) || + Number.isNaN( b ) || + rest.length + ) { + return NaN; + } + return b ? a / b : a; +} + export default function AspectRatioDropdown( { toggleProps } ) { const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext(); + const themeRatios = useSetting( 'dimensions.aspectRatios.theme' ) || []; + return ( + { themeRatios.length > 0 && ( + { + setAspect( newAspect ); + onClose(); + } } + value={ aspect } + aspectRatios={ themeRatios.map( + ( { name, ratio } ) => ( { + title: name, + aspect: ratioToNumber( ratio ), + } ) + ) } + /> + ) } Date: Tue, 31 Jan 2023 19:18:57 -0600 Subject: [PATCH 10/28] Configure defaultAspectRatios for aspect ratio dropdown --- .../image-editor/aspect-ratio-dropdown.js | 116 ++++++++++-------- 1 file changed, 64 insertions(+), 52 deletions(-) diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js index fadcb71936dae..f0cbfce7d5bae 100644 --- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js +++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js @@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import useSetting from '../use-setting'; +import { useSettings } from '../use-settings'; import { POPOVER_PROPS } from './constants'; import { useImageEditingContext } from './context'; @@ -51,7 +51,11 @@ export default function AspectRatioDropdown( { toggleProps } ) { const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext(); - const themeRatios = useSetting( 'dimensions.aspectRatios.theme' ) || []; + const [ themeRatios ] = + useSettings( [ 'dimensions.aspectRatios.theme' ] ) || []; + const [ showDefaultRatios ] = useSettings( [ + 'dimensions.defaultAspectRatios', + ] ); return ( { themeRatios.length > 0 && ( @@ -99,52 +107,56 @@ export default function AspectRatioDropdown( { toggleProps } ) { ) } /> ) } - { - setAspect( newAspect ); - onClose(); - } } - value={ aspect } - aspectRatios={ [ - { - title: __( '16:9' ), - aspect: 16 / 9, - }, - { - title: __( '4:3' ), - aspect: 4 / 3, - }, - { - title: __( '3:2' ), - aspect: 3 / 2, - }, - ] } - /> - { - setAspect( newAspect ); - onClose(); - } } - value={ aspect } - aspectRatios={ [ - { - title: __( '9:16' ), - aspect: 9 / 16, - }, - { - title: __( '3:4' ), - aspect: 3 / 4, - }, - { - title: __( '2:3' ), - aspect: 2 / 3, - }, - ] } - /> + { showDefaultRatios && ( + { + setAspect( newAspect ); + onClose(); + } } + value={ aspect } + aspectRatios={ [ + { + title: __( '16:9' ), + aspect: 16 / 9, + }, + { + title: __( '4:3' ), + aspect: 4 / 3, + }, + { + title: __( '3:2' ), + aspect: 3 / 2, + }, + ] } + /> + ) } + { showDefaultRatios && ( + { + setAspect( newAspect ); + onClose(); + } } + value={ aspect } + aspectRatios={ [ + { + title: __( '9:16' ), + aspect: 9 / 16, + }, + { + title: __( '3:4' ), + aspect: 3 / 4, + }, + { + title: __( '2:3' ), + aspect: 2 / 3, + }, + ] } + /> + ) } ) } From d9795827b30eb1ad4c94995fc68ef47c65e0d338 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Tue, 31 Jan 2023 19:47:51 -0600 Subject: [PATCH 11/28] Update docs --- .../theme-json-reference/theme-json-living.md | 2 +- schemas/json/theme.json | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) 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 819c167b5744d..248797891ad01 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -118,7 +118,7 @@ Settings related to dimensions. | --- | --- | --- |--- | | aspectRatio | boolean | false | | | defaultAspectRatios | boolean | true | | -| aspectRatios | array | 1/1,16/9,4/3,3/2,10/16,9/16,3/4 | name, ratio, slug | +| aspectRatios | array | | name, ratio, slug | | minHeight | boolean | false | | --- diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 2cede62825e72..949b16c8b9d6a 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -294,12 +294,15 @@ "aspectRatios": { "description": "Allow users to define aspect ratios for some blocks.", "type": "array", - "default": false, "items": { "type": "object", "properties": { "name": { - "description": "Name of the aspect ratio.", + "description": "Name of the aspect ratio preset.", + "type": "string" + }, + "slug": { + "description": "Kebab-case unique identifier for the aspect ratio preset.", "type": "string" }, "ratio": { From 4a5504bc35ae9e74039710c23dd482b515eff2f6 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Wed, 1 Feb 2023 09:15:08 -0600 Subject: [PATCH 12/28] Add comment about two-value aspect-ratio CSS --- .../src/components/image-editor/aspect-ratio-dropdown.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js index f0cbfce7d5bae..64f765bcd4a11 100644 --- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js +++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js @@ -34,6 +34,8 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { } function ratioToNumber( str ) { + // TODO: support two-value aspect ratio? + // https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values const [ a, b, ...rest ] = str.split( '/' ).map( Number ); if ( a <= 0 || From f6af1ac062b3ec6ce027ba71b397de3473b9bb8c Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 2 Feb 2023 08:51:55 -0600 Subject: [PATCH 13/28] Add missing 2:3 aspect ratio --- lib/theme.json | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/lib/theme.json b/lib/theme.json index 94ec01c70dbcd..843984449676b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -232,6 +232,11 @@ "name": "3:4", "slug": "3-4", "ratio": "3/4" + }, + { + "name": "2:3", + "slug": "2-3", + "ratio": "2/3" } ] }, From 84cb3b843c6ebcd17d8d6805b53e078f2824355e Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 2 Feb 2023 10:43:56 -0600 Subject: [PATCH 14/28] Refactor aspect ratios to come from theme.json --- .../image-editor/aspect-ratio-dropdown.js | 77 +++++++------------ 1 file changed, 29 insertions(+), 48 deletions(-) diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js index 64f765bcd4a11..3e3eb1a985bc6 100644 --- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js +++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js @@ -15,18 +15,18 @@ import { useImageEditingContext } from './context'; function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { return ( - { aspectRatios.map( ( { title, aspect } ) => ( + { aspectRatios.map( ( { name, slug, ratio } ) => ( { - onClick( aspect ); + onClick( ratio ); } } role="menuitemradio" - isSelected={ aspect === value } - icon={ aspect === value ? check : undefined } + isSelected={ ratio === value } + icon={ ratio === value ? check : undefined } > - { title } + { name } ) ) } @@ -49,12 +49,23 @@ function ratioToNumber( str ) { return b ? a / b : a; } +function presetRatioAsNumber( { ratio, ...rest } ) { + return { + ratio: ratioToNumber( ratio ), + ...rest, + }; +} + export default function AspectRatioDropdown( { toggleProps } ) { const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext(); - const [ themeRatios ] = - useSettings( [ 'dimensions.aspectRatios.theme' ] ) || []; + const [ defaultRatios ] = ( + useSettings( [ 'dimensions.aspectRatios.default' ] ) || [ [] ] + ).map( presetRatioAsNumber ); + const [ themeRatios ] = ( + useSettings( [ 'dimensions.aspectRatios.theme' ] ) || [ [] ] + ).map( presetRatioAsNumber ); const [ showDefaultRatios ] = useSettings( [ 'dimensions.defaultAspectRatios', ] ); @@ -83,12 +94,9 @@ export default function AspectRatioDropdown( { toggleProps } ) { aspect: defaultAspect, }, ...( showDefaultRatios - ? [ - { - title: __( 'Square' ), - aspect: 1, - }, - ] + ? defaultRatios.filter( + ( { ratio } ) => ratio === 1 + ) : [] ), ] } /> @@ -101,12 +109,7 @@ export default function AspectRatioDropdown( { toggleProps } ) { onClose(); } } value={ aspect } - aspectRatios={ themeRatios.map( - ( { name, ratio } ) => ( { - title: name, - aspect: ratioToNumber( ratio ), - } ) - ) } + aspectRatios={ themeRatios } /> ) } { showDefaultRatios && ( @@ -118,20 +121,9 @@ export default function AspectRatioDropdown( { toggleProps } ) { onClose(); } } value={ aspect } - aspectRatios={ [ - { - title: __( '16:9' ), - aspect: 16 / 9, - }, - { - title: __( '4:3' ), - aspect: 4 / 3, - }, - { - title: __( '3:2' ), - aspect: 3 / 2, - }, - ] } + aspectRatios={ defaultRatios.filter( + ( { ratio } ) => ratio > 1 + ) } /> ) } { showDefaultRatios && ( @@ -143,20 +135,9 @@ export default function AspectRatioDropdown( { toggleProps } ) { onClose(); } } value={ aspect } - aspectRatios={ [ - { - title: __( '9:16' ), - aspect: 9 / 16, - }, - { - title: __( '3:4' ), - aspect: 3 / 4, - }, - { - title: __( '2:3' ), - aspect: 2 / 3, - }, - ] } + aspectRatios={ defaultRatios.filter( + ( { ratio } ) => ratio < 1 + ) } /> ) } From 1c620c997a1dea5a7b63bb241e936999cfc6e7a3 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 2 Feb 2023 10:47:40 -0600 Subject: [PATCH 15/28] Move aspect-ratio-dropdown into components --- .../index.js} | 4 ++-- packages/block-editor/src/components/image-editor/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/block-editor/src/components/{image-editor/aspect-ratio-dropdown.js => aspect-ratio-dropdown/index.js} (96%) diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js similarity index 96% rename from packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js rename to packages/block-editor/src/components/aspect-ratio-dropdown/index.js index 3e3eb1a985bc6..c7623289c46d7 100644 --- a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js @@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { useSettings } from '../use-settings'; -import { POPOVER_PROPS } from './constants'; -import { useImageEditingContext } from './context'; +import { POPOVER_PROPS } from '../image-editor/constants'; +import { useImageEditingContext } from '../image-editor/context'; function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { return ( diff --git a/packages/block-editor/src/components/image-editor/index.js b/packages/block-editor/src/components/image-editor/index.js index cfd912bb2827c..0e7ecdc91232e 100644 --- a/packages/block-editor/src/components/image-editor/index.js +++ b/packages/block-editor/src/components/image-editor/index.js @@ -6,11 +6,11 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components'; /** * Internal dependencies */ +import AspectRatioDropdown from '../aspect-ratio-dropdown'; import BlockControls from '../block-controls'; import ImageEditingProvider from './context'; import Cropper from './cropper'; import ZoomDropdown from './zoom-dropdown'; -import AspectRatioDropdown from './aspect-ratio-dropdown'; import RotationButton from './rotation-button'; import FormControls from './form-controls'; From 6e0af442236c326221b99abbc9d07c334f27e89a Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 2 Feb 2023 10:48:18 -0600 Subject: [PATCH 16/28] Rename AspectGroup to AspectRatioGroup --- .../components/aspect-ratio-dropdown/index.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js index c7623289c46d7..ae3ec52b188cd 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js @@ -12,7 +12,13 @@ import { useSettings } from '../use-settings'; import { POPOVER_PROPS } from '../image-editor/constants'; import { useImageEditingContext } from '../image-editor/context'; -function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) { +function AspectRatioGroup( { + aspectRatios, + isDisabled, + label, + onClick, + value, +} ) { return ( { aspectRatios.map( ( { name, slug, ratio } ) => ( @@ -80,7 +86,7 @@ export default function AspectRatioDropdown( { toggleProps } ) { > { ( { onClose } ) => ( <> - { setAspect( newAspect ); @@ -101,7 +107,7 @@ export default function AspectRatioDropdown( { toggleProps } ) { ] } /> { themeRatios.length > 0 && ( - { @@ -113,7 +119,7 @@ export default function AspectRatioDropdown( { toggleProps } ) { /> ) } { showDefaultRatios && ( - { @@ -127,7 +133,7 @@ export default function AspectRatioDropdown( { toggleProps } ) { /> ) } { showDefaultRatios && ( - { From 2805bd9e6676f7486358443aec9147e02559b486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 09:35:55 +0200 Subject: [PATCH 17/28] run docs build --- .../reference-guides/theme-json-reference/theme-json-living.md | 3 --- 1 file changed, 3 deletions(-) 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 248797891ad01..1270e00ad956b 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -114,7 +114,6 @@ Settings related to background. Settings related to dimensions. | Property | Type | Default | Props | -<<<<<<< HEAD | --- | --- | --- |--- | | aspectRatio | boolean | false | | | defaultAspectRatios | boolean | true | | @@ -203,7 +202,6 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested- --- - ## Styles @@ -315,7 +313,6 @@ Sets custom CSS to apply styling not covered by other theme.json properties. --- - ## customTemplates Additional metadata for custom templates defined in the templates folder. From a98264bde6ba4b963e0c15605d07d0f268519913 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 11:23:26 +0200 Subject: [PATCH 18/28] fix use theme.json defined aspect ratio options in aspect ratio tools panel --- lib/theme.json | 46 +++----- .../dimensions-tool/aspect-ratio-tool.js | 108 +++++++----------- 2 files changed, 59 insertions(+), 95 deletions(-) diff --git a/lib/theme.json b/lib/theme.json index 843984449676b..49aa2abb08005 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -194,49 +194,39 @@ "defaultAspectRatios": true, "aspectRatios": [ { - "name": "Square", + "name": "Square - 1:1", "slug": "square", - "ratio": "1/1" + "ratio": "1" }, { - "name": "16:10", - "slug": "16-10", - "ratio": "16/10" - }, - { - "name": "16:9", - "slug": "16-9", - "ratio": "16/9" - }, - { - "name": "4:3", + "name": "Standard - 4:3", "slug": "4-3", "ratio": "4/3" }, { - "name": "3:2", - "slug": "3-2", - "ratio": "3/2" + "name": "Portrait - 3:4", + "slug": "3-4", + "ratio": "3/4" }, { - "name": "10:16", - "slug": "10-16", - "ratio": "10/16" + "name": "Classic - 3:2", + "slug": "3-2", + "ratio": "3/2" }, { - "name": "9:16", - "slug": "9-16", - "ratio": "9/16" + "name": "Classic Portrait - 2:3", + "slug": "2-3", + "ratio": "2/3" }, { - "name": "3:4", - "slug": "3-4", - "ratio": "3/4" + "name": "Wide - 16:9", + "slug": "16-9", + "ratio": "16/9" }, { - "name": "2:3", - "slug": "2-3", - "ratio": "2/3" + "name": "Tall - 9:16", + "slug": "9-16", + "ratio": "9/16" } ] }, 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 5ff35ae0e0c88..3141d2a5eba72 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 @@ -6,75 +6,14 @@ import { __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; - /** - * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps + * Internal dependencies */ +import { useSettings } from '../use-settings'; /** - * @type {SelectControlProps[]} + * @typedef {import('@wordpress/components/build-types/select-control/types').SelectControlProps} SelectControlProps */ -export const DEFAULT_ASPECT_RATIO_OPTIONS = [ - { - label: _x( 'Original', 'Aspect ratio option for dimensions control' ), - value: 'auto', - }, - { - label: _x( - 'Square - 1:1', - 'Aspect ratio option for dimensions control' - ), - value: '1', - }, - { - label: _x( - 'Standard - 4:3', - 'Aspect ratio option for dimensions control' - ), - value: '4/3', - }, - { - label: _x( - 'Portrait - 3:4', - 'Aspect ratio option for dimensions control' - ), - value: '3/4', - }, - { - label: _x( - 'Classic - 3:2', - 'Aspect ratio option for dimensions control' - ), - value: '3/2', - }, - { - label: _x( - 'Classic Portrait - 2:3', - 'Aspect ratio option for dimensions control' - ), - value: '2/3', - }, - { - label: _x( - 'Wide - 16:9', - 'Aspect ratio option for dimensions control' - ), - value: '16/9', - }, - { - label: _x( - 'Tall - 9:16', - 'Aspect ratio option for dimensions control' - ), - value: '9/16', - }, - { - label: _x( 'Custom', 'Aspect ratio option for dimensions control' ), - value: 'custom', - disabled: true, - hidden: true, - }, -]; /** * @callback AspectRatioToolPropsOnChange @@ -96,14 +35,49 @@ export default function AspectRatioTool( { panelId, value, onChange = () => {}, - options = DEFAULT_ASPECT_RATIO_OPTIONS, - defaultValue = DEFAULT_ASPECT_RATIO_OPTIONS[ 0 ].value, + options, + defaultValue = 'auto', hasValue, isShownByDefault = true, } ) { // Match the CSS default so if the value is used directly in CSS it will look correct in the control. const displayValue = value ?? 'auto'; + const [ defaultRatios ] = useSettings( 'dimensions.aspectRatios.default' ); + const [ themeRatios ] = useSettings( 'dimensions.aspectRatios.theme' ); + const [ showDefaultRatios ] = useSettings( + 'dimensions.defaultAspectRatios' + ); + + const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( { + label: name, + value: ratio, + } ) ); + + const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( { + label: name, + value: ratio, + } ) ); + + const aspectRatioOptions = [ + { + label: _x( + 'Original', + 'Aspect ratio option for dimensions control' + ), + value: 'auto', + }, + ...( showDefaultRatios ? defaultOptions : [] ), + ...( themeOptions ? themeOptions : [] ), + ...( options ? options : [] ), + { + label: _x( 'Custom', 'Aspect ratio option for dimensions control' ), + value: 'custom', + disabled: true, + hidden: true, + }, + ]; + return ( Date: Thu, 2 May 2024 11:31:41 +0200 Subject: [PATCH 19/28] fix casing of aspect-ratio custom property --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 03defd5aa3500..bd2b780e55a45 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -132,7 +132,7 @@ class WP_Theme_JSON_Gutenberg { 'prevent_override' => array( 'dimensions', 'defaultAspectRatios' ), 'use_default_names' => false, 'value_key' => 'ratio', - 'css_vars' => '--wp--preset--aspectRatio--$slug', + 'css_vars' => '--wp--preset--aspect-ratio--$slug', 'classes' => array(), 'properties' => array( 'aspect-ratio' ), ), From 0706296c86df8af9024527be51975d36239e5b28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 11:42:08 +0200 Subject: [PATCH 20/28] fix remove unwanted formatting change --- docs/reference-guides/theme-json-reference/theme-json-living.md | 1 - 1 file changed, 1 deletion(-) 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 1270e00ad956b..033724c821625 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -3,7 +3,6 @@ > 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: -> > - 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). From 0669c67349441d3148b4ecc5455f36d16a5a73eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 11:52:48 +0200 Subject: [PATCH 21/28] fix crop aspect ratio tools --- .../components/aspect-ratio-dropdown/index.js | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js index ae3ec52b188cd..336847f2e7b9b 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js @@ -66,15 +66,11 @@ export default function AspectRatioDropdown( { toggleProps } ) { const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext(); - const [ defaultRatios ] = ( - useSettings( [ 'dimensions.aspectRatios.default' ] ) || [ [] ] - ).map( presetRatioAsNumber ); - const [ themeRatios ] = ( - useSettings( [ 'dimensions.aspectRatios.theme' ] ) || [ [] ] - ).map( presetRatioAsNumber ); - const [ showDefaultRatios ] = useSettings( [ - 'dimensions.defaultAspectRatios', - ] ); + const [ defaultRatios ] = useSettings( 'dimensions.aspectRatios.default' ); + const [ themeRatios ] = useSettings( 'dimensions.aspectRatios.theme' ); + const [ showDefaultRatios ] = useSettings( + 'dimensions.defaultAspectRatios' + ); return ( ratio === 1 - ) + ? defaultRatios + .map( presetRatioAsNumber ) + .filter( ( { ratio } ) => ratio === 1 ) : [] ), ] } /> - { themeRatios.length > 0 && ( + { themeRatios?.length > 0 && ( ratio > 1 - ) } + aspectRatios={ defaultRatios + .map( presetRatioAsNumber ) + .filter( ( { ratio } ) => ratio > 1 ) } /> ) } { showDefaultRatios && ( @@ -141,9 +138,9 @@ export default function AspectRatioDropdown( { toggleProps } ) { onClose(); } } value={ aspect } - aspectRatios={ defaultRatios.filter( - ( { ratio } ) => ratio < 1 - ) } + aspectRatios={ defaultRatios + .map( presetRatioAsNumber ) + .filter( ( { ratio } ) => ratio < 1 ) } /> ) } From db32e9861808967601552340689cd677a9185680 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 11:59:08 +0200 Subject: [PATCH 22/28] fix tests by passing in the available aspect ratio options This was failing before because in the test case here the theme.json options are not loaded --- .../block-editor/src/components/dimensions-tool/test/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/dimensions-tool/test/index.js b/packages/block-editor/src/components/dimensions-tool/test/index.js index 6bfa2af057f7c..ec8464f67a423 100644 --- a/packages/block-editor/src/components/dimensions-tool/test/index.js +++ b/packages/block-editor/src/components/dimensions-tool/test/index.js @@ -33,6 +33,7 @@ function Example( { initialValue, onChange, ...props } ) { } } defaultScale="cover" defaultAspectRatio="auto" + aspectRatioOptions={ [ { label: '16/9', value: '16/9' } ] } value={ value } { ...props } /> From d735e52a9fd9c56e481b223b3f0ab0525210af82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 12:24:38 +0200 Subject: [PATCH 23/28] fix label in test case --- test/e2e/specs/editor/blocks/image.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index 24fff3e579f68..314834816388b 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -327,7 +327,7 @@ test.describe( 'Image', () => { await editor.clickBlockToolbarButton( 'Crop' ); await editor.clickBlockToolbarButton( 'Aspect Ratio' ); await page.click( - 'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="16:9"i]' + 'role=menu[name="Aspect Ratio"i] >> role=menuitemradio[name="Wide - 16:9"i]' ); await editor.clickBlockToolbarButton( 'Apply' ); From 001391b1a09287d798116a7e9fa1b29c05e4dffe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 13:15:17 +0200 Subject: [PATCH 24/28] fix combine multiple useSettings call into one --- .../src/components/aspect-ratio-dropdown/index.js | 6 +++--- .../src/components/dimensions-tool/aspect-ratio-tool.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js index 336847f2e7b9b..c7dbc6da302f2 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js @@ -66,9 +66,9 @@ export default function AspectRatioDropdown( { toggleProps } ) { const { isInProgress, aspect, setAspect, defaultAspect } = useImageEditingContext(); - const [ defaultRatios ] = useSettings( 'dimensions.aspectRatios.default' ); - const [ themeRatios ] = useSettings( 'dimensions.aspectRatios.theme' ); - const [ showDefaultRatios ] = useSettings( + const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings( + 'dimensions.aspectRatios.default', + 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios' ); 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 3141d2a5eba72..e58a1196f1a9c 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 @@ -43,9 +43,9 @@ export default function AspectRatioTool( { // Match the CSS default so if the value is used directly in CSS it will look correct in the control. const displayValue = value ?? 'auto'; - const [ defaultRatios ] = useSettings( 'dimensions.aspectRatios.default' ); - const [ themeRatios ] = useSettings( 'dimensions.aspectRatios.theme' ); - const [ showDefaultRatios ] = useSettings( + const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings( + 'dimensions.aspectRatios.default', + 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios' ); From 18c204517ea7f6f82b416f2e56f00355216fcbb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 13:23:59 +0200 Subject: [PATCH 25/28] add test case for ratioToNumber function --- .../components/aspect-ratio-dropdown/index.js | 2 +- .../aspect-ratio-dropdown/test/index.js | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js index c7dbc6da302f2..fc4692b545fda 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/index.js @@ -39,7 +39,7 @@ function AspectRatioGroup( { ); } -function ratioToNumber( str ) { +export function ratioToNumber( str ) { // TODO: support two-value aspect ratio? // https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values const [ a, b, ...rest ] = str.split( '/' ).map( Number ); diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js b/packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js new file mode 100644 index 0000000000000..28763a6f66093 --- /dev/null +++ b/packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { ratioToNumber } from '../'; + +test( 'ratioToNumber', () => { + expect( ratioToNumber( '1/1' ) ).toBe( 1 ); + expect( ratioToNumber( '1' ) ).toBe( 1 ); + expect( ratioToNumber( '11/11' ) ).toBe( 1 ); + expect( ratioToNumber( '16/9' ) ).toBe( 16 / 9 ); + expect( ratioToNumber( '4/3' ) ).toBe( 4 / 3 ); + expect( ratioToNumber( '3/2' ) ).toBe( 3 / 2 ); + expect( ratioToNumber( '2/1' ) ).toBe( 2 ); + expect( ratioToNumber( '1/2' ) ).toBe( 1 / 2 ); + expect( ratioToNumber( '2/3' ) ).toBe( 2 / 3 ); + expect( ratioToNumber( '3/4' ) ).toBe( 3 / 4 ); + expect( ratioToNumber( '9/16' ) ).toBe( 9 / 16 ); + expect( ratioToNumber( '1/16' ) ).toBe( 1 / 16 ); + expect( ratioToNumber( '16/1' ) ).toBe( 16 ); + expect( ratioToNumber( '1/9' ) ).toBe( 1 / 9 ); + expect( ratioToNumber( 'auto' ) ).toBe( NaN ); +} ); From 7f6223fe1c8f24eeed53b9e83a5697006201587e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 14:13:42 +0200 Subject: [PATCH 26/28] fix restore previous behavior for passing manual options --- .../components/dimensions-tool/aspect-ratio-tool.js | 3 +-- .../src/components/dimensions-tool/test/index.js | 11 ++++++++++- 2 files changed, 11 insertions(+), 3 deletions(-) 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 e58a1196f1a9c..e38a01e199b79 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 @@ -69,7 +69,6 @@ export default function AspectRatioTool( { }, ...( showDefaultRatios ? defaultOptions : [] ), ...( themeOptions ? themeOptions : [] ), - ...( options ? options : [] ), { label: _x( 'Custom', 'Aspect ratio option for dimensions control' ), value: 'custom', @@ -91,7 +90,7 @@ export default function AspectRatioTool( { From 8a3088c6f56223871f1c8c3dd193791ad4f48944 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 14:40:53 +0200 Subject: [PATCH 27/28] Move AspectRatioDropdown to Image Editor components --- .../index.js => image-editor/aspect-ratio-dropdown.js} | 4 ++-- packages/block-editor/src/components/image-editor/index.js | 2 +- .../{aspect-ratio-dropdown => image-editor}/test/index.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) rename packages/block-editor/src/components/{aspect-ratio-dropdown/index.js => image-editor/aspect-ratio-dropdown.js} (96%) rename packages/block-editor/src/components/{aspect-ratio-dropdown => image-editor}/test/index.js (93%) diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js similarity index 96% rename from packages/block-editor/src/components/aspect-ratio-dropdown/index.js rename to packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js index fc4692b545fda..3f48a634bdbce 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/index.js +++ b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js @@ -9,8 +9,8 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { useSettings } from '../use-settings'; -import { POPOVER_PROPS } from '../image-editor/constants'; -import { useImageEditingContext } from '../image-editor/context'; +import { POPOVER_PROPS } from './constants'; +import { useImageEditingContext } from './context'; function AspectRatioGroup( { aspectRatios, diff --git a/packages/block-editor/src/components/image-editor/index.js b/packages/block-editor/src/components/image-editor/index.js index 0e7ecdc91232e..133f79732bdbd 100644 --- a/packages/block-editor/src/components/image-editor/index.js +++ b/packages/block-editor/src/components/image-editor/index.js @@ -6,7 +6,7 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components'; /** * Internal dependencies */ -import AspectRatioDropdown from '../aspect-ratio-dropdown'; +import AspectRatioDropdown from './aspect-ratio-dropdown'; import BlockControls from '../block-controls'; import ImageEditingProvider from './context'; import Cropper from './cropper'; diff --git a/packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js b/packages/block-editor/src/components/image-editor/test/index.js similarity index 93% rename from packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js rename to packages/block-editor/src/components/image-editor/test/index.js index 28763a6f66093..9f0f3491667a8 100644 --- a/packages/block-editor/src/components/aspect-ratio-dropdown/test/index.js +++ b/packages/block-editor/src/components/image-editor/test/index.js @@ -1,7 +1,7 @@ /** * Internal dependencies */ -import { ratioToNumber } from '../'; +import { ratioToNumber } from '../aspect-ratio-dropdown'; test( 'ratioToNumber', () => { expect( ratioToNumber( '1/1' ) ).toBe( 1 ); From 84965529a4a1493b5fed940a5615cca4019ef850 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= Date: Thu, 2 May 2024 15:04:41 +0200 Subject: [PATCH 28/28] fix use aspect ratio options from theme.json in post featured image block --- .../post-featured-image/dimension-controls.js | 66 +++++++++---------- 1 file changed, 30 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js index b64b3299fc96b..c8e8c0005cfef 100644 --- a/packages/block-library/src/post-featured-image/dimension-controls.js +++ b/packages/block-library/src/post-featured-image/dimension-controls.js @@ -57,7 +57,13 @@ const DimensionControls = ( { setAttributes, media, } ) => { - const [ availableUnits ] = useSettings( 'spacing.units' ); + const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] = + useSettings( + 'spacing.units', + 'dimensions.aspectRatios.default', + 'dimensions.aspectRatios.theme', + 'dimensions.defaultAspectRatios' + ); const units = useCustomUnits( { availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ], } ); @@ -93,6 +99,28 @@ const DimensionControls = ( { const showScaleControl = height || ( aspectRatio && aspectRatio !== 'auto' ); + const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( { + label: name, + value: ratio, + } ) ); + + const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( { + label: name, + value: ratio, + } ) ); + + const aspectRatioOptions = [ + { + label: _x( + 'Original', + 'Aspect ratio option for dimensions control' + ), + value: 'auto', + }, + ...( showDefaultRatios ? defaultOptions : [] ), + ...( themeOptions ? themeOptions : [] ), + ]; + return ( <> setAttributes( { aspectRatio: nextAspectRatio } ) }