@wordpress/edit-site 6.13.0 → 6.13.1-next.a9f418477.0

package/src/components/site-editor-routes/pages.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+import PostList from '../post-list';
+import { unlock } from '../../lock-unlock';
+import { PostEdit } from '../post-edit';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobilePagesView() {
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
+
+	return canvas === 'edit' ? <Editor /> : <PostList postType="page" />;
+}
+
+export const pagesRoute = {
+	name: 'pages',
+	path: '/page',
+	areas: {
+		sidebar: (
+			<SidebarNavigationScreen
+				title={ __( 'Pages' ) }
+				backPath="/"
+				content={ <DataViewsSidebarContent postType="page" /> }
+			/>
+		),
+		content: <PostList postType="page" />,
+		preview( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <MobilePagesView />,
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? (
+				<PostEdit postType="page" postId={ query.postId } />
+			) : undefined;
+		},
+	},
+	widths: {
+		content( { query } ) {
+			const isListView =
+				( query.layout === 'list' || ! query.layout ) &&
+				query.isCustom !== 'true';
+			return isListView ? 380 : undefined;
+		},
+		edit( { query } ) {
+			const hasQuickEdit =
+				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+			return hasQuickEdit ? 380 : undefined;
+		},
+	},
+};

package/src/components/site-editor-routes/pattern-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const patternItemRoute = {
+	name: 'pattern-item',
+	path: '/wp_block/:postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/patterns.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+import PagePatterns from '../page-patterns';
+
+export const patternsRoute = {
+	name: 'patterns',
+	path: '/pattern',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		content: <PagePatterns />,
+		mobile: <PagePatterns />,
+	},
+};

package/src/components/site-editor-routes/styles.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import { unlock } from '../../lock-unlock';
+import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
+import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper';
+
+const { useLocation } = unlock( routerPrivateApis );
+
+function MobileGlobalStylesUI() {
+	const { query = {} } = useLocation();
+	const { canvas } = query;
+
+	if ( canvas === 'edit' ) {
+		return <Editor />;
+	}
+
+	return <GlobalStylesUIWrapper />;
+}
+
+export const stylesRoute = {
+	name: 'styles',
+	path: '/styles',
+	areas: {
+		content: <GlobalStylesUIWrapper />,
+		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
+		preview: <Editor />,
+		mobile: <MobileGlobalStylesUI />,
+	},
+	widths: {
+		content: 380,
+	},
+};

