@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

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

@@ -1 +0,0 @@
-export { default as GlobalStylesUI } from './ui';

package/src/components/global-styles/navigation-button.js

@@ -1,38 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Navigator,
-	__experimentalItem as Item,
-	FlexItem,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { IconWithCurrentColor } from './icon-with-current-color';
-
-function GenericNavigationButton( { icon, children, ...props } ) {
-	return (
-		<Item { ...props }>
-			{ icon && (
-				<HStack justify="flex-start">
-					<IconWithCurrentColor icon={ icon } size={ 24 } />
-					<FlexItem>{ children }</FlexItem>
-				</HStack>
-			) }
-			{ ! icon && children }
-		</Item>
-	);
-}
-
-function NavigationButtonAsItem( props ) {
-	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
-}
-
-function NavigationBackButtonAsItem( props ) {
-	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
-}
-
-export { NavigationButtonAsItem, NavigationBackButtonAsItem };

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

@@ -1,90 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalZStack as ZStack,
-	__experimentalVStack as VStack,
-	ColorIndicator,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Subtitle from './subtitle';
-import { NavigationButtonAsItem } from './navigation-button';
-import ColorIndicatorWrapper from './color-indicator-wrapper';
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-const EMPTY_COLORS = [];
-
-function Palette( { name } ) {
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
-	const [ defaultColors ] = useGlobalSetting( 'color.palette.default' );
-
-	const [ defaultPaletteEnabled ] = useGlobalSetting(
-		'color.defaultPalette',
-		name
-	);
-
-	const colors = useMemo(
-		() => [
-			...( customColors || EMPTY_COLORS ),
-			...( themeColors || EMPTY_COLORS ),
-			...( defaultColors && defaultPaletteEnabled
-				? defaultColors
-				: EMPTY_COLORS ),
-		],
-		[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]
-	);
-
-	const screenPath = ! name
-		? '/colors/palette'
-		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
-
-	return (
-		<VStack spacing={ 3 }>
-			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
-			<ItemGroup isBordered isSeparated>
-				<NavigationButtonAsItem path={ screenPath }>
-					<HStack direction="row">
-						{ colors.length > 0 ? (
-							<>
-								<ZStack isLayered={ false } offset={ -8 }>
-									{ colors
-										.slice( 0, 5 )
-										.map( ( { color }, index ) => (
-											<ColorIndicatorWrapper
-												key={ `${ color }-${ index }` }
-											>
-												<ColorIndicator
-													colorValue={ color }
-												/>
-											</ColorIndicatorWrapper>
-										) ) }
-								</ZStack>
-								<FlexItem isBlock>
-									{ __( 'Edit palette' ) }
-								</FlexItem>
-							</>
-						) : (
-							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
-						) }
-						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
-					</HStack>
-				</NavigationButtonAsItem>
-			</ItemGroup>
-		</VStack>
-	);
-}
-
-export default Palette;

package/src/components/global-styles/preset-colors.js

@@ -1,18 +0,0 @@
-/**
- * Internal dependencies
- */
-import { useStylesPreviewColors } from './hooks';
-
-export default function PresetColors() {
-	const { paletteColors } = useStylesPreviewColors();
-	return paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (
-		<div
-			key={ `${ slug }-${ index }` }
-			style={ {
-				flexGrow: 1,
-				height: '100%',
-				background: color,
-			} }
-		/>
-	) );
-}

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

@@ -1,58 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import PresetColors from './preset-colors';
-import PreviewWrapper from './preview-wrapper';
-
-const firstFrameVariants = {
-	start: {
-		scale: 1,
-		opacity: 1,
-	},
-	hover: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
-	return (
-		<PreviewWrapper
-			label={ label }
-			isFocused={ isFocused }
-			withHoverView={ withHoverView }
-		>
-			{ ( { key } ) => (
-				<motion.div
-					key={ key }
-					variants={ firstFrameVariants }
-					style={ {
-						height: '100%',
-						overflow: 'hidden',
-					} }
-				>
-					<HStack
-						spacing={ 0 }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-						} }
-					>
-						<PresetColors />
-					</HStack>
-				</motion.div>
-			) }
-		</PreviewWrapper>
-	);
-};
-
-export default StylesPreviewColors;

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

@@ -1,185 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__unstableMotion as motion,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { useStylesPreviewColors } from './hooks';
-import TypographyExample from './typography-example';
-import HighlightedColors from './highlighted-colors';
-import PreviewWrapper from './preview-wrapper';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-const firstFrameVariants = {
-	start: {
-		scale: 1,
-		opacity: 1,
-	},
-	hover: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const midFrameVariants = {
-	hover: {
-		opacity: 1,
-	},
-	start: {
-		opacity: 0.5,
-	},
-};
-
-const secondFrameVariants = {
-	hover: {
-		scale: 1,
-		opacity: 1,
-	},
-	start: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {
-	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
-	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
-	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
-		'elements.h1.typography.fontFamily'
-	);
-	const [ headingFontWeight = fontWeight ] = useGlobalStyle(
-		'elements.h1.typography.fontWeight'
-	);
-	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
-	const [ headingColor = textColor ] = useGlobalStyle(
-		'elements.h1.color.text'
-	);
-
-	const { paletteColors } = useStylesPreviewColors();
-
-	return (
-		<PreviewWrapper
-			label={ label }
-			isFocused={ isFocused }
-			withHoverView={ withHoverView }
-		>
-			{ ( { ratio, key } ) => (
-				<motion.div
-					key={ key }
-					variants={ firstFrameVariants }
-					style={ {
-						height: '100%',
-						overflow: 'hidden',
-					} }
-				>
-					<HStack
-						spacing={ 10 * ratio }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-						} }
-					>
-						<TypographyExample
-							fontSize={ 65 * ratio }
-							variation={ variation }
-						/>
-						<VStack spacing={ 4 * ratio }>
-							<HighlightedColors
-								normalizedColorSwatchSize={ 32 }
-								ratio={ ratio }
-							/>
-						</VStack>
-					</HStack>
-				</motion.div>
-			) }
-			{ ( { key } ) => (
-				<motion.div
-					key={ key }
-					variants={ withHoverView && midFrameVariants }
-					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={ index }
-									style={ {
-										height: '100%',
-										background: color,
-										flexGrow: 1,
-									} }
-								/>
-							) ) }
-					</HStack>
-				</motion.div>
-			) }
-			{ ( { ratio, key } ) => (
-				<motion.div
-					key={ key }
-					variants={ secondFrameVariants }
-					style={ {
-						height: '100%',
-						width: '100%',
-						overflow: 'hidden',
-						position: 'absolute',
-						top: 0,
-					} }
-				>
-					<VStack
-						spacing={ 3 * ratio }
-						justify="center"
-						style={ {
-							height: '100%',
-							overflow: 'hidden',
-							padding: 10 * ratio,
-							boxSizing: 'border-box',
-						} }
-					>
-						{ label && (
-							<div
-								style={ {
-									fontSize: 40 * ratio,
-									fontFamily: headingFontFamily,
-									color: headingColor,
-									fontWeight: headingFontWeight,
-									lineHeight: '1em',
-									textAlign: 'center',
-								} }
-							>
-								{ label }
-							</div>
-						) }
-					</VStack>
-				</motion.div>
-			) }
-		</PreviewWrapper>
-	);
-};
-
-export default PreviewStyles;

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

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalHStack as HStack } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import TypographyExample from './typography-example';
-import PreviewWrapper from './preview-wrapper';
-
-const StylesPreviewTypography = ( { variation, isFocused, withHoverView } ) => {
-	return (
-		<PreviewWrapper
-			label={ variation.title }
-			isFocused={ isFocused }
-			withHoverView={ withHoverView }
-		>
-			{ ( { ratio, key } ) => (
-				<HStack
-					key={ key }
-					spacing={ 10 * ratio }
-					justify="center"
-					style={ {
-						height: '100%',
-						overflow: 'hidden',
-					} }
-				>
-					<TypographyExample
-						variation={ variation }
-						fontSize={ 85 * ratio }
-					/>
-				</HStack>
-			) }
-		</PreviewWrapper>
-	);
-};
-
-export default StylesPreviewTypography;

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

@@ -1,126 +0,0 @@
-/**
- * WordPress dependencies
- */
-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 } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-const normalizedWidth = 248;
-const normalizedHeight = 152;
-
-// Throttle options for useThrottle. Must be defined outside of the component,
-// so that the object reference is the same on each render.
-const THROTTLE_OPTIONS = {
-	leading: true,
-	trailing: true,
-};
-
-export default function PreviewWrapper( {
-	children,
-	label,
-	isFocused,
-	withHoverView,
-} ) {
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const disableMotion = useReducedMotion();
-	const [ isHovered, setIsHovered ] = useState( false );
-	const [ containerResizeListener, { width } ] = useResizeObserver();
-	const [ throttledWidth, setThrottledWidthState ] = useState( width );
-	const [ ratioState, setRatioState ] = useState();
-
-	const setThrottledWidth = useThrottle(
-		setThrottledWidthState,
-		250,
-		THROTTLE_OPTIONS
-	);
-
-	// Must use useLayoutEffect to avoid a flash of the container  at the wrong
-	// size before the width is set.
-	useLayoutEffect( () => {
-		if ( width ) {
-			setThrottledWidth( width );
-		}
-	}, [ width, setThrottledWidth ] );
-
-	// 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;
-		const ratioDiff = newRatio - ( ratioState || 0 );
-
-		// Only update the ratio state if the difference is big enough
-		// or if the ratio state is not yet set. This is to avoid an
-		// endless loop of updates at particular viewport heights when the
-		// presence of a scrollbar causes the width to change slightly.
-		const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;
-
-		if ( isRatioDiffBigEnough || ! ratioState ) {
-			setRatioState( newRatio );
-		}
-	}, [ throttledWidth, ratioState ] );
-
-	// Set a fallbackRatio to use before the throttled ratio has been set.
-	const fallbackRatio = width ? width / normalizedWidth : 1;
-	/*
-	 * Use the throttled ratio if it has been calculated, otherwise
-	 * use the fallback ratio. The throttled ratio is used to avoid
-	 * an endless loop of updates at particular viewport heights.
-	 * See: https://github.com/WordPress/gutenberg/issues/55112
-	 */
-	const ratio = ratioState ? ratioState : fallbackRatio;
-
-	const isReady = !! width;
-
-	return (
-		<>
-			<div style={ { position: 'relative' } }>
-				{ containerResizeListener }
-			</div>
-			{ isReady && (
-				<div
-					className="edit-site-global-styles-preview__wrapper"
-					style={ {
-						height: normalizedHeight * ratio,
-					} }
-					onMouseEnter={ () => setIsHovered( true ) }
-					onMouseLeave={ () => setIsHovered( false ) }
-					tabIndex={ -1 }
-				>
-					<motion.div
-						style={ {
-							height: normalizedHeight * ratio,
-							width: '100%',
-							background: gradientValue ?? backgroundColor,
-							cursor: withHoverView ? 'pointer' : undefined,
-						} }
-						initial="start"
-						animate={
-							( isHovered || isFocused ) &&
-							! disableMotion &&
-							label
-								? 'hover'
-								: 'start'
-						}
-					>
-						{ []
-							.concat( children ) // This makes sure children is always an array.
-							.map( ( child, key ) => child( { ratio, key } ) ) }
-					</motion.div>
-				</div>
-			) }
-		</>
-	);
-}

package/src/components/global-styles/root-menu.js

@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import {
-	background,
-	typography,
-	color,
-	layout,
-	shadow as shadowIcon,
-} from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { NavigationButtonAsItem } from './navigation-button';
-import { unlock } from '../../lock-unlock';
-
-const {
-	useHasDimensionsPanel,
-	useHasTypographyPanel,
-	useHasColorPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	useHasBackgroundPanel,
-} = unlock( blockEditorPrivateApis );
-
-function RootMenu() {
-	const [ rawSettings ] = useGlobalSetting( '' );
-	const settings = useSettingsForBlockElement( rawSettings );
-	/*
-	 * Use the raw settings to determine if the background panel should be displayed,
-	 * as the background panel is not dependent on the block element settings.
-	 */
-	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
-	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( settings );
-	const hasShadowPanel = true; // useHasShadowPanel( settings );
-	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasLayoutPanel = hasDimensionsPanel;
-
-	return (
-		<>
-			<ItemGroup>
-				{ hasTypographyPanel && (
-					<NavigationButtonAsItem
-						icon={ typography }
-						path="/typography"
-					>
-						{ __( 'Typography' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasColorPanel && (
-					<NavigationButtonAsItem icon={ color } path="/colors">
-						{ __( 'Colors' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasBackgroundPanel && (
-					<NavigationButtonAsItem
-						icon={ background }
-						path="/background"
-						aria-label={ __( 'Background styles' ) }
-					>
-						{ __( 'Background' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasShadowPanel && (
-					<NavigationButtonAsItem icon={ shadowIcon } path="/shadows">
-						{ __( 'Shadows' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasLayoutPanel && (
-					<NavigationButtonAsItem icon={ layout } path="/layout">
-						{ __( 'Layout' ) }
-					</NavigationButtonAsItem>
-				) }
-			</ItemGroup>
-		</>
-	);
-}
-
-export default RootMenu;

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

@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __experimentalText as Text } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import BackgroundPanel from './background-panel';
-import ScreenHeader from './header';
-import { unlock } from '../../lock-unlock';
-
-const { useHasBackgroundPanel, useGlobalSetting } = unlock(
-	blockEditorPrivateApis
-);
-
-function ScreenBackground() {
-	const [ settings ] = useGlobalSetting( '' );
-	const hasBackgroundPanel = useHasBackgroundPanel( settings );
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Background' ) }
-				description={
-					<Text>
-						{ __( 'Set styles for the site’s background.' ) }
-					</Text>
-				}
-			/>
-			{ hasBackgroundPanel && <BackgroundPanel /> }
-		</>
-	);
-}
-
-export default ScreenBackground;