Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add aspect ratio presets support via theme.json #47271

Merged
merged 28 commits into from
May 7, 2024
Merged

Add aspect ratio presets support via theme.json #47271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
90e2234
Add support for aspect ratios.
Feb 1, 2023
7a7c0be
Remove defaultAspectRatio false.
jffng Jan 19, 2023
d84e302
Rename 1:1 to square
Jan 31, 2023
5d3fb1e
Rename aspectRatio to aspectRatios
Jan 31, 2023
da7bd3b
Add defaultAspectRatios
Jan 31, 2023
106a1ee
Add defaultAspectRatios setting
Jan 31, 2023
a4d19db
Add dimensions to settingPropertiesComplete
Jan 31, 2023
319ff9a
Add dimensions.aspectRatios to PATHS_WITH_MERGE
Feb 1, 2023
2c5c277
Add theme presets to aspect ratio dropdown
Feb 1, 2023
b994e40
Configure defaultAspectRatios for aspect ratio dropdown
Feb 1, 2023
d979582
Update docs
Feb 1, 2023
4a5504b
Add comment about two-value aspect-ratio CSS
Feb 1, 2023
f6af1ac
Add missing 2:3 aspect ratio
Feb 2, 2023
84cb3b8
Refactor aspect ratios to come from theme.json
Feb 2, 2023
1c620c9
Move aspect-ratio-dropdown into components
Feb 2, 2023
6e0af44
Rename AspectGroup to AspectRatioGroup
Feb 2, 2023
2805bd9
run docs build
fabiankaegy May 2, 2024
a98264b
fix use theme.json defined aspect ratio options in aspect ratio tools…
fabiankaegy May 2, 2024
5047066
fix casing of aspect-ratio custom property
fabiankaegy May 2, 2024
0706296
fix remove unwanted formatting change
fabiankaegy May 2, 2024
0669c67
fix crop aspect ratio tools
fabiankaegy May 2, 2024
db32e98
fix tests by passing in the available aspect ratio options
fabiankaegy May 2, 2024
d735e52
fix label in test case
fabiankaegy May 2, 2024
001391b
fix combine multiple useSettings call into one
fabiankaegy May 2, 2024
18c2045
add test case for ratioToNumber function
fabiankaegy May 2, 2024
7f6223f
fix restore previous behavior for passing manual options
fabiankaegy May 2, 2024
8a3088c
Move AspectRatioDropdown to Image Editor components
fabiankaegy May 2, 2024
8496552
fix use aspect ratio options from theme.json in post featured image b…
fabiankaegy May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/reference-guides/theme-json-reference/theme-json-living.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ Settings related to dimensions.
| Property | Type | Default | Props |
| --- | --- | --- |--- |
| aspectRatio | boolean | false | |
| defaultAspectRatios | boolean | true | |
| aspectRatios | array | | name, ratio, slug |
| minHeight | boolean | false | |

---
Expand Down
18 changes: 15 additions & 3 deletions lib/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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--aspect-ratio--$slug',
'classes' => array(),
'properties' => array( 'aspect-ratio' ),
),
Comment on lines +130 to +138
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wanted to add just the settings for the image block aspect ratio tool in this PR, but it seems that the UI is coupled to the preset generation. So, even though this generated CSS isn't used, it had to be added to get the UI to work.

I don't think it's too big of a deal since we would add those presets for the aspect-ratio property anyway for the featured image in a follow-up, but it certainly surprised me that the code was coupled this way.

array(
'path' => array( 'color', 'palette' ),
'prevent_override' => array( 'color', 'defaultPalette' ),
Expand Down Expand Up @@ -397,8 +407,10 @@ class WP_Theme_JSON_Gutenberg {
),
'custom' => null,
'dimensions' => array(
'aspectRatio' => null,
'minHeight' => null,
'aspectRatio' => null,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unrelated: I noticed that you can't disable aspect ration for Image block using this setting. cc @draganescu

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was it supposed to be 😄 What is the expected behaviour here:

  • does setting dimensions ≻ aspect ratio ≻ null disable the aspect ratio tools somewhere else?
  • should it disappear from the UI of the image block? It does not appear in styles, but in settings, whereas for the cover block the UI appears in styles not in settings. What's preffered?
  • should it be null or false? When I set theme.json ≻ settings ≻ dimensions ≻ aspectRatio the editor says it should be bool

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The initial null value is how theme json defines flag settings, and it's not important at the moment.

Setting it to false disables the aspect ratio UI for blocks. You can test it with the Cover block. I think behavior should be consistent across the blocks that use aspect ratio control.

cc @andrewserong

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, indeed setting to false hides this dimension tool from the cover block but it does not hide it from the image block. The reason is that the cover block uses the supports while the image block plops the control in the inspector.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I'm aware of that. Still, the behavior should be consistent.

@fabiankaegy, do you mind creating an issue for the Image and Featured Image block follow-ups we discussed in Slack?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. I'm aware of that.

I knew that, you told me where to look! 😂 I mentioned here for archaeology reasons.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created a follow up issue for the aspect ratio block support cleanup: #61432

'aspectRatios' => null,
'defaultAspectRatios' => null,
'minHeight' => null,
),
'layout' => array(
'contentSize' => null,
Expand Down Expand Up @@ -483,7 +495,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(
Expand Down
40 changes: 40 additions & 0 deletions lib/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,46 @@
],
"text": true
},
"dimensions": {
"defaultAspectRatios": true,
"aspectRatios": [
fabiankaegy marked this conversation as resolved.
Show resolved Hide resolved
{
"name": "Square - 1:1",
"slug": "square",
"ratio": "1"
},
{
"name": "Standard - 4:3",
"slug": "4-3",
"ratio": "4/3"
},
{
"name": "Portrait - 3:4",
"slug": "3-4",
"ratio": "3/4"
},
{
"name": "Classic - 3:2",
"slug": "3-2",
"ratio": "3/2"
},
{
"name": "Classic Portrait - 2:3",
"slug": "2-3",
"ratio": "2/3"
},
{
"name": "Wide - 16:9",
"slug": "16-9",
"ratio": "16/9"
},
{
"name": "Tall - 9:16",
"slug": "9-16",
"ratio": "9/16"
}
]
},
"shadow": {
"defaultPresets": true,
"presets": [
Expand Down
107 changes: 40 additions & 67 deletions packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -96,14 +35,48 @@ 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, themeRatios, showDefaultRatios ] = useSettings(
'dimensions.aspectRatios.default',
'dimensions.aspectRatios.theme',
'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 : [] ),
{
label: _x( 'Custom', 'Aspect ratio option for dimensions control' ),
value: 'custom',
disabled: true,
hidden: true,
},
];

return (
<ToolsPanelItem
hasValue={
Expand All @@ -117,7 +90,7 @@ export default function AspectRatioTool( {
<SelectControl
label={ __( 'Aspect ratio' ) }
value={ displayValue }
options={ options }
options={ options ?? aspectRatioOptions }
onChange={ onChange }
size={ '__unstable-large' }
__nextHasNoMarginBottom
Expand Down
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/dimensions-tool/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,16 @@ function Example( { initialValue, onChange, ...props } ) {
} }
defaultScale="cover"
defaultAspectRatio="auto"
aspectRatioOptions={ [
{ label: 'Original', value: 'auto' },
{ label: '16/9', value: '16/9' },
{
label: 'Custom',
value: 'custom',
disabled: true,
hidden: true,
},
] }
value={ value }
{ ...props }
/>
Expand Down
Loading
Loading