@wordpress/edit-site 6.2.0 → 6.4.0

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

@@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -16,7 +14,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import StyleVariationsContainer from '../global-styles/style-variations-container';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
@@ -24,14 +21,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import ColorVariations from '../global-styles/variations/variations-color';
-import TypographyVariations from '../global-styles/variations/variations-typography';
-import {
-	useColorVariations,
-	useTypographyVariations,
-} from '../global-styles/hooks';
-
-const noop = () => {};
+import SidebarNavigationScreenGlobalStylesContent from './content';
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -66,49 +56,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
-
-	const colorVariations = useColorVariations();
-	const typographyVariations = useTypographyVariations();
-	const gap = 3;
-
-	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
-	// loaded. This is necessary because the Iframe component waits until
-	// the block editor store's `__internalIsInitialized` is true before
-	// rendering the iframe. Without this, the iframe previews will not render
-	// in mobile viewport sizes, where the editor canvas is hidden.
-	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
-		>
-			<VStack
-				spacing={ 10 }
-				className="edit-site-global-styles-variation-container"
-			>
-				<StyleVariationsContainer gap={ gap } />
-				{ colorVariations?.length && (
-					<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
-				) }
-				{ typographyVariations?.length && (
-					<TypographyVariations
-						title={ __( 'Typography' ) }
-						gap={ gap }
-					/>
-				) }
-			</VStack>
-		</BlockEditorProvider>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();

package/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js

@@ -36,6 +36,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
+						label={ __( 'Name' ) }
 					/>
 					<HStack justify="right">
 						<Button
@@ -48,7 +49,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 
 						<Button
 							__next40pxDefaultSize
-							__experimentalIsFocusable
+							accessibleWhenDisabled
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"

package/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js

@@ -58,13 +58,21 @@ export default function usePatternCategories() {
 
 		// Update the category counts to reflect user registered patterns.
 		userPatterns.forEach( ( pattern ) => {
-			pattern.categories?.forEach( ( category ) => {
+			pattern.wp_pattern_category?.forEach( ( catId ) => {
+				const category = userPatternCategories.find(
+					( cat ) => cat.id === catId
+				)?.name;
 				if ( categoryMap[ category ] ) {
 					categoryMap[ category ].count += 1;
 				}
 			} );
 			// If the pattern has no categories, add it to uncategorized.
-			if ( ! pattern.categories?.length ) {
+			if (
+				! pattern.wp_pattern_category?.length ||
+				! pattern.wp_pattern_category.some( ( catId ) =>
+					userPatternCategories.find( ( cat ) => cat.id === catId )
+				)
+			) {
 				categoryMap.uncategorized.count += 1;
 			}
 		} );

package/src/components/site-hub/index.js

@@ -11,11 +11,12 @@ import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { memo, forwardRef } from '@wordpress/element';
+import { memo, forwardRef, useContext } from '@wordpress/element';
 import { search } from '@wordpress/icons';
 import { store as commandsStore } from '@wordpress/commands';
 import { displayShortcut } from '@wordpress/keycodes';
 import { filterURLForDisplay } from '@wordpress/url';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -23,6 +24,8 @@ import { filterURLForDisplay } from '@wordpress/url';
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
+const { useHistory } = unlock( routerPrivateApis );
+import { SidebarNavigationContext } from '../sidebar';
 
 const SiteHub = memo(
 	forwardRef( ( { isTransparent }, ref ) => {
@@ -103,3 +106,83 @@ const SiteHub = memo(
 );
 
 export default SiteHub;
+
+export const SiteHubMobile = memo(
+	forwardRef( ( { isTransparent }, ref ) => {
+		const history = useHistory();
+		const { navigate } = useContext( SidebarNavigationContext );
+
+		const { homeUrl, siteTitle } = useSelect( ( select ) => {
+			const {
+				getSite,
+				getUnstableBase, // Site index.
+			} = select( coreStore );
+			const _site = getSite();
+			return {
+				homeUrl: getUnstableBase()?.home,
+				siteTitle:
+					! _site?.title && !! _site?.url
+						? filterURLForDisplay( _site?.url )
+						: _site?.title,
+			};
+		}, [] );
+		const { open: openCommandCenter } = useDispatch( commandsStore );
+
+		return (
+			<div className="edit-site-site-hub">
+				<HStack justify="flex-start" spacing="0">
+					<div
+						className={ clsx(
+							'edit-site-site-hub__view-mode-toggle-container',
+							{
+								'has-transparent-background': isTransparent,
+							}
+						) }
+					>
+						<Button
+							ref={ ref }
+							label={ __( 'Go to Site Editor' ) }
+							className="edit-site-layout__view-mode-toggle"
+							style={ {
+								transform: 'scale(0.5)',
+								borderRadius: 4,
+							} }
+							onClick={ () => {
+								history.push( {} );
+								navigate( 'back' );
+							} }
+						>
+							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
+						</Button>
+					</div>
+
+					<HStack>
+						<div className="edit-site-site-hub__title">
+							<Button
+								variant="link"
+								href={ homeUrl }
+								target="_blank"
+								label={ __( 'View site (opens in a new tab)' ) }
+							>
+								{ decodeEntities( siteTitle ) }
+							</Button>
+						</div>
+						<HStack
+							spacing={ 0 }
+							expanded={ false }
+							className="edit-site-site-hub__actions"
+						>
+							<Button
+								className="edit-site-site-hub_toggle-command-center"
+								icon={ search }
+								onClick={ () => openCommandCenter() }
+								label={ __( 'Open command palette' ) }
+								shortcut={ displayShortcut.primary( 'k' ) }
+							/>
+						</HStack>
+					</HStack>
+				</HStack>
+			</div>
+		);
+	} )
+);

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

@@ -27,7 +27,7 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-const authorizedPostTypes = [ 'page' ];
+const authorizedPostTypes = [ 'page', 'post' ];
 
 function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const {
@@ -213,7 +213,8 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
 			return { postType, postId };
 		}
-
+		// TODO: for post types lists we should probably not render the front page, but maybe a placeholder
+		// with a message like "Select a page" or something similar.
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}

package/src/hooks/push-changes-to-global-styles/index.js

@@ -339,7 +339,7 @@ function PushChangesToGlobalStylesControl( {
 			<Button
 				__next40pxDefaultSize
 				variant="secondary"
-				__experimentalIsFocusable
+				accessibleWhenDisabled
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>
@@ -375,7 +375,7 @@ function PushChangesToGlobalStyles( props ) {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => (
 		<>
-			<BlockEdit { ...props } />
+			<BlockEdit key="edit" { ...props } />
 			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
 		</>
 	)

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

@@ -2,11 +2,11 @@
  * Internal dependencies
  */
 import {
-	filterObjectByProperty,
-	removePropertyFromObject,
+	filterObjectByProperties,
+	removePropertiesFromObject,
 } from '../use-theme-style-variations-by-property';
 
-describe( 'filterObjectByProperty', () => {
+describe( 'filterObjectByProperties', () => {
 	const noop = () => {};
 	test.each( [
 		{
@@ -14,21 +14,21 @@ describe( 'filterObjectByProperty', () => {
 				foo: 'bar',
 				array: [ 1, 3, 4 ],
 			},
-			property: 'array',
+			properties: [ 'array' ],
 			expected: { array: [ 1, 3, 4 ] },
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: 'does-not-exist',
+			properties: [ 'does-not-exist' ],
 			expected: {},
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: false,
+			properties: false,
 			expected: {},
 		},
 		{
@@ -39,7 +39,7 @@ describe( 'filterObjectByProperty', () => {
 					},
 				},
 			},
-			property: 'null',
+			properties: [ 'null' ],
 			expected: {
 				dig: {
 					deeper: {
@@ -52,19 +52,19 @@ describe( 'filterObjectByProperty', () => {
 			object: {
 				function: noop,
 			},
-			property: 'function',
+			properties: [ 'function' ],
 			expected: {
 				function: noop,
 			},
 		},
 		{
 			object: [],
-			property: 'something',
+			properties: [ 'something' ],
 			expected: {},
 		},
 		{
 			object: {},
-			property: undefined,
+			properties: undefined,
 			expected: {},
 		},
 		{
@@ -74,7 +74,7 @@ describe( 'filterObjectByProperty', () => {
 					array: [ 1, 3, 4 ],
 				},
 			},
-			property: 'nested-object-foo',
+			properties: [ 'nested-object-foo' ],
 			expected: {
 				'nested-object': {
 					'nested-object-foo': 'bar',
@@ -82,15 +82,15 @@ describe( 'filterObjectByProperty', () => {
 			},
 		},
 	] )(
-		'should filter object by $property',
-		( { expected, object, property } ) => {
-			const result = filterObjectByProperty( object, property );
+		'should filter object by $properties',
+		( { expected, object, properties } ) => {
+			const result = filterObjectByProperties( object, properties );
 			expect( result ).toEqual( expected );
 		}
 	);
 } );
 
-describe( 'removePropertyFromObject', () => {
+describe( 'removePropertiesFromObject', () => {
 	const mockBaseVariation = {
 		settings: {
 			typography: {
@@ -188,34 +188,38 @@ describe( 'removePropertyFromObject', () => {
 		},
 	};
 
-	it( 'should return with no property', () => {
+	it( 'should return with no properties', () => {
 		const object = { test: 'me' };
-		expect( removePropertyFromObject( object, undefined ) ).toEqual(
+		expect( removePropertiesFromObject( object, undefined ) ).toEqual(
 			object
 		);
 	} );
 
-	it( 'should return with non-string property', () => {
+	it( 'should return with non-string properties', () => {
 		const object = { test: 'you' };
-		expect( removePropertyFromObject( object, true ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, true ) ).toEqual( object );
 	} );
 
 	it( 'should return with empty object', () => {
 		const object = {};
-		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, [ 'color' ] ) ).toEqual(
+			object
+		);
 	} );
 
 	it( 'should return with null', () => {
-		expect( removePropertyFromObject( null, 'color' ) ).toEqual( null );
+		expect( removePropertiesFromObject( null, [ 'color' ] ) ).toEqual(
+			null
+		);
 	} );
 
-	it( 'should remove the specified property from the object', () => {
+	it( 'should remove the specified properties from the object', () => {
 		expect(
-			removePropertyFromObject(
+			removePropertiesFromObject(
 				{
 					...mockBaseVariation,
 				},
-				'typography'
+				[ 'typography' ]
 			)
 		).toEqual( {
 			settings: {

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

@@ -14,18 +14,20 @@ import { __ } from '@wordpress/i18n';
 import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 /**
- * Removes all instances of a property from an object.
+ * Removes all instances of properties from an object.
  *
- * @param {Object} object   The object to remove the property from.
- * @param {string} property The property to remove.
+ * @param {Object}   object     The object to remove the properties from.
+ * @param {string[]} properties The properties to remove.
  * @return {Object} The modified object.
  */
-export function removePropertyFromObject( object, property ) {
-	if ( ! property || typeof property !== 'string' ) {
+export function removePropertiesFromObject( object, properties ) {
+	if ( ! properties?.length ) {
 		return object;
 	}
 
@@ -38,26 +40,42 @@ export function removePropertyFromObject( object, property ) {
 	}
 
 	for ( const key in object ) {
-		if ( key === property ) {
+		if ( properties.includes( key ) ) {
 			delete object[ key ];
 		} else if ( typeof object[ key ] === 'object' ) {
-			removePropertyFromObject( object[ key ], property );
+			removePropertiesFromObject( object[ key ], properties );
 		}
 	}
 	return object;
 }
 
 /**
- * Fetches the current theme style variations that contain only the specified property
+ * Checks whether a style variation is empty.
+ *
+ * @param {Object} variation          A style variation object.
+ * @param {string} variation.title    The title of the variation.
+ * @param {Object} variation.settings The settings of the variation.
+ * @param {Object} variation.styles   The styles of the variation.
+ * @return {boolean} Whether the variation is empty.
+ */
+function hasThemeVariation( { title, settings, styles } ) {
+	return (
+		title === __( 'Default' ) || // Always preserve the default variation.
+		Object.keys( settings ).length > 0 ||
+		Object.keys( styles ).length > 0
+	);
+}
+
+/**
+ * Fetches the current theme style variations that contain only the specified properties
  * and merges them with the user config.
  *
- * @param {Object} props          Object of hook args.
- * @param {string} props.property The property to filter by.
+ * @param {string[]} properties The properties to filter by.
  * @return {Object[]|*} The merged object.
  */
-export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
-	property,
-} ) {
+export function useCurrentMergeThemeStyleVariationsWithUserConfig(
+	properties = []
+) {
 	const { variationsFromTheme } = useSelect( ( select ) => {
 		const _variationsFromTheme =
 			select(
@@ -70,55 +88,67 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
 	}, [] );
 	const { user: userVariation } = useContext( GlobalStylesContext );
 
+	const propertiesAsString = properties.toString();
+
 	return useMemo( () => {
 		const clonedUserVariation = cloneDeep( userVariation );
 
 		// Get user variation and remove the settings for the given property.
-		const userVariationWithoutProperty = removePropertyFromObject(
+		const userVariationWithoutProperties = removePropertiesFromObject(
 			clonedUserVariation,
-			property
+			properties
 		);
-		userVariationWithoutProperty.title = __( 'Default' );
+		userVariationWithoutProperties.title = __( 'Default' );
 
-		const variationsWithSinglePropertyAndBase = variationsFromTheme
+		const variationsWithPropertiesAndBase = variationsFromTheme
 			.filter( ( variation ) => {
-				return isVariationWithSingleProperty( variation, property );
+				return isVariationWithProperties( variation, properties );
 			} )
 			.map( ( variation ) => {
 				return mergeBaseAndUserConfigs(
-					userVariationWithoutProperty,
+					userVariationWithoutProperties,
 					variation
 				);
 			} );
 
-		return [
-			userVariationWithoutProperty,
-			...variationsWithSinglePropertyAndBase,
+		const variationsByProperties = [
+			userVariationWithoutProperties,
+			...variationsWithPropertiesAndBase,
 		];
-	}, [ property, userVariation, variationsFromTheme ] );
+
+		/*
+		 * Filter out variations with no settings or styles.
+		 */
+		return variationsByProperties?.length
+			? variationsByProperties.filter( hasThemeVariation )
+			: [];
+	}, [ propertiesAsString, userVariation, variationsFromTheme ] );
 }
 
 /**
- * Returns a new object, with properties specified in `property`,
+ * Returns a new object, with properties specified in `properties` array.,
  * maintain the original object tree structure.
- * The function is recursive, so it will perform a deep search for the given property.
- * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the property is `test`.
+ * The function is recursive, so it will perform a deep search for the given properties.
+ * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.
  *
- * @param {Object} object   The object to filter
- * @param {Object} property The property to filter by
+ * @param {Object}   object     The object to filter
+ * @param {string[]} properties The properties to filter by
  * @return {Object} The merged object.
  */
-export const filterObjectByProperty = ( object, property ) => {
-	if ( ! object ) {
+export const filterObjectByProperties = ( object, properties ) => {
+	if ( ! object || ! properties?.length ) {
 		return {};
 	}
 
 	const newObject = {};
 	Object.keys( object ).forEach( ( key ) => {
-		if ( key === property ) {
+		if ( properties.includes( key ) ) {
 			newObject[ key ] = object[ key ];
 		} else if ( typeof object[ key ] === 'object' ) {
-			const newFilter = filterObjectByProperty( object[ key ], property );
+			const newFilter = filterObjectByProperties(
+				object[ key ],
+				properties
+			);
 			if ( Object.keys( newFilter ).length ) {
 				newObject[ key ] = newFilter;
 			}
@@ -128,23 +158,18 @@ export const filterObjectByProperty = ( object, property ) => {
 };
 
 /**
- * Compares a style variation to the same variation filtered by a single property.
- * Returns true if the variation contains only the property specified.
+ * Compares a style variation to the same variation filtered by the specified properties.
+ * Returns true if the variation contains only the properties specified.
  *
- * @param {Object} variation The variation to compare.
- * @param {string} property  The property to compare.
- * @return {boolean} Whether the variation contains only a single property.
+ * @param {Object}   variation  The variation to compare.
+ * @param {string[]} properties The properties to compare.
+ * @return {boolean} Whether the variation contains only the specified properties.
  */
-export function isVariationWithSingleProperty( variation, property ) {
-	const variationWithProperty = filterObjectByProperty(
+export function isVariationWithProperties( variation, properties ) {
+	const variationWithProperties = filterObjectByProperties(
 		cloneDeep( variation ),
-		property
+		properties
 	);
 
-	return (
-		JSON.stringify( variationWithProperty?.styles ) ===
-			JSON.stringify( variation?.styles ) &&
-		JSON.stringify( variationWithProperty?.settings ) ===
-			JSON.stringify( variation?.settings )
-	);
+	return areGlobalStyleConfigsEqual( variationWithProperties, variation );
 }

package/src/index.js

@@ -10,7 +10,10 @@ import {
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { createRoot, StrictMode } from '@wordpress/element';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	store as editorStore,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	registerLegacyWidgetBlock,
@@ -22,8 +25,15 @@ import {
  */
 import './hooks';
 import { store as editSiteStore } from './store';
+import { unlock } from './lock-unlock';
 import App from './components/app';
 
+const {
+	registerDefaultActions,
+	registerCoreBlockBindingsSources,
+	bootstrapBlockBindingsSourcesFromServer,
+} = unlock( editorPrivateApis );
+
 /**
  * Initializes the site editor screen.
  *
@@ -39,6 +49,8 @@ export function initializeEditor( id, settings ) {
 		( { name } ) => name !== 'core/freeform'
 	);
 	registerCoreBlocks( coreBlocks );
+	bootstrapBlockBindingsSourcesFromServer( settings?.blockBindingsSources );
+	registerCoreBlockBindingsSources();
 	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
@@ -47,6 +59,7 @@ export function initializeEditor( id, settings ) {
 			enableFSEBlocks: true,
 		} );
 	}
+	registerDefaultActions();
 
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.