package/src/components/site-editor-routes/template-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+
+export const templateItemRoute = {
+	name: 'template-item',
+	path: '/wp_template/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/template-part-item.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
+
+export const templatePartItemRoute = {
+	name: 'template-part-item',
+	path: '/wp_template_part/*postId',
+	areas: {
+		sidebar: <SidebarNavigationScreenPatterns backPath="/" />,
+		mobile: <Editor />,
+		preview: <Editor />,
+	},
+};

package/src/components/site-editor-routes/templates.js

@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+import Editor from '../editor';
+import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import PageTemplates from '../page-templates';
+
+export const templatesRoute = {
+	name: 'templates',
+	path: '/template',
+	areas: {
+		sidebar: <SidebarNavigationScreenTemplatesBrowse backPath="/" />,
+		content: <PageTemplates />,
+		preview( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? <Editor /> : undefined;
+		},
+		mobile: <PageTemplates />,
+	},
+	widths: {
+		content( { query } ) {
+			const isListView = query.layout === 'list';
+			return isListView ? 380 : undefined;
+		},
+	},
+};

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

@@ -39,8 +39,7 @@ const SiteHub = memo(
 			const { getEntityRecord } = select( coreStore );
 			const _site = getEntityRecord( 'root', 'site' );
 			return {
-				dashboardLink:
-					getSettings().__experimentalDashboardLink || 'index.php',
+				dashboardLink: getSettings().__experimentalDashboardLink,
 				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 				siteTitle:
 					! _site?.title && !! _site?.url
@@ -129,9 +128,7 @@ export const SiteHubMobile = memo(
 					select( coreStore );
 				const _site = getEntityRecord( 'root', 'site' );
 				return {
-					dashboardLink:
-						getSettings().__experimentalDashboardLink ||
-						'index.php',
+					dashboardLink: getSettings().__experimentalDashboardLink,
 					isBlockTheme: getCurrentTheme()?.is_block_theme,
 					homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
 					siteTitle:
@@ -170,7 +167,7 @@ export const SiteHubMobile = memo(
 								  }
 								: {
 										onClick: () => {
-											history.push( {} );
+											history.navigate( '/' );
 											navigate( 'back' );
 										},
 										label: __( 'Go to Site Editor' ),

package/src/components/style-book/constants.ts

@@ -216,27 +216,25 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 	.edit-site-style-book__duotone-example > div:not(:first-child) {
 		height: 20px;
-		border: 1px solid #ddd;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 
 	.edit-site-style-book__color-example {
-		height: 52px;
-		border: 1px solid #ddd;
-	}
-
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
-		flex-direction: row;
+		height: 32px;
+		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 
 	.edit-site-style-book__subcategory-title,
 	.edit-site-style-book__example-title {
 		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-		font-size: 11px;
-		font-weight: 500;
+		font-size: 13px;
+		font-weight: normal;
 		line-height: normal;
 		margin: 0;
 		text-align: left;
-		text-transform: uppercase;
+		padding-top: 8px;
+		border-top: 1px solid color-mix( in srgb, currentColor 10%, transparent );
+		color: color-mix( in srgb, currentColor 60%, transparent );
 	}
 
 	.edit-site-style-book__subcategory-title {
@@ -246,18 +244,9 @@ export const STYLE_BOOK_IFRAME_STYLES = `
     	padding-bottom: 8px;
 	}
 
-	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
-		text-align: right;
-		width: 120px;
-	}
-
 	.edit-site-style-book__example-preview {
 		width: 100%;
 	}
-	
-	.is-wide .edit-site-style-book__example-preview {
-		width: calc(100% - 120px);
-	}
 
 	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
 	.edit-site-style-book__example-preview .block-list-appender {

package/src/components/style-book/examples.tsx

@@ -12,7 +12,12 @@ import {
 /**
  * Internal dependencies
  */
-import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
+import type {
+	Block,
+	BlockExample,
+	ColorOrigin,
+	MultiOriginPalettes,
+} from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
@@ -91,30 +96,33 @@ function getOverviewBlockExamples(
 		examples.push( themeColorexample );
 	}
 
-	const headingBlock = createBlock( 'core/heading', {
-		content: __(
-			`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
-		),
-		level: 1,
-	} );
-	const firstParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
-		),
-	} );
-	const secondParagraphBlock = createBlock( 'core/paragraph', {
-		content: __(
-			`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
-		),
-	} );
+	// Get examples for typography blocks.
+	const typographyBlockExamples: Block[] = [];
+
+	if ( getBlockType( 'core/heading' ) ) {
+		const headingBlock = createBlock( 'core/heading', {
+			content: __(
+				`AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™`
+			),
+			level: 1,
+		} );
+		typographyBlockExamples.push( headingBlock );
+	}
+
+	if ( getBlockType( 'core/paragraph' ) ) {
+		const firstParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.`
+			),
+		} );
+		const secondParagraphBlock = createBlock( 'core/paragraph', {
+			content: __(
+				`Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.`
+			),
+		} );
 
-	const textExample = {
-		name: 'typography',
-		title: __( 'Typography' ),
-		category: 'overview',
-		blocks: [
-			headingBlock,
-			createBlock(
+		if ( getBlockType( 'core/group' ) ) {
+			const groupBlock = createBlock(
 				'core/group',
 				{
 					layout: {
@@ -129,10 +137,21 @@ function getOverviewBlockExamples(
 					},
 				},
 				[ firstParagraphBlock, secondParagraphBlock ]
-			),
-		],
-	};
-	examples.push( textExample );
+			);
+			typographyBlockExamples.push( groupBlock );
+		} else {
+			typographyBlockExamples.push( firstParagraphBlock );
+		}
+	}
+
+	if ( !! typographyBlockExamples.length ) {
+		examples.push( {
+			name: 'typography',
+			title: __( 'Typography' ),
+			category: 'overview',
+			blocks: typographyBlockExamples,
+		} );
+	}
 
 	const otherBlockExamples = [
 		'core/image',

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

@@ -67,11 +67,14 @@ function isObjectEmpty( object ) {
  * @param {HTMLIFrameElement} iframe   The target iframe.
  */
 const scrollToSection = ( anchorId, iframe ) => {
-	if ( ! iframe || ! iframe?.contentDocument ) {
+	if ( ! anchorId || ! iframe || ! iframe?.contentDocument ) {
 		return;
 	}
 
-	const element = iframe.contentDocument.getElementById( anchorId );
+	const element =
+		anchorId === 'top'
+			? iframe.contentDocument.body
+			: iframe.contentDocument.getElementById( anchorId );
 	if ( element ) {
 		element.scrollIntoView( {
 			behavior: 'smooth',
@@ -89,6 +92,17 @@ const scrollToSection = ( anchorId, iframe ) => {
  */
 const getStyleBookNavigationFromPath = ( path ) => {
 	if ( path && typeof path === 'string' ) {
+		if ( path === '/' ) {
+			return {
+				top: true,
+			};
+		}
+
+		if ( path.startsWith( '/typography' ) ) {
+			return {
+				block: 'typography',
+			};
+		}
 		let block = path.includes( '/blocks/' )
 			? decodeURIComponent( path.split( '/blocks/' )[ 1 ] )
 			: null;
@@ -360,10 +374,19 @@ const StyleBookBody = ( {
 
 	const handleLoad = () => setHasIframeLoaded( true );
 	useLayoutEffect( () => {
-		if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) {
-			scrollToSection( `example-${ goTo?.block }`, iframeRef?.current );
+		if ( hasIframeLoaded && iframeRef?.current ) {
+			if ( goTo?.top ) {
+				scrollToSection( 'top', iframeRef?.current );
+				return;
+			}
+			if ( goTo?.block ) {
+				scrollToSection(
+					`example-${ goTo?.block }`,
+					iframeRef?.current
+				);
+			}
 		}
-	}, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] );
+	}, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] );
 
 	return (
 		<Iframe

package/src/components/style-book/types.ts

@@ -1,4 +1,4 @@
-type Block = {
+export type Block = {
 	name: string;
 	attributes: Record< string, unknown >;
 	innerBlocks?: Block[];

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

@@ -49,27 +49,17 @@ const getGlobalStylesOpenStylesCommands = () =>
 					label: __( 'Open styles' ),
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{ ...params, canvas: 'edit' },
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 					},
 					icon: styles,
 				},
 			];
-		}, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme ] );
 
 		return {
 			isLoading: false,
@@ -100,24 +90,11 @@ const getGlobalStylesToggleWelcomeGuideCommands = () =>
 					label: __( 'Learn about styles' ),
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						set( 'core/edit-site', 'welcomeGuideStyles', true );
 						// sometimes there's a focus loss that happens after some time
@@ -129,14 +106,7 @@ const getGlobalStylesToggleWelcomeGuideCommands = () =>
 					icon: help,
 				},
 			];
-		}, [
-			history,
-			openGeneralSidebar,
-			canvas,
-			isBlockBasedTheme,
-			set,
-			params,
-		] );
+		}, [ history, openGeneralSidebar, canvas, isBlockBasedTheme, set ] );
 
 		return {
 			isLoading: false,
@@ -205,24 +175,11 @@ const getGlobalStylesOpenCssCommands = () =>
 					icon: brush,
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						setEditorCanvasContainerView( 'global-styles-css' );
 					},
@@ -234,7 +191,6 @@ const getGlobalStylesOpenCssCommands = () =>
 			setEditorCanvasContainerView,
 			canEditCSS,
 			canvas,
-			params,
 		] );
 		return {
 			isLoading: false,
@@ -272,24 +228,11 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 					icon: backup,
 					callback: ( { close } ) => {
 						close();
-						if ( ! params.postId ) {
-							history.push( {
-								path: '/wp_global_styles',
-								canvas: 'edit',
+						if ( canvas !== 'edit' ) {
+							history.navigate( '/styles?canvas=edit', {
+								transition: 'canvas-mode-edit-transition',
 							} );
 						}
-						if ( params.postId && canvas !== 'edit' ) {
-							history.push(
-								{
-									...params,
-									canvas: 'edit',
-								},
-								undefined,
-								{
-									transition: 'canvas-mode-edit-transition',
-								}
-							);
-						}
 						openGeneralSidebar( 'edit-site/global-styles' );
 						setEditorCanvasContainerView(
 							'global-styles-revisions'
@@ -303,7 +246,6 @@ const getGlobalStylesOpenRevisionsCommands = () =>
 			openGeneralSidebar,
 			setEditorCanvasContainerView,
 			canvas,
-			params,
 		] );
 
 		return {

package/src/hooks/commands/use-set-command-context.js

@@ -19,8 +19,8 @@ const { useLocation } = unlock( routerPrivateApis );
  * React hook used to set the correct command context based on the current state.
  */
 export default function useSetCommandContext() {
-	const { params } = useLocation();
-	const { canvas = 'view' } = params;
+	const { query = {} } = useLocation();
+	const { canvas = 'view' } = query;
 	const hasBlockSelected = useSelect( ( select ) => {
 		return select( blockEditorStore ).getBlockSelectionStart();
 	}, [] );

package/src/store/private-actions.js

@@ -18,3 +18,10 @@ export function registerRoute( route ) {
 		route,
 	};
 }
+
+export function unregisterRoute( name ) {
+	return {
+		type: 'UNREGISTER_ROUTE',
+		name,
+	};
+}

package/src/store/reducer.js

@@ -85,6 +85,8 @@ function routes( state = [], action ) {
 	switch ( action.type ) {
 		case 'REGISTER_ROUTE':
 			return [ ...state, action.route ];
+		case 'UNREGISTER_ROUTE':
+			return state.filter( ( route ) => route.name !== action.name );
 	}
 
 	return state;

package/src/style.scss

@@ -47,6 +47,7 @@
 	mix-blend-mode: normal;
 	display: block;
 }
+
 /* stylelint-enable */
 
 body.js #wpadminbar {

package/src/utils/is-previewing-theme.js

@@ -4,9 +4,7 @@
 import { getQueryArg } from '@wordpress/url';
 
 export function isPreviewingTheme() {
-	return (
-		getQueryArg( window.location.href, 'wp_theme_preview' ) !== undefined
-	);
+	return !! getQueryArg( window.location.href, 'wp_theme_preview' );
 }
 
 export function currentlyPreviewingTheme() {