@wordpress/edit-site 5.10.0 → 5.11.0

package/src/components/add-new-template/style.scss

@@ -1,70 +1,23 @@
-.edit-site-new-template-dropdown {
-	.edit-site-new-template-dropdown__menu-groups {
-		@include break-small() {
-			min-width: 300px;
-		}
-	}
+.edit-site-custom-template-modal {
+	&__contents-wrapper {
+		height: 100%;
+		justify-content: flex-start !important; // Required as topLeft alignment isn't working on VStack
 
-	// The specificity is needed to override the default tooltip styles.
-	&__menu-item-tooltip.components-tooltip .components-popover__content {
-		max-width: 320px;
-		padding: $grid-unit-10 $grid-unit-15;
-		border-radius: 2px;
-		white-space: pre-wrap;
-		min-width: 0;
-		width: auto;
-		text-align: left;
-	}
-}
+		> * {
+			width: 100%;
+		}
 
-.edit-site-custom-template-modal {
-	&__suggestions_list {
-		margin-left: - $grid-unit-15;
-		margin-right: - $grid-unit-15;
+		&__suggestions_list {
+			margin-left: - $grid-unit-15;
+			margin-right: - $grid-unit-15;
+			width: calc(100% + #{$grid-unit-15 * 2});
+		}
 	}
 
 	&__contents {
 		> .components-button {
-			padding: $grid-unit-30;
-			border-radius: $radius-block-ui;
 			height: auto;
-			display: flex;
-			flex-direction: column;
 			justify-content: center;
-			border: $border-width solid $gray-300;
-
-			// Show the boundary of the button, in High Contrast Mode.
-			outline: 1px solid transparent;
-
-			span:first-child {
-				color: $gray-900;
-			}
-
-			span {
-				color: $gray-700;
-			}
-
-			&:hover {
-				color: var(--wp-admin-theme-color-darker-10);
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-				border-color: transparent;
-
-				span {
-					color: var(--wp-admin-theme-color);
-				}
-			}
-
-			&:focus {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-				border-color: transparent;
-
-				// Windows High Contrast mode will show this outline, but not the box-shadow.
-				outline: 3px solid transparent;
-
-				span:first-child {
-					color: var(--wp-admin-theme-color);
-				}
-			}
 		}
 	}
 
@@ -86,7 +39,6 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			height: 232px;
 			overflow: scroll;
 		}
 
@@ -146,12 +98,6 @@
 }
 
 .edit-site-custom-generic-template__modal {
-	.components-base-control {
-		@include break-medium() {
-			width: $grid-unit * 40;
-		}
-	}
-
 	.components-modal__header {
 		border-bottom: none;
 	}
@@ -177,5 +123,72 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+.edit-site-add-new-template__modal {
+	max-width: $grid-unit-80 * 13;
+	width: calc(100% - #{$grid-unit-80});
+	margin-top: $grid-unit-80;
+	max-height: calc(100% - #{$grid-unit-80 * 2});
+
+	@include break-large() {
+		width: calc(100% - #{$grid-unit-80 * 2});
+	}
+}
+
+.edit-site-custom-template-modal__contents,
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
+		padding: $grid-unit-30;
+		border-radius: $radius-block-ui;
+		display: flex;
+		flex-direction: column;
+		border: $border-width solid $gray-300;
+		min-height: $grid-unit-80 * 3;
+
+		// Show the boundary of the button, in High Contrast Mode.
+		outline: 1px solid transparent;
+
+		span:first-child {
+			color: $gray-900;
+		}
+
+		span {
+			color: $gray-700;
+		}
+
+		&:hover {
+			color: var(--wp-admin-theme-color-darker-10);
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+			border-color: transparent;
+
+			span {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus {
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-color: transparent;
+
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 3px solid transparent;
+
+			span:first-child {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+	}
+}
+
+.edit-site-add-new-template__template-list__contents {
+	> .components-button {
+		height: 100%;
+		text-align: start;
+		align-items: flex-start;
 	}
 }

package/src/components/block-editor/index.js

@@ -143,6 +143,7 @@ export default function BlockEditor() {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
 	const isTemplatePart = templateType === 'wp_template_part';
+
 	const hasBlocks = blocks.length !== 0;
 	const enableResizing =
 		isTemplatePart &&
@@ -169,9 +170,7 @@ export default function BlockEditor() {
 				{ ( [ editorCanvasView ] ) =>
 					editorCanvasView ? (
 						<div className="edit-site-visual-editor is-focus-mode">
-							<ResizableEditor enableResizing>
-								{ editorCanvasView }
-							</ResizableEditor>
+							{ editorCanvasView }
 						</div>
 					) : (
 						<BlockTools

package/src/components/create-template-part-modal/index.js

@@ -13,6 +13,7 @@ import {
 	Modal,
 	__experimentalRadioGroup as RadioGroup,
 	__experimentalRadio as Radio,
+	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -106,31 +107,24 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 							) }
 						</RadioGroup>
 					</BaseControl>
-					<Flex
-						className="edit-site-create-template-part-modal__modal-actions"
-						justify="flex-end"
-					>
-						<FlexItem>
-							<Button
-								variant="secondary"
-								onClick={ () => {
-									closeModal();
-								} }
-							>
-								{ __( 'Cancel' ) }
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="primary"
-								type="submit"
-								disabled={ ! title }
-								isBusy={ isSubmitting }
-							>
-								{ __( 'Create' ) }
-							</Button>
-						</FlexItem>
-					</Flex>
+					<HStack justify="right">
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								closeModal();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! title }
+							isBusy={ isSubmitting }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</HStack>
 				</VStack>
 			</form>
 		</Modal>

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,
@@ -50,40 +55,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,
@@ -186,8 +158,6 @@ export default function Editor() {
 	// action in <URlQueryController> from double-announcing.
 	useTitle( hasLoadedPost && title );
 
-	const isLoading = useIsSiteEditorLoading();
-
 	return (
 		<>
 			{ isLoading ? <CanvasSpinner /> : null }
@@ -203,13 +173,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 />

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;
@@ -9,11 +19,16 @@
 }
 
 // Adjust the position of the notices
-.edit-site .components-editor-notices__snackbar {
-	position: fixed;
-	right: 0;
-	bottom: 40px;
-	padding-left: 16px;
-	padding-right: 16px;
+.edit-site {
+	.components-editor-notices__snackbar {
+		position: fixed;
+		right: 0;
+		bottom: 0;
+		padding: 16px;
+	}
+	.is-edit-mode .components-editor-notices__snackbar {
+		bottom: 24px;
+	}
 }
+
 @include editor-left(".edit-site .components-editor-notices__snackbar")

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 && (