@wordpress/edit-site 5.29.0 → 5.31.0

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -9,7 +9,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import { layout } from '@wordpress/icons';
 
 const EMPTY_ARRAY = [];
@@ -23,7 +23,7 @@ function TemplateDataviewItem( { template, isActive } ) {
 			title={ text }
 			icon={ icon }
 			isActive={ isActive }
-			isCustom="false"
+			isCustom={ false }
 		/>
 	);
 }
@@ -31,7 +31,7 @@ function TemplateDataviewItem( { template, isActive } ) {
 export default function DataviewsTemplatesSidebarContent( {
 	activeView,
 	postType,
-	config,
+	title,
 } ) {
 	const { records } = useEntityRecords( 'postType', postType, {
 		per_page: -1,
@@ -54,10 +54,10 @@ export default function DataviewsTemplatesSidebarContent( {
 		<ItemGroup>
 			<DataViewItem
 				slug={ 'all' }
-				title={ config[ postType ].title }
+				title={ title }
 				icon={ layout }
 				isActive={ activeView === 'all' }
-				isCustom="false"
+				isCustom={ false }
 			/>
 			{ firstItemPerAuthorText.map( ( template ) => {
 				return (

package/src/components/sidebar-navigation-screen-templates-browse/index.js

@@ -21,17 +21,19 @@ import DataviewsTemplatesSidebarContent from './content';
 
 const config = {
 	[ TEMPLATE_POST_TYPE ]: {
-		title: __( 'All templates' ),
+		title: __( 'Manage templates' ),
 		description: __(
 			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 		),
+		contentTitle: __( 'All templates' ),
 	},
 	[ TEMPLATE_PART_POST_TYPE ]: {
-		title: __( 'All template parts' ),
+		title: __( 'Manage template parts' ),
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'
 		),
 		backPath: '/patterns',
+		contentTitle: __( 'All template parts' ),
 	},
 };
 
@@ -62,7 +64,7 @@ export default function SidebarNavigationScreenTemplatesBrowse() {
 				<DataviewsTemplatesSidebarContent
 					activeView={ activeView }
 					postType={ postType }
-					config={ config }
+					title={ config[ postType ].contentTitle }
 				/>
 			}
 		/>

package/src/components/start-template-options/index.js

@@ -137,7 +137,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
-			isFullScreen={ true }
+			isFullScreen
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -207,7 +207,7 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		return {};
 	}, [ homepageId, postType, postId, path ] );
 
-	if ( path === '/wp_template/all' && postId ) {
+	if ( path === '/wp_template' && postId ) {
 		return { isReady: true, postType: 'wp_template', postId, context };
 	}
 

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -101,28 +101,12 @@ export default function useSyncPathWithURL() {
 					canvas: undefined,
 					path: navigatorLocation.path,
 				} );
-			} else if (
-				navigatorLocation.path === '/wp_template/all' &&
-				! window?.__experimentalAdminViews
-			) {
-				// When the experiment is disabled, we only support table layout.
-				// Clear it out from the URL, so layouts other than table cannot be accessed.
-				updateUrlParams( {
-					postType: undefined,
-					categoryType: undefined,
-					categoryId: undefined,
-					path: navigatorLocation.path,
-					layout: undefined,
-				} );
 			} else if (
 				// These sidebar paths are special in the sense that the url in these pages may or may not have a postId and we need to retain it if it has.
 				// The "type" property should be kept as well.
-				( navigatorLocation.path === '/pages' &&
-					window?.__experimentalAdminViews ) ||
-				( navigatorLocation.path === '/wp_template/all' &&
-					window?.__experimentalAdminViews ) ||
-				( navigatorLocation.path === '/wp_template_part/all' &&
-					window?.__experimentalAdminViews )
+				navigatorLocation.path === '/pages' ||
+				navigatorLocation.path === '/wp_template' ||
+				navigatorLocation.path === '/wp_template_part/all'
 			) {
 				updateUrlParams( {
 					postType: undefined,

package/src/components/template-actions/index.js

@@ -36,10 +36,7 @@ export default function TemplateActions( {
 			select( coreStore ).getEntityRecord( 'postType', postType, postId ),
 		[ postType, postId ]
 	);
-	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
-	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
+	const { removeTemplate } = useDispatch( editSiteStore );
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );
 
@@ -47,6 +44,49 @@ export default function TemplateActions( {
 		return null;
 	}
 
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup>
+					{ isRemovable && (
+						<>
+							<RenameMenuItem
+								template={ template }
+								onClose={ onClose }
+							/>
+							<DeleteMenuItem
+								onRemove={ () => {
+									removeTemplate( template );
+									onRemove?.();
+									onClose();
+								} }
+								title={ template.title.rendered }
+							/>
+						</>
+					) }
+					{ isRevertable && (
+						<ResetMenuItem
+							template={ template }
+							onClose={ onClose }
+						/>
+					) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}
+
+function ResetMenuItem( { template, onClose } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { revertTemplate } = useDispatch( editSiteStore );
+	const { saveEditedEntityRecord } = useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 	async function revertAndSaveTemplate() {
 		try {
 			await revertTemplate( template, { allowUndo: false } );
@@ -55,7 +95,6 @@ export default function TemplateActions( {
 				template.type,
 				template.id
 			);
-
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
@@ -82,48 +121,26 @@ export default function TemplateActions( {
 			createErrorNotice( errorMessage, { type: 'snackbar' } );
 		}
 	}
-
 	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Actions' ) }
-			className={ className }
-			toggleProps={ toggleProps }
-		>
-			{ ( { onClose } ) => (
-				<MenuGroup>
-					{ isRemovable && (
-						<>
-							<RenameMenuItem
-								template={ template }
-								onClose={ onClose }
-							/>
-							<DeleteMenuItem
-								onRemove={ () => {
-									removeTemplate( template );
-									onRemove?.();
-									onClose();
-								} }
-								title={ template.title.rendered }
-							/>
-						</>
-					) }
-					{ isRevertable && (
-						<MenuItem
-							info={ __(
-								'Use the template as supplied by the theme.'
-							) }
-							onClick={ () => {
-								revertAndSaveTemplate();
-								onClose();
-							} }
-						>
-							{ __( 'Clear customizations' ) }
-						</MenuItem>
-					) }
-				</MenuGroup>
-			) }
-		</DropdownMenu>
+		<>
+			<MenuItem
+				info={ __( 'Use the template as supplied by the theme.' ) }
+				onClick={ () => setIsModalOpen( true ) }
+			>
+				{ __( 'Clear customizations' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ () => {
+					revertAndSaveTemplate();
+					onClose();
+				} }
+				onCancel={ () => setIsModalOpen( false ) }
+				confirmButtonText={ __( 'Clear' ) }
+			>
+				{ __( 'Are you sure you want to clear these customizations?' ) }
+			</ConfirmDialog>
+		</>
 	);
 }
 

package/src/components/welcome-guide/editor.js

@@ -6,6 +6,7 @@ import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -15,16 +16,18 @@ import WelcomeGuideImage from './image';
 export default function WelcomeGuideEditor() {
 	const { toggle } = useDispatch( preferencesStore );
 
-	const isActive = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
+	const { isActive, isBlockBasedTheme } = useSelect( ( select ) => {
+		return {
+			isActive: !! select( preferencesStore ).get(
 				'core/edit-site',
 				'welcomeGuide'
 			),
-		[]
-	);
+			isBlockBasedTheme:
+				select( coreStore ).getCurrentTheme()?.is_block_theme,
+		};
+	}, [] );
 
-	if ( ! isActive ) {
+	if ( ! isActive || ! isBlockBasedTheme ) {
 		return null;
 	}
 

package/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js

@@ -8,6 +8,7 @@ import { renderHook } from '@testing-library/react';
  */
 import useThemeStyleVariationsByProperty, {
 	filterObjectByProperty,
+	removePropertyFromObject,
 } from '../use-theme-style-variations-by-property';
 
 describe( 'filterObjectByProperty', () => {
@@ -962,3 +963,175 @@ describe( 'useThemeStyleVariationsByProperty', () => {
 		] );
 	} );
 } );
+
+describe( 'removePropertyFromObject', () => {
+	const mockBaseVariation = {
+		settings: {
+			typography: {
+				fontFamilies: {
+					custom: [
+						{
+							name: 'ADLaM Display',
+							fontFamily: 'ADLaM Display, system-ui',
+							slug: 'adlam-display',
+							fontFace: [
+								{
+									src: 'adlam.woff2',
+									fontWeight: '400',
+									fontStyle: 'normal',
+									fontFamily: 'ADLaM Display',
+								},
+							],
+						},
+					],
+				},
+				fontSizes: [
+					{
+						name: 'Base small',
+						slug: 'base-small',
+						size: '1px',
+					},
+					{
+						name: 'Base medium',
+						slug: 'base-medium',
+						size: '2px',
+					},
+					{
+						name: 'Base large',
+						slug: 'base-large',
+						size: '3px',
+					},
+				],
+			},
+			color: {
+				palette: {
+					custom: [
+						{
+							color: '#c42727',
+							name: 'Color 1',
+							slug: 'custom-color-1',
+						},
+						{
+							color: '#3b0f0f',
+							name: 'Color 2',
+							slug: 'custom-color-2',
+						},
+					],
+				},
+			},
+			layout: {
+				wideSize: '1137px',
+				contentSize: '400px',
+			},
+		},
+		styles: {
+			typography: {
+				fontSize: '12px',
+				lineHeight: '1.5',
+			},
+			color: {
+				backgroundColor: 'cheese',
+				color: 'lettuce',
+			},
+			elements: {
+				cite: {
+					color: {
+						text: 'white',
+					},
+					typography: {
+						letterSpacing: 'white',
+					},
+				},
+			},
+			blocks: {
+				'core/quote': {
+					color: {
+						text: 'hello',
+						background: 'dolly',
+					},
+					typography: {
+						fontSize: '111111px',
+					},
+				},
+				'core/group': {
+					typography: {
+						fontFamily: 'var:preset|font-family|system-sans-serif',
+					},
+				},
+			},
+		},
+	};
+
+	it( 'should return with no property', () => {
+		const object = { test: 'me' };
+		expect( removePropertyFromObject( object, undefined ) ).toEqual(
+			object
+		);
+	} );
+
+	it( 'should return with non-string property', () => {
+		const object = { test: 'you' };
+		expect( removePropertyFromObject( object, true ) ).toEqual( object );
+	} );
+
+	it( 'should return with empty object', () => {
+		const object = {};
+		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
+	} );
+
+	it( 'should remove the specified property from the object', () => {
+		expect(
+			removePropertyFromObject(
+				{
+					...mockBaseVariation,
+				},
+				'typography'
+			)
+		).toEqual( {
+			settings: {
+				color: {
+					palette: {
+						custom: [
+							{
+								color: '#c42727',
+								name: 'Color 1',
+								slug: 'custom-color-1',
+							},
+							{
+								color: '#3b0f0f',
+								name: 'Color 2',
+								slug: 'custom-color-2',
+							},
+						],
+					},
+				},
+				layout: {
+					wideSize: '1137px',
+					contentSize: '400px',
+				},
+			},
+			styles: {
+				color: {
+					backgroundColor: 'cheese',
+					color: 'lettuce',
+				},
+				elements: {
+					cite: {
+						color: {
+							text: 'white',
+						},
+					},
+				},
+				blocks: {
+					'core/quote': {
+						color: {
+							text: 'hello',
+							background: 'dolly',
+						},
+					},
+					'core/group': {},
+				},
+			},
+		} );
+	} );
+} );

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -1,13 +1,93 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+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';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+/**
+ * Removes all instances of a property from an object.
+ *
+ * @param {Object} object   The object to remove the property from.
+ * @param {string} property The property to remove.
+ * @return {Object} The modified object.
+ */
+export function removePropertyFromObject( object, property ) {
+	if ( ! property || typeof property !== 'string' ) {
+		return object;
+	}
+
+	if ( typeof object !== 'object' || ! Object.keys( object ).length ) {
+		return object;
+	}
+
+	for ( const key in object ) {
+		if ( key === property ) {
+			delete object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			removePropertyFromObject( object[ key ], property );
+		}
+	}
+	return object;
+}
+
+/**
+ * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
+ * and user-defined global style/settings object.
+ *
+ * @param {Object}   props          Object of hook args.
+ * @param {string}   props.property The property to filter by.
+ * @param {Function} props.filter   Optional. The filter function to apply to the variations.
+ * @return {Object[]|*} The merged object.
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
+	property,
+	filter,
+} ) {
+	const { variationsFromTheme } = useSelect( ( select ) => {
+		const _variationsFromTheme =
+			select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations();
+
+		return {
+			variationsFromTheme: _variationsFromTheme || [],
+		};
+	}, [] );
+	const { user: baseVariation } = useContext( GlobalStylesContext );
+
+	const variations = useMemo( () => {
+		return [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variationsFromTheme,
+		];
+	}, [ variationsFromTheme ] );
+
+	return useThemeStyleVariationsByProperty( {
+		variations,
+		property,
+		filter,
+		baseVariation: removePropertyFromObject(
+			cloneDeep( baseVariation ),
+			property
+		),
+	} );
+}
 
 /**
  * Returns a new object, with properties specified in `property`,
@@ -40,6 +120,10 @@ export const filterObjectByProperty = ( object, property ) => {
 
 /**
  * Returns a new object with only the properties specified in `property`.
+ * Optional merges the baseVariation object with the variation object.
+ * Note: this function will only overwrite the specified property in baseVariation if it exists.
+ * The baseVariation will not be otherwise modified. To strip a property from the baseVariation object, use `removePropertyFromObject`.
+ * See useCurrentMergeThemeStyleVariationsWithUserConfig for an example of how to use this function.
  *
  * @param {Object}   props               Object of hook args.
  * @param {Object[]} props.variations    The theme style variations to filter.

package/src/style.scss

@@ -8,7 +8,6 @@
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
 @import "./components/header-edit-mode/style.scss";
-@import "./components/list/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
@@ -34,7 +33,6 @@
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
 @import "./components/sidebar-navigation-screen-page/style.scss";
-@import "./components/sidebar-navigation-screen-templates/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
 @import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
@@ -49,6 +47,7 @@
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";
 @import "./components/pagination/style.scss";
+@import "./components/global-styles/variations/style.scss";
 
 body.js #wpadminbar {
 	display: none;
@@ -98,7 +97,7 @@ body.js.site-editor-php {
 	}
 
 	.interface-interface-skeleton__content {
-		background-color: $gray-900;
+		background-color: $gray-300;
 	}
 }
 

package/src/utils/constants.js

@@ -50,5 +50,7 @@ export const LAYOUT_GRID = 'grid';
 export const LAYOUT_TABLE = 'table';
 export const LAYOUT_LIST = 'list';
 export const ENUMERATION_TYPE = 'enumeration';
-export const OPERATOR_IN = 'in';
-export const OPERATOR_NOT_IN = 'notIn';
+export const OPERATOR_IS = 'is';
+export const OPERATOR_IS_NOT = 'isNot';
+export const OPERATOR_IS_ANY = 'isAny';
+export const OPERATOR_IS_NONE = 'isNone';

package/src/utils/get-is-list-page.js

@@ -14,7 +14,7 @@ export default function getIsListPage(
 	isMobileViewport
 ) {
 	return (
-		[ '/wp_template/all', '/wp_template_part/all', '/pages' ].includes(
+		[ '/wp_template', '/wp_template_part/all', '/pages' ].includes(
 			path
 		) ||
 		( path === '/patterns' &&