@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,30 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import DimensionsPanel from './dimensions-panel';
-import ScreenHeader from './header';
-import { unlock } from '../../lock-unlock';
-
-const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenLayout() {
-	const [ rawSettings ] = useGlobalSetting( '' );
-	const settings = useSettingsForBlockElement( rawSettings );
-	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-
-	return (
-		<>
-			<ScreenHeader title={ __( 'Layout' ) } />
-			{ hasDimensionsPanel && <DimensionsPanel /> }
-		</>
-	);
-}
-
-export default ScreenLayout;

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

@@ -1,202 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalConfirmDialog as ConfirmDialog,
-	Spinner,
-} from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useContext, useState, useEffect } from '@wordpress/element';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from '../header';
-import { unlock } from '../../../lock-unlock';
-import Revisions from '../../revisions';
-import { store as editSiteStore } from '../../../store';
-import useGlobalStylesRevisions from './use-global-styles-revisions';
-import RevisionsButtons from './revisions-buttons';
-import StyleBook from '../../style-book';
-import Pagination from '../../pagination';
-
-const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
-	blockEditorPrivateApis
-);
-
-const PAGE_SIZE = 10;
-
-function ScreenRevisions() {
-	const { user: currentEditorGlobalStyles, setUserConfig } =
-		useContext( GlobalStylesContext );
-	const { blocks, editorCanvasContainerView } = useSelect(
-		( select ) => ( {
-			editorCanvasContainerView: unlock(
-				select( editSiteStore )
-			).getEditorCanvasContainerView(),
-			blocks: select( blockEditorStore ).getBlocks(),
-		} ),
-		[]
-	);
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-	const [ currentRevisions, setCurrentRevisions ] = useState( [] );
-	const { revisions, isLoading, hasUnsavedChanges, revisionsCount } =
-		useGlobalStylesRevisions( {
-			query: {
-				per_page: PAGE_SIZE,
-				page: currentPage,
-			},
-		} );
-
-	const numPages = Math.ceil( revisionsCount / PAGE_SIZE );
-
-	const [ currentlySelectedRevision, setCurrentlySelectedRevision ] =
-		useState( currentEditorGlobalStyles );
-	const [
-		isLoadingRevisionWithUnsavedChanges,
-		setIsLoadingRevisionWithUnsavedChanges,
-	] = useState( false );
-	const { setEditorCanvasContainerView } = unlock(
-		useDispatch( editSiteStore )
-	);
-	const selectedRevisionMatchesEditorStyles = areGlobalStyleConfigsEqual(
-		currentlySelectedRevision,
-		currentEditorGlobalStyles
-	);
-
-	// The actual code that triggers the revisions screen to navigate back
-	// to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`.
-	const onCloseRevisions = () => {
-		const canvasContainerView =
-			editorCanvasContainerView === 'global-styles-revisions:style-book'
-				? 'style-book'
-				: undefined;
-		setEditorCanvasContainerView( canvasContainerView );
-	};
-
-	const restoreRevision = ( revision ) => {
-		setUserConfig( () => revision );
-		setIsLoadingRevisionWithUnsavedChanges( false );
-		onCloseRevisions();
-	};
-
-	useEffect( () => {
-		if ( ! isLoading && revisions.length ) {
-			setCurrentRevisions( revisions );
-		}
-	}, [ revisions, isLoading ] );
-
-	const firstRevision = revisions[ 0 ];
-	const currentlySelectedRevisionId = currentlySelectedRevision?.id;
-	const shouldSelectFirstItem =
-		!! firstRevision?.id &&
-		! selectedRevisionMatchesEditorStyles &&
-		! currentlySelectedRevisionId;
-
-	useEffect( () => {
-		/*
-		 * Ensure that the first item is selected and loaded into the preview pane
-		 * when no revision is selected and the selected styles don't match the current editor styles.
-		 * This is required in case editor styles are changed outside the revisions panel,
-		 * e.g., via the reset styles function of useGlobalStylesReset().
-		 * See: https://github.com/WordPress/gutenberg/issues/55866
-		 */
-		if ( shouldSelectFirstItem ) {
-			setCurrentlySelectedRevision( firstRevision );
-		}
-	}, [ shouldSelectFirstItem, firstRevision ] );
-
-	// Only display load button if there is a revision to load,
-	// and it is different from the current editor styles.
-	const isLoadButtonEnabled =
-		!! currentlySelectedRevisionId &&
-		currentlySelectedRevisionId !== 'unsaved' &&
-		! selectedRevisionMatchesEditorStyles;
-	const hasRevisions = !! currentRevisions.length;
-
-	return (
-		<>
-			<ScreenHeader
-				title={
-					revisionsCount &&
-					// translators: %s: number of revisions.
-					sprintf( __( 'Revisions (%s)' ), revisionsCount )
-				}
-				description={ __(
-					'Click on previously saved styles to preview them. To restore a selected version to the editor, hit "Apply." When you\'re ready, use the Save button to save your changes.'
-				) }
-				onBack={ onCloseRevisions }
-			/>
-			{ ! hasRevisions && (
-				<Spinner className="edit-site-global-styles-screen-revisions__loading" />
-			) }
-			{ hasRevisions &&
-				( editorCanvasContainerView ===
-				'global-styles-revisions:style-book' ? (
-					<StyleBook
-						userConfig={ currentlySelectedRevision }
-						isSelected={ () => {} }
-						onClose={ () => {
-							setEditorCanvasContainerView(
-								'global-styles-revisions'
-							);
-						} }
-					/>
-				) : (
-					<Revisions
-						blocks={ blocks }
-						userConfig={ currentlySelectedRevision }
-						closeButtonLabel={ __( 'Close revisions' ) }
-					/>
-				) ) }
-			<RevisionsButtons
-				onChange={ setCurrentlySelectedRevision }
-				selectedRevisionId={ currentlySelectedRevisionId }
-				userRevisions={ currentRevisions }
-				canApplyRevision={ isLoadButtonEnabled }
-				onApplyRevision={ () =>
-					hasUnsavedChanges
-						? setIsLoadingRevisionWithUnsavedChanges( true )
-						: restoreRevision( currentlySelectedRevision )
-				}
-			/>
-			{ numPages > 1 && (
-				<div className="edit-site-global-styles-screen-revisions__footer">
-					<Pagination
-						className="edit-site-global-styles-screen-revisions__pagination"
-						currentPage={ currentPage }
-						numPages={ numPages }
-						changePage={ setCurrentPage }
-						totalItems={ revisionsCount }
-						disabled={ isLoading }
-						label={ __( 'Global Styles pagination' ) }
-					/>
-				</div>
-			) }
-			{ isLoadingRevisionWithUnsavedChanges && (
-				<ConfirmDialog
-					isOpen={ isLoadingRevisionWithUnsavedChanges }
-					confirmButtonText={ __( 'Apply' ) }
-					onConfirm={ () =>
-						restoreRevision( currentlySelectedRevision )
-					}
-					onCancel={ () =>
-						setIsLoadingRevisionWithUnsavedChanges( false )
-					}
-					size="medium"
-				>
-					{ __(
-						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
-					) }
-				</ConfirmDialog>
-			) }
-		</>
-	);
-}
-
-export default ScreenRevisions;

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -1,238 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { Button, Composite } from '@wordpress/components';
-import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { ENTER, SPACE } from '@wordpress/keycodes';
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-
-const DAY_IN_MILLISECONDS = 60 * 60 * 1000 * 24;
-const { getGlobalStylesChanges } = unlock( blockEditorPrivateApis );
-
-function ChangesSummary( { revision, previousRevision } ) {
-	const changes = getGlobalStylesChanges( revision, previousRevision, {
-		maxResults: 7,
-	} );
-
-	if ( ! changes.length ) {
-		return null;
-	}
-
-	return (
-		<ul
-			data-testid="global-styles-revision-changes"
-			className="edit-site-global-styles-screen-revisions__changes"
-		>
-			{ changes.map( ( change ) => (
-				<li key={ change }>{ change }</li>
-			) ) }
-		</ul>
-	);
-}
-
-/**
- * Returns a button label for the revision.
- *
- * @param {string|number} id                    A revision object.
- * @param {string}        authorDisplayName     Author name.
- * @param {string}        formattedModifiedDate Revision modified date formatted.
- * @param {boolean}       areStylesEqual        Whether the revision matches the current editor styles.
- * @return {string} Translated label.
- */
-function getRevisionLabel(
-	id,
-	authorDisplayName,
-	formattedModifiedDate,
-	areStylesEqual
-) {
-	if ( 'parent' === id ) {
-		return __( 'Reset the styles to the theme defaults' );
-	}
-
-	if ( 'unsaved' === id ) {
-		return sprintf(
-			/* translators: %s: author display name */
-			__( 'Unsaved changes by %s' ),
-			authorDisplayName
-		);
-	}
-
-	return areStylesEqual
-		? sprintf(
-				// translators: 1: author display name. 2: revision creation date.
-				__(
-					'Changes saved by %1$s on %2$s. This revision matches current editor styles.'
-				),
-				authorDisplayName,
-				formattedModifiedDate
-		  )
-		: sprintf(
-				// translators: 1: author display name. 2: revision creation date.
-				__( 'Changes saved by %1$s on %2$s' ),
-				authorDisplayName,
-				formattedModifiedDate
-		  );
-}
-
-/**
- * Returns a rendered list of revisions buttons.
- *
- * @typedef {Object} props
- * @property {Array<Object>} userRevisions      A collection of user revisions.
- * @property {number}        selectedRevisionId The id of the currently-selected revision.
- * @property {Function}      onChange           Callback fired when a revision is selected.
- *
- * @param    {props}         Component          props.
- * @return {JSX.Element} The modal component.
- */
-function RevisionsButtons( {
-	userRevisions,
-	selectedRevisionId,
-	onChange,
-	canApplyRevision,
-	onApplyRevision,
-} ) {
-	const { currentThemeName, currentUser } = useSelect( ( select ) => {
-		const { getCurrentTheme, getCurrentUser } = select( coreStore );
-		const currentTheme = getCurrentTheme();
-		return {
-			currentThemeName:
-				currentTheme?.name?.rendered || currentTheme?.stylesheet,
-			currentUser: getCurrentUser(),
-		};
-	}, [] );
-	const dateNowInMs = getDate().getTime();
-	const { datetimeAbbreviated } = getSettings().formats;
-
-	return (
-		<Composite
-			orientation="vertical"
-			className="edit-site-global-styles-screen-revisions__revisions-list"
-			aria-label={ __( 'Global styles revisions list' ) }
-			role="listbox"
-		>
-			{ userRevisions.map( ( revision, index ) => {
-				const { id, author, modified } = revision;
-				const isUnsaved = 'unsaved' === id;
-				// Unsaved changes are created by the current user.
-				const revisionAuthor = isUnsaved ? currentUser : author;
-				const authorDisplayName = revisionAuthor?.name || __( 'User' );
-				const authorAvatar = revisionAuthor?.avatar_urls?.[ '48' ];
-				const isFirstItem = index === 0;
-				const isSelected = selectedRevisionId
-					? selectedRevisionId === id
-					: isFirstItem;
-				const areStylesEqual = ! canApplyRevision && isSelected;
-				const isReset = 'parent' === id;
-				const modifiedDate = getDate( modified );
-				const displayDate =
-					modified &&
-					dateNowInMs - modifiedDate.getTime() > DAY_IN_MILLISECONDS
-						? dateI18n( datetimeAbbreviated, modifiedDate )
-						: humanTimeDiff( modified );
-				const revisionLabel = getRevisionLabel(
-					id,
-					authorDisplayName,
-					dateI18n( datetimeAbbreviated, modifiedDate ),
-					areStylesEqual
-				);
-
-				return (
-					<Composite.Item
-						key={ id }
-						className="edit-site-global-styles-screen-revisions__revision-item"
-						aria-current={ isSelected }
-						role="option"
-						onKeyDown={ ( event ) => {
-							const { keyCode } = event;
-							if ( keyCode === ENTER || keyCode === SPACE ) {
-								onChange( revision );
-							}
-						} }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							onChange( revision );
-						} }
-						aria-selected={ isSelected }
-						aria-label={ revisionLabel }
-						render={ <div /> }
-					>
-						<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
-							{ isReset ? (
-								<span className="edit-site-global-styles-screen-revisions__description">
-									{ __( 'Default styles' ) }
-									<span className="edit-site-global-styles-screen-revisions__meta">
-										{ currentThemeName }
-									</span>
-								</span>
-							) : (
-								<span className="edit-site-global-styles-screen-revisions__description">
-									{ isUnsaved ? (
-										<span className="edit-site-global-styles-screen-revisions__date">
-											{ __( '(Unsaved)' ) }
-										</span>
-									) : (
-										<time
-											className="edit-site-global-styles-screen-revisions__date"
-											dateTime={ modified }
-										>
-											{ displayDate }
-										</time>
-									) }
-									<span className="edit-site-global-styles-screen-revisions__meta">
-										<img
-											alt={ authorDisplayName }
-											src={ authorAvatar }
-										/>
-										{ authorDisplayName }
-									</span>
-									{ isSelected && (
-										<ChangesSummary
-											revision={ revision }
-											previousRevision={
-												index < userRevisions.length
-													? userRevisions[ index + 1 ]
-													: {}
-											}
-										/>
-									) }
-								</span>
-							) }
-						</span>
-						{ isSelected &&
-							( areStylesEqual ? (
-								<p className="edit-site-global-styles-screen-revisions__applied-text">
-									{ __(
-										'These styles are already applied to your site.'
-									) }
-								</p>
-							) : (
-								<Button
-									size="compact"
-									variant="primary"
-									className="edit-site-global-styles-screen-revisions__apply-button"
-									onClick={ onApplyRevision }
-									aria-label={ __(
-										'Apply the selected revision to your site.'
-									) }
-								>
-									{ isReset
-										? __( 'Reset to defaults' )
-										: __( 'Apply' ) }
-								</Button>
-							) ) }
-					</Composite.Item>
-				);
-			} ) }
-		</Composite>
-	);
-}
-
-export default RevisionsButtons;

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

@@ -1,194 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-global-styles-screen-revisions__revisions-list {
-	list-style: none;
-	margin: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20;
-	// Forces subsequent flex items to the bottom.
-	flex-grow: 1;
-	li {
-		margin-bottom: 0;
-	}
-}
-
-.edit-site-global-styles-screen-revisions__revision-item {
-	position: relative;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-
-	&[role="option"]:active,
-	&[role="option"]:focus {
-		@include button-style__focus();
-	}
-
-	&:hover {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		.edit-site-global-styles-screen-revisions__date {
-			color: var(--wp-admin-theme-color);
-		}
-	}
-
-	&::before,
-	&::after {
-		position: absolute;
-		content: "\a";
-		display: block;
-	}
-
-	&::before {
-		background: $gray-300;
-		border-radius: 50%;
-		height: $grid-unit-10;
-		width: $grid-unit-10;
-		top: $grid-unit-20 + 2;
-		left: $grid-unit-20 + 1; // So the circle is centered on the line.
-		transform: translate(-50%, -50%);
-		z-index: 1;
-
-		// This border serves as a background color in Windows High Contrast mode.
-		border: 4px solid transparent;
-	}
-
-	&[aria-selected="true"] {
-		border-radius: $radius-small;
-
-		// Only visible in Windows High Contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: -2px;
-
-		color: var(--wp-admin-theme-color);
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-
-		.edit-site-global-styles-screen-revisions__date {
-			color: var(--wp-admin-theme-color);
-		}
-
-		&::before {
-			background: var(--wp-admin-theme-color);
-		}
-
-		.edit-site-global-styles-screen-revisions__changes > li,
-		.edit-site-global-styles-screen-revisions__meta,
-		.edit-site-global-styles-screen-revisions__applied-text {
-			color: $gray-900;
-		}
-	}
-
-	&::after {
-		height: 100%;
-		left: $grid-unit-20;
-		top: 0;
-		width: 0;
-		border: 0.5px solid $gray-300;
-	}
-
-	&:first-child::after {
-		top: $grid-unit-20 + 2;
-	}
-
-	&:last-child::after {
-		height: $grid-unit-20 + 2;
-	}
-}
-.edit-site-global-styles-screen-revisions__revision-item-wrapper {
-	display: block;
-	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
-}
-
-.edit-site-global-styles-screen-revisions__apply-button.is-primary,
-.edit-site-global-styles-screen-revisions__applied-text {
-	align-self: flex-start;
-	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
-	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
-}
-
-.edit-site-global-styles-screen-revisions__changes,
-.edit-site-global-styles-screen-revisions__meta,
-.edit-site-global-styles-screen-revisions__applied-text {
-	color: $gray-700;
-	font-size: 12px;
-}
-
-.edit-site-global-styles-screen-revisions__description {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: $grid-unit-10;
-	.edit-site-global-styles-screen-revisions__date {
-		text-transform: uppercase;
-		font-weight: 600;
-		font-size: 12px;
-	}
-}
-
-.edit-site-global-styles-screen-revisions__meta {
-	display: flex;
-	justify-content: start;
-	width: 100%;
-	align-items: flex-start;
-	text-align: left;
-	margin-bottom: $grid-unit-05;
-
-	img {
-		width: $grid-unit-20;
-		height: $grid-unit-20;
-		border-radius: 100%;
-		margin-right: $grid-unit-10;
-	}
-}
-
-.edit-site-global-styles-screen-revisions__loading {
-	margin: $grid-unit-30 auto !important;
-}
-
-.edit-site-global-styles-screen-revisions__changes {
-	text-align: left;
-	line-height: $default-line-height;
-	margin-left: $grid-unit-15;
-	list-style: disc;
-
-	li {
-		margin-bottom: $grid-unit-05;
-	}
-}
-
-.edit-site-global-styles-screen-revisions__pagination.edit-site-global-styles-screen-revisions__pagination {
-	justify-content: space-between;
-	gap: 2px;
-	.edit-site-pagination__total {
-		position: absolute;
-		left: -1000px;
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-	}
-
-	.components-text {
-		font-size: 12px;
-		// `will-change` is required because something about flex props prevents
-		// Safari from rendering the page / total text.
-		will-change: opacity;
-	}
-
-	.components-button.is-tertiary {
-		color: $gray-900;
-	}
-
-	.components-button.is-tertiary:disabled,
-	.components-button.is-tertiary[aria-disabled="true"] {
-		color: $gray-600;
-	}
-}
-
-.edit-site-global-styles-screen-revisions__footer {
-	height: $grid-unit-70;
-	z-index: 1;
-	position: sticky;
-	min-width: 100%;
-	bottom: 0;
-	background: $white;
-	padding: $grid-unit-15;
-	border-top: $border-width solid $gray-300;
-}