@wordpress/block-editor 15.22.1 → 16.0.0

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -2,7 +2,7 @@
 
 exports[`ColorPaletteControl matches the snapshot 1`] = `
 .emotion-0 {
-  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-family: -apple-system,system-ui,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
   box-sizing: border-box;
 }
@@ -18,31 +18,8 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 1);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-4>* {
-  min-height: 0;
-}
-
-.emotion-6 {
   font-size: 11px;
-  font-weight: 499;
+  font-weight: 600;
   line-height: 1.4;
   text-transform: uppercase;
   display: block;
@@ -50,82 +27,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 3);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-8>* {
-  min-height: 0;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-10>* {
-  min-height: 0;
-}
-
-.emotion-12 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: calc(4px * 0.5);
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-12>* {
-  min-height: 0;
-}
-
-.emotion-14 {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 <div>
   <div
     class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
@@ -137,16 +38,17 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
         class="block-editor-color-gradient-control__fieldset"
       >
         <div
-          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          class="style-flex style-items-column components-flex components-h-stack components-v-stack"
           data-wp-c16t="true"
           data-wp-component="VStack"
+          style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 1); --wp-components-flex-justify: center;"
         >
           <legend>
             <div
               class="block-editor-color-gradient-control__color-indicator"
             >
               <span
-                class="components-base-control__label emotion-6 emotion-7"
+                class="components-base-control__label emotion-4 emotion-5"
               >
                 Test Color
               </span>
@@ -156,18 +58,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             class="block-editor-color-gradient-control__panel"
           >
             <div
-              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              class="style-flex style-items-column components-flex components-h-stack components-v-stack"
               data-wp-c16t="true"
               data-wp-component="VStack"
+              style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 3); --wp-components-flex-justify: center;"
             >
               <div
                 class="components-dropdown"
                 tabindex="-1"
               >
                 <div
-                  class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper emotion-10 emotion-5"
+                  class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-wrapper"
                   data-wp-c16t="true"
                   data-wp-component="VStack"
+                  style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: 0; --wp-components-flex-justify: center;"
                 >
                   <button
                     aria-expanded="false"
@@ -178,19 +82,20 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                     type="button"
                   />
                   <div
-                    class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
+                    class="style-flex style-items-column components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper"
                     data-wp-c16t="true"
                     data-wp-component="VStack"
+                    style="--wp-components-flex-align: stretch; --wp-components-flex-direction: column; --wp-components-flex-wrap: nowrap; --wp-components-flex-gap: calc(4px * 0.5); --wp-components-flex-justify: center;"
                   >
                     <span
-                      class="components-truncate components-color-palette__custom-color-name emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-name"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >
                       red
                     </span>
                     <span
-                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      class="style-truncate components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
                     >

package/src/components/colors-gradients/control.js

@@ -88,15 +88,15 @@ function ColorGradientControlInner( {
 		// The `ColorPalette` must stay at a stable position in the tree whether
 		// or not a notice is present. Wrapping it in a `VStack` only when a
 		// notice appears remounts it, which resets the custom color picker back
-		// to the swatch view mid-edit. Keep `ColorPalette` last and toggle only
-		// the notice ahead of it; the notice's own bottom margin provides the
-		// spacing the wrapper used to.
+		// to the swatch view mid-edit. Keep `ColorPalette` first and toggle only
+		// the trailing notice after it, so the palette holds a stable index and
+		// the notice sits at the bottom of the popover.
 		[ TAB_IDS.color ]: (
 			<>
+				{ colorPalette }
 				{ noticeProps && (
 					<Notice isDismissible={ false } { ...noticeProps } />
 				) }
-				{ colorPalette }
 			</>
 		),
 		[ TAB_IDS.gradient ]: (

package/src/components/colors-gradients/style.scss

@@ -68,9 +68,9 @@ $swatch-gap: 12px;
 	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }
 
-// Space the in-popover contrast notice away from the color palette below it.
+// Space the in-popover contrast notice away from the color palette above it.
 .block-editor-panel-color-gradient-settings__contrast-notice {
-	margin-bottom: $grid-unit-20;
+	margin-top: $grid-unit-20;
 }
 
 /**

package/src/components/date-format-picker/index.js

@@ -123,7 +123,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__next40pxDefaultSize
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

package/src/components/dimensions-tool/aspect-ratio-tool.js

@@ -92,7 +92,6 @@ export default function AspectRatioTool( {
 				value={ displayValue }
 				options={ options ?? aspectRatioOptions }
 				onChange={ onChange }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/dimensions-tool/scale-tool.js

@@ -109,7 +109,6 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				size="__unstable-large"
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption

package/src/components/dimensions-tool/width-height-tool.js

@@ -79,7 +79,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ width }
 					onChange={ onDimensionChange( 'width' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 			<ToolsPanelItem
@@ -98,7 +97,6 @@ export default function WidthHeightTool( {
 					min={ 0 }
 					value={ height }
 					onChange={ onDimensionChange( 'height' ) }
-					size="__unstable-large"
 				/>
 			</ToolsPanelItem>
 		</>

package/src/components/font-appearance-control/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { useMemo } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -40,8 +39,12 @@ const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
  */
 export default function FontAppearanceControl( props ) {
 	const {
-		/** Start opting into the larger default height that will become the default size in a future version. */
-		__next40pxDefaultSize = false,
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+		 */
+		__next40pxDefaultSize: _next40pxDefaultSize,
 		onChange,
 		hasFontStyles = true,
 		hasFontWeights = true,
@@ -148,27 +151,11 @@ export default function FontAppearanceControl( props ) {
 		);
 	};
 
-	if (
-		! __next40pxDefaultSize &&
-		( otherProps.size === undefined || otherProps.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontAppearanceControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				{ ...otherProps }
 				className="components-font-appearance-control"
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }

package/src/components/font-family/README.md

@@ -28,7 +28,6 @@ const MyFontFamilyControl = () => {
 			onChange={ ( newFontFamily ) => {
 				setFontFamily( newFontFamily );
 			} }
-			__next40pxDefaultSize
 		/>
 	);
 };
@@ -74,11 +73,3 @@ The current font family value.
 - Default: ''
 
 The rest of the props are passed down to the underlying `<SelectControl />` instance.
-
-#### `__next40pxDefaultSize`
-
-- Type: `boolean`
-- Required: No
-- Default: `false`
-
-Start opting into the larger default height that will become the default size in a future version.

package/src/components/font-family/index.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { CustomSelectControl } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -16,8 +15,12 @@ import { __ } from '@wordpress/i18n';
 import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
-	/** Start opting into the larger default height that will become the default size in a future version. */
-	__next40pxDefaultSize = false,
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 */
+	__next40pxDefaultSize: _next40pxDefaultSize,
 	value = '',
 	onChange,
 	fontFamilies,
@@ -45,26 +48,10 @@ export default function FontFamilyControl( {
 		} ) ),
 	];
 
-	if (
-		! __next40pxDefaultSize &&
-		( props.size === undefined || props.size === 'default' )
-	) {
-		deprecated(
-			`36px default size for wp.blockEditor.__experimentalFontFamilyControl`,
-			{
-				since: '6.8',
-				version: '7.1',
-				hint: 'Set the `__next40pxDefaultSize` prop to true to start opting into the new default size, which will become the default in a future version.',
-			}
-		);
-	}
-
 	const selectedValue =
 		options.find( ( option ) => option.key === value ) ?? '';
 	return (
 		<CustomSelectControl
-			__next40pxDefaultSize={ __next40pxDefaultSize }
-			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font' ) }
 			value={ selectedValue }
 			onChange={ ( { selectedItem } ) => onChange( selectedItem.key ) }

package/src/components/font-family/stories/index.story.jsx

@@ -44,11 +44,10 @@ export const Default = {
 			},
 			{
 				fontFamily:
-					'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
+					'-apple-system,system-ui,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 				name: 'System Font',
 				slug: 'system-font',
 			},
 		],
-		__next40pxDefaultSize: true,
 	},
 };

package/src/components/font-sizes/font-size-picker.js

@@ -19,7 +19,6 @@ function FontSizePicker( props ) {
 			{ ...props }
 			fontSizes={ fontSizes }
 			disableCustomFontSizes={ ! customFontSize }
-			__next40pxDefaultSize
 		/>
 	);
 }

package/src/components/global-styles/border-panel.js

@@ -279,7 +279,6 @@ export default function BorderPanel( {
 						popoverPlacement="left-start"
 						value={ border }
 						__experimentalIsRenderedInSidebar
-						size="__unstable-large"
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }
 					/>

package/src/components/global-styles/dimensions-panel.js

@@ -544,7 +544,6 @@ export default function DimensionsPanel( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label={ __( 'Content width' ) }
 						labelPosition="top"
 						value={ contentSizeValue || '' }
@@ -571,7 +570,6 @@ export default function DimensionsPanel( {
 					panelId={ panelId }
 				>
 					<UnitControl
-						__next40pxDefaultSize
 						label={ __( 'Wide width' ) }
 						labelPosition="top"
 						value={ wideSizeValue || '' }
@@ -710,7 +708,6 @@ export default function DimensionsPanel( {
 							/>
 						) : (
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
 								min={ 0 }
 								onChange={ setGapValue }

package/src/components/global-styles/state-control-badges.js

@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
-import { Stack } from '@wordpress/ui';
+import { __, sprintf } from '@wordpress/i18n';
+import { Stack, Tooltip, VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -30,6 +31,11 @@ export default function StateControlBadges( {
 		activeStates.push( {
 			key: `viewport-${ selectedViewport.value }`,
 			label: selectedViewport.label,
+			tooltipText: sprintf(
+				/* translators: %s: viewport name, e.g. "Tablet". */
+				__( 'Style changes apply to the %s viewport.' ),
+				selectedViewport.label
+			),
 		} );
 	}
 
@@ -37,6 +43,11 @@ export default function StateControlBadges( {
 		activeStates.push( {
 			key: `pseudo-${ selectedPseudoState.value }`,
 			label: selectedPseudoState.label,
+			tooltipText: sprintf(
+				/* translators: %s: pseudo state name, e.g. "Hover". */
+				__( 'Style changes apply to the %s state.' ),
+				selectedPseudoState.label
+			),
 		} );
 	}
 
@@ -48,11 +59,39 @@ export default function StateControlBadges( {
 			gap="xs"
 			wrap="wrap"
 		>
-			{ activeStates.map( ( state ) => (
-				<WCBadge key={ state.key } intent="info">
-					{ state.label }
-				</WCBadge>
-			) ) }
+			{ activeStates.map( ( state ) => {
+				const badge = (
+					<WCBadge
+						key={ state.key }
+						className="block-editor-global-styles-state-control__badge"
+						intent="info"
+					>
+						{ state.label }
+						{ !! state.tooltipText && (
+							<VisuallyHidden render={ <span /> }>
+								{ state.tooltipText }
+							</VisuallyHidden>
+						) }
+					</WCBadge>
+				);
+
+				if ( ! state.tooltipText ) {
+					return badge;
+				}
+
+				return (
+					<Tooltip.Root key={ state.key }>
+						<Tooltip.Trigger
+							render={
+								<span className="block-editor-global-styles-state-control__badge-tooltip-trigger">
+									{ badge }
+								</span>
+							}
+						/>
+						<Tooltip.Popup>{ state.tooltipText }</Tooltip.Popup>
+					</Tooltip.Root>
+				);
+			} ) }
 		</Stack>
 	);
 }

package/src/components/global-styles/style.scss

@@ -32,6 +32,11 @@
 	min-height: $grid-unit-30;
 }
 
+.block-editor-global-styles-state-control__badge-tooltip-trigger {
+	display: inline-flex;
+	max-width: 100%;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;

package/src/components/global-styles/test/state-control-badges.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import StateControlBadges from '../state-control-badges';
+
+jest.mock( '@wordpress/ui', () => {
+	const actual = jest.requireActual( '@wordpress/ui' );
+
+	return {
+		...actual,
+		Tooltip: {
+			Root: ( { children } ) => <>{ children }</>,
+			Trigger: ( { render: trigger } ) => trigger,
+			Popup: ( { children } ) => <span role="tooltip">{ children }</span>,
+		},
+	};
+} );
+
+describe( 'StateControlBadges', () => {
+	const viewportStates = [ { value: '@tablet', label: 'Tablet' } ];
+	const pseudoStates = [ { value: ':hover', label: 'Hover' } ];
+
+	it( 'explains viewport badges with a tooltip', () => {
+		render(
+			<StateControlBadges
+				viewportStates={ viewportStates }
+				viewportValue="@tablet"
+			/>
+		);
+
+		const badge = screen.getByText( 'Tablet' );
+		expect( badge ).toBeVisible();
+		// The explanation is also embedded in the badge, visually hidden, so
+		// screen reader users perceive it without relying on the tooltip.
+		expect( badge ).toHaveTextContent(
+			'Style changes apply to the Tablet viewport.'
+		);
+		expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent(
+			'Style changes apply to the Tablet viewport.'
+		);
+	} );
+
+	it( 'explains pseudo state badges with a tooltip', () => {
+		render(
+			<StateControlBadges
+				pseudoStates={ pseudoStates }
+				pseudoStateValue=":hover"
+			/>
+		);
+
+		const badge = screen.getByText( 'Hover' );
+		expect( badge ).toBeVisible();
+		expect( badge ).toHaveTextContent(
+			'Style changes apply to the Hover state.'
+		);
+		expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent(
+			'Style changes apply to the Hover state.'
+		);
+	} );
+} );

package/src/components/global-styles/typography-panel.js

@@ -605,7 +605,6 @@ export default function TypographyPanel( {
 						fontFamilies={ fontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -625,7 +624,6 @@ export default function TypographyPanel( {
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -646,7 +644,6 @@ export default function TypographyPanel( {
 						hasFontStyles={ hasFontStyles }
 						hasFontWeights={ hasFontWeights }
 						fontFamilyFaces={ fontFamilyFaces }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -663,7 +660,6 @@ export default function TypographyPanel( {
 						__unstableInputWidth="auto"
 						value={ lineHeight }
 						onChange={ setLineHeight }
-						size="__unstable-large"
 					/>
 				</ToolsPanelItem>
 			) }
@@ -679,7 +675,6 @@ export default function TypographyPanel( {
 					<LetterSpacingControl
 						value={ letterSpacing }
 						onChange={ setLetterSpacing }
-						size="__unstable-large"
 						__unstableInputWidth="auto"
 					/>
 				</ToolsPanelItem>
@@ -695,7 +690,6 @@ export default function TypographyPanel( {
 					<TextIndentControl
 						value={ textIndent }
 						onChange={ setTextIndentValue }
-						size="__unstable-large"
 						__unstableInputWidth="auto"
 						withSlider
 						hasBottomMargin={ isGlobalStyles }
@@ -724,7 +718,6 @@ export default function TypographyPanel( {
 						max={ MAX_TEXT_COLUMNS }
 						min={ MIN_TEXT_COLUMNS }
 						onChange={ setTextColumns }
-						size="__unstable-large"
 						spinControls="custom"
 						value={ textColumns }
 						initialPosition={ 1 }

package/src/components/height-control/index.js

@@ -164,7 +164,6 @@ export default function HeightControl( {
 						onChange={ onChange }
 						onUnitChange={ handleUnitChange }
 						min={ 0 }
-						size="__unstable-large"
 						label={ label }
 						hideLabelFromVision
 					/>
@@ -172,7 +171,6 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
-							__next40pxDefaultSize
 							value={ customRangeValue }
 							min={ 0 }
 							max={

package/src/components/html-element-control/index.js

@@ -88,7 +88,6 @@ export default function HTMLElementControl( {
 	return (
 		<VStack spacing={ 2 } className="block-editor-html-element-control">
 			<SelectControl
-				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ modifiedOptions }
 				value={ tagName }