prep build 6/28

bph · Jun 28, 2024 · 6f2274a · 6f2274a
2 parents 49b4052 + 540331b
commit 6f2274a
Show file tree

Hide file tree

Showing 21 changed files with 250 additions and 264 deletions.
diff --git a/docs/reference-guides/interactivity-api/api-reference.md b/docs/reference-guides/interactivity-api/api-reference.md
@@ -220,10 +220,36 @@ The `wp-class` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-class` directive references a callback to get its final boolean value, the callback receives the class name: `className`.
-
 The boolean value received by the directive is used to toggle (add when `true` or remove when `false`) the associated class name from the `class` attribute.
 
+It's important to note that when using the `wp-class` directive, it's recommended to use kebab-case for class names instead of camelCase. This is because HTML attributes are not case-sensitive, and HTML will treat `data-wp-class--isDark` the same as `data-wp-class--isdark` or `DATA-WP-CLASS--ISDARK`.
+
+So, for example, use the class name `is-dark` instead of `isDark` and `data-wp-class--is-dark` instead of `data-wp-class--isDark`:
+
+```html
+<!-- Recommended -->
+<div data-wp-class--is-dark="context.isDarkMode">
+  <!-- ... -->
+</div>
+
+<!-- Not recommended -->
+<div data-wp-class--isDark="context.isDarkMode">
+  <!-- ... -->
+</div>
+```
+
+```css
+/* Recommended */
+.is-dark {
+  /* ... */
+}
+
+/* Not recommended */
+.isDark {
+  /* ... */
+}
+```
+
 ### `wp-style`
 
 This directive adds or removes inline style to an HTML element, depending on its value. It follows the syntax `data-wp-style--css-property`.
@@ -256,8 +282,6 @@ The `wp-style` directive is executed:
 - When the element is created
 - Each time there's a change on any of the properties of the `state` or `context` involved in getting the final value of the directive (inside the callback or the expression passed as reference)
 
-When `wp-style` directive references a callback to get its final value, the callback receives the class style property: `css-property`.
-
 The value received by the directive is used to add or remove the style attribute with the associated CSS property:
 
 - If the value is `false`, the style attribute is removed: `<div>`

diff --git a/packages/block-editor/src/components/dimensions-tool/index.js b/packages/block-editor/src/components/dimensions-tool/index.js
@@ -58,6 +58,7 @@ function DimensionsTool( {
 	scaleOptions, // Default options handled by ScaleTool.
 	defaultScale = 'fill', // Match CSS default value for object-fit.
 	unitsOptions, // Default options handled by UnitControl.
+	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
 } ) {
 	// Coerce undefined and CSS default values to be null.
 	const width =
@@ -92,95 +93,102 @@ function DimensionsTool( {
 
 	return (
 		<>
-			<AspectRatioTool
-				panelId={ panelId }
-				options={ aspectRatioOptions }
-				defaultValue={ defaultAspectRatio }
-				value={ aspectRatioValue }
-				onChange={ ( nextAspectRatio ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextAspectRatio =
-						nextAspectRatio === 'auto' ? null : nextAspectRatio;
-
-					setLastAspectRatio( nextAspectRatio );
-
-					// Update aspectRatio.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.aspectRatio;
-					} else {
-						nextValue.aspectRatio = nextAspectRatio;
-					}
-
-					// Auto-update scale.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					// Auto-update width and height.
-					if ( 'custom' !== nextAspectRatio && width && height ) {
-						delete nextValue.height;
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			<WidthHeightTool
-				panelId={ panelId }
-				units={ unitsOptions }
-				value={ { width, height } }
-				onChange={ ( { width: nextWidth, height: nextHeight } ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextWidth = nextWidth === 'auto' ? null : nextWidth;
-					nextHeight = nextHeight === 'auto' ? null : nextHeight;
-
-					// Update width.
-					if ( ! nextWidth ) {
-						delete nextValue.width;
-					} else {
-						nextValue.width = nextWidth;
-					}
-
-					// Update height.
-					if ( ! nextHeight ) {
-						delete nextValue.height;
-					} else {
-						nextValue.height = nextHeight;
-					}
-
-					// Auto-update aspectRatio.
-					if ( nextWidth && nextHeight ) {
-						delete nextValue.aspectRatio;
-					} else if ( lastAspectRatio ) {
-						nextValue.aspectRatio = lastAspectRatio;
-					} else {
-						// No setting defaultAspectRatio here, because
-						// aspectRatio is optional in this scenario,
-						// unlike scale.
-					}
-
-					// Auto-update scale.
-					if ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			{ showScaleControl && (
+			{ tools.includes( 'aspectRatio' ) && (
+				<AspectRatioTool
+					panelId={ panelId }
+					options={ aspectRatioOptions }
+					defaultValue={ defaultAspectRatio }
+					value={ aspectRatioValue }
+					onChange={ ( nextAspectRatio ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextAspectRatio =
+							nextAspectRatio === 'auto' ? null : nextAspectRatio;
+
+						setLastAspectRatio( nextAspectRatio );
+
+						// Update aspectRatio.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.aspectRatio;
+						} else {
+							nextValue.aspectRatio = nextAspectRatio;
+						}
+
+						// Auto-update scale.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						// Auto-update width and height.
+						if ( 'custom' !== nextAspectRatio && width && height ) {
+							delete nextValue.height;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'widthHeight' ) && (
+				<WidthHeightTool
+					panelId={ panelId }
+					units={ unitsOptions }
+					value={ { width, height } }
+					onChange={ ( { width: nextWidth, height: nextHeight } ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextWidth = nextWidth === 'auto' ? null : nextWidth;
+						nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+						// Update width.
+						if ( ! nextWidth ) {
+							delete nextValue.width;
+						} else {
+							nextValue.width = nextWidth;
+						}
+
+						// Update height.
+						if ( ! nextHeight ) {
+							delete nextValue.height;
+						} else {
+							nextValue.height = nextHeight;
+						}
+
+						// Auto-update aspectRatio.
+						if ( nextWidth && nextHeight ) {
+							delete nextValue.aspectRatio;
+						} else if ( lastAspectRatio ) {
+							nextValue.aspectRatio = lastAspectRatio;
+						} else {
+							// No setting defaultAspectRatio here, because
+							// aspectRatio is optional in this scenario,
+							// unlike scale.
+						}
+
+						// Auto-update scale.
+						if (
+							! lastAspectRatio &&
+							!! nextWidth !== !! nextHeight
+						) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'scale' ) && showScaleControl && (
 				<ScaleTool
 					panelId={ panelId }
 					options={ scaleOptions }

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -182,8 +182,7 @@ export default function Image( {
 		allowResize &&
 		hasNonContentControls &&
 		! isWideAligned &&
-		isLargeViewport &&
-		parentLayoutType !== 'grid';
+		isLargeViewport;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -405,6 +404,20 @@ export default function Image( {
 		/>
 	);
 
+	const aspectRatioControl = (
+		<DimensionsTool
+			value={ { aspectRatio } }
+			onChange={ ( { aspectRatio: newAspectRatio } ) => {
+				setAttributes( {
+					aspectRatio: newAspectRatio,
+					scale: 'cover',
+				} );
+			} }
+			defaultAspectRatio="auto"
+			tools={ [ 'aspectRatio' ] }
+		/>
+	);
+
 	const resetAll = () => {
 		setAttributes( {
 			alt: undefined,
@@ -423,7 +436,10 @@ export default function Image( {
 				resetAll={ resetAll }
 				dropdownMenuProps={ dropdownMenuProps }
 			>
-				{ isResizable && dimensionsControl }
+				{ isResizable &&
+					( parentLayoutType === 'grid'
+						? aspectRatioControl
+						: dimensionsControl ) }
 			</ToolsPanel>
 		</InspectorControls>
 	);
@@ -738,7 +754,10 @@ export default function Image( {
 							/>
 						</ToolsPanelItem>
 					) }
-					{ isResizable && dimensionsControl }
+					{ isResizable &&
+						( parentLayoutType === 'grid'
+							? aspectRatioControl
+							: dimensionsControl ) }
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
@@ -848,7 +867,7 @@ export default function Image( {
 				/>
 			</ImageWrapper>
 		);
-	} else if ( ! isResizable ) {
+	} else if ( ! isResizable || parentLayoutType === 'grid' ) {
 		img = (
 			<div style={ { width, height, aspectRatio } }>
 				<ImageWrapper href={ href }>{ img }</ImageWrapper>

diff --git a/packages/components/src/higher-order/with-spoken-messages/index.tsx b/packages/components/src/higher-order/with-spoken-messages/index.tsx
@@ -7,8 +7,7 @@ import { speak } from '@wordpress/a11y';
 /** @typedef {import('react').ComponentType} ComponentType */
 
 /**
- * A Higher Order Component used to be provide speak and debounced speak
- * functions.
+ * A Higher Order Component used to provide speak and debounced speak functions.
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
  *

diff --git a/packages/components/src/tabs/styles.ts b/packages/components/src/tabs/styles.ts
@@ -36,22 +36,20 @@ export const TabListWrapper = styled.div`
 		outline-offset: -1px;
 	}
 	&:not( [aria-orientation='vertical'] )::after {
-		left: var( --indicator-left );
 		bottom: 0;
+		left: var( --indicator-left );
 		width: var( --indicator-width );
 		height: 0;
 		border-bottom: var( --wp-admin-border-width-focus ) solid
 			${ COLORS.theme.accent };
 	}
 	&[aria-orientation='vertical']::after {
-		/* Temporarily hidden, context: https://github.com/WordPress/gutenberg/pull/60560#issuecomment-2126670072 */
-		opacity: 0;
-
-		right: 0;
+		z-index: -1;
+		left: 0;
+		width: 100%;
 		top: var( --indicator-top );
 		height: var( --indicator-height );
-		border-right: var( --wp-admin-border-width-focus ) solid
-			${ COLORS.theme.accent };
+		background-color: ${ COLORS.theme.gray[ 100 ] };
 	}
 `;
 

diff --git a/packages/compose/README.md b/packages/compose/README.md
@@ -602,7 +602,7 @@ _Returns_
 
 ### withInstanceId
 
-A Higher Order Component used to be provide a unique instance ID by component.
+A Higher Order Component used to provide a unique instance ID by component.
 
 ### withSafeTimeout
 

diff --git a/packages/compose/src/higher-order/with-instance-id/index.tsx b/packages/compose/src/higher-order/with-instance-id/index.tsx
@@ -11,8 +11,7 @@ import useInstanceId from '../../hooks/use-instance-id';
 type InstanceIdProps = { instanceId: string | number };
 
 /**
- * A Higher Order Component used to be provide a unique instance ID by
- * component.
+ * A Higher Order Component used to provide a unique instance ID by component.
  */
 const withInstanceId = createHigherOrderComponent(
 	< C extends WithInjectedProps< C, InstanceIdProps > >(