@wordpress/edit-site 5.12.7 → 5.12.9

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

@@ -6,18 +6,19 @@ import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 export default function useMyPatterns() {
-	const myPatterns = useSelect( ( select ) =>
-		select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
-			per_page: -1,
-		} )
+	const myPatternsCount = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecords( 'postType', 'wp_block', {
+				per_page: -1,
+			} )?.length ?? 0
 	);
 
 	return {
 		myPatterns: {
-			count: myPatterns?.length || 0,
+			count: myPatternsCount,
 			name: 'my-patterns',
 			label: __( 'My patterns' ),
 		},
-		hasPatterns: !! myPatterns?.length,
+		hasPatterns: myPatternsCount > 0,
 	};
 }

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

@@ -51,13 +51,16 @@ const SiteHub = forwardRef( ( props, ref ) => {
 	const { open: openCommandCenter } = useDispatch( commandsStore );
 
 	const disableMotion = useReducedMotion();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const {
+		setCanvasMode,
+		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
+	} = unlock( useDispatch( editSiteStore ) );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const isBackToDashboardButton = canvasMode === 'view';
 	const siteIconButtonProps = isBackToDashboardButton
 		? {
 				href: dashboardLink,
-				label: __( 'Go back to the Dashboard' ),
+				label: __( 'Go to the Dashboard' ),
 		  }
 		: {
 				href: dashboardLink, // We need to keep the `href` here so the component doesn't remount as a `<button>` and break the animation.
@@ -67,6 +70,7 @@ const SiteHub = forwardRef( ( props, ref ) => {
 					event.preventDefault();
 					if ( canvasMode === 'edit' ) {
 						clearSelectedBlock();
+						setPreviewDeviceType( 'desktop' );
 						setCanvasMode( 'view' );
 					}
 				},

package/src/components/site-hub/style.scss

@@ -8,6 +8,11 @@
 		gap: 0;
 	}
 
+	.edit-site-site-hub__site-title,
+	.edit-site-site-hub_toggle-command-center {
+		transition: opacity ease 0.1s;
+	}
+
 	.edit-site-site-hub__site-view-link {
 		flex-grow: 0;
 		@include break-mobile() {

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

@@ -36,6 +36,12 @@ export function getPathFromURL( urlParams ) {
 	return path;
 }
 
+function isSubset( subset, superset ) {
+	return Object.entries( subset ).every( ( [ key, value ] ) => {
+		return superset[ key ] === value;
+	} );
+}
+
 export default function useSyncPathWithURL() {
 	const history = useHistory();
 	const { params: urlParams } = useLocation();
@@ -44,76 +50,77 @@ export default function useSyncPathWithURL() {
 		params: navigatorParams,
 		goTo,
 	} = useNavigator();
-	const currentUrlParams = useRef( urlParams );
-	const currentPath = useRef( navigatorLocation.path );
 	const isMounting = useRef( true );
 
-	useEffect( () => {
-		// The navigatorParams are only initially filled properly when the
-		// navigator screens mount. so we ignore the first synchronisation.
-		if ( isMounting.current ) {
-			isMounting.current = false;
-			return;
-		}
-
-		function updateUrlParams( newUrlParams ) {
-			if (
-				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
-					return currentUrlParams.current[ key ] === value;
-				} )
-			) {
+	useEffect(
+		() => {
+			// The navigatorParams are only initially filled properly when the
+			// navigator screens mount. so we ignore the first synchronisation.
+			if ( isMounting.current ) {
+				isMounting.current = false;
 				return;
 			}
-			const updatedParams = {
-				...currentUrlParams.current,
-				...newUrlParams,
-			};
-			currentUrlParams.current = updatedParams;
-			history.push( updatedParams );
-		}
 
-		if ( navigatorParams?.postType && navigatorParams?.postId ) {
-			updateUrlParams( {
-				postType: navigatorParams?.postType,
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if (
-			navigatorLocation.path.startsWith( '/page/' ) &&
-			navigatorParams?.postId
-		) {
-			updateUrlParams( {
-				postType: 'page',
-				postId: navigatorParams?.postId,
-				path: undefined,
-			} );
-		} else if ( navigatorLocation.path === '/patterns' ) {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				canvas: undefined,
-				path: navigatorLocation.path,
-			} );
-		} else {
-			updateUrlParams( {
-				postType: undefined,
-				postId: undefined,
-				categoryType: undefined,
-				categoryId: undefined,
-				path:
-					navigatorLocation.path === '/'
-						? undefined
-						: navigatorLocation.path,
-			} );
-		}
-	}, [ navigatorLocation?.path, navigatorParams, history ] );
+			function updateUrlParams( newUrlParams ) {
+				if ( isSubset( newUrlParams, urlParams ) ) {
+					return;
+				}
+				const updatedParams = {
+					...urlParams,
+					...newUrlParams,
+				};
+				history.push( updatedParams );
+			}
 
-	useEffect( () => {
-		currentUrlParams.current = urlParams;
-		const path = getPathFromURL( urlParams );
-		if ( currentPath.current !== path ) {
-			currentPath.current = path;
-			goTo( path );
-		}
-	}, [ urlParams, goTo ] );
+			if ( navigatorParams?.postType && navigatorParams?.postId ) {
+				updateUrlParams( {
+					postType: navigatorParams?.postType,
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if (
+				navigatorLocation.path.startsWith( '/page/' ) &&
+				navigatorParams?.postId
+			) {
+				updateUrlParams( {
+					postType: 'page',
+					postId: navigatorParams?.postId,
+					path: undefined,
+				} );
+			} else if ( navigatorLocation.path === '/patterns' ) {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					canvas: undefined,
+					path: navigatorLocation.path,
+				} );
+			} else {
+				updateUrlParams( {
+					postType: undefined,
+					postId: undefined,
+					categoryType: undefined,
+					categoryId: undefined,
+					path:
+						navigatorLocation.path === '/'
+							? undefined
+							: navigatorLocation.path,
+				} );
+			}
+		},
+		// Trigger only when navigator changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ navigatorLocation?.path, navigatorParams ]
+	);
+
+	useEffect(
+		() => {
+			const path = getPathFromURL( urlParams );
+			if ( navigatorLocation.path !== path ) {
+				goTo( path );
+			}
+		},
+		// Trigger only when URL changes to prevent infinite loops.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[ urlParams ]
+	);
 }

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

@@ -13,6 +13,7 @@ import {
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -58,7 +59,7 @@ export default function TemplateActions( {
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" reverted.' ),
-					template.title.rendered
+					decodeEntities( template.title.rendered )
 				),
 				{
 					type: 'snackbar',

package/src/components/template-actions/rename-menu-item.js

@@ -14,9 +14,11 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { decodeEntities } from '@wordpress/html-entities';
 
 export default function RenameMenuItem( { template, onClose } ) {
-	const [ title, setTitle ] = useState( () => template.title.rendered );
+	const title = decodeEntities( template.title.rendered );
+	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
 	const { editEntityRecord, saveEditedEntityRecord } =
@@ -33,11 +35,11 @@ export default function RenameMenuItem( { template, onClose } ) {
 
 		try {
 			await editEntityRecord( 'postType', template.type, template.id, {
-				title,
+				title: editedTitle,
 			} );
 
 			// Update state before saving rerenders the list.
-			setTitle( '' );
+			setEditedTitle( '' );
 			setIsModalOpen( false );
 			onClose();
 
@@ -67,7 +69,7 @@ export default function RenameMenuItem( { template, onClose } ) {
 			<MenuItem
 				onClick={ () => {
 					setIsModalOpen( true );
-					setTitle( template.title.rendered );
+					setEditedTitle( title );
 				} }
 			>
 				{ __( 'Rename' ) }
@@ -85,8 +87,8 @@ export default function RenameMenuItem( { template, onClose } ) {
 							<TextControl
 								__nextHasNoMarginBottom
 								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
+								value={ editedTitle }
+								onChange={ setEditedTitle }
 								required
 							/>
 

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

@@ -18,6 +18,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	getBlockType,
+	hasBlockSupport,
 } from '@wordpress/blocks';
 import { useContext, useMemo, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
@@ -93,6 +94,8 @@ const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
+const SUPPORTED_STYLES = [ 'border', 'color', 'spacing', 'typography' ];
+
 function useChangesToPush( name, attributes ) {
 	const supports = useSupportedStyles( name );
 
@@ -212,10 +215,14 @@ function PushChangesToGlobalStylesControl( {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const blockEditingMode = useBlockEditingMode();
+		const supportsStyles = SUPPORTED_STYLES.some( ( feature ) =>
+			hasBlockSupport( props.name, feature )
+		);
+
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ blockEditingMode === 'default' && (
+				{ blockEditingMode === 'default' && supportsStyles && (
 					<InspectorAdvancedControls>
 						<PushChangesToGlobalStylesControl { ...props } />
 					</InspectorAdvancedControls>

package/src/style.scss

@@ -47,27 +47,20 @@
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 
-html #wpadminbar {
+body.js #wpadminbar {
 	display: none;
 }
 
-html #wpbody {
+body.js #wpbody {
 	padding-top: 0;
 }
 
-// In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
-// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.
-html.wp-toolbar {
-	background: $white;
-	padding-top: 0;
-}
-
-body.appearance_page_gutenberg-template-parts,
-body.site-editor-php {
+body.js.appearance_page_gutenberg-template-parts,
+body.js.site-editor-php {
 	@include wp-admin-reset(".edit-site");
 }
 
-body.site-editor-php {
+body.js.site-editor-php {
 	background: $gray-900;
 }
 
@@ -91,6 +84,11 @@ body.site-editor-php {
 		top: 0;
 	}
 
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
+
 	.interface-interface-skeleton {
 		top: 0;
 	}

package/src/utils/use-activate-theme.js

@@ -29,7 +29,7 @@ export function useActivateTheme() {
 				'themes.php?action=activate&stylesheet=' +
 				currentlyPreviewingTheme() +
 				'&_wpnonce=' +
-				window.BLOCK_THEME_ACTIVATE_NONCE;
+				window.WP_BLOCK_THEME_ACTIVATE_NONCE;
 			await window.fetch( activationURL );
 			const { wp_theme_preview: themePreview, ...params } =
 				location.params;