@wordpress/edit-site 6.14.0 → 6.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.14.0",
+	"version": "6.15.1",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,45 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "*",
-		"@wordpress/api-fetch": "*",
-		"@wordpress/blob": "*",
-		"@wordpress/block-editor": "*",
-		"@wordpress/block-library": "*",
-		"@wordpress/blocks": "*",
-		"@wordpress/commands": "*",
-		"@wordpress/components": "*",
-		"@wordpress/compose": "*",
-		"@wordpress/core-commands": "*",
-		"@wordpress/core-data": "*",
-		"@wordpress/data": "*",
-		"@wordpress/dataviews": "*",
-		"@wordpress/date": "*",
-		"@wordpress/deprecated": "*",
-		"@wordpress/dom": "*",
-		"@wordpress/editor": "*",
-		"@wordpress/element": "*",
-		"@wordpress/escape-html": "*",
-		"@wordpress/fields": "*",
-		"@wordpress/hooks": "*",
-		"@wordpress/html-entities": "*",
-		"@wordpress/i18n": "*",
-		"@wordpress/icons": "*",
-		"@wordpress/keyboard-shortcuts": "*",
-		"@wordpress/keycodes": "*",
-		"@wordpress/notices": "*",
-		"@wordpress/patterns": "*",
-		"@wordpress/plugins": "*",
-		"@wordpress/preferences": "*",
-		"@wordpress/primitives": "*",
-		"@wordpress/private-apis": "*",
-		"@wordpress/reusable-blocks": "*",
-		"@wordpress/router": "*",
-		"@wordpress/style-engine": "*",
-		"@wordpress/url": "*",
-		"@wordpress/viewport": "*",
-		"@wordpress/widgets": "*",
-		"@wordpress/wordcount": "*",
+		"@wordpress/a11y": "^4.15.1",
+		"@wordpress/api-fetch": "^7.15.1",
+		"@wordpress/blob": "^4.15.0",
+		"@wordpress/block-editor": "^14.10.1",
+		"@wordpress/block-library": "^9.15.1",
+		"@wordpress/blocks": "^14.4.1",
+		"@wordpress/commands": "^1.15.1",
+		"@wordpress/components": "^29.1.1",
+		"@wordpress/compose": "^7.15.1",
+		"@wordpress/core-commands": "^1.15.1",
+		"@wordpress/core-data": "^7.15.1",
+		"@wordpress/data": "^10.15.1",
+		"@wordpress/dataviews": "^4.11.1",
+		"@wordpress/date": "^5.15.1",
+		"@wordpress/deprecated": "^4.15.1",
+		"@wordpress/dom": "^4.15.1",
+		"@wordpress/editor": "^14.15.1",
+		"@wordpress/element": "^6.15.1",
+		"@wordpress/escape-html": "^3.15.0",
+		"@wordpress/fields": "^0.7.1",
+		"@wordpress/hooks": "^4.15.0",
+		"@wordpress/html-entities": "^4.15.0",
+		"@wordpress/i18n": "^5.15.1",
+		"@wordpress/icons": "^10.15.1",
+		"@wordpress/keyboard-shortcuts": "^5.15.1",
+		"@wordpress/keycodes": "^4.15.1",
+		"@wordpress/media-utils": "^5.15.1",
+		"@wordpress/notices": "^5.15.1",
+		"@wordpress/patterns": "^2.15.1",
+		"@wordpress/plugins": "^7.15.1",
+		"@wordpress/preferences": "^4.15.1",
+		"@wordpress/primitives": "^4.15.1",
+		"@wordpress/private-apis": "^1.15.0",
+		"@wordpress/reusable-blocks": "^5.15.1",
+		"@wordpress/router": "^1.15.1",
+		"@wordpress/style-engine": "^2.15.0",
+		"@wordpress/url": "^4.15.0",
+		"@wordpress/viewport": "^6.15.1",
+		"@wordpress/widgets": "^4.15.1",
+		"@wordpress/wordcount": "^4.15.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -83,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b432c18934c9db866b6dba7d37517a4e97d642e3"
+	"gitHead": "0d4503ecc364cf4ca16024673baf5a84dacf212f"
 }

