Merge branch 'trunk' into fix/font-size-picker-docs-units

WordPress · Apr 23, 2024 · b21c7dd · b21c7dd
2 parents 4dd9f0c + 14db362
commit b21c7dd
Show file tree

Hide file tree

Showing 44 changed files with 596 additions and 766 deletions.
diff --git a/bin/packages/lint-staged-typecheck.js b/bin/packages/lint-staged-typecheck.js
@@ -28,9 +28,11 @@ const changedPackages = [
 	fs.existsSync( path.join( packageRoot, 'tsconfig.json' ) )
 );
 
-try {
-	execa.sync( tscPath, [ '--build', ...changedPackages ] );
-} catch ( err ) {
-	console.error( err.stdout );
-	process.exitCode = 1;
+if ( changedPackages.length > 0 ) {
+	try {
+		execa.sync( tscPath, [ '--build', ...changedPackages ] );
+	} catch ( err ) {
+		console.error( err.stdout );
+		process.exitCode = 1;
+	}
 }
diff --git a/docs/reference-guides/data/data-core.md b/docs/reference-guides/data/data-core.md
@@ -178,7 +178,7 @@ _Parameters_
 
 _Returns_
 
--   `undefined< EntityRecord > | undefined`: The entity record, merged with its edits.
+-   `undefined< EntityRecord > | false`: The entity record, merged with its edits.
 
 ### getEmbedPreview
 

diff --git a/lib/compat/wordpress-6.6/post.php b/lib/compat/wordpress-6.6/post.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds support for excerpt to the wp_block post type.
+ */
+function gutenberg_add_excerpt_support_to_wp_block() {
+	add_post_type_support( 'wp_block', 'excerpt' );
+}
+
+add_action( 'init', 'gutenberg_add_excerpt_support_to_wp_block' );
diff --git a/lib/load.php b/lib/load.php
@@ -131,6 +131,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.6/option.php';
 require __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
 require __DIR__ . '/compat/wordpress-6.6/rest-api.php';
+require __DIR__ . '/compat/wordpress-6.6/post.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -64,7 +64,7 @@ const expanded = ( state, action ) => {
 	return state;
 };
 
-export const BLOCK_LIST_ITEM_HEIGHT = 36;
+export const BLOCK_LIST_ITEM_HEIGHT = 32;
 
 /** @typedef {import('react').ComponentType} ComponentType */
 /** @typedef {import('react').Ref<HTMLElement>} Ref */

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -156,13 +156,13 @@
 
 	&.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(-36px);
+		transform: translateY(-32px);
 		@include reduce-motion("transition");
 	}
 
 	&.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(36px);
+		transform: translateY(32px);
 		@include reduce-motion("transition");
 	}
 
@@ -172,20 +172,20 @@
 	// worth of space for the visual indicator of where a block will be placed when dropped.
 	&.is-after-dragged-blocks {
 		transition: transform 0.2s;
-		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
 		transform:
-			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
 			-1));
 		@include reduce-motion("transition");
 	}
@@ -204,15 +204,15 @@
 		z-index: -9999;
 	}
 
-	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
+	// List View renders a fixed number of items and relies on each item having a fixed height of 32px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
 		width: 100%;
-		height: auto;
-		padding: ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) 0;
+		height: $grid-unit-40;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		border-radius: $radius-block-ui;
 		position: relative;
@@ -277,15 +277,14 @@
 	}
 
 	.block-editor-block-icon {
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-10 * 0.5; // 6px.
 		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell,
 	.block-editor-list-view-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
+		padding: 0;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -316,7 +315,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -379,8 +378,10 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
+	// Style lock and position icons in line with image previews.
+	.block-editor-list-view-block-select-button__label-wrapper svg {
+		left: $grid-unit-05 * 0.5; // 2px.
+		position: relative;
 	}
 
 	.block-editor-list-view-block-select-button__title {
@@ -464,21 +465,12 @@ $block-navigation-max-indent: 8;
 // Chevron container metrics.
 .block-editor-list-view__expander {
 	height: $icon-size;
-	margin-left: $grid-unit-05;
 	width: $icon-size;
 	cursor: pointer;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left:
-		($icon-size) * $block-navigation-max-indent + 4 *
-		($block-navigation-max-indent - 1);
-}
-
-.block-editor-list-view-leaf:not([aria-level="1"]) {
-	.block-editor-list-view__expander {
-		margin-right: 4px;
-	}
+	margin-left: ($grid-unit-30 * $block-navigation-max-indent);
 }
 
 // When updating the margin for each indentation level, the corresponding
@@ -488,9 +480,9 @@ $block-navigation-max-indent: 8;
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
 	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+			margin-left: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
 		} @else {
-			margin-left: ($icon-size * $i);
+			margin-left: 0;
 		}
 	}
 }
