@wordpress/edit-site 4.16.0 → 4.18.0

package/src/components/editor/index.js

@@ -1,14 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockContextProvider,
 	BlockBreadcrumb,
-	BlockStyles,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -31,8 +30,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
 /**
  * Internal dependencies
  */
-import Header from '../header';
-import { SidebarComplementaryAreaFills } from '../sidebar';
+import Header from '../header-edit-mode';
+import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import NavigationSidebar from '../navigation-sidebar';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
@@ -66,6 +65,7 @@ function Editor( { onError } ) {
 	const {
 		isInserterOpen,
 		isListViewOpen,
+		isSaveViewOpen,
 		sidebarIsOpened,
 		settings,
 		entityId,
@@ -83,6 +83,7 @@ function Editor( { onError } ) {
 		const {
 			isInserterOpened,
 			isListViewOpened,
+			isSaveViewOpened,
 			getSettings,
 			getEditedPostType,
 			getEditedPostId,
@@ -99,6 +100,7 @@ function Editor( { onError } ) {
 		return {
 			isInserterOpen: isInserterOpened(),
 			isListViewOpen: isListViewOpened(),
+			isSaveViewOpen: isSaveViewOpened(),
 			sidebarIsOpened: !! select(
 				interfaceStore
 			).getActiveComplementaryArea( editSiteStore.name ),
@@ -131,19 +133,10 @@ function Editor( { onError } ) {
 			blockEditorMode: __unstableGetEditorMode(),
 		};
 	}, [] );
-	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
+	const { setPage, setIsInserterOpened, setIsSaveViewOpened } =
+		useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
-		useState( false );
-	const openEntitiesSavedStates = useCallback(
-		() => setIsEntitiesSavedStatesOpen( true ),
-		[]
-	);
-	const closeEntitiesSavedStates = useCallback( () => {
-		setIsEntitiesSavedStatesOpen( false );
-	}, [] );
-
 	const blockContext = useMemo(
 		() => ( {
 			...page?.context,
@@ -248,9 +241,6 @@ function Editor( { onError } ) {
 											}
 											header={
 												<Header
-													openEntitiesSavedStates={
-														openEntitiesSavedStates
-													}
 													showIconLabels={
 														showIconLabels
 													}
@@ -260,7 +250,6 @@ function Editor( { onError } ) {
 											content={
 												<>
 													<EditorNotices />
-													<BlockStyles.Slot scope="core/block-inspector" />
 													{ editorMode === 'visual' &&
 														template && (
 															<BlockEditor
@@ -288,19 +277,17 @@ function Editor( { onError } ) {
 																) }
 															</Notice>
 														) }
-													<KeyboardShortcuts
-														openEntitiesSavedStates={
-															openEntitiesSavedStates
-														}
-													/>
+													<KeyboardShortcuts />
 												</>
 											}
 											actions={
 												<>
-													{ isEntitiesSavedStatesOpen ? (
+													{ isSaveViewOpen ? (
 														<EntitiesSavedStates
-															close={
-																closeEntitiesSavedStates
+															close={ () =>
+																setIsSaveViewOpened(
+																	false
+																)
 															}
 														/>
 													) : (
@@ -308,8 +295,10 @@ function Editor( { onError } ) {
 															<Button
 																variant="secondary"
 																className="edit-site-editor__toggle-save-panel-button"
-																onClick={
-																	openEntitiesSavedStates
+																onClick={ () =>
+																	setIsSaveViewOpened(
+																		true
+																	)
 																}
 																aria-expanded={
 																	false

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

@@ -186,6 +186,7 @@ export default function BorderPanel( { name } ) {
 						value={ border }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
+						size={ '__unstable-large' }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/global-styles-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mergeWith, pickBy, isEmpty, mapValues } from 'lodash';
+import { mergeWith, isEmpty, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,8 +15,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { GlobalStylesContext } from './context';
 
-const identity = ( x ) => x;
-
 function mergeTreesCustomizer( _, srcValue ) {
 	// We only pass as arrays the presets,
 	// in which case we want the new array of values
@@ -38,9 +36,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };

package/src/components/global-styles/preview.js

@@ -21,23 +21,32 @@ import { useGlobalStylesOutput } from './use-global-styles-output';
 
 const firstFrame = {
 	start: {
+		scale: 1,
 		opacity: 1,
-		display: 'block',
 	},
 	hover: {
+		scale: 0,
 		opacity: 0,
-		display: 'none',
+	},
+};
+
+const midFrame = {
+	hover: {
+		opacity: 1,
+	},
+	start: {
+		opacity: 0.5,
 	},
 };
 
 const secondFrame = {
 	hover: {
+		scale: 1,
 		opacity: 1,
-		display: 'block',
 	},
 	start: {
+		scale: 0,
 		opacity: 0,
-		display: 'none',
 	},
 };
 
@@ -46,7 +55,7 @@ const normalizedHeight = 152;
 
 const normalizedColorSwatchSize = 32;
 
-const StylesPreview = ( { label, isFocused } ) => {
+const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
 	const [ headingFontFamily = fontFamily ] = useStyle(
@@ -57,7 +66,6 @@ const StylesPreview = ( { label, isFocused } ) => {
 	);
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' );
-	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
 	const [ gradientValue ] = useStyle( 'color.gradient' );
 	const [ styles ] = useGlobalStylesOutput();
@@ -85,7 +93,7 @@ const StylesPreview = ( { label, isFocused } ) => {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;padding: 0;border: none;}',
+					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
 					isGlobalStyles: true,
 				},
 			];
@@ -116,7 +124,7 @@ const StylesPreview = ( { label, isFocused } ) => {
 				} }
 				initial="start"
 				animate={
-					( isHovered || isFocused ) && ! disableMotion
+					( isHovered || isFocused ) && ! disableMotion && label
 						? 'hover'
 						: 'start'
 				}
@@ -136,41 +144,90 @@ const StylesPreview = ( { label, isFocused } ) => {
 							overflow: 'hidden',
 						} }
 					>
-						<div
+						<motion.div
 							style={ {
 								fontFamily: headingFontFamily,
 								fontSize: 65 * ratio,
 								color: headingColor,
 								fontWeight: headingFontWeight,
 							} }
+							animate={ { scale: 1, opacity: 1 } }
+							initial={ { scale: 0.1, opacity: 0 } }
+							transition={ { delay: 0.3, type: 'tween' } }
 						>
 							Aa
-						</div>
+						</motion.div>
 						<VStack spacing={ 4 * ratio }>
-							{ highlightedColors.map( ( { slug, color } ) => (
+							{ highlightedColors.map(
+								( { slug, color }, index ) => (
+									<motion.div
+										key={ slug }
+										style={ {
+											height:
+												normalizedColorSwatchSize *
+												ratio,
+											width:
+												normalizedColorSwatchSize *
+												ratio,
+											background: color,
+											borderRadius:
+												( normalizedColorSwatchSize *
+													ratio ) /
+												2,
+										} }
+										animate={ { scale: 1, opacity: 1 } }
+										initial={ { scale: 0.1, opacity: 0 } }
+										transition={ {
+											delay: index === 1 ? 0.2 : 0.1,
+										} }
+									/>
+								)
+							) }
+						</VStack>
+					</HStack>
+				</motion.div>
+				<motion.div
+					variants={ withHoverView && midFrame }
+					style={ {
+						height: '100%',
+						width: '100%',
+						position: 'absolute',
+						top: 0,
+						overflow: 'hidden',
+						filter: 'blur(60px)',
+						opacity: 0.1,
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="flex-start"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ paletteColors
+							.slice( 0, 4 )
+							.map( ( { color }, index ) => (
 								<div
-									key={ slug }
+									key={ index }
 									style={ {
-										height:
-											normalizedColorSwatchSize * ratio,
-										width:
-											normalizedColorSwatchSize * ratio,
+										height: '100%',
 										background: color,
-										borderRadius:
-											( normalizedColorSwatchSize *
-												ratio ) /
-											2,
+										flexGrow: 1,
 									} }
 								/>
 							) ) }
-						</VStack>
 					</HStack>
 				</motion.div>
 				<motion.div
 					variants={ secondFrame }
 					style={ {
 						height: '100%',
+						width: '100%',
 						overflow: 'hidden',
+						position: 'absolute',
+						top: 0,
 					} }
 				>
 					<VStack
@@ -186,53 +243,17 @@ const StylesPreview = ( { label, isFocused } ) => {
 						{ label && (
 							<div
 								style={ {
-									fontSize: 35 * ratio,
+									fontSize: 40 * ratio,
 									fontFamily: headingFontFamily,
 									color: headingColor,
 									fontWeight: headingFontWeight,
 									lineHeight: '1em',
+									textAlign: 'center',
 								} }
 							>
 								{ label }
 							</div>
 						) }
-						<HStack spacing={ 2 * ratio } justify="flex-start">
-							<div
-								style={ {
-									fontFamily,
-									fontSize: 24 * ratio,
-									color: textColor,
-								} }
-							>
-								Aa
-							</div>
-							<div
-								style={ {
-									fontFamily,
-									fontSize: 24 * ratio,
-									color: linkColor,
-								} }
-							>
-								Aa
-							</div>
-						</HStack>
-						{ paletteColors && (
-							<HStack spacing={ 0 }>
-								{ paletteColors
-									.slice( 0, 4 )
-									.map( ( { color }, index ) => (
-										<div
-											key={ index }
-											style={ {
-												height: 10 * ratio,
-												width: 30 * ratio,
-												background: color,
-												flexGrow: 1,
-											} }
-										/>
-									) ) }
-							</HStack>
-						) }
 					</VStack>
 				</motion.div>
 			</motion.div>

package/src/components/global-styles/screen-style-variations.js

@@ -8,8 +8,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { useMemo, useContext, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useMemo,
+	useContext,
+	useState,
+	useEffect,
+	useRef,
+} from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import {
 	__experimentalGrid as Grid,
@@ -17,6 +23,7 @@ import {
 	CardBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -87,6 +94,7 @@ function Variation( { variation } ) {
 					<StylesPreview
 						label={ variation?.title }
 						isFocused={ isFocused }
+						withHoverView
 					/>
 				</div>
 			</div>
@@ -95,12 +103,14 @@ function Variation( { variation } ) {
 }
 
 function ScreenStyleVariations() {
-	const { variations } = useSelect( ( select ) => {
+	const { variations, mode } = useSelect( ( select ) => {
 		return {
 			variations:
 				select(
 					coreStore
 				).__experimentalGetCurrentThemeGlobalStylesVariations(),
+
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
@@ -119,13 +129,38 @@ function ScreenStyleVariations() {
 		];
 	}, [ variations ] );
 
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const shouldRevertInitialMode = useRef( null );
+	useEffect( () => {
+		// ignore changes to zoom-out mode as we explictily change to it on mount.
+		if ( mode !== 'zoom-out' ) {
+			shouldRevertInitialMode.current = false;
+		}
+	}, [ mode ] );
+
+	// Intentionality left without any dependency.
+	// This effect should only run the first time the component is rendered.
+	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	useEffect( () => {
+		if ( mode !== 'zoom-out' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+			shouldRevertInitialMode.current = true;
+			return () => {
+				// if there were not mode changes revert to the initial mode when unmounting.
+				if ( shouldRevertInitialMode.current ) {
+					__unstableSetEditorMode( mode );
+				}
+			};
+		}
+	}, [] );
+
 	return (
 		<>
 			<ScreenHeader
 				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(
-					'Choose a different style combination for the theme styles'
+					'Choose a variation to change the look of the site.'
 				) }
 			/>
 

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

@@ -19,6 +19,7 @@
 	margin-bottom: $grid-unit-20;
 	background: $gray-100;
 	border-radius: $radius-block-ui;
+	overflow: hidden;
 }
 
 .edit-site-typography-panel__full-width-control {