package/src/components/add-new-pattern/index.js

@@ -25,7 +25,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
@@ -33,6 +33,7 @@ const { CreateTemplatePartModal } = unlock( editorPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
+	const location = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -159,13 +160,12 @@ export default function AddNewPattern() {
 						return;
 					}
 					try {
-						const {
-							params: { postType, categoryId },
-						} = history.getLocationWithParams();
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( postType !== TEMPLATE_PART_POST_TYPE ) {
+						if (
+							location.query.postType !== TEMPLATE_PART_POST_TYPE
+						) {
 							/*
 							 * categoryMap.values() returns an iterator.
 							 * Iterator.prototype.find() is not yet widely supported.
@@ -173,7 +173,10 @@ export default function AddNewPattern() {
 							 */
 							const currentCategory = Array.from(
 								categoryMap.values()
-							).find( ( term ) => term.name === categoryId );
+							).find(
+								( term ) =>
+									term.name === location.query.categoryId
+							);
 							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||
@@ -194,7 +197,7 @@ export default function AddNewPattern() {
 						// category.
 						if (
 							! currentCategoryId &&
-							categoryId !== 'my-patterns'
+							location.query.categoryId !== 'my-patterns'
 						) {
 							history.navigate(
 								`/pattern?categoryId=${ PATTERN_DEFAULT_CATEGORY }`

package/src/components/canvas-loader/style.scss

@@ -9,9 +9,10 @@
 	align-items: center;
 	justify-content: center;
 
-	animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
+		animation-fill-mode: forwards;
+	}
 
 	& > div {
 		width: 160px;

package/src/components/editor/index.js

@@ -20,7 +20,6 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -130,7 +129,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	const { postType, postId, context } = entity;
 	const {
 		supportsGlobalStyles,
-		showIconLabels,
 		editorCanvasView,
 		currentPostIsTrashed,
 		hasSiteIcon,
@@ -138,13 +136,11 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		const { getEditorCanvasContainerView } = unlock(
 			select( editSiteStore )
 		);
-		const { get } = select( preferencesStore );
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
-			showIconLabels: get( 'core', 'showIconLabels' ),
 			editorCanvasView: getEditorCanvasContainerView(),
 			currentPostIsTrashed:
 				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
@@ -267,9 +263,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					postId={ postWithTemplate ? context.postId : postId }
 					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
-					className={ clsx( 'edit-site-editor__editor-interface', {
-						'show-icon-labels': showIconLabels,
-					} ) }
+					className="edit-site-editor__editor-interface"
 					styles={ styles }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />

package/src/components/editor/style.scss

@@ -1,7 +1,9 @@
 .edit-site-editor__editor-interface {
 	opacity: 1;
-	transition: opacity 0.1s ease-out;
-	@include reduce-motion( "transition" );
+
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-out;
+	}
 
 	&.is-loading {
 		opacity: 0;

package/src/components/editor-canvas-container/style.scss

@@ -1,6 +1,10 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
 
+	// This is the gray background color that's applied behind "isolation mode".
+	// The color normally comes from .editor-visual-editor, but that class is missing here.
+	background-color: $gray-300;
+
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {
 		display: block;
@@ -22,7 +26,9 @@
 	position: absolute;
 	right: 0;
 	top: 0;
-	transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	@media not (prefers-reduced-motion) {
+		transition: all 0.3s; // Match .block-editor-iframe__body transition.
+	}
 }
 
 .edit-site-editor-canvas-container__close-button {

package/src/components/global-styles/confirm-reset-shadow-dialog.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function ConfirmResetShadowDialog( {
+	text,
+	confirmButtonText,
+	isOpen,
+	toggleOpen,
+	onConfirm,
+} ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		onConfirm();
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ confirmButtonText }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ text }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmResetShadowDialog;

package/src/components/global-styles/font-library-modal/index.js

@@ -28,7 +28,7 @@ const DEFAULT_TAB = {
 
 const UPLOAD_TAB = {
 	id: 'upload-fonts',
-	title: __( 'Upload' ),
+	title: _x( 'Upload', 'noun' ),
 };
 
 const tabsFromCollections = ( collections ) =>

package/src/components/global-styles/font-library-modal/style.scss

@@ -129,8 +129,10 @@ $footer-height: 70px;
 	.font-library-modal__font-variant_demo-text {
 		white-space: nowrap;
 		flex-shrink: 0;
-		transition: opacity 0.3s ease-in-out;
-		@include reduce-motion( "transition" );
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.3s ease-in-out;
+		}
 	}
 }
 

package/src/components/global-styles/font-sizes/font-size.js

@@ -166,25 +166,34 @@ function FontSize() {
 								marginBottom={ 0 }
 								paddingX={ 4 }
 							>
-								<Menu
-									trigger={
-										<Button
-											size="small"
-											icon={ moreVertical }
-											label={ __( 'Font size options' ) }
-										/>
-									}
-								>
-									<Menu.Item onClick={ toggleRenameDialog }>
-										<Menu.ItemLabel>
-											{ __( 'Rename' ) }
-										</Menu.ItemLabel>
-									</Menu.Item>
-									<Menu.Item onClick={ toggleDeleteConfirm }>
-										<Menu.ItemLabel>
-											{ __( 'Delete' ) }
-										</Menu.ItemLabel>
-									</Menu.Item>
+								<Menu>
+									<Menu.TriggerButton
+										render={
+											<Button
+												size="small"
+												icon={ moreVertical }
+												label={ __(
+													'Font size options'
+												) }
+											/>
+										}
+									/>
+									<Menu.Popover>
+										<Menu.Item
+											onClick={ toggleRenameDialog }
+										>
+											<Menu.ItemLabel>
+												{ __( 'Rename' ) }
+											</Menu.ItemLabel>
+										</Menu.Item>
+										<Menu.Item
+											onClick={ toggleDeleteConfirm }
+										>
+											<Menu.ItemLabel>
+												{ __( 'Delete' ) }
+											</Menu.ItemLabel>
+										</Menu.Item>
+									</Menu.Popover>
 								</Menu>
 							</Spacer>
 						</FlexItem>

package/src/components/global-styles/font-sizes/font-sizes.js

@@ -11,7 +11,6 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	FlexItem,
-	FlexBlock,
 	Button,
 } from '@wordpress/components';
 import {
@@ -27,14 +26,15 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../../lock-unlock';
-const { Menu } = unlock( componentsPrivateApis );
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import Subtitle from '../subtitle';
 import { NavigationButtonAsItem } from '../navigation-button';
 import { getNewIndexFromPresets } from '../utils';
 import ScreenHeader from '../header';
 import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
 
+const { Menu } = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
 function FontSizeGroup( {
 	label,
 	origin,
@@ -81,24 +81,31 @@ function FontSizeGroup( {
 							/>
 						) }
 						{ !! handleResetFontSizes && (
-							<Menu
-								trigger={
-									<Button
-										size="small"
-										icon={ moreVertical }
-										label={ __(
-											'Font size presets options'
-										) }
-									/>
-								}
-							>
-								<Menu.Item onClick={ toggleResetDialog }>
-									<Menu.ItemLabel>
-										{ origin === 'custom'
-											? __( 'Remove font size presets' )
-											: __( 'Reset font size presets' ) }
-									</Menu.ItemLabel>
-								</Menu.Item>
+							<Menu>
+								<Menu.TriggerButton
+									render={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __(
+												'Font size presets options'
+											) }
+										/>
+									}
+								/>
+								<Menu.Popover>
+									<Menu.Item onClick={ toggleResetDialog }>
+										<Menu.ItemLabel>
+											{ origin === 'custom'
+												? __(
+														'Remove font size presets'
+												  )
+												: __(
+														'Reset font size presets'
+												  ) }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								</Menu.Popover>
 							</Menu>
 						) }
 					</FlexItem>
@@ -111,23 +118,18 @@ function FontSizeGroup( {
 								key={ size.slug }
 								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
 							>
-								<HStack direction="row">
+								<HStack>
 									<FlexItem className="edit-site-font-size__item">
 										{ size.name }
 									</FlexItem>
-									<FlexItem>
-										<HStack justify="flex-end">
-											<FlexBlock className="edit-site-font-size__item edit-site-font-size__item-value">
-												{ size.size }
-											</FlexBlock>
-											<Icon
-												icon={
-													isRTL()
-														? chevronLeft
-														: chevronRight
-												}
-											/>
-										</HStack>
+									<FlexItem display="flex">
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</FlexItem>
 								</HStack>
 							</NavigationButtonAsItem>

package/src/components/global-styles/screen-block.js

@@ -113,8 +113,9 @@ function ScreenBlock( { name, variation } ) {
 	if (
 		settingsForBlockElement?.spacing?.blockGap &&
 		blockType?.supports?.spacing?.blockGap &&
-		( blockType?.supports?.spacing?.skipSerialization === true ||
-			blockType?.supports?.spacing?.skipSerialization?.some?.(
+		( blockType?.supports?.spacing?.__experimentalSkipSerialization ===
+			true ||
+			blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
 				( spacingType ) => spacingType === 'blockGap'
 			) )
 	) {

package/src/components/global-styles/shadows-edit-panel.js

@@ -163,33 +163,38 @@ export default function ShadowsEditPanel() {
 				<ScreenHeader title={ selectedShadow.name } />
 				<FlexItem>
 					<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>
-						<Menu
-							trigger={
-								<Button
-									size="small"
-									icon={ moreVertical }
-									label={ __( 'Menu' ) }
-								/>
-							}
-						>
-							{ ( category === 'custom'
-								? customShadowMenuItems
-								: presetShadowMenuItems
-							).map( ( item ) => (
-								<Menu.Item
-									key={ item.action }
-									onClick={ () => onMenuClick( item.action ) }
-									disabled={
-										item.action === 'reset' &&
-										selectedShadow.shadow ===
-											baseSelectedShadow.shadow
-									}
-								>
-									<Menu.ItemLabel>
-										{ item.label }
-									</Menu.ItemLabel>
-								</Menu.Item>
-							) ) }
+						<Menu>
+							<Menu.TriggerButton
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Menu' ) }
+									/>
+								}
+							/>
+							<Menu.Popover>
+								{ ( category === 'custom'
+									? customShadowMenuItems
+									: presetShadowMenuItems
+								).map( ( item ) => (
+									<Menu.Item
+										key={ item.action }
+										onClick={ () =>
+											onMenuClick( item.action )
+										}
+										disabled={
+											item.action === 'reset' &&
+											selectedShadow.shadow ===
+												baseSelectedShadow.shadow
+										}
+									>
+										<Menu.ItemLabel>
+											{ item.label }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								) ) }
+							</Menu.Popover>
 						</Menu>
 					</Spacer>
 				</FlexItem>
@@ -387,7 +392,12 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 					'aria-expanded': isOpen,
 				};
 				const removeButtonProps = {
-					onClick: onRemove,
+					onClick: () => {
+						if ( isOpen ) {
+							onToggle();
+						}
+						onRemove();
+					},
 					className: clsx(
 						'edit-site-global-styles__shadow-editor__remove-button',
 						{ 'is-open': isOpen }