@wordpress/edit-site 5.12.0 → 5.12.2

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

@@ -27,7 +27,7 @@ import { store as commandsStore } from '@wordpress/commands';
  */
 import { store as editSiteStore } from '../../store';
 import SiteIcon from '../site-icon';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
@@ -156,14 +156,18 @@ const SiteHub = forwardRef( ( props, ref ) => {
 							{ decodeEntities( siteTitle ) }
 						</motion.div>
 					</AnimatePresence>
-					<Button
-						href={ homeUrl }
-						target="_blank"
-						label={ __( 'View site' ) }
-						aria-label={ __( 'View site (opens in a new tab)' ) }
-						icon={ external }
-						className="edit-site-site-hub__site-view-link"
-					/>
+					{ canvasMode === 'view' && (
+						<Button
+							href={ homeUrl }
+							target="_blank"
+							label={ __( 'View site' ) }
+							aria-label={ __(
+								'View site (opens in a new tab)'
+							) }
+							icon={ external }
+							className="edit-site-site-hub__site-view-link"
+						/>
+					) }
 				</HStack>
 				{ canvasMode === 'view' && (
 					<Button

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

@@ -20,7 +20,7 @@
 			opacity: 1;
 		}
 		svg {
-			fill: $white;
+			fill: $gray-200;
 		}
 	}
 	&:hover {
@@ -55,12 +55,13 @@
 .edit-site-site-hub__site-title {
 	margin-left: $grid-unit-05;
 	flex-grow: 1;
+	color: $gray-200;
 }
 
 .edit-site-site-hub_toggle-command-center {
-	color: $white;
+	color: $gray-200;
 
 	&:hover {
-		color: $white;
+		color: $gray-100;
 	}
 }

package/src/components/style-book/index.js

@@ -36,7 +36,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
 
 const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(

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

@@ -10,7 +10,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -31,8 +31,13 @@ export default function useInitEditedEntityFromURL() {
 		};
 	}, [] );
 
-	const { setTemplate, setTemplatePart, setPage } =
-		useDispatch( editSiteStore );
+	const {
+		setEditedEntity,
+		setTemplate,
+		setTemplatePart,
+		setPage,
+		setNavigationMenu,
+	} = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		if ( postType && postId ) {
@@ -43,6 +48,12 @@ export default function useInitEditedEntityFromURL() {
 				case 'wp_template_part':
 					setTemplatePart( postId );
 					break;
+				case 'wp_navigation':
+					setNavigationMenu( postId );
+					break;
+				case 'wp_block':
+					setEditedEntity( postType, postId );
+					break;
 				default:
 					setPage( {
 						context: { postType, postId },
@@ -68,8 +79,10 @@ export default function useInitEditedEntityFromURL() {
 		postType,
 		homepageId,
 		isRequestingSite,
+		setEditedEntity,
 		setPage,
 		setTemplate,
 		setTemplatePart,
+		setNavigationMenu,
 	] );
 }

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

@@ -9,7 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 

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

@@ -8,7 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -18,6 +18,7 @@ export function getPathFromURL( urlParams ) {
 	// Compute the navigator path based on the URL params.
 	if ( urlParams?.postType && urlParams?.postId ) {
 		switch ( urlParams.postType ) {
+			case 'wp_block':
 			case 'wp_template':
 			case 'wp_template_part':
 			case 'page':
@@ -86,10 +87,19 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
+		} else if ( navigatorLocation.path === '/library' ) {
+			updateUrlParams( {
+				postType: undefined,
+				postId: undefined,
+				canvas: undefined,
+				path: navigatorLocation.path,
+			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,
 				postId: undefined,
+				categoryType: undefined,
+				categoryId: undefined,
 				path:
 					navigatorLocation.path === '/'
 						? undefined

package/src/components/table/index.js

@@ -0,0 +1,33 @@
+export default function Table( { data, columns } ) {
+	return (
+		<div className="edit-site-table-wrapper">
+			<table className="edit-site-table">
+				<thead>
+					<tr>
+						{ columns.map( ( column ) => (
+							<th key={ column.header }>{ column.header }</th>
+						) ) }
+					</tr>
+				</thead>
+				<tbody>
+					{ data.map( ( row, rowIndex ) => (
+						<tr key={ rowIndex }>
+							{ columns.map( ( column, columnIndex ) => (
+								<td
+									style={ {
+										maxWidth: column.maxWidth
+											? column.maxWidth
+											: undefined,
+									} }
+									key={ columnIndex }
+								>
+									{ column.cell( row ) }
+								</td>
+							) ) }
+						</tr>
+					) ) }
+				</tbody>
+			</table>
+		</div>
+	);
+}

package/src/components/table/style.scss

@@ -0,0 +1,37 @@
+.edit-site-table-wrapper {
+	width: 100%;
+}
+
+.edit-site-table {
+	width: 100%;
+	text-indent: 0;
+	border-color: inherit;
+	border-collapse: collapse;
+	position: relative;
+	a {
+		text-decoration: none;
+	}
+	th {
+		text-align: left;
+		font-weight: normal;
+		padding: 0 $grid-unit-20 $grid-unit-20;
+		color: $gray-700;
+	}
+	td {
+		padding: $grid-unit-20;
+	}
+	td,
+	th {
+		vertical-align: center;
+		&:first-child {
+			padding-left: 0;
+		}
+		&:last-child {
+			padding-right: 0;
+			text-align: right;
+		}
+	}
+	tr {
+		border-bottom: 1px solid $gray-100;
+	}
+}

package/src/components/template-part-converter/convert-to-template-part.js

@@ -4,10 +4,9 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
-import { createBlock, serialize } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
 
@@ -16,18 +15,11 @@ import { symbolFilled } from '@wordpress/icons';
  */
 import CreateTemplatePartModal from '../create-template-part-modal';
 import { store as editSiteStore } from '../../store';
-import {
-	useExistingTemplateParts,
-	getUniqueTemplatePartTitle,
-	getCleanTemplatePartSlug,
-} from '../../utils/template-part-create';
 
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const existingTemplateParts = useExistingTemplateParts();
 
 	const { canCreate } = useSelect( ( select ) => {
 		const { supportsTemplatePartsMode } =
@@ -41,23 +33,7 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 		return null;
 	}
 
-	const onConvert = async ( { title, area } ) => {
-		const uniqueTitle = getUniqueTemplatePartTitle(
-			title,
-			existingTemplateParts
-		);
-		const cleanSlug = getCleanTemplatePartSlug( uniqueTitle );
-
-		const templatePart = await saveEntityRecord(
-			'postType',
-			'wp_template_part',
-			{
-				slug: cleanSlug,
-				title: uniqueTitle,
-				content: serialize( blocks ),
-				area,
-			}
-		);
+	const onConvert = async ( templatePart ) => {
 		replaceBlocks(
 			clientIds,
 			createBlock( 'core/template-part', {
@@ -81,13 +57,14 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 					setIsModalOpen( true );
 				} }
 			>
-				{ __( 'Create Template part' ) }
+				{ __( 'Create template part' ) }
 			</MenuItem>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => {
 						setIsModalOpen( false );
 					} }
+					blocks={ blocks }
 					onCreate={ onConvert }
 				/>
 			) }

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

@@ -32,7 +32,7 @@ export default function WelcomeGuideEditor() {
 		<Guide
 			className="edit-site-welcome-guide"
 			contentLabel={ __( 'Welcome to the site editor' ) }
-			finishButtonText={ __( 'Get Started' ) }
+			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuide' ) }
 			pages={ [
 				{

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

@@ -34,11 +34,13 @@ export default function WelcomeGuideStyles() {
 		return null;
 	}
 
+	const welcomeLabel = __( 'Welcome to Styles' );
+
 	return (
 		<Guide
 			className="edit-site-welcome-guide"
-			contentLabel={ __( 'Welcome to styles' ) }
-			finishButtonText={ __( 'Get Started' ) }
+			contentLabel={ welcomeLabel }
+			finishButtonText={ __( 'Get started' ) }
 			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
 			pages={ [
 				{
@@ -51,7 +53,7 @@ export default function WelcomeGuideStyles() {
 					content: (
 						<>
 							<h1 className="edit-site-welcome-guide__heading">
-								{ __( 'Welcome to Styles' ) }
+								{ welcomeLabel }
 							</h1>
 							<p className="edit-site-welcome-guide__text">
 								{ __(

package/src/hooks/commands/use-common-commands.js

@@ -0,0 +1,186 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { trash, backup, help, styles, external } from '@wordpress/icons';
+import { useCommandLoader, useCommand } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+
+const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
+
+function useGlobalStylesResetCommands() {
+	const [ canReset, onReset ] = useGlobalStylesReset();
+	const commands = useMemo( () => {
+		if ( ! canReset ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/reset-global-styles',
+				label: __( 'Reset styles to defaults' ),
+				icon: trash,
+				callback: ( { close } ) => {
+					close();
+					onReset();
+				},
+			},
+		];
+	}, [ canReset, onReset ] );
+
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+function useGlobalStylesOpenCssCommands() {
+	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const history = useHistory();
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
+
+	const commands = useMemo( () => {
+		if ( ! canEditCSS ) {
+			return [];
+		}
+
+		return [
+			{
+				name: 'core/edit-site/open-styles-css',
+				label: __( 'Open CSS' ),
+				icon: styles,
+				callback: ( { close } ) => {
+					close();
+					history.push( {
+						path: '/wp_global_styles',
+						canvas: 'edit',
+					} );
+					openGeneralSidebar( 'edit-site/global-styles' );
+					setEditorCanvasContainerView( 'global-styles-css' );
+				},
+			},
+		];
+	}, [
+		history,
+		openGeneralSidebar,
+		setEditorCanvasContainerView,
+		canEditCSS,
+	] );
+	return {
+		isLoading: false,
+		commands,
+	};
+}
+
+export function useCommonCommands() {
+	const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { set } = useDispatch( preferencesStore );
+	const history = useHistory();
+	const { homeUrl } = useSelect( ( select ) => {
+		const {
+			getUnstableBase, // Site index.
+		} = select( coreStore );
+
+		return {
+			homeUrl: getUnstableBase()?.home,
+		};
+	}, [] );
+
+	useCommand( {
+		name: 'core/edit-site/open-global-styles-revisions',
+		label: __( 'Open styles revisions' ),
+		icon: backup,
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		},
+	} );
+
+	useCommand( {
+		name: 'core/edit-site/open-styles',
+		label: __( 'Open styles' ),
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+		},
+		icon: styles,
+	} );
+
+	useCommand( {
+		name: 'core/edit-site/toggle-styles-welcome-guide',
+		label: __( 'Learn about styles' ),
+		callback: ( { close } ) => {
+			close();
+			history.push( {
+				path: '/wp_global_styles',
+				canvas: 'edit',
+			} );
+			openGeneralSidebar( 'edit-site/global-styles' );
+			set( 'core/edit-site', 'welcomeGuideStyles', true );
+			// sometimes there's a focus loss that happens after some time
+			// that closes the modal, we need to force reopening it.
+			setTimeout( () => {
+				set( 'core/edit-site', 'welcomeGuideStyles', true );
+			}, 500 );
+		},
+		icon: help,
+	} );
+
+	useCommand( {
+		name: 'core/edit-site/view-site',
+		label: __( 'View site' ),
+		callback: ( { close } ) => {
+			close();
+			window.open( homeUrl, '_blank' );
+		},
+		icon: external,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/reset-global-styles',
+		hook: useGlobalStylesResetCommands,
+	} );
+
+	useCommandLoader( {
+		name: 'core/edit-site/open-styles-css',
+		hook: useGlobalStylesOpenCssCommands,
+	} );
+}