@wordpress/edit-site 6.0.0 → 6.1.0

package/src/components/editor/index.js

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Notice } from '@wordpress/components';
+import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
@@ -21,6 +21,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -28,12 +29,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
-import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
-import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
@@ -44,27 +41,20 @@ import {
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SiteEditorMoreMenu from '../more-menu';
+import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
+import useEditorTitle from './use-editor-title';
 
-const {
-	EditorInterface,
-	ExperimentalEditorProvider: EditorProvider,
-	Sidebar,
-} = unlock( editorPrivateApis );
+const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-export default function Editor( { isLoading } ) {
+export default function EditSiteEditor( { isLoading } ) {
 	const {
-		record: editedPost,
-		getTitle,
-		isLoaded: hasLoadedPost,
-	} = useEditedEntityRecord();
-	const { type: editedPostType } = editedPost;
-	const {
-		context,
-		contextPost,
-		editorMode,
+		editedPostType,
+		editedPostId,
+		contextPostType,
+		contextPostId,
 		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
@@ -72,26 +62,24 @@ export default function Editor( { isLoading } ) {
 		editorCanvasView,
 		currentPostIsTrashed,
 	} = useSelect( ( select ) => {
-		const { getEditedPostContext, getCanvasMode, isPage } = unlock(
-			select( editSiteStore )
-		);
+		const {
+			getEditedPostContext,
+			getCanvasMode,
+			isPage,
+			getEditedPostType,
+			getEditedPostId,
+		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
-		const { getEntityRecord, getCurrentTheme } = select( coreDataStore );
-		const { getEditorMode } = select( editorStore );
+		const { getCurrentTheme } = select( coreDataStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
 		// Typically template or template part in the site editor.
 		return {
-			context: _context,
-			contextPost: _context?.postId
-				? getEntityRecord(
-						'postType',
-						_context.postType,
-						_context.postId
-				  )
-				: undefined,
-			editorMode: getEditorMode(),
+			editedPostType: getEditedPostType(),
+			editedPostId: getEditedPostId(),
+			contextPostType: _context?.postId ? _context.postType : undefined,
+			contextPostId: _context?.postId ? _context.postId : undefined,
 			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
@@ -104,30 +92,12 @@ export default function Editor( { isLoading } ) {
 				'trash',
 		};
 	}, [] );
+	useEditorTitle();
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-
-	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
-	const showVisualEditor = isViewMode || editorMode === 'visual';
-	const postWithTemplate = !! context?.postId;
-
-	let title;
-	if ( hasLoadedPost ) {
-		title = sprintf(
-			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
-			__( '%1$s ‹ %2$s' ),
-			getTitle(),
-			POST_TYPE_LABELS[ editedPostType ] ??
-				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
-		);
-	}
-
-	// Only announce the title once the editor is ready to prevent "Replace"
-	// action in <URLQueryController> from double-announcing.
-	useTitle( hasLoadedPost && title );
-
+	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'
@@ -152,6 +122,7 @@ export default function Editor( { isLoading } ) {
 		],
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -176,7 +147,7 @@ export default function Editor( { isLoading } ) {
 							sprintf(
 								// translators: %s: Title of the created post e.g: "Post 1".
 								__( '"%s" successfully created.' ),
-								_title
+								decodeEntities( _title )
 							),
 							{
 								type: 'snackbar',
@@ -202,68 +173,63 @@ export default function Editor( { isLoading } ) {
 		[ history, createSuccessNotice ]
 	);
 
-	const isReady =
-		! isLoading &&
-		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
-			( ! postWithTemplate && !! editedPost ) );
+	const isReady = ! isLoading;
 
 	return (
 		<>
 			<GlobalStylesRenderer />
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
-			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
-			{ hasLoadedPost && ! editedPost && (
-				<Notice status="warning" isDismissible={ false }>
-					{ __(
-						"You attempted to edit an item that doesn't exist. Perhaps it was deleted?"
-					) }
-				</Notice>
-			) }
 			{ isReady && (
-				<EditorProvider
-					post={ postWithTemplate ? contextPost : editedPost }
-					__unstableTemplate={
-						postWithTemplate ? editedPost : undefined
+				<Editor
+					postType={
+						postWithTemplate ? contextPostType : editedPostType
 					}
+					postId={ postWithTemplate ? contextPostId : editedPostId }
+					templateId={ postWithTemplate ? editedPostId : undefined }
 					settings={ settings }
-					useSubRegistry={ false }
+					className={ clsx( 'edit-site-editor__editor-interface', {
+						'show-icon-labels': showIconLabels,
+					} ) }
+					styles={ styles }
+					enableRegionNavigation={ false }
+					customSaveButton={
+						_isPreviewingTheme && <SaveButton size="compact" />
+					}
+					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
+					title={
+						! hasDefaultEditorCanvasView
+							? getEditorCanvasContainerTitle( editorCanvasView )
+							: undefined
+					}
+					iframeProps={ iframeProps }
+					onActionPerformed={ onActionPerformed }
+					extraSidebarPanels={
+						! isEditingPage && <PluginTemplateSettingPanel.Slot />
+					}
 				>
-					<SiteEditorMoreMenu />
-					<EditorInterface
-						className={ clsx(
-							'edit-site-editor__interface-skeleton',
-							{
-								'show-icon-labels': showIconLabels,
+					{ isEditMode && (
+						<BackButton>
+							{ ( { length } ) =>
+								length <= 1 && (
+									<Button
+										label={ __( 'Open Navigation' ) }
+										className="edit-site-layout__view-mode-toggle"
+										onClick={ () =>
+											setCanvasMode( 'view' )
+										}
+									>
+										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+									</Button>
+								)
 							}
-						) }
-						styles={ styles }
-						enableRegionNavigation={ false }
-						customSaveButton={
-							_isPreviewingTheme && <SaveButton size="compact" />
-						}
-						forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-						title={
-							! hasDefaultEditorCanvasView
-								? getEditorCanvasContainerTitle(
-										editorCanvasView
-								  )
-								: undefined
-						}
-						iframeProps={ iframeProps }
-					/>
-					<Sidebar
-						onActionPerformed={ onActionPerformed }
-						extraPanels={
-							! isEditingPage && (
-								<PluginTemplateSettingPanel.Slot />
-							)
-						}
-					/>
+						</BackButton>
+					) }
+					<SiteEditorMoreMenu />
 					{ supportsGlobalStyles && <GlobalStylesSidebar /> }
-				</EditorProvider>
+				</Editor>
 			) }
 		</>
 	);

package/src/components/editor/style.scss

@@ -1,4 +1,4 @@
-.edit-site-editor__interface-skeleton {
+.edit-site-editor__editor-interface {
 	opacity: 1;
 	transition: opacity 0.1s ease-out;
 	@include reduce-motion("transition");
@@ -17,7 +17,3 @@
 	display: flex;
 	justify-content: center;
 }
-
-.editor-header {
-	padding-left: $header-height;
-}

package/src/components/editor/use-editor-title.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useEditedEntityRecord from '../use-edited-entity-record';
+import useTitle from '../routes/use-title';
+import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
+
+function useEditorTitle() {
+	const {
+		record: editedPost,
+		getTitle,
+		isLoaded: hasLoadedPost,
+	} = useEditedEntityRecord();
+	let title;
+	if ( hasLoadedPost ) {
+		title = sprintf(
+			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s' ),
+			getTitle(),
+			POST_TYPE_LABELS[ editedPost.type ] ??
+				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
+		);
+	}
+
+	// Only announce the title once the editor is ready to prevent "Replace"
+	// action in <URLQueryController> from double-announcing.
+	useTitle( hasLoadedPost && title );
+}
+
+export default useEditorTitle;

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

@@ -382,6 +382,7 @@ function ConfirmDeleteDialog( {
 			confirmButtonText={ __( 'Delete' ) }
 			onCancel={ handleCancelUninstall }
 			onConfirm={ handleConfirmUninstall }
+			size="medium"
 		>
 			{ font &&
 				sprintf(

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

@@ -34,7 +34,7 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://wordpress.org/documentation/article/css/"
+							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

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

@@ -81,28 +81,11 @@ function ScreenRevisions() {
 	};
 
 	const restoreRevision = ( revision ) => {
-		setUserConfig( () => ( {
-			styles: revision?.styles,
-			settings: revision?.settings,
-			_links: revision?._links,
-		} ) );
+		setUserConfig( () => revision );
 		setIsLoadingRevisionWithUnsavedChanges( false );
 		onCloseRevisions();
 	};
 
-	const selectRevision = ( revision ) => {
-		setCurrentlySelectedRevision( {
-			/*
-			 * The default must be an empty object so that
-			 * `mergeBaseAndUserConfigs()` can merge them correctly.
-			 */
-			styles: revision?.styles || {},
-			settings: revision?.settings || {},
-			_links: revision?._links || {},
-			id: revision?.id,
-		} );
-	};
-
 	useEffect( () => {
 		if (
 			! editorCanvasContainerView ||
@@ -134,11 +117,7 @@ function ScreenRevisions() {
 		 * See: https://github.com/WordPress/gutenberg/issues/55866
 		 */
 		if ( shouldSelectFirstItem ) {
-			setCurrentlySelectedRevision( {
-				styles: firstRevision?.styles || {},
-				settings: firstRevision?.settings || {},
-				id: firstRevision?.id,
-			} );
+			setCurrentlySelectedRevision( firstRevision );
 		}
 	}, [ shouldSelectFirstItem, firstRevision ] );
 
@@ -186,7 +165,7 @@ function ScreenRevisions() {
 					/>
 				) ) }
 			<RevisionsButtons
-				onChange={ selectRevision }
+				onChange={ setCurrentlySelectedRevision }
 				selectedRevisionId={ currentlySelectedRevisionId }
 				userRevisions={ currentRevisions }
 				canApplyRevision={ isLoadButtonEnabled }
@@ -219,6 +198,7 @@ function ScreenRevisions() {
 					onCancel={ () =>
 						setIsLoadingRevisionWithUnsavedChanges( false )
 					}
+					size="medium"
 				>
 					{ __(
 						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'

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

@@ -163,6 +163,7 @@ function RevisionsButtons( {
 					>
 						<Button
 							className="edit-site-global-styles-screen-revisions__revision-button"
+							__experimentalIsFocusable
 							disabled={ isSelected }
 							onClick={ () => {
 								onChange( revision );
@@ -219,7 +220,6 @@ function RevisionsButtons( {
 								</p>
 							) : (
 								<Button
-									disabled={ areStylesEqual }
 									size="compact"
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"

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

@@ -173,19 +173,15 @@
 		// Safari from rendering the page / total text.
 		will-change: opacity;
 	}
+
 	.components-button.is-tertiary {
-		font-size: 28px;
-		font-weight: 200;
 		color: $gray-900;
-		margin-bottom: $grid-unit-05;
-		line-height: 1.2;
 	}
-	.components-button.is-tertiary:disabled {
+
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
 		color: $gray-600;
 	}
-	.components-button.is-tertiary:hover {
-		background: transparent;
-	}
 }
 
 .edit-site-global-styles-screen-revisions__footer {

package/src/components/global-styles/shadows-edit-panel.js

@@ -201,6 +201,7 @@ export default function ShadowsEditPanel() {
 						setIsConfirmDialogVisible( false );
 					} }
 					confirmButtonText={ __( 'Delete' ) }
+					size="medium"
 				>
 					{ sprintf(
 						// translators: %s: name of the shadow

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

@@ -23,11 +23,6 @@
 	overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-	grid-column: 1 / -1;
-	max-width: 100%;
-}
-
 .edit-site-global-styles-screen {
 	margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
 }
@@ -84,8 +79,7 @@
 	color: $gray-800;
 	font-weight: 600;
 	line-height: 1.2;
-	padding: $grid-unit-20;
-	padding-bottom: 0;
+	padding: $grid-unit-20 $grid-unit-20 0;
 	margin: 0;
 }
 

package/src/components/global-styles/variations/variation.js

@@ -15,6 +15,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
+import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -22,30 +23,24 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill } ) {
+export default function Variation( { variation, children, isPill, property } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo(
-		() => ( {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-				_links: variation._links ?? {},
-			},
+
+	const context = useMemo( () => {
+		let merged = mergeBaseAndUserConfigs( base, variation );
+		if ( property ) {
+			merged = filterObjectByProperty( merged, property );
+		}
+		return {
+			user: variation,
 			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
+			merged,
 			setUserConfig: () => {},
-		} ),
-		[ variation, base ]
-	);
+		};
+	}, [ variation, base, property ] );
 
-	const selectVariation = () => {
-		setUserConfig( () => ( {
-			settings: variation.settings,
-			styles: variation.styles,
-			_links: variation._links,
-		} ) );
-	};
+	const selectVariation = () => setUserConfig( variation );
 
 	const selectOnEnter = ( event ) => {
 		if ( event.keyCode === ENTER ) {

package/src/components/global-styles/variations/variations-color.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,13 +25,18 @@ export default function ColorVariations( { title, gap = 2 } ) {
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<VStack spacing={ gap }>
+			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } isPill>
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						property="color"
+					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</VStack>
+			</Grid>
 		</VStack>
 	);
 }

package/src/components/global-styles/variations/variations-typography.js

@@ -35,7 +35,11 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				{ typographyVariations &&
 					typographyVariations.length &&
 					typographyVariations.map( ( variation, index ) => (
-						<Variation key={ index } variation={ variation }>
+						<Variation
+							key={ index }
+							variation={ variation }
+							property="typography"
+						>
 							{ ( isFocused ) => (
 								<PreviewIframe
 									label={ variation?.title }

package/src/components/global-styles-sidebar/index.js

@@ -152,6 +152,7 @@ export default function GlobalStylesSidebar() {
 							isPressed={
 								isStyleBookOpened || isRevisionsStyleBookOpened
 							}
+							__experimentalIsFocusable
 							disabled={ shouldClearCanvasContainerView }
 							onClick={ toggleStyleBook }
 							size="compact"
@@ -162,6 +163,7 @@ export default function GlobalStylesSidebar() {
 							label={ __( 'Revisions' ) }
 							icon={ backup }
 							onClick={ toggleRevisions }
+							__experimentalIsFocusable
 							disabled={ ! hasRevisions }
 							isPressed={
 								isRevisionsOpened || isRevisionsStyleBookOpened

package/src/components/global-styles-sidebar/style.scss

@@ -47,7 +47,6 @@
 	font-weight: 500;
 }
 
-.edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
 	border: 0;
 }