@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.15.0

package/src/components/global-styles/{preview-iframe.js → preview-wrapper.js}

@@ -1,27 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	__unstableIframe as Iframe,
-	__unstableEditorStyles as EditorStyles,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { __unstableMotion as motion } from '@wordpress/components';
 import {
 	useThrottle,
 	useReducedMotion,
 	useResizeObserver,
 } from '@wordpress/compose';
-import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle, useGlobalStylesOutput } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 const normalizedWidth = 248;
 const normalizedHeight = 152;
@@ -33,7 +27,7 @@ const THROTTLE_OPTIONS = {
 	trailing: true,
 };
 
-export default function PreviewIframe( {
+export default function PreviewWrapper( {
 	children,
 	label,
 	isFocused,
@@ -41,7 +35,6 @@ export default function PreviewIframe( {
 } ) {
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const [ styles ] = useGlobalStylesOutput();
 	const disableMotion = useReducedMotion();
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
@@ -54,7 +47,7 @@ export default function PreviewIframe( {
 		THROTTLE_OPTIONS
 	);
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container  at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		if ( width ) {
@@ -62,7 +55,7 @@ export default function PreviewIframe( {
 		}
 	}, [ width, setThrottledWidth ] );
 
-	// Must use useLayoutEffect to avoid a flash of the iframe at the wrong
+	// Must use useLayoutEffect to avoid a flash of the container at the wrong
 	// size before the width is set.
 	useLayoutEffect( () => {
 		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
@@ -89,24 +82,6 @@ export default function PreviewIframe( {
 	 */
 	const ratio = ratioState ? ratioState : fallbackRatio;
 
-	/*
-	 * Reset leaked styles from WP common.css and remove main content layout padding and border.
-	 * Add pointer cursor to the body to indicate the iframe is interactive,
-	 * similar to Typography variation previews.
-	 */
-	const editorStyles = useMemo( () => {
-		if ( styles ) {
-			return [
-				...styles,
-				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',
-					isGlobalStyles: true,
-				},
-			];
-		}
-
-		return styles;
-	}, [ styles ] );
 	const isReady = !! width;
 
 	return (
@@ -115,8 +90,8 @@ export default function PreviewIframe( {
 				{ containerResizeListener }
 			</div>
 			{ isReady && (
-				<Iframe
-					className="edit-site-global-styles-preview__iframe"
+				<div
+					className="edit-site-global-styles-preview__wrapper"
 					style={ {
 						height: normalizedHeight * ratio,
 					} }
@@ -124,7 +99,6 @@ export default function PreviewIframe( {
 					onMouseLeave={ () => setIsHovered( false ) }
 					tabIndex={ -1 }
 				>
-					<EditorStyles styles={ editorStyles } />
 					<motion.div
 						style={ {
 							height: normalizedHeight * ratio,
@@ -145,7 +119,7 @@ export default function PreviewIframe( {
 							.concat( children ) // This makes sure children is always an array.
 							.map( ( child, key ) => child( { ratio, key } ) ) }
 					</motion.div>
-				</Iframe>
+				</div>
 			) }
 		</>
 	);

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

@@ -35,7 +35,7 @@ import {
 	reset,
 	moreVertical,
 } from '@wordpress/icons';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -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>
@@ -300,6 +305,7 @@ function ShadowsPreview( { shadow } ) {
 }
 
 function ShadowEditor( { shadow, onChange } ) {
+	const addShadowButtonRef = useRef();
 	const shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );
 
 	const onChangeShadowPart = ( index, part ) => {
@@ -314,6 +320,7 @@ function ShadowEditor( { shadow, onChange } ) {
 
 	const onRemoveShadowPart = ( index ) => {
 		onChange( shadowParts.filter( ( p, i ) => i !== index ).join( ', ' ) );
+		addShadowButtonRef.current.focus();
 	};
 
 	return (
@@ -334,6 +341,7 @@ function ShadowEditor( { shadow, onChange } ) {
 							onClick={ () => {
 								onAddShadowPart();
 							} }
+							ref={ addShadowButtonRef }
 						/>
 					</FlexItem>
 				</HStack>
@@ -384,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 }
@@ -393,28 +406,24 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 				};
 
 				return (
-					<HStack align="center" justify="flex-start" spacing={ 0 }>
-						<FlexItem style={ { flexGrow: 1 } }>
-							<Button
-								__next40pxDefaultSize
-								icon={ shadowIcon }
-								{ ...toggleProps }
-							>
-								{ shadowObj.inset
-									? __( 'Inner shadow' )
-									: __( 'Drop shadow' ) }
-							</Button>
-						</FlexItem>
+					<>
+						<Button
+							__next40pxDefaultSize
+							icon={ shadowIcon }
+							{ ...toggleProps }
+						>
+							{ shadowObj.inset
+								? __( 'Inner shadow' )
+								: __( 'Drop shadow' ) }
+						</Button>
 						{ canRemove && (
-							<FlexItem>
-								<Button
-									__next40pxDefaultSize
-									icon={ reset }
-									{ ...removeButtonProps }
-								/>
-							</FlexItem>
+							<Button
+								size="small"
+								icon={ reset }
+								{ ...removeButtonProps }
+							/>
 						) }
-					</HStack>
+					</>
 				);
 			} }
 			renderContent={ () => (

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

@@ -8,10 +8,17 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { plus, shadow as shadowIcon } from '@wordpress/icons';
+import {
+	plus,
+	Icon,
+	chevronLeft,
+	chevronRight,
+	moreVertical,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,8 +28,11 @@ import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import ScreenHeader from './header';
 import { getNewIndexFromPresets } from './utils';
+import { useState } from '@wordpress/element';
+import ConfirmResetShadowDialog from './confirm-reset-shadow-dialog';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const { Menu } = unlock( componentsPrivateApis );
 
 export const defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
 
@@ -40,8 +50,27 @@ export default function ShadowsPanel() {
 		setCustomShadows( [ ...( customShadows || [] ), shadow ] );
 	};
 
+	const handleResetShadows = () => {
+		setCustomShadows( [] );
+	};
+
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
 	return (
 		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetShadowDialog
+					text={ __(
+						'Are you sure you want to remove all custom shadows?'
+					) }
+					confirmButtonText={ __( 'Remove' ) }
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetShadows }
+				/>
+			) }
 			<ScreenHeader
 				title={ __( 'Shadows' ) }
 				description={ __(
@@ -73,6 +102,7 @@ export default function ShadowsPanel() {
 						category="custom"
 						canCreate
 						onCreate={ onCreateShadow }
+						onReset={ toggleResetDialog }
 					/>
 				</VStack>
 			</div>
@@ -80,7 +110,14 @@ export default function ShadowsPanel() {
 	);
 }
 
-function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
+function ShadowList( {
+	label,
+	shadows,
+	category,
+	canCreate,
+	onCreate,
+	onReset,
+} ) {
 	const handleAddShadow = () => {
 		const newIndex = getNewIndexFromPresets( shadows, 'shadow-' );
 		onCreate( {
@@ -115,6 +152,26 @@ function ShadowList( { label, shadows, category, canCreate, onCreate } ) {
 						/>
 					</FlexItem>
 				) }
+				{ !! shadows?.length && category === 'custom' && (
+					<Menu>
+						<Menu.TriggerButton
+							render={
+								<Button
+									size="small"
+									icon={ moreVertical }
+									label={ __( 'Shadow options' ) }
+								/>
+							}
+						/>
+						<Menu.Popover>
+							<Menu.Item onClick={ onReset }>
+								<Menu.ItemLabel>
+									{ __( 'Remove all custom shadows' ) }
+								</Menu.ItemLabel>
+							</Menu.Item>
+						</Menu.Popover>
+					</Menu>
+				) }
 			</HStack>
 			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>
@@ -135,9 +192,11 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			icon={ shadowIcon }
 		>
-			{ shadow.name }
+			<HStack>
+				<FlexItem>{ shadow.name }</FlexItem>
+				<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+			</HStack>
 		</NavigationButtonAsItem>
 	);
 }

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

@@ -6,7 +6,7 @@
 	cursor: pointer;
 }
 
-.edit-site-global-styles-preview__iframe {
+.edit-site-global-styles-preview__wrapper {
 	max-width: 100%;
 	display: block;
 	width: 100%;
@@ -146,20 +146,42 @@
 
 .edit-site-global-styles__shadow-editor__dropdown {
 	width: 100%;
+	position: relative;
+}
 
-	.edit-site-global-styles__shadow-editor__dropdown-toggle,
-	.edit-site-global-styles__shadow-editor__remove-button {
-		width: 100%;
-		height: auto;
-		padding-top: $grid-unit;
-		padding-bottom: $grid-unit;
-		text-align: left;
-		border-radius: inherit;
-
-		&.is-open {
-			background: $gray-100;
-			color: var(--wp-admin-theme-color);
-		}
+.edit-site-global-styles__shadow-editor__dropdown-toggle {
+	width: 100%;
+	height: auto;
+	padding-top: $grid-unit;
+	padding-bottom: $grid-unit;
+	text-align: left;
+	border-radius: inherit;
+
+	&.is-open {
+		background: $gray-100;
+		color: var(--wp-admin-theme-color);
+	}
+}
+
+.edit-site-global-styles__shadow-editor__remove-button {
+	position: absolute;
+	right: $grid-unit;
+	top: $grid-unit;
+	opacity: 0;
+
+	&.edit-site-global-styles__shadow-editor__remove-button {
+		border: none;
+	}
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle:hover + &,
+	&:focus,
+	&:hover {
+		opacity: 1;
+	}
+
+	@media (hover: none) {
+		// Show reset button on devices that do not support hover.
+		opacity: 1;
 	}
 }
 
@@ -211,6 +233,10 @@
 	flex-direction: column;
 }
 
+.edit-site-global-styles-sidebar__navigator-screen .single-column {
+	grid-column: span 1;
+}
+
 .edit-site-global-styles-screen-root.edit-site-global-styles-screen-root,
 .edit-site-global-styles-screen-style-variations.edit-site-global-styles-screen-style-variations {
 	background: unset;
@@ -226,10 +252,6 @@
 	// The &#{&} is a workaround for the specificity of the Card component.
 	&#{&},
 	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
-		box-shadow: none;
 		border-radius: $radius-small;
-		.block-editor-iframe__container {
-			border: 1px solid $gray-200;
-		}
 	}
 }

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

@@ -14,7 +14,9 @@ import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
@@ -23,6 +25,9 @@ export default function PreviewTypography( { fontSize, variation } ) {
 	if ( variation ) {
 		config = mergeBaseAndUserConfigs( base, variation );
 	}
+
+	const [ textColor ] = useGlobalStyle( 'color.text' );
+
 	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
 	const bodyPreviewStyle = bodyFontFamilies
 		? getFamilyPreviewStyle( bodyFontFamilies )
@@ -31,6 +36,11 @@ export default function PreviewTypography( { fontSize, variation } ) {
 		? getFamilyPreviewStyle( headingFontFamilies )
 		: {};
 
+	if ( textColor ) {
+		bodyPreviewStyle.color = textColor;
+		headingPreviewStyle.color = textColor;
+	}
+
 	if ( fontSize ) {
 		bodyPreviewStyle.fontSize = fontSize;
 		headingPreviewStyle.fontSize = fontSize;
@@ -52,6 +62,7 @@ export default function PreviewTypography( { fontSize, variation } ) {
 			} }
 			style={ {
 				textAlign: 'center',
+				lineHeight: 1,
 			} }
 		>
 			<span style={ headingPreviewStyle }>

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

@@ -9,9 +9,10 @@
 		outline-offset: -$border-width;
 		overflow: hidden;
 		position: relative;
-		// Add the same transition that block style variations and other buttons have.
-		transition: outline 0.1s linear;
-		@include reduce-motion("transition");
+		@media not (prefers-reduced-motion) {
+			// Add the same transition that block style variations and other buttons have.
+			transition: outline 0.1s linear;
+		}
 
 		&.is-pill {
 			height: $button-size-compact;

package/src/components/layout/index.js

@@ -25,18 +25,19 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	UnsavedChangesWarning,
+	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { PluginArea } from '@wordpress/plugins';
 import { store as noticesStore } from '@wordpress/notices';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
@@ -70,6 +71,15 @@ function Layout() {
 		triggerAnimationOnChange: routeKey + '-' + canvas,
 	} );
 
+	const { showIconLabels } = useSelect( ( select ) => {
+		return {
+			showIconLabels: select( preferencesStore ).get(
+				'core',
+				'showIconLabels'
+			),
+		};
+	} );
+
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvas );
@@ -93,6 +103,7 @@ function Layout() {
 					navigateRegionsProps.className,
 					{
 						'is-full-canvas': canvas === 'edit',
+						'show-icon-labels': showIconLabels,
 					}
 				) }
 			>
@@ -132,11 +143,13 @@ function Layout() {
 										/>
 										<SidebarContent
 											shouldAnimate={
-												routeKey !== 'styles-view'
+												routeKey !== 'styles'
 											}
 											routeKey={ routeKey }
 										>
-											{ areas.sidebar }
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
@@ -160,7 +173,7 @@ function Layout() {
 									/>
 								</SidebarContent>
 							) }
-							{ areas.mobile }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
 						</div>
 					) }
 
@@ -173,7 +186,7 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								{ areas.content }
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
 							</div>
 						) }
 
@@ -184,7 +197,7 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							{ areas.edit }
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
 						</div>
 					) }
 

package/src/components/layout/style.scss

@@ -115,10 +115,13 @@
 
 		.edit-site-resizable-frame__inner-content {
 			box-shadow: $elevation-x-small;
-			transition: border-radius, box-shadow 0.4s;
 			// This ensure the radius work properly.
 			overflow: hidden;
 
+			@media not (prefers-reduced-motion) {
+				transition: border-radius, box-shadow 0.4s;
+			}
+
 			.edit-site-layout:not(.is-full-canvas) & {
 				border-radius: $radius-large;
 			}
@@ -195,8 +198,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	}
 
 	&::before {
-		transition: box-shadow 0.1s ease;
-		@include reduce-motion("transition");
 		content: "";
 		display: block;
 		position: absolute;
@@ -206,6 +207,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		left: 9px;
 		border-radius: $radius-medium;
 		box-shadow: none;
+
+		@media not (prefers-reduced-motion) {
+			transition: box-shadow 0.1s ease;
+		}
 	}
 
 	.edit-site-layout__view-mode-toggle-icon {