@wordpress/edit-site 5.10.0 → 5.12.0

package/src/components/editor/index.js

@@ -1,10 +1,15 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockContextProvider,
@@ -32,7 +37,6 @@ import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-
 import useTitle from '../routes/use-title';
 import CanvasSpinner from '../canvas-spinner';
 import { unlock } from '../../private-apis';
@@ -50,40 +54,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function useIsSiteEditorLoading() {
-	const { isLoaded: hasLoadedPost } = useEditedEntityRecord();
-	const { hasResolvingSelectors } = useSelect( ( select ) => {
-		return {
-			hasResolvingSelectors: select( coreStore ).hasResolvingSelectors(),
-		};
-	} );
-	const [ loaded, setLoaded ] = useState( false );
-	const inLoadingPause = ! loaded && ! hasResolvingSelectors;
-
-	useEffect( () => {
-		if ( inLoadingPause ) {
-			/*
-			 * We're using an arbitrary 1s timeout here to catch brief moments
-			 * without any resolving selectors that would result in displaying
-			 * brief flickers of loading state and loaded state.
-			 *
-			 * It's worth experimenting with different values, since this also
-			 * adds 1s of artificial delay after loading has finished.
-			 */
-			const timeout = setTimeout( () => {
-				setLoaded( true );
-			}, 1000 );
-
-			return () => {
-				clearTimeout( timeout );
-			};
-		}
-	}, [ inLoadingPause ] );
-
-	return ! loaded || ! hasLoadedPost;
-}
-
-export default function Editor() {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -102,6 +73,7 @@ export default function Editor() {
 		isListViewOpen,
 		showIconLabels,
 		showBlockBreadcrumbs,
+		hasPageContentLock,
 	} = useSelect( ( select ) => {
 		const {
 			getEditedPostContext,
@@ -109,6 +81,7 @@ export default function Editor() {
 			getCanvasMode,
 			isInserterOpened,
 			isListViewOpened,
+			hasPageContentLock: _hasPageContentLock,
 		} = unlock( select( editSiteStore ) );
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
@@ -133,6 +106,7 @@ export default function Editor() {
 				'core/edit-site',
 				'showBlockBreadcrumbs'
 			),
+			hasPageContentLock: _hasPageContentLock(),
 		};
 	}, [] );
 	const { setEditedPostContext } = useDispatch( editSiteStore );
@@ -150,9 +124,10 @@ export default function Editor() {
 	const secondarySidebarLabel = isListViewOpen
 		? __( 'List View' )
 		: __( 'Block Library' );
-	const blockContext = useMemo(
-		() => ( {
-			...context,
+	const blockContext = useMemo( () => {
+		const { postType, postId, ...nonPostFields } = context ?? {};
+		return {
+			...( hasPageContentLock ? context : nonPostFields ),
 			queryContext: [
 				context?.queryContext || { page: 1 },
 				( newQueryContext ) =>
@@ -164,9 +139,8 @@ export default function Editor() {
 						},
 					} ),
 			],
-		} ),
-		[ context, setEditedPostContext ]
-	);
+		};
+	}, [ hasPageContentLock, context, setEditedPostContext ] );
 
 	let title;
 	if ( hasLoadedPost ) {
@@ -186,8 +160,6 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	const isLoading = useIsSiteEditorLoading();
-
 	return (
 		<>
 			{ isLoading ? <CanvasSpinner /> : null }
@@ -203,13 +175,14 @@ export default function Editor() {
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
 							enableRegionNavigation={ false }
-							className={ showIconLabels && 'show-icon-labels' }
-							notices={
-								( isEditMode ||
-									window?.__experimentalEnableThemePreviews ) && (
-									<EditorSnackbars />
-								)
-							}
+							className={ classnames(
+								'edit-site-editor__interface-skeleton',
+								{
+									'show-icon-labels': showIconLabels,
+									'is-loading': isLoading,
+								}
+							) }
+							notices={ <EditorSnackbars /> }
 							content={
 								<>
 									<GlobalStylesRenderer />
@@ -256,7 +229,11 @@ export default function Editor() {
 							footer={
 								shouldShowBlockBreakcrumbs && (
 									<BlockBreadcrumb
-										rootLabelText={ __( 'Template' ) }
+										rootLabelText={
+											hasPageContentLock
+												? __( 'Page' )
+												: __( 'Template' )
+										}
 									/>
 								)
 							}

package/src/components/editor/style.scss

@@ -1,3 +1,13 @@
+.edit-site-editor__interface-skeleton {
+	opacity: 1;
+	transition: opacity 0.1s ease-out;
+	@include reduce-motion("transition");
+
+	&.is-loading {
+		opacity: 0;
+	}
+}
+
 .edit-site-editor__toggle-save-panel {
 	box-sizing: border-box;
 	width: $sidebar-width;
@@ -10,7 +20,7 @@
 
 // Adjust the position of the notices
 .edit-site .components-editor-notices__snackbar {
-	position: fixed;
+	position: absolute;
 	right: 0;
 	bottom: 40px;
 	padding-left: 16px;

package/src/components/editor-canvas-container/index.js

@@ -18,6 +18,7 @@ import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
  */
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import ResizableEditor from '../block-editor/resizable-editor';
 
 /**
  * Returns a translated string for the title of the editor canvas container.
@@ -46,7 +47,12 @@ const {
 	Fill: EditorCanvasContainerFill,
 } = createPrivateSlotFill( SLOT_FILL_NAME );
 
-function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
+function EditorCanvasContainer( {
+	children,
+	closeButtonLabel,
+	onClose,
+	enableResizing = false,
+} ) {
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
@@ -62,6 +68,7 @@ function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 		() => getEditorCanvasContainerTitle( editorCanvasContainerView ),
 		[ editorCanvasContainerView ]
 	);
+
 	function onCloseContainer() {
 		if ( typeof onClose === 'function' ) {
 			onClose();
@@ -97,24 +104,26 @@ function EditorCanvasContainer( { children, closeButtonLabel, onClose } ) {
 
 	return (
 		<EditorCanvasContainerFill>
-			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
-			<section
-				className="edit-site-editor-canvas-container"
-				ref={ shouldShowCloseButton ? focusOnMountRef : null }
-				onKeyDown={ closeOnEscape }
-				aria-label={ title }
-			>
-				{ shouldShowCloseButton && (
-					<Button
-						className="edit-site-editor-canvas-container__close-button"
-						icon={ closeSmall }
-						label={ closeButtonLabel || __( 'Close' ) }
-						onClick={ onCloseContainer }
-						showTooltip={ false }
-					/>
-				) }
-				{ childrenWithProps }
-			</section>
+			<ResizableEditor enableResizing={ enableResizing }>
+				{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
+				<section
+					className="edit-site-editor-canvas-container"
+					ref={ shouldShowCloseButton ? focusOnMountRef : null }
+					onKeyDown={ closeOnEscape }
+					aria-label={ title }
+				>
+					{ shouldShowCloseButton && (
+						<Button
+							className="edit-site-editor-canvas-container__close-button"
+							icon={ closeSmall }
+							label={ closeButtonLabel || __( 'Close' ) }
+							onClick={ onCloseContainer }
+							showTooltip={ false }
+						/>
+					) }
+					{ childrenWithProps }
+				</section>
+			</ResizableEditor>
 		</EditorCanvasContainerFill>
 	);
 }

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

@@ -9,6 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import {
 	PanelBody,
 	__experimentalVStack as VStack,
+	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
@@ -21,6 +22,41 @@ import { unlock } from '../../private-apis';
 import Subtitle from './subtitle';
 import { useBlockVariations, VariationsPanel } from './variations-panel';
 
+function applyFallbackStyle( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	const hasColorOrWidth = border.color || border.width;
+
+	if ( ! border.style && hasColorOrWidth ) {
+		return { ...border, style: 'solid' };
+	}
+
+	if ( border.style && ! hasColorOrWidth ) {
+		return undefined;
+	}
+
+	return border;
+}
+
+function applyAllFallbackStyles( border ) {
+	if ( ! border ) {
+		return border;
+	}
+
+	if ( hasSplitBorders( border ) ) {
+		return {
+			top: applyFallbackStyle( border.top ),
+			right: applyFallbackStyle( border.right ),
+			bottom: applyFallbackStyle( border.bottom ),
+			left: applyFallbackStyle( border.left ),
+		};
+	}
+
+	return applyFallbackStyle( border );
+}
+
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
@@ -108,6 +144,41 @@ function ScreenBlock( { name, variation } ) {
 			} );
 		}
 	};
+	const onChangeBorders = ( newStyle ) => {
+		if ( ! newStyle?.border ) {
+			setStyle( newStyle );
+			return;
+		}
+
+		// As Global Styles can't conditionally generate styles based on if
+		// other style properties have been set, we need to force split
+		// border definitions for user set global border styles. Border
+		// radius is derived from the same property i.e. `border.radius` if
+		// it is a string that is used. The longhand border radii styles are
+		// only generated if that property is an object.
+		//
+		// For borders (color, style, and width) those are all properties on
+		// the `border` style property. This means if the theme.json defined
+		// split borders and the user condenses them into a flat border or
+		// vice-versa we'd get both sets of styles which would conflict.
+		const { radius, ...newBorder } = newStyle.border;
+		const border = applyAllFallbackStyles( newBorder );
+		const updatedBorder = ! hasSplitBorders( border )
+			? {
+					top: border,
+					right: border,
+					bottom: border,
+					left: border,
+			  }
+			: {
+					color: null,
+					style: null,
+					width: null,
+					...border,
+			  };
+
+		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
+	};
 
 	return (
 		<>
@@ -152,7 +223,7 @@ function ScreenBlock( { name, variation } ) {
 				<StylesBorderPanel
 					inheritedValue={ inheritedStyle }
 					value={ style }
-					onChange={ setStyle }
+					onChange={ onChangeBorders }
 					settings={ settings }
 				/>
 			) }
@@ -160,7 +231,7 @@ function ScreenBlock( { name, variation } ) {
 				<StylesEffectsPanel
 					inheritedValue={ inheritedStyleWithLayout }
 					value={ styleWithLayout }
-					onChange={ onChangeDimensions }
+					onChange={ setStyle }
 					settings={ settings }
 					includeLayoutControls
 				/>
@@ -169,7 +240,7 @@ function ScreenBlock( { name, variation } ) {
 				<StylesFiltersPanel
 					inheritedValue={ inheritedStyleWithLayout }
 					value={ styleWithLayout }
-					onChange={ onChangeDimensions }
+					onChange={ setStyle }
 					settings={ {
 						...settings,
 						color: {

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

@@ -42,19 +42,11 @@ function ScreenRevisions() {
 			blocks: select( blockEditorStore ).getBlocks(),
 		};
 	}, [] );
-
 	const { revisions, isLoading, hasUnsavedChanges } =
 		useGlobalStylesRevisions();
+	const [ selectedRevisionId, setSelectedRevisionId ] = useState();
 	const [ globalStylesRevision, setGlobalStylesRevision ] =
 		useState( userConfig );
-
-	const [ currentRevisionId, setCurrentRevisionId ] = useState(
-		/*
-		 * We need this for the first render,
-		 * otherwise the unsaved changes haven't been merged into the revisions array yet.
-		 */
-		hasUnsavedChanges ? 'unsaved' : revisions?.[ 0 ]?.id
-	);
 	const [
 		isLoadingRevisionWithUnsavedChanges,
 		setIsLoadingRevisionWithUnsavedChanges,
@@ -89,7 +81,7 @@ function ScreenRevisions() {
 			settings: revision?.settings,
 			id: revision?.id,
 		} );
-		setCurrentRevisionId( revision?.id );
+		setSelectedRevisionId( revision?.id );
 	};
 
 	const isLoadButtonEnabled =
@@ -117,7 +109,7 @@ function ScreenRevisions() {
 			<div className="edit-site-global-styles-screen-revisions">
 				<RevisionsButtons
 					onChange={ selectRevision }
-					currentRevisionId={ currentRevisionId }
+					selectedRevisionId={ selectedRevisionId }
 					userRevisions={ revisions }
 				/>
 				{ isLoadButtonEnabled && (

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

@@ -18,9 +18,8 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
  */
 function getRevisionLabel( revision ) {
 	const authorDisplayName = revision?.author?.name || __( 'User' );
-	const isUnsaved = 'unsaved' === revision?.id;
 
-	if ( isUnsaved ) {
+	if ( 'unsaved' === revision?.id ) {
 		return sprintf(
 			/* translators: %(name)s author display name */
 			__( 'Unsaved changes by %(name)s' ),
@@ -57,45 +56,42 @@ function getRevisionLabel( revision ) {
  * Returns a rendered list of revisions buttons.
  *
  * @typedef {Object} props
- * @property {Array<Object>} userRevisions     A collection of user revisions.
- * @property {number}        currentRevisionId Callback fired when the modal is closed or action cancelled.
- * @property {Function}      onChange          Callback fired when a revision is selected.
+ * @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.
+ * @param    {props}         Component          props.
  * @return {JSX.Element} The modal component.
  */
-function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
+function RevisionsButtons( { userRevisions, selectedRevisionId, onChange } ) {
 	return (
 		<ol
 			className="edit-site-global-styles-screen-revisions__revisions-list"
 			aria-label={ __( 'Global styles revisions' ) }
 			role="group"
 		>
-			{ userRevisions.map( ( revision ) => {
-				const { id, author, isLatest, modified } = revision;
+			{ userRevisions.map( ( revision, index ) => {
+				const { id, author, modified } = revision;
 				const authorDisplayName = author?.name || __( 'User' );
 				const authorAvatar = author?.avatar_urls?.[ '48' ];
-				/*
-				 * If the currentId hasn't been selected yet, the first revision is
-				 * the current one so long as the API returns revisions in descending order.
-				 */
-				const isActive = !! currentRevisionId
-					? id === currentRevisionId
-					: isLatest;
+				const isUnsaved = 'unsaved' === revision?.id;
+				const isSelected = selectedRevisionId
+					? selectedRevisionId === revision?.id
+					: index === 0;
 
 				return (
 					<li
 						className={ classnames(
 							'edit-site-global-styles-screen-revisions__revision-item',
 							{
-								'is-current': isActive,
+								'is-selected': isSelected,
 							}
 						) }
 						key={ id }
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
-							disabled={ isActive }
+							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );
 							} }
@@ -106,13 +102,25 @@ function RevisionsButtons( { userRevisions, currentRevisionId, onChange } ) {
 									{ humanTimeDiff( modified ) }
 								</time>
 								<span className="edit-site-global-styles-screen-revisions__meta">
-									{ sprintf(
-										/* translators: %(name)s author display name */
-										__( 'Changes saved by %(name)s' ),
-										{
-											name: authorDisplayName,
-										}
-									) }
+									{ isUnsaved
+										? sprintf(
+												/* translators: %(name)s author display name */
+												__(
+													'Unsaved changes by %(name)s'
+												),
+												{
+													name: authorDisplayName,
+												}
+										  )
+										: sprintf(
+												/* translators: %(name)s author display name */
+												__(
+													'Changes saved by %(name)s'
+												),
+												{
+													name: authorDisplayName,
+												}
+										  ) }
 
 									<img
 										alt={ author?.name }

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

@@ -36,7 +36,7 @@
 		left: 0;
 		transform: translate(-50%, -50%);
 	}
-	&.is-current::before {
+	&.is-selected::before {
 		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 	}
 }
@@ -56,7 +56,7 @@
 	}
 }
 
-.is-current {
+.is-selected {
 	.edit-site-global-styles-screen-revisions__revision-button {
 		color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 		opacity: 1;
@@ -86,6 +86,7 @@
 	justify-content: space-between;
 	width: 100%;
 	align-items: center;
+	text-align: left;
 
 	img {
 		width: $grid-unit-20;

package/src/components/global-styles/screen-revisions/test/use-global-styles-revisions.js

@@ -49,7 +49,6 @@ describe( 'useGlobalStylesRevisions', () => {
 				styles: {},
 			},
 		],
-		isLoading: false,
 	};
 
 	it( 'returns loaded revisions with no unsaved changes', () => {
@@ -109,10 +108,24 @@ describe( 'useGlobalStylesRevisions', () => {
 		] );
 	} );
 
-	it( 'returns empty revisions when still loading', () => {
+	it( 'returns empty revisions', () => {
 		useSelect.mockImplementation( () => ( {
 			...selectValue,
-			isLoading: true,
+			revisions: [],
+		} ) );
+
+		const { result } = renderHook( () => useGlobalStylesRevisions() );
+		const { revisions, isLoading, hasUnsavedChanges } = result.current;
+
+		expect( isLoading ).toBe( true );
+		expect( hasUnsavedChanges ).toBe( false );
+		expect( revisions ).toEqual( [] );
+	} );
+
+	it( 'returns empty revisions when authors are not yet available', () => {
+		useSelect.mockImplementation( () => ( {
+			...selectValue,
+			authors: [],
 		} ) );
 
 		const { result } = renderHook( () => useGlobalStylesRevisions() );

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

@@ -5,10 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -20,53 +17,46 @@ const SITE_EDITOR_AUTHORS_QUERY = {
 	context: 'view',
 	capabilities: [ 'edit_theme_options' ],
 };
-
+const EMPTY_ARRAY = [];
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 export default function useGlobalStylesRevisions() {
 	const { user: userConfig } = useContext( GlobalStylesContext );
-	const { authors, currentUser, isDirty, revisions, isLoading } = useSelect(
+	const { authors, currentUser, isDirty, revisions } = useSelect(
 		( select ) => {
 			const {
 				__experimentalGetDirtyEntityRecords,
 				getCurrentUser,
 				getUsers,
 				getCurrentThemeGlobalStylesRevisions,
-				isResolving,
 			} = select( coreStore );
 			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 			const _currentUser = getCurrentUser();
 			const _isDirty = dirtyEntityRecords.length > 0;
 			const globalStylesRevisions =
-				getCurrentThemeGlobalStylesRevisions() || [];
-			const _authors = getUsers( SITE_EDITOR_AUTHORS_QUERY );
+				getCurrentThemeGlobalStylesRevisions() || EMPTY_ARRAY;
+			const _authors =
+				getUsers( SITE_EDITOR_AUTHORS_QUERY ) || EMPTY_ARRAY;
 
 			return {
 				authors: _authors,
 				currentUser: _currentUser,
 				isDirty: _isDirty,
 				revisions: globalStylesRevisions,
-				isLoading:
-					! globalStylesRevisions.length ||
-					isResolving( 'getUsers', [ SITE_EDITOR_AUTHORS_QUERY ] ),
 			};
 		},
 		[]
 	);
 	return useMemo( () => {
 		let _modifiedRevisions = [];
-		if ( isLoading || ! revisions.length ) {
+		if ( ! authors.length || ! revisions.length ) {
 			return {
 				revisions: _modifiedRevisions,
 				hasUnsavedChanges: isDirty,
-				isLoading,
+				isLoading: true,
 			};
 		}
-		/*
-		 * Adds a flag to the first revision, which is the latest.
-		 * Also adds author information to the revision.
-		 * Then, if there are unsaved changes in the editor, create a
-		 * new "revision" item that represents the unsaved changes.
-		 */
+
+		// Adds author details to each revision.
 		_modifiedRevisions = revisions.map( ( revision ) => {
 			return {
 				...revision,
@@ -76,11 +66,18 @@ export default function useGlobalStylesRevisions() {
 			};
 		} );
 
-		if ( _modifiedRevisions[ 0 ]?.id !== 'unsaved' ) {
+		// Flags the most current saved revision.
+		if ( _modifiedRevisions[ 0 ].id !== 'unsaved' ) {
 			_modifiedRevisions[ 0 ].isLatest = true;
 		}
 
-		if ( isDirty && ! isEmpty( userConfig ) && currentUser ) {
+		// Adds an item for unsaved changes.
+		if (
+			isDirty &&
+			userConfig &&
+			Object.keys( userConfig ).length > 0 &&
+			currentUser
+		) {
 			const unsavedRevision = {
 				id: 'unsaved',
 				styles: userConfig?.styles,
@@ -94,10 +91,11 @@ export default function useGlobalStylesRevisions() {
 
 			_modifiedRevisions.unshift( unsavedRevision );
 		}
+
 		return {
 			revisions: _modifiedRevisions,
 			hasUnsavedChanges: isDirty,
-			isLoading,
+			isLoading: false,
 		};
-	}, [ revisions.length, isDirty, isLoading ] );
+	}, [ isDirty, revisions, currentUser, authors, userConfig ] );
 }