Rebase

WordPress · Aug 22, 2024 · d396f4d · d396f4d
2 parents bf46768 + 498ce17
commit d396f4d
Show file tree

Hide file tree

Showing 69 changed files with 1,677 additions and 1,338 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -323,6 +323,7 @@ module.exports = {
 						'FontSizePicker',
 						'FormTokenField',
 						'InputControl',
+						'LetterSpacingControl',
 						'LineHeightControl',
 						'NumberControl',
 						'RangeControl',
@@ -343,13 +344,15 @@ module.exports = {
 							'FormFileUpload should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
 					},
 					// Temporary rules until all existing components have the `__next40pxDefaultSize` prop.
-					...[ 'SelectControl' ].map( ( componentName ) => ( {
-						// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
-						selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
-						message:
-							componentName +
-							' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
-					} ) ),
+					...[ 'SelectControl', 'UnitControl' ].map(
+						( componentName ) => ( {
+							// Not strict. Allows pre-existing __next40pxDefaultSize={ false } usage until they are all manually updated.
+							selector: `JSXOpeningElement[name.name="${ componentName }"]:not(:has(JSXAttribute[name.name="__next40pxDefaultSize"])):not(:has(JSXAttribute[name.name="size"]))`,
+							message:
+								componentName +
+								' should have the `__next40pxDefaultSize` prop to opt-in to the new default size.',
+						} )
+					),
 				],
 			},
 		},

diff --git a/changelog.txt b/changelog.txt
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { dragHandle, trash } from '@wordpress/icons';
+import { dragHandle, trash, edit } from '@wordpress/icons';
 import { Button, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -77,7 +77,8 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 		canMove,
 	} = selected;
 
-	const { removeBlock } = useDispatch( blockEditorStore );
+	const { removeBlock, __unstableSetEditorMode } =
+		useDispatch( blockEditorStore );
 
 	const classNames = clsx( 'zoom-out-toolbar', {
 		'is-block-moving-mode': !! blockMovingMode,
@@ -124,6 +125,18 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 			{ canMove && canRemove && (
 				<Shuffle clientId={ clientId } as={ ToolbarButton } />
 			) }
+
+			{ ! isBlockTemplatePart && (
+				<ToolbarButton
+					className="zoom-out-toolbar-button"
+					icon={ edit }
+					label={ __( 'Edit' ) }
+					onClick={ () => {
+						__unstableSetEditorMode( 'edit' );
+					} }
+				/>
+			) }
+
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton
 					className="zoom-out-toolbar-button"

diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -476,6 +476,8 @@ export default function DimensionsPanel( {
 				>
 					<HStack alignment="flex-end" justify="flex-start">
 						<UnitControl
+							// TODO: Switch to `true` (40px size) if possible (https://github.com/WordPress/gutenberg/pull/64520#discussion_r1717314262)
+							__next40pxDefaultSize={ false }
 							label={ __( 'Content' ) }
 							labelPosition="top"
 							__unstableInputWidth="80px"
@@ -504,6 +506,8 @@ export default function DimensionsPanel( {
 				>
 					<HStack alignment="flex-end" justify="flex-start">
 						<UnitControl
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							label={ __( 'Wide' ) }
 							labelPosition="top"
 							__unstableInputWidth="80px"
@@ -611,6 +615,9 @@ export default function DimensionsPanel( {
 					}
 					className={ clsx( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
+						'single-column':
+							// If UnitControl is used, should be single-column.
+							! showSpacingPresetsControl && ! isAxialGap,
 					} ) }
 					panelId={ panelId }
 				>
@@ -628,8 +635,8 @@ export default function DimensionsPanel( {
 							/>
 						) : (
 							<UnitControl
+								__next40pxDefaultSize
 								label={ __( 'Block spacing' ) }
-								__unstableInputWidth="80px"
 								min={ 0 }
 								onChange={ setGapValue }
 								units={ units }

diff --git a/packages/block-editor/src/components/letter-spacing-control/README.md b/packages/block-editor/src/components/letter-spacing-control/README.md
@@ -38,13 +38,20 @@ The current value of the letter spacing setting.
 
 A callback function invoked when the value is changed.
 
-### `_unstableInputWidth`
+### `__unstableInputWidth`
 
 -   **Type:** `string|number|undefined`
 -   **Default:** `undefined`
 
 Input width to pass through to inner UnitControl. Should be a valid CSS value.
 
+#### `__next40pxDefaultSize`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+Start opting into the larger default height that will become the default size in a future version.
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.
diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -15,14 +15,16 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}                  props                      Component props.
- * @param {string}                  props.value                Currently selected letter-spacing.
- * @param {Function}                props.onChange             Handles change in letter-spacing selection.
- * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {Object}                  props                       Component props.
+ * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
+ * @param {string}                  props.value                 Currently selected letter-spacing.
+ * @param {Function}                props.onChange              Handles change in letter-spacing selection.
+ * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
  *
  * @return {Element} Letter-spacing control.
  */
 export default function LetterSpacingControl( {
+	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -35,6 +37,7 @@ export default function LetterSpacingControl( {
 	} );
 	return (
 		<UnitControl
+			__next40pxDefaultSize={ __next40pxDefaultSize }
 			{ ...otherProps }
 			label={ __( 'Letter spacing' ) }
 			value={ value }

diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js
@@ -29,14 +29,7 @@ import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
 import { useBlockBindingsUtils } from '../utils/block-bindings';
 
-const {
-	DropdownMenuV2: DropdownMenu,
-	DropdownMenuGroupV2: DropdownMenuGroup,
-	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
-	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
-	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
-	DropdownMenuSeparatorV2: DropdownMenuSeparator,
-} = unlock( componentsPrivateApis );
+const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
@@ -60,7 +53,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 		<>
 			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
 				<Fragment key={ name }>
-					<DropdownMenuGroup>
+					<DropdownMenuV2.Group>
 						{ Object.keys( fieldsList ).length > 1 && (
 							<Text
 								className="block-editor-bindings__source-label"
@@ -72,7 +65,7 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 							</Text>
 						) }
 						{ Object.entries( fields ).map( ( [ key, value ] ) => (
-							<DropdownMenuRadioItem
+							<DropdownMenuV2.RadioItem
 								key={ key }
 								onChange={ () =>
 									updateBlockBindings( {
@@ -86,17 +79,17 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
 								value={ key }
 								checked={ key === currentKey }
 							>
-								<DropdownMenuItemLabel>
+								<DropdownMenuV2.ItemLabel>
 									{ key }
-								</DropdownMenuItemLabel>
-								<DropdownMenuItemHelpText>
+								</DropdownMenuV2.ItemLabel>
+								<DropdownMenuV2.ItemHelpText>
 									{ value }
-								</DropdownMenuItemHelpText>
-							</DropdownMenuRadioItem>
+								</DropdownMenuV2.ItemHelpText>
+							</DropdownMenuV2.RadioItem>
 						) ) }
-					</DropdownMenuGroup>
+					</DropdownMenuV2.Group>
 					{ i !== Object.keys( fieldsList ).length - 1 && (
-						<DropdownMenuSeparator />
+						<DropdownMenuV2.Separator />
 					) }
 				</Fragment>
 			) ) }
@@ -162,7 +155,7 @@ function EditableBlockBindingsPanelItems( {
 							} );
 						} }
 					>
-						<DropdownMenu
+						<DropdownMenuV2
 							placement={
 								isMobile ? 'bottom-start' : 'left-start'
 							}
@@ -182,7 +175,7 @@ function EditableBlockBindingsPanelItems( {
 								attribute={ attribute }
 								binding={ binding }
 							/>
-						</DropdownMenu>
+						</DropdownMenuV2>
 					</ToolsPanelItem>
 				);
 			} ) }

diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -75,6 +75,8 @@ export default {
 						<div className="block-editor-hooks__layout-controls">
 							<div className="block-editor-hooks__layout-controls-unit">
 								<UnitControl
+									// TODO: Switch to `true` (40px size) if possible (https://github.com/WordPress/gutenberg/pull/64520#discussion_r1717314262)
+									__next40pxDefaultSize={ false }
 									className="block-editor-hooks__layout-controls-unit-input"
 									label={ __( 'Content' ) }
 									labelPosition="top"
@@ -96,6 +98,8 @@ export default {
 							</div>
 							<div className="block-editor-hooks__layout-controls-unit">
 								<UnitControl
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									className="block-editor-hooks__layout-controls-unit-input"
 									label={ __( 'Wide' ) }
 									labelPosition="top"

diff --git a/packages/block-library/src/comment-date/index.php b/packages/block-library/src/comment-date/index.php
@@ -30,7 +30,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
 		// translators: %s: human-readable time difference.
-		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
+		$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
 	} else {
 		$formatted_date = get_comment_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $comment );
 	}

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -73,13 +73,13 @@ function CoverHeightInput( {
 
 	return (
 		<UnitControl
-			label={ __( 'Minimum height of cover' ) }
+			__next40pxDefaultSize
+			label={ __( 'Minimum height' ) }
 			id={ inputId }
 			isResetValueOnUnitChange
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -299,6 +299,7 @@ export default function CoverInspectorControls( {
 			) }
 			<InspectorControls group="dimensions">
 				<ToolsPanelItem
+					className="single-column"
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
 					onDeselect={ () =>

diff --git a/packages/block-library/src/cover/test/edit.js b/packages/block-library/src/cover/test/edit.js
@@ -372,10 +372,10 @@ describe( 'Cover block', () => {
 					} )
 				);
 				await userEvent.clear(
-					screen.getByLabelText( 'Minimum height of cover' )
+					screen.getByLabelText( 'Minimum height' )
 				);
 				await userEvent.type(
-					screen.getByLabelText( 'Minimum height of cover' ),
+					screen.getByLabelText( 'Minimum height' ),
 					'300'
 				);
 

diff --git a/packages/block-library/src/form/index.php b/packages/block-library/src/form/index.php
@@ -92,7 +92,7 @@ function block_core_form_send_email() {
 	// Start building the email content.
 	$content = sprintf(
 		/* translators: %s: The request URI. */
-		__( 'Form submission from %1$s', 'gutenberg' ) . '</br>',
+		__( 'Form submission from %1$s' ) . '</br>',
 		'<a href="' . esc_url( get_site_url( null, $params['_wp_http_referer'] ) ) . '">' . get_bloginfo( 'name' ) . '</a>'
 	);
 
@@ -110,7 +110,7 @@ function block_core_form_send_email() {
 	// Send the email.
 	$result = wp_mail(
 		str_replace( 'mailto:', '', $params['formAction'] ),
-		__( 'Form submission', 'gutenberg' ),
+		__( 'Form submission' ),
 		$content
 	);
 

diff --git a/packages/block-library/src/post-date/index.php b/packages/block-library/src/post-date/index.php
@@ -26,10 +26,10 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		$post_timestamp = get_post_timestamp( $post_ID );
 		if ( $post_timestamp > time() ) {
 			// translators: %s: human-readable time difference.
-			$formatted_date = sprintf( __( '%s from now', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+			$formatted_date = sprintf( __( '%s from now' ), human_time_diff( $post_timestamp ) );
 		} else {
 			// translators: %s: human-readable time difference.
-			$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( $post_timestamp ) );
+			$formatted_date = sprintf( __( '%s ago' ), human_time_diff( $post_timestamp ) );
 		}
 	} else {
 		$formatted_date = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
@@ -52,7 +52,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 		if ( get_the_modified_date( 'Ymdhi', $post_ID ) > get_the_date( 'Ymdhi', $post_ID ) ) {
 			if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
 				// translators: %s: human-readable time difference.
-				$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
+				$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_post_timestamp( $post_ID, 'modified' ) ) );
 			} else {
 				$formatted_date = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
 			}

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -134,8 +134,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<SelectControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
@@ -157,6 +156,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					labelPosition="top"
 					value={ height || '' }
@@ -179,6 +179,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					labelPosition="top"
 					value={ width || '' }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -15,6 +15,31 @@
 -   `ResizeableBox`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
 -   `TabPanel`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
 -   `Tabs`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
+    -   `AnglePickerControl`
+    -   `ColorPicker` (on the inputs)
+    -   `CustomSelectControl`
+    -   `CustomSelectControlV2`
+    -   `DateTimePicker` (on the selects and inputs)
+    -   `DimensionControl`
+    -   `FocalPointPicker` (on the inputs)
+    -   `FontSizePicker` (on the custom inputs)
+    -   `GradientPicker` (on the selects and inputs)
+    -   `InputControl`
+    -   `NumberControl`
+    -   `QueryControls` (on the selects and inputs)
+    -   `RangeControl` (on the inputs)
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TimePicker` (on the inputs)
+    -   `TreeSelect`
+    -   `UnitControl`
+
+### Internal
+
+-   `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)).
+-   `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)).
 
 ## 28.6.0 (2024-08-21)