@wordpress/edit-site 5.29.0 → 5.30.0

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,
-			} }
-		/>
-	);
-}

package/src/components/list/style.scss

@@ -1,188 +0,0 @@
-.edit-site-list-header {
-	position: relative;
-	align-items: center;
-	display: flex;
-	height: $header-height;
-	box-sizing: border-box;
-	width: 100%;
-	justify-content: flex-end;
-	padding-right: $grid-unit-20;
-
-	body.is-fullscreen-mode & {
-		padding-left: 60px;
-		transition: padding-left 20ms linear;
-		transition-delay: 80ms;
-		@include reduce-motion("transition");
-	}
-
-	.edit-site-list-header__title {
-		position: absolute;
-		left: 0;
-		width: 100%;
-		text-align: center;
-		font-size: 20px;
-		padding: 0;
-		margin: 0;
-	}
-}
-
-.edit-site-list-header__right {
-	// Creating a stacking context so that it won't be covered by title.
-	position: relative;
-}
-
-.edit-site {
-	.edit-site-list {
-		flex-grow: 1;
-		background: $white;
-		border-radius: $radius-block-ui * 4;
-		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-
-		.interface-interface-skeleton__editor {
-			min-width: 100%;
-
-			@include break-medium() {
-				min-width: 0;
-			}
-		}
-
-		.interface-interface-skeleton__content {
-			background: $white;
-			padding: $grid-unit-20;
-			align-items: center;
-
-			@include break-medium() {
-				padding: $grid-unit * 9;
-			}
-		}
-	}
-}
-
-.edit-site-list-table {
-	min-width: 100%;
-	border: $border-width solid $gray-300;
-	border-radius: 2px;
-	margin: 0 auto;
-	overflow: hidden;
-	border-spacing: 0;
-	max-width: 960px;
-
-	tr {
-		display: flex;
-		align-items: center;
-		padding: $grid-unit-20;
-		box-sizing: border-box;
-		border-top: $border-width solid $gray-100;
-		margin: 0;
-
-		&:first-child {
-			border-top: 0;
-		}
-
-		@include break-medium() {
-			padding: $grid-unit-30 $grid-unit-40;
-		}
-
-		// Template.
-		.edit-site-list-table-column:nth-child(1) {
-			width: calc(60% - 18px);
-			padding-right: $grid-unit-30;
-
-			a {
-				display: inline-block;
-				text-decoration: none;
-				font-weight: 500;
-				margin-bottom: $grid-unit-05;
-			}
-		}
-
-		// Added by.
-		.edit-site-list-table-column:nth-child(2) {
-			width: calc(40% - 18px);
-			word-break: break-word;
-		}
-
-		// Actions.
-		.edit-site-list-table-column:nth-child(3) {
-			min-width: $button-size;
-			flex-shrink: 0;
-		}
-	}
-
-	tr.edit-site-list-table-head {
-		font-size: 16px;
-		font-weight: 600;
-		text-align: left;
-		color: $gray-900;
-		border-top: none;
-		border-bottom: $border-width solid $gray-300;
-
-		th {
-			font-weight: inherit;
-		}
-	}
-}
-
-.edit-site-list.is-navigation-open .components-snackbar-list {
-	@include break-medium() {
-		margin-left: $nav-sidebar-width;
-	}
-}
-
-.edit-site-list__rename-modal {
-	// The rename dropdown popover is open at the same time as the rename modal. The latter has to be higher.
-	z-index: z-index(".edit-site-list__rename-modal");
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-}
-
-.edit-site-template__actions {
-	button:not(:last-child) {
-		margin-right: $grid-unit-10;
-	}
-}
-
-.edit-site-list-added-by__icon {
-	display: flex;
-	flex-shrink: 0;
-	width: $grid-unit-30;
-	height: $grid-unit-30;
-
-	svg {
-		fill: currentColor;
-	}
-}
-
-.edit-site-list-added-by__avatar {
-	flex-shrink: 0;
-	overflow: hidden;
-	width: $grid-unit-30;
-	height: $grid-unit-30;
-	align-items: center;
-	justify-content: center;
-	display: flex;
-
-	img {
-		width: 20px;
-		height: 20px;
-		object-fit: cover;
-		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-		border-radius: 100%;
-	}
-
-	&.is-loaded {
-		img {
-			opacity: 1;
-		}
-	}
-}
-
-.edit-site-list-added-by__customized-info {
-	display: block;
-	color: $gray-700;
-}