Merge branch 'trunk' into rtlcss-fix

packages/block-editor/src/components/image-size-control/index.js

@@ -139,7 +139,7 @@ export default function ImageSizeControl( {
 									value={ scale }
 									label={ sprintf(
 										/* translators: Percentage value. */
-										__( '%1$d%%' ),
+										__( '%d%%' ),
 										scale
 									) }
 								/>

packages/block-editor/src/components/list-view/block-select-button.js

@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
@@ -25,6 +26,8 @@ import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -117,12 +120,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Truncate
-							className="block-editor-list-view-block-select-button__anchor"
-							ellipsizeMode="auto"
-						>
+						<Badge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Truncate>
+						</Badge>
 					</span>
 				) }
 				{ isSticky && (

packages/block-editor/src/components/list-view/style.scss

@@ -408,15 +408,11 @@
 		position: absolute;
 		right: 0;
 		transform: translateY(-50%);
-		background: rgba($black, 0.1);
-		border-radius: $radius-x-small;
-		padding: 2px 6px;
-		max-width: 100%;
-		box-sizing: border-box;
 	}
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.3);
+		color: $white;
 	}
 
 	.block-editor-list-view-block-select-button__lock,

packages/block-editor/src/hooks/color.scss

@@ -1,12 +1,5 @@
 .color-block-support-panel {
 	.block-editor-contrast-checker {
-		/**
-		 * Contrast checkers are forced to the bottom of the panel so all
-		 * injected color controls can appear as a single item group without
-		 * the contrast checkers suddenly appearing between items.
-		 */
-		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
-		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
 

packages/block-library/src/button/edit.js

@@ -150,7 +150,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 								value={ widthValue }
 								label={ sprintf(
 									/* translators: Percentage value. */
-									__( '%1$d%%' ),
+									__( '%d%%' ),
 									widthValue
 								) }
 							/>

packages/block-library/src/navigation/edit/index.js

@@ -142,24 +142,28 @@ function ColorTools( {
 						label: __( 'Text' ),
 						onColorChange: setTextColor,
 						resetAllFilter: () => setTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: backgroundColor.color,
 						label: __( 'Background' ),
 						onColorChange: setBackgroundColor,
 						resetAllFilter: () => setBackgroundColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayTextColor.color,
 						label: __( 'Submenu & overlay text' ),
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
+						clearable: true,
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
 						label: __( 'Submenu & overlay background' ),
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

packages/block-library/src/search/edit.js

@@ -472,7 +472,7 @@ export default function SearchEdit( {
 										value={ widthValue }
 										label={ sprintf(
 											/* translators: Percentage value. */
-											__( '%1$d%%' ),
+											__( '%d%%' ),
 											widthValue
 										) }
 									/>

packages/components/src/badge/index.tsx

@@ -15,45 +15,46 @@ import type { BadgeProps } from './types';
 import type { WordPressComponentProps } from '../context';
 import Icon from '../icon';
 
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */
+function contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {
+	switch ( intent ) {
+		case 'info':
+			return info;
+		case 'success':
+			return published;
+		case 'warning':
+			return caution;
+		case 'error':
+			return error;
+		default:
+			return null;
+	}
+}
+
 function Badge( {
 	className,
 	intent = 'default',
 	children,
 	...props
 }: WordPressComponentProps< BadgeProps, 'span', false > ) {
-	/**
-	 * Returns an icon based on the badge context.
-	 *
-	 * @return The corresponding icon for the provided context.
-	 */
-	function contextBasedIcon() {
-		switch ( intent ) {
-			case 'info':
-				return info;
-			case 'success':
-				return published;
-			case 'warning':
-				return caution;
-			case 'error':
-				return error;
-			default:
-				return null;
-		}
-	}
+	const icon = contextBasedIcon( intent );
+	const hasIcon = !! icon;
 
 	return (
 		<span
-			className={ clsx(
-				'components-badge',
-				`is-${ intent }`,
-				intent !== 'default' && 'has-icon',
-				className
-			) }
+			className={ clsx( 'components-badge', className, {
+				[ `is-${ intent }` ]: intent,
+				'has-icon': hasIcon,
+			} ) }
 			{ ...props }
 		>
-			{ intent !== 'default' && (
+			{ hasIcon && (
 				<Icon
-					icon={ contextBasedIcon() }
+					icon={ icon }
 					size={ 16 }
 					fill="currentColor"
 					className="components-badge__icon"

packages/edit-site/src/components/layout/style.scss

@@ -118,7 +118,7 @@
 			// This ensure the radius work properly.
 			overflow: hidden;
 
-			@media (prefers-reduced-motion: no-preference) {
+			@media not (prefers-reduced-motion) {
 				transition: border-radius, box-shadow 0.4s;
 			}
 

storybook/package-styles/block-editor-ltr.lazy.scss

@@ -1 +1 @@
-@import "../../packages/block-editor/build-style/style";
+@import "../../packages/block-editor/build-style/style.css";

storybook/package-styles/block-editor-rtl.lazy.scss

@@ -1 +1 @@
-@import "../../packages/block-editor/build-style/style-rtl";
+@import "../../packages/block-editor/build-style/style-rtl.css";

storybook/package-styles/block-library-ltr.lazy.scss

@@ -1,3 +1,3 @@
-@import "../../packages/block-library/build-style/style";
-@import "../../packages/block-library/build-style/theme";
-@import "../../packages/block-library/build-style/editor";
+@import "../../packages/block-library/build-style/style.css";
+@import "../../packages/block-library/build-style/theme.css";
+@import "../../packages/block-library/build-style/editor.css";

storybook/package-styles/block-library-rtl.lazy.scss

@@ -1,3 +1,3 @@
-@import "../../packages/block-library/build-style/style-rtl";
-@import "../../packages/block-library/build-style/theme-rtl";
-@import "../../packages/block-library/build-style/editor-rtl";
+@import "../../packages/block-library/build-style/style-rtl.css";
+@import "../../packages/block-library/build-style/theme-rtl.css";
+@import "../../packages/block-library/build-style/editor-rtl.css";

storybook/package-styles/components-ltr.lazy.scss

@@ -1 +1 @@
-@import "../../packages/components/build-style/style";
+@import "../../packages/components/build-style/style.css";

storybook/package-styles/components-rtl.lazy.scss

@@ -1 +1 @@
-@import "../../packages/components/build-style/style-rtl";
+@import "../../packages/components/build-style/style-rtl.css";

storybook/package-styles/dataviews-ltr.lazy.scss

@@ -1 +1 @@
-@import "../../packages/dataviews/build-style/style";
+@import "../../packages/dataviews/build-style/style.css";

storybook/package-styles/dataviews-rtl.lazy.scss

@@ -1 +1 @@
-@import "../../packages/dataviews/build-style/style-rtl";
+@import "../../packages/dataviews/build-style/style-rtl.css";

storybook/package-styles/edit-site-ltr.lazy.scss

@@ -1 +1 @@
-@import "../../packages/edit-site/build-style/style";
+@import "../../packages/edit-site/build-style/style.css";

storybook/package-styles/edit-site-rtl.lazy.scss

@@ -1 +1 @@
-@import "../../packages/edit-site/build-style/style-rtl";
+@import "../../packages/edit-site/build-style/style-rtl.css";

storybook/package-styles/format-library-ltr.lazy.scss

@@ -1 +1 @@
-@import "../../packages/format-library/build-style/style";
+@import "../../packages/format-library/build-style/style.css";

storybook/package-styles/format-library-rtl.lazy.scss

@@ -1 +1 @@
-@import "../../packages/format-library/build-style/style-rtl";
+@import "../../packages/format-library/build-style/style-rtl.css";