@wordpress/edit-site 6.0.1 → 6.1.0

package/build-style/style-rtl.css

@@ -459,8 +459,7 @@
   line-height: 16px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
-  padding: 12px 0;
-  padding-top: 0;
+  padding: 0 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -653,11 +652,6 @@
   margin: 0;
 }
 
-.dataviews-filters__custom-menu-radio-item-prefix {
-  display: block;
-  width: 24px;
-}
-
 .dataviews-bulk-edit-button.components-button {
   flex-shrink: 0;
 }
@@ -1187,11 +1181,6 @@
   overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-  grid-column: 1/-1;
-  max-width: 100%;
-}
-
 .edit-site-global-styles-screen {
   margin: 12px 16px 16px;
 }
@@ -1246,8 +1235,7 @@
   color: #2f2f2f;
   font-weight: 600;
   line-height: 1.2;
-  padding: 16px;
-  padding-bottom: 0;
+  padding: 16px 16px 0;
   margin: 0;
 }
 
@@ -1581,7 +1569,6 @@
   font-weight: 500;
 }
 
-.edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
   border: 0;
 }
@@ -1656,6 +1643,11 @@
 .edit-site-page-header .edit-site-page-header__page-title {
   min-height: 40px;
 }
+.edit-site-page-header .edit-site-page-header__page-title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-header .edit-site-page-header__sub-title {
   margin-bottom: 8px;
 }
@@ -1823,6 +1815,11 @@
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title {
   min-height: 40px;
 }
+.edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__sub-title {
   margin-bottom: 8px;
 }
@@ -2346,7 +2343,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes _w89s1_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2356,7 +2353,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes slide-from-left {
+@keyframes _w89s1_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2412,10 +2409,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: slide-from-left;
+  animation-name: _w89s1_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: slide-from-right;
+  animation-name: _w89s1_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/build-style/style.css

@@ -459,8 +459,7 @@
   line-height: 16px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields:not(:empty) {
-  padding: 12px 0;
-  padding-top: 0;
+  padding: 0 0 12px;
 }
 .dataviews-view-grid .dataviews-view-grid__fields .dataviews-view-grid__field {
   align-items: flex-start;
@@ -653,11 +652,6 @@
   margin: 0;
 }
 
-.dataviews-filters__custom-menu-radio-item-prefix {
-  display: block;
-  width: 24px;
-}
-
 .dataviews-bulk-edit-button.components-button {
   flex-shrink: 0;
 }
@@ -1187,11 +1181,6 @@
   overflow: hidden;
 }
 
-.edit-site-typography-panel__full-width-control {
-  grid-column: 1/-1;
-  max-width: 100%;
-}
-
 .edit-site-global-styles-screen {
   margin: 12px 16px 16px;
 }
@@ -1246,8 +1235,7 @@
   color: #2f2f2f;
   font-weight: 600;
   line-height: 1.2;
-  padding: 16px;
-  padding-bottom: 0;
+  padding: 16px 16px 0;
   margin: 0;
 }
 
@@ -1582,7 +1570,6 @@
   font-weight: 500;
 }
 
-.edit-site-typography-panel,
 .edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings {
   border: 0;
 }
@@ -1657,6 +1644,11 @@
 .edit-site-page-header .edit-site-page-header__page-title {
   min-height: 40px;
 }
+.edit-site-page-header .edit-site-page-header__page-title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-header .edit-site-page-header__sub-title {
   margin-bottom: 8px;
 }
@@ -1824,6 +1816,11 @@
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title {
   min-height: 40px;
 }
+.edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__title .components-heading {
+  flex-grow: 1;
+  flex-basis: 0;
+  white-space: nowrap;
+}
 .edit-site-page-patterns-dataviews .edit-site-patterns__section-header .edit-site-patterns__sub-title {
   margin-bottom: 8px;
 }
