@wordpress/edit-site 4.15.1-next.4d3b314fd5.0 → 4.17.0

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();
@@ -79,13 +87,13 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
-	// Reset leaked styles from WP common.css and remove main content layout padding.
+	// Reset leaked styles from WP common.css and remove main content layout padding and border.
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'body{min-width: 0;padding: 0;}',
+					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/screen-typography-element.js

@@ -2,12 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TypographyPanel from './typography-panel';
 import ScreenHeader from './header';
+import TypographyPreview from './typography-preview';
 
 const elements = {
 	text: {
@@ -29,13 +36,70 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
+	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
+
 	return (
 		<>
 			<ScreenHeader
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>
-			<TypographyPanel name={ name } element={ element } />
+			<Spacer marginX={ 4 }>
+				<TypographyPreview
+					name={ name }
+					element={ element }
+					headingLevel={ headingLevel }
+				/>
+			</Spacer>
+			{ element === 'heading' && (
+				<Spacer marginX={ 4 } marginBottom="1em">
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision
+						value={ headingLevel }
+						onChange={ setHeadingLevel }
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							/* translators: 'All' refers to selecting all heading levels 
+							and applying the same style to h1-h6. */
+							label={ __( 'All' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</Spacer>
+			) }
+			<TypographyPanel
+				name={ name }
+				element={ element }
+				headingLevel={ headingLevel }
+			/>
 		</>
 	);
 }

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

@@ -11,7 +11,7 @@
 	display: block;
 }
 
-.edit-site-typography-panel__preview {
+.edit-site-typography-preview {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -97,7 +97,7 @@
 	}
 
 	&:focus .edit-site-global-styles-variations_item-preview {
-		border: var(--wp-admin-theme-color) $border-width solid;
+		border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
 	}
 }