@@ -540,7 +532,7 @@ svg {
 
 	.block-editor-list-view-drop-indicator__line {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		height: 36px;
+		height: 32px;
 		border-radius: 4px;
 		overflow: hidden;
 	}
@@ -553,7 +545,7 @@ svg {
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
-	height: 36px;
+	height: 32px;
 }
 
 .list-view-appender .block-editor-inserter__toggle {

diff --git a/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js b/packages/block-editor/src/components/list-view/use-list-view-drop-zone.js
@@ -62,7 +62,7 @@ import { store as blockEditorStore } from '../../store';
 
 // When the indentation level, the corresponding left margin in `style.scss`
 // must be updated as well to ensure the drop zone is aligned with the indentation.
-export const NESTING_LEVEL_INDENTATION = 28;
+export const NESTING_LEVEL_INDENTATION = 24;
 
 /**
  * Determines whether the user is positioning the dragged block to be

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,6 +10,11 @@
 
 -   `SlotFill`: fixed missing `getServerSnapshot` parameter in slot map ([#60943](https://github.com/WordPress/gutenberg/pull/60943)).
 
+### Enhancements
+
+-   `DropZone`: Avoid a media query on mount [#60546](https://github.com/WordPress/gutenberg/pull/60546)).
+-   `ComboboxControl`: Simplify string normalization ([#60893](https://github.com/WordPress/gutenberg/pull/60893)).
+
 ### Internal
 
 -   `FontSizerPicker`: Improve docs for default units ([#60996](https://github.com/WordPress/gutenberg/pull/60996)).

diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx
@@ -25,6 +25,71 @@ import {
 import type { DropType, DropZoneProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
+const backdrop = {
+	hidden: { opacity: 0 },
+	show: {
+		opacity: 1,
+		transition: {
+			type: 'tween',
+			duration: 0.2,
+			delay: 0,
+			delayChildren: 0.1,
+		},
+	},
+	exit: {
+		opacity: 0,
+		transition: {
+			duration: 0.2,
+			delayChildren: 0,
+		},
+	},
+};
+
+const foreground = {
+	hidden: { opacity: 0, scale: 0.9 },
+	show: {
+		opacity: 1,
+		scale: 1,
+		transition: {
+			duration: 0.1,
+		},
+	},
+	exit: { opacity: 0, scale: 0.9 },
+};
+
+function DropIndicator( { label }: { label?: string } ) {
+	const disableMotion = useReducedMotion();
+	const children = (
+		<motion.div
+			variants={ backdrop }
+			initial={ disableMotion ? 'show' : 'hidden' }
+			animate="show"
+			exit={ disableMotion ? 'show' : 'exit' }
+			className="components-drop-zone__content"
+			// Without this, when this div is shown,
+			// Safari calls a onDropZoneLeave causing a loop because of this bug
+			// https://bugs.webkit.org/show_bug.cgi?id=66547
+			style={ { pointerEvents: 'none' } }
+		>
+			<motion.div variants={ foreground }>
+				<Icon
+					icon={ upload }
+					className="components-drop-zone__content-icon"
+				/>
+				<span className="components-drop-zone__content-text">
+					{ label ? label : __( 'Drop files to upload' ) }
+				</span>
+			</motion.div>
+		</motion.div>
+	);
+
+	if ( disableMotion ) {
+		return children;
+	}
+
+	return <AnimatePresence>{ children }</AnimatePresence>;
+}
+
 /**
  * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
  *
@@ -116,67 +181,6 @@ export function DropZoneComponent( {
 			setIsDraggingOverElement( false );
 		},
 	} );
-	const disableMotion = useReducedMotion();
-
-	let children;
-	const backdrop = {
-		hidden: { opacity: 0 },
-		show: {
-			opacity: 1,
-			transition: {
-				type: 'tween',
-				duration: 0.2,
-				delay: 0,
-				delayChildren: 0.1,
-			},
-		},
-		exit: {
-			opacity: 0,
-			transition: {
-				duration: 0.2,
-				delayChildren: 0,
-			},
-		},
-	};
-
-	const foreground = {
-		hidden: { opacity: 0, scale: 0.9 },
-		show: {
-			opacity: 1,
-			scale: 1,
-			transition: {
-				duration: 0.1,
-			},
-		},
-		exit: { opacity: 0, scale: 0.9 },
-	};
-
-	if ( isDraggingOverElement ) {
-		children = (
-			<motion.div
-				variants={ backdrop }
-				initial={ disableMotion ? 'show' : 'hidden' }
-				animate="show"
-				exit={ disableMotion ? 'show' : 'exit' }
-				className="components-drop-zone__content"
-				// Without this, when this div is shown,
-				// Safari calls a onDropZoneLeave causing a loop because of this bug
-				// https://bugs.webkit.org/show_bug.cgi?id=66547
-				style={ { pointerEvents: 'none' } }
-			>
-				<motion.div variants={ foreground }>
-					<Icon
-						icon={ upload }
-						className="components-drop-zone__content-icon"
-					/>
-					<span className="components-drop-zone__content-text">
-						{ label ? label : __( 'Drop files to upload' ) }
-					</span>
-				</motion.div>
-			</motion.div>
-		);
-	}
-
 	const classes = classnames( 'components-drop-zone', className, {
 		'is-active':
 			( isDraggingOverDocument || isDraggingOverElement ) &&
@@ -190,11 +194,7 @@ export function DropZoneComponent( {
 
 	return (
 		<div { ...restProps } ref={ ref } className={ classes }>
-			{ disableMotion ? (
-				children
-			) : (
-				<AnimatePresence>{ children }</AnimatePresence>
-			) }
+			{ isDraggingOverElement && <DropIndicator label={ label } /> }
 		</div>
 	);
 }