@@ -2347,7 +2344,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes _w89s1_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2357,7 +2354,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes slide-from-left {
+@keyframes _w89s1_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2413,10 +2410,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: slide-from-left;
+  animation-name: _w89s1_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: slide-from-right;
+  animation-name: _w89s1_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.0.1",
+	"version": "6.1.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.0.1",
-		"@wordpress/api-fetch": "^7.0.1",
-		"@wordpress/blob": "^4.0.1",
-		"@wordpress/block-editor": "^13.0.1",
-		"@wordpress/block-library": "^9.0.1",
-		"@wordpress/blocks": "^13.0.1",
-		"@wordpress/commands": "^1.0.1",
-		"@wordpress/components": "^28.0.1",
-		"@wordpress/compose": "^7.0.1",
-		"@wordpress/core-commands": "^1.0.1",
-		"@wordpress/core-data": "^7.0.1",
-		"@wordpress/data": "^10.0.1",
-		"@wordpress/dataviews": "^2.0.1",
-		"@wordpress/date": "^5.0.1",
-		"@wordpress/deprecated": "^4.0.1",
-		"@wordpress/dom": "^4.0.1",
-		"@wordpress/editor": "^14.0.1",
-		"@wordpress/element": "^6.0.1",
-		"@wordpress/escape-html": "^3.0.1",
-		"@wordpress/hooks": "^4.0.1",
-		"@wordpress/html-entities": "^4.0.1",
-		"@wordpress/i18n": "^5.0.1",
-		"@wordpress/icons": "^10.0.1",
-		"@wordpress/keyboard-shortcuts": "^5.0.1",
-		"@wordpress/keycodes": "^4.0.1",
-		"@wordpress/notices": "^5.0.1",
-		"@wordpress/patterns": "^2.0.1",
-		"@wordpress/plugins": "^7.0.1",
-		"@wordpress/preferences": "^4.0.1",
-		"@wordpress/primitives": "^4.0.1",
-		"@wordpress/priority-queue": "^3.0.1",
-		"@wordpress/private-apis": "^1.0.1",
-		"@wordpress/reusable-blocks": "^5.0.1",
-		"@wordpress/router": "^1.0.1",
-		"@wordpress/style-engine": "^2.0.1",
-		"@wordpress/url": "^4.0.1",
-		"@wordpress/viewport": "^6.0.1",
-		"@wordpress/widgets": "^4.0.1",
-		"@wordpress/wordcount": "^4.0.1",
+		"@wordpress/a11y": "^4.1.0",
+		"@wordpress/api-fetch": "^7.1.0",
+		"@wordpress/blob": "^4.1.0",
+		"@wordpress/block-editor": "^13.1.0",
+		"@wordpress/block-library": "^9.1.0",
+		"@wordpress/blocks": "^13.1.0",
+		"@wordpress/commands": "^1.1.0",
+		"@wordpress/components": "^28.1.0",
+		"@wordpress/compose": "^7.1.0",
+		"@wordpress/core-commands": "^1.1.0",
+		"@wordpress/core-data": "^7.1.0",
+		"@wordpress/data": "^10.1.0",
+		"@wordpress/dataviews": "^2.1.0",
+		"@wordpress/date": "^5.1.0",
+		"@wordpress/deprecated": "^4.1.0",
+		"@wordpress/dom": "^4.1.0",
+		"@wordpress/editor": "^14.1.0",
+		"@wordpress/element": "^6.1.0",
+		"@wordpress/escape-html": "^3.1.0",
+		"@wordpress/hooks": "^4.1.0",
+		"@wordpress/html-entities": "^4.1.0",
+		"@wordpress/i18n": "^5.1.0",
+		"@wordpress/icons": "^10.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.1.0",
+		"@wordpress/keycodes": "^4.1.0",
+		"@wordpress/notices": "^5.1.0",
+		"@wordpress/patterns": "^2.1.0",
+		"@wordpress/plugins": "^7.1.0",
+		"@wordpress/preferences": "^4.1.0",
+		"@wordpress/primitives": "^4.1.0",
+		"@wordpress/priority-queue": "^3.1.0",
+		"@wordpress/private-apis": "^1.1.0",
+		"@wordpress/reusable-blocks": "^5.1.0",
+		"@wordpress/router": "^1.1.0",
+		"@wordpress/style-engine": "^2.1.0",
+		"@wordpress/url": "^4.1.0",
+		"@wordpress/viewport": "^6.1.0",
+		"@wordpress/widgets": "^4.1.0",
+		"@wordpress/wordcount": "^4.1.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
+	"gitHead": "66d3bf12e67d16deddc4b4a9ec42e1d0bed3479a"
 }

package/src/components/add-new-page/index.js

@@ -13,6 +13,7 @@ import { useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export default function AddNewPageModal( { onSave, onClose } ) {
 	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
@@ -47,7 +48,7 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".
 					__( '"%s" successfully created.' ),
-					newPage.title?.rendered || title
+					decodeEntities( newPage.title?.rendered || title )
 				),
 				{
 					type: 'snackbar',

package/src/components/app/index.js

@@ -17,10 +17,26 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
+import { useCommonCommands } from '../../hooks/commands/use-common-commands';
+import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
+import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
+import useLayoutAreas from '../layout/router';
+import useSetCommandContext from '../../hooks/commands/use-set-command-context';
 
 const { RouterProvider } = unlock( routerPrivateApis );
 const { GlobalStylesProvider } = unlock( editorPrivateApis );
 
+function AppLayout() {
+	// This ensures the edited entity id and type are initialized properly.
+	useInitEditedEntityFromURL();
+	useEditModeCommands();
+	useCommonCommands();
+	useSetCommandContext();
+	const route = useLayoutAreas();
+
+	return <Layout route={ route } />;
+}
+
 export default function App() {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
@@ -41,7 +57,7 @@ export default function App() {
 			<GlobalStylesProvider>
 				<UnsavedChangesWarning />
 				<RouterProvider>
-					<Layout />
+					<AppLayout />
 					<PluginArea onError={ onPluginAreaError } />
 				</RouterProvider>
 			</GlobalStylesProvider>

package/src/components/editor/index.js

@@ -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
@@ -30,7 +31,6 @@ import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
-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';
@@ -55,7 +55,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		editedPostId,
 		contextPostType,
 		contextPostId,
-		editorMode,
 		canvasMode,
 		isEditingPage,
 		supportsGlobalStyles,
@@ -72,7 +71,6 @@ export default function EditSiteEditor( { isLoading } ) {
 		} = unlock( select( editSiteStore ) );
 		const { get } = select( preferencesStore );
 		const { getCurrentTheme } = select( coreDataStore );
-		const { getEditorMode } = select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -82,7 +80,6 @@ export default function EditSiteEditor( { isLoading } ) {
 			editedPostId: getEditedPostId(),
 			contextPostType: _context?.postId ? _context.postType : undefined,
 			contextPostId: _context?.postId ? _context.postId : undefined,
-			editorMode: getEditorMode(),
 			canvasMode: getCanvasMode(),
 			isEditingPage: isPage(),
 			supportsGlobalStyles: getCurrentTheme()?.is_block_theme,
@@ -99,9 +96,7 @@ export default function EditSiteEditor( { isLoading } ) {
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
-	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
-	const showVisualEditor = isViewMode || editorMode === 'visual';
 	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
@@ -152,7 +147,7 @@ export default function EditSiteEditor( { isLoading } ) {
 							sprintf(
 								// translators: %s: Title of the created post e.g: "Post 1".
 								__( '"%s" successfully created.' ),
-								_title
+								decodeEntities( _title )
 							),
 							{
 								type: 'snackbar',
@@ -185,7 +180,6 @@ export default function EditSiteEditor( { isLoading } ) {
 			<GlobalStylesRenderer />
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
-			{ showVisualEditor && <TemplatePartConverter /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
 			{ isEditMode && <WelcomeGuide /> }
 			{ isReady && (

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-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/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

@@ -27,7 +27,12 @@ export default function ColorVariations( { title, gap = 2 } ) {
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } isPill>
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						property="color"
+					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }

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