@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import CollectionFontVariant from './collection-font-variant';
-import { isFontFontFaceInOutline } from './utils/fonts-outline';
-import { sortFontFaces } from './utils/sort-font-faces';
-
-function CollectionFontDetails( {
-	font,
-	handleToggleVariant,
-	fontToInstallOutline,
-} ) {
-	const fontFaces =
-		font.fontFace && font.fontFace.length
-			? sortFontFaces( font.fontFace )
-			: [
-					{
-						fontFamily: font.fontFamily,
-						fontStyle: 'normal',
-						fontWeight: '400',
-					},
-			  ];
-
-	return (
-		<>
-			<Spacer margin={ 4 } />
-			<VStack spacing={ 0 }>
-				<Spacer margin={ 8 } />
-				{ fontFaces.map( ( face, i ) => (
-					<CollectionFontVariant
-						font={ font }
-						face={ face }
-						key={ `face${ i }` }
-						handleToggleVariant={ handleToggleVariant }
-						selected={ isFontFontFaceInOutline(
-							font.slug,
-							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
-							fontToInstallOutline
-						) }
-					/>
-				) ) }
-			</VStack>
-			<Spacer margin={ 16 } />
-		</>
-	);
-}
-
-export default CollectionFontDetails;

package/src/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-
-function ConfirmDeleteDialog( {
-	font,
-	isConfirmDeleteOpen,
-	handleConfirmUninstall,
-	handleCancelUninstall,
-} ) {
-	return (
-		<ConfirmDialog
-			isOpen={ isConfirmDeleteOpen }
-			cancelButtonText={ __( 'Cancel' ) }
-			confirmButtonText={ __( 'Delete' ) }
-			onCancel={ handleCancelUninstall }
-			onConfirm={ handleConfirmUninstall }
-		>
-			{ font &&
-				sprintf(
-					/* translators: %s: Name of the font. */
-					__(
-						'Are you sure you want to delete "%s" font and all its variants and assets?'
-					),
-					font.name
-				) }
-		</ConfirmDialog>
-	);
-}
-
-export default ConfirmDeleteDialog;

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

@@ -1,34 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FontCard from './font-card';
-import { FontLibraryContext } from './context';
-
-function LibraryFontCard( { font, ...props } ) {
-	const { getFontFacesActivated } = useContext( FontLibraryContext );
-
-	const variantsInstalled =
-		font?.fontFace?.length > 0 ? font.fontFace.length : 1;
-	const variantsActive = getFontFacesActivated(
-		font.slug,
-		font.source
-	).length;
-	const variantsText = sprintf(
-		/* translators: 1: Active font variants, 2: Total font variants. */
-		__( '%1$s/%2$s variants active' ),
-		variantsActive,
-		variantsInstalled
-	);
-
-	return (
-		<FontCard font={ font } variantsText={ variantsText } { ...props } />
-	);
-}
-
-export default LibraryFontCard;

package/src/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -1,85 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalText as Text,
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHStack as HStack,
-	Button,
-	Notice,
-	FlexBlock,
-} from '@wordpress/components';
-import { chevronLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { FontLibraryContext } from './context';
-
-function TabPanelLayout( {
-	title,
-	description,
-	notice,
-	handleBack,
-	children,
-	footer,
-} ) {
-	const { setNotice } = useContext( FontLibraryContext );
-
-	return (
-		<div className="font-library-modal__tabpanel-layout">
-			<Spacer margin={ 4 } />
-			<VStack spacing={ 4 } justify="space-between">
-				<VStack spacing={ 2 }>
-					<HStack justify="flex-start">
-						{ !! handleBack && (
-							<Button
-								variant="tertiary"
-								onClick={ handleBack }
-								icon={ chevronLeft }
-								size="small"
-								label={ __( 'Back' ) }
-							/>
-						) }
-						{ title && (
-							<Heading
-								level={ 2 }
-								size={ 13 }
-								className="edit-site-global-styles-header"
-							>
-								{ title }
-							</Heading>
-						) }
-					</HStack>
-					{ description && <Text>{ description }</Text> }
-					{ notice && (
-						<FlexBlock>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</FlexBlock>
-					) }
-				</VStack>
-				<div className="font-library-modal__tabpanel-layout__main">
-					{ children }
-				</div>
-				{ footer && (
-					<div className="font-library-modal__tabpanel-layout__footer">
-						{ footer }
-					</div>
-				) }
-			</VStack>
-		</div>
-	);
-}
-
-export default TabPanelLayout;

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

@@ -1,327 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__unstableIframe as Iframe,
-	__unstableEditorStyles as EditorStyles,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import {
-	__unstableMotion as motion,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import {
-	useThrottle,
-	useReducedMotion,
-	useResizeObserver,
-} from '@wordpress/compose';
-import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { useStylesPreviewColors } from './hooks';
-
-const { useGlobalStyle, useGlobalStylesOutput } = unlock(
-	blockEditorPrivateApis
-);
-
-const firstFrame = {
-	start: {
-		scale: 1,
-		opacity: 1,
-	},
-	hover: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const midFrame = {
-	hover: {
-		opacity: 1,
-	},
-	start: {
-		opacity: 0.5,
-	},
-};
-
-const secondFrame = {
-	hover: {
-		scale: 1,
-		opacity: 1,
-	},
-	start: {
-		scale: 0,
-		opacity: 0,
-	},
-};
-
-const normalizedWidth = 248;
-const normalizedHeight = 152;
-
-const normalizedColorSwatchSize = 32;
-
-// 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,
-};
-
-const StylesPreview = ( { label, isFocused, withHoverView } ) => {
-	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 [ 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();
-	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 iframe 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 iframe 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 { paletteColors, highlightedColors } = useStylesPreviewColors();
-
-	// Reset leaked styles from WP common.css and remove main content layout padding and border.
-	const editorStyles = useMemo( () => {
-		if ( styles ) {
-			return [
-				...styles,
-				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
-					isGlobalStyles: true,
-				},
-			];
-		}
-
-		return styles;
-	}, [ styles ] );
-	const isReady = !! width;
-
-	return (
-		<>
-			<div style={ { position: 'relative' } }>
-				{ containerResizeListener }
-			</div>
-			{ isReady && (
-				<Iframe
-					className="edit-site-global-styles-preview__iframe"
-					style={ {
-						width: '100%',
-						height: normalizedHeight * ratio,
-					} }
-					onMouseEnter={ () => setIsHovered( true ) }
-					onMouseLeave={ () => setIsHovered( false ) }
-					tabIndex={ -1 }
-				>
-					<EditorStyles styles={ editorStyles } />
-					<motion.div
-						style={ {
-							height: normalizedHeight * ratio,
-							width: '100%',
-							background: gradientValue ?? backgroundColor,
-							cursor: withHoverView ? 'pointer' : undefined,
-						} }
-						initial="start"
-						animate={
-							( isHovered || isFocused ) &&
-							! disableMotion &&
-							label
-								? 'hover'
-								: 'start'
-						}
-					>
-						<motion.div
-							variants={ firstFrame }
-							style={ {
-								height: '100%',
-								overflow: 'hidden',
-							} }
-						>
-							<HStack
-								spacing={ 10 * ratio }
-								justify="center"
-								style={ {
-									height: '100%',
-									overflow: 'hidden',
-								} }
-							>
-								<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
-								</motion.div>
-								<VStack spacing={ 4 * ratio }>
-									{ 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={ index }
-											style={ {
-												height: '100%',
-												background: color,
-												flexGrow: 1,
-											} }
-										/>
-									) ) }
-							</HStack>
-						</motion.div>
-						<motion.div
-							variants={ secondFrame }
-							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>
-					</motion.div>
-				</Iframe>
-			) }
-		</>
-	);
-};
-
-export default StylesPreview;

package/src/components/list/header.js

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
-
-export default function Header( { templateType } ) {
-	const { canCreate, postType } = useSelect(
-		( select ) => {
-			const { supportsTemplatePartsMode } =
-				select( editSiteStore ).getSettings();
-			return {
-				postType: select( coreStore ).getPostType( templateType ),
-				canCreate: ! supportsTemplatePartsMode,
-			};
-		},
-		[ templateType ]
-	);
-
-	if ( ! postType ) {
-		return null;
-	}
-
-	return (
-		<header className="edit-site-list-header">
-			<Heading level={ 1 } className="edit-site-list-header__title">
-				{ postType.labels?.name }
-			</Heading>
-
-			{ canCreate && (
-				<div className="edit-site-list-header__right">
-					<AddNewTemplate
-						templateType={ templateType }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				</div>
-			) }
-		</header>
-	);
-}

package/src/components/list/index.js

@@ -1,87 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { InterfaceSkeleton } from '@wordpress/interface';
-import { __, sprintf } from '@wordpress/i18n';
-import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { EditorSnackbars } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import useRegisterShortcuts from './use-register-shortcuts';
-import Header from './header';
-import Table from './table';
-import useTitle from '../routes/use-title';
-import { unlock } from '../../lock-unlock';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-} from '../../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-export default function List() {
-	const {
-		params: { path },
-	} = useLocation();
-	const templateType =
-		path === '/wp_template/all'
-			? TEMPLATE_POST_TYPE
-			: TEMPLATE_PART_POST_TYPE;
-
-	useRegisterShortcuts();
-
-	const { previousShortcut, nextShortcut } = useSelect( ( select ) => {
-		return {
-			previousShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ),
-			nextShortcut: select(
-				keyboardShortcutsStore
-			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
-		};
-	}, [] );
-
-	const postType = useSelect(
-		( select ) => select( coreStore ).getPostType( templateType ),
-		[ templateType ]
-	);
-
-	useTitle( postType?.labels?.name );
-
-	// `postType` could load in asynchronously. Only provide the detailed region labels if
-	// the postType has loaded, otherwise `InterfaceSkeleton` will fallback to the defaults.
-	const itemsListLabel = postType?.labels?.items_list;
-	const detailedRegionLabels = postType
-		? {
-				header: sprintf(
-					// translators: %s - the name of the page, 'Header' as in the header area of that page.
-					__( '%s - Header' ),
-					itemsListLabel
-				),
-				body: sprintf(
-					// translators: %s - the name of the page, 'Content' as in the content area of that page.
-					__( '%s - Content' ),
-					itemsListLabel
-				),
-		  }
-		: undefined;
-
-	return (
-		<InterfaceSkeleton
-			className="edit-site-list"
-			labels={ detailedRegionLabels }
-			header={ <Header templateType={ templateType } /> }
-			notices={ <EditorSnackbars /> }
-			content={ <Table templateType={ templateType } /> }
-			shortcuts={ {
-				previous: previousShortcut,
-				next: nextShortcut,
-			} }
-		/>
-	);
-}