@wordpress/edit-site 6.19.0 → 6.20.0

package/src/components/app/index.js

@@ -3,7 +3,8 @@
  */
 import { useSelect } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -30,9 +31,15 @@ function AppLayout() {
 
 export default function App() {
 	useRegisterSiteEditorRoutes();
-	const routes = useSelect( ( select ) => {
-		return unlock( select( editSiteStore ) ).getRoutes();
+	const { routes, currentTheme, editorSettings } = useSelect( ( select ) => {
+		return {
+			routes: unlock( select( editSiteStore ) ).getRoutes(),
+			currentTheme: select( coreStore ).getCurrentTheme(),
+			// This is a temp solution until the has_theme_json value is available for the current theme.
+			editorSettings: select( editSiteStore ).getSettings(),
+		};
 	}, [] );
+
 	const beforeNavigate = useCallback( ( { path, query } ) => {
 		if ( ! isPreviewingTheme() ) {
 			return { path, query };
@@ -50,11 +57,19 @@ export default function App() {
 		};
 	}, [] );
 
+	const matchResolverArgsValue = useMemo(
+		() => ( {
+			siteData: { currentTheme, editorSettings },
+		} ),
+		[ currentTheme, editorSettings ]
+	);
+
 	return (
 		<RouterProvider
 			routes={ routes }
 			pathArg="p"
 			beforeNavigate={ beforeNavigate }
+			matchResolverArgs={ matchResolverArgsValue }
 		>
 			<AppLayout />
 		</RouterProvider>

package/src/components/editor/site-preview.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
+import { focus } from '@wordpress/dom';
+import { addQueryArgs } from '@wordpress/url';
 
 export default function SitePreview() {
 	const siteUrl = useSelect( ( select ) => {
@@ -12,10 +14,12 @@ export default function SitePreview() {
 		return siteData?.home;
 	}, [] );
 
-	// If theme is block based, return the Editor, otherwise return the site preview.
 	return (
 		<iframe
-			src={ siteUrl }
+			src={ addQueryArgs( siteUrl, {
+				// Parameter for hiding the admin bar.
+				wp_site_preview: 1,
+			} ) }
 			title={ __( 'Site Preview' ) }
 			style={ {
 				display: 'block',
@@ -24,20 +28,10 @@ export default function SitePreview() {
 				backgroundColor: '#fff',
 			} }
 			onLoad={ ( event ) => {
-				// Hide the admin bar in the front-end preview.
-				const document = event.target.contentDocument;
-				document.getElementById( 'wpadminbar' ).remove();
-				document
-					.getElementsByTagName( 'html' )[ 0 ]
-					.setAttribute( 'style', 'margin-top: 0 !important;' );
-				document
-					.getElementsByTagName( 'body' )[ 0 ]
-					.classList.remove( 'admin-bar' );
 				// Make interactive elements unclickable.
-				const interactiveElements = document.querySelectorAll(
-					'a, button, input, details, audio'
-				);
-				interactiveElements.forEach( ( element ) => {
+				const document = event.target.contentDocument;
+				const focusableElements = focus.focusable.find( document );
+				focusableElements.forEach( ( element ) => {
 					element.style.pointerEvents = 'none';
 					element.tabIndex = -1;
 					element.setAttribute( 'aria-hidden', 'true' );

package/src/components/editor/use-editor-title.js

@@ -19,8 +19,11 @@ const { getTemplateInfo } = unlock( editorPrivateApis );
 function useEditorTitle( postType, postId ) {
 	const { title, isLoaded } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
+			const {
+				getEditedEntityRecord,
+				getCurrentTheme,
+				hasFinishedResolution,
+			} = select( coreStore );
 
 			if ( ! postId ) {
 				return { isLoaded: false };
@@ -33,10 +36,7 @@ function useEditorTitle( postType, postId ) {
 			);
 
 			const { default_template_types: templateTypes = [] } =
-				select( coreStore ).getEntityRecord(
-					'root',
-					'__unstableBase'
-				) ?? {};
+				getCurrentTheme() ?? {};
 
 			const templateInfo = getTemplateInfo( {
 				template: _record,

package/src/components/global-styles/shadows-panel.js

@@ -6,7 +6,6 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalItemGroup as ItemGroup,
 	Button,
-	Flex,
 	FlexItem,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
@@ -134,14 +133,9 @@ function ShadowList( {
 	return (
 		<VStack spacing={ 2 }>
 			<HStack justify="space-between">
-				<Flex
-					align="center"
-					className="edit-site-global-styles__shadows-panel__title"
-				>
-					<Subtitle level={ 3 }>{ label }</Subtitle>
-				</Flex>
-				{ canCreate && (
-					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+				<Subtitle level={ 3 }>{ label }</Subtitle>
+				<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
+					{ canCreate && (
 						<Button
 							size="small"
 							icon={ plus }
@@ -150,28 +144,28 @@ function ShadowList( {
 								handleAddShadow();
 							} }
 						/>
-					</FlexItem>
-				) }
-				{ !! shadows?.length && category === 'custom' && (
-					<Menu>
-						<Menu.TriggerButton
-							render={
-								<Button
-									size="small"
-									icon={ moreVertical }
-									label={ __( 'Shadow options' ) }
-								/>
-							}
-						/>
-						<Menu.Popover>
-							<Menu.Item onClick={ onReset }>
-								<Menu.ItemLabel>
-									{ __( 'Remove all custom shadows' ) }
-								</Menu.ItemLabel>
-							</Menu.Item>
-						</Menu.Popover>
-					</Menu>
-				) }
+					) }
+					{ !! shadows?.length && category === 'custom' && (
+						<Menu>
+							<Menu.TriggerButton
+								render={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __( 'Shadow options' ) }
+									/>
+								}
+							/>
+							<Menu.Popover>
+								<Menu.Item onClick={ onReset }>
+									<Menu.ItemLabel>
+										{ __( 'Remove all custom shadows' ) }
+									</Menu.ItemLabel>
+								</Menu.Item>
+							</Menu.Popover>
+						</Menu>
+					) }
+				</FlexItem>
 			</HStack>
 			{ shadows.length > 0 && (
 				<ItemGroup isBordered isSeparated>

package/src/components/global-styles/style.scss

@@ -104,7 +104,6 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__shadows-panel__title,
 .edit-site-global-styles__shadows-panel__options-container {
 	height: $grid-unit * 3;
 }

package/src/components/layout/index.js

@@ -44,7 +44,7 @@ import { unlock } from '../../lock-unlock';
 import SaveKeyboardShortcut from '../save-keyboard-shortcut';
 import { useIsSiteEditorLoading } from './hooks';
 import useMovingAnimation from './animation';
-import SidebarContent from '../sidebar';
+import { SidebarContent, SidebarNavigationProvider } from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
@@ -141,16 +141,18 @@ function Layout() {
 												isResizableFrameOversized
 											}
 										/>
-										<SidebarContent
-											shouldAnimate={
-												routeKey !== 'styles'
-											}
-											routeKey={ routeKey }
-										>
-											<ErrorBoundary>
-												{ areas.sidebar }
-											</ErrorBoundary>
-										</SidebarContent>
+										<SidebarNavigationProvider>
+											<SidebarContent
+												shouldAnimate={
+													routeKey !== 'styles'
+												}
+												routeKey={ routeKey }
+											>
+												<ErrorBoundary>
+													{ areas.sidebar }
+												</ErrorBoundary>
+											</SidebarContent>
+										</SidebarNavigationProvider>
 										<SaveHub />
 										<SavePanel />
 									</motion.div>
@@ -163,17 +165,29 @@ function Layout() {
 
 					{ isMobileViewport && areas.mobile && (
 						<div className="edit-site-layout__mobile">
-							{ canvas !== 'edit' && (
-								<SidebarContent routeKey={ routeKey }>
-									<SiteHubMobile
-										ref={ toggleRef }
-										isTransparent={
-											isResizableFrameOversized
-										}
-									/>
-								</SidebarContent>
-							) }
-							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
+							<SidebarNavigationProvider>
+								{ canvas !== 'edit' ? (
+									<>
+										<SiteHubMobile
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
+										<SidebarContent routeKey={ routeKey }>
+											<ErrorBoundary>
+												{ areas.mobile }
+											</ErrorBoundary>
+										</SidebarContent>
+										<SaveHub />
+										<SavePanel />
+									</>
+								) : (
+									<ErrorBoundary>
+										{ areas.mobile }
+									</ErrorBoundary>
+								) }
+							</SidebarNavigationProvider>
 						</div>
 					) }
 

package/src/components/layout/style.scss

@@ -56,6 +56,8 @@
 	position: relative;
 	width: 100%;
 	z-index: z-index(".edit-site-layout__canvas-container");
+	display: flex;
+	flex-direction: column;
 
 	/*
 	 * The SiteHubMobile component is displayed

package/src/components/page/style.scss

@@ -1,17 +1,13 @@
 .edit-site-page {
 	color: $gray-800;
 	background: $white;
-	height: calc(100% - #{$header-height});
+	height: 100%;
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
 
 	@media not (prefers-reduced-motion) {
 		transition: width ease-out 0.2s;
 	}
-
-	@include break-medium() {
-		height: 100%;
-	}
 }
 
 .edit-site-page-header {

package/src/components/page-patterns/header.js

@@ -32,7 +32,7 @@ export default function PatternsHeader( {
 	const { patternCategories } = usePatternCategories();
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			select( coreStore ).getCurrentTheme()
 				?.default_template_part_areas || [],
 		[]
 	);

package/src/components/page-patterns/use-patterns.js

@@ -25,8 +25,11 @@ const EMPTY_PATTERN_LIST = [];
 
 const selectTemplateParts = createSelector(
 	( select, categoryId, search = '' ) => {
-		const { getEntityRecords, isResolving: isResolvingSelector } =
-			select( coreStore );
+		const {
+			getEntityRecords,
+			getCurrentTheme,
+			isResolving: isResolvingSelector,
+		} = select( coreStore );
 
 		const query = { per_page: -1 };
 		const templateParts =
@@ -36,9 +39,7 @@ const selectTemplateParts = createSelector(
 		// In the case where a custom template part area has been removed we need
 		// the current list of areas to cross check against so orphaned template
 		// parts can be treated as uncategorized.
-		const knownAreas =
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-				?.default_template_part_areas || [];
+		const knownAreas = getCurrentTheme()?.default_template_part_areas || [];
 
 		const templatePartAreas = knownAreas.map( ( area ) => area.area );
 
@@ -79,8 +80,7 @@ const selectTemplateParts = createSelector(
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 },
 		] ),
-		select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
-			?.default_template_part_areas,
+		select( coreStore ).getCurrentTheme()?.default_template_part_areas,
 	]
 );
 

package/src/components/sidebar/index.js

@@ -87,23 +87,25 @@ function SidebarContentWrapper( { children, shouldAnimate } ) {
 	);
 }
 
-export default function SidebarContent( {
-	routeKey,
-	shouldAnimate,
-	children,
-} ) {
+export function SidebarNavigationProvider( { children } ) {
 	const [ navState ] = useState( createNavState );
 
 	return (
 		<SidebarNavigationContext.Provider value={ navState }>
-			<div className="edit-site-sidebar__content">
-				<SidebarContentWrapper
-					shouldAnimate={ shouldAnimate }
-					key={ routeKey }
-				>
-					{ children }
-				</SidebarContentWrapper>
-			</div>
+			{ children }
 		</SidebarNavigationContext.Provider>
 	);
 }
+
+export function SidebarContent( { routeKey, shouldAnimate, children } ) {
+	return (
+		<div className="edit-site-sidebar__content">
+			<SidebarContentWrapper
+				shouldAnimate={ shouldAnimate }
+				key={ routeKey }
+			>
+				{ children }
+			</SidebarContentWrapper>
+		</div>
+	);
+}

package/src/components/sidebar-navigation-screen-main/index.js

@@ -100,7 +100,7 @@ export default function SidebarNavigationScreenMain( { customDescription } ) {
 		);
 	} else {
 		description = __(
-			'Explore block styles and patterns to refine your site'
+			'Explore block styles and patterns to refine your site.'
 		);
 	}
 

package/src/components/sidebar-navigation-screen-navigation-menu/more-menu.js

@@ -45,47 +45,45 @@ export default function ScreenNavigationMoreMenu( props ) {
 				popoverProps={ POPOVER_PROPS }
 			>
 				{ ( { onClose } ) => (
-					<div>
-						<MenuGroup>
-							<MenuItem
-								onClick={ () => {
-									openRenameModal();
-									// Close the dropdown after opening the modal.
-									onClose();
-								} }
-							>
-								{ __( 'Rename' ) }
-							</MenuItem>
-							<MenuItem
-								onClick={ () => {
-									history.navigate(
-										`/wp_navigation/${ menuId }?canvas=edit`
-									);
-								} }
-							>
-								{ __( 'Edit' ) }
-							</MenuItem>
-							<MenuItem
-								onClick={ () => {
-									onDuplicate();
-									onClose();
-								} }
-							>
-								{ __( 'Duplicate' ) }
-							</MenuItem>
-							<MenuItem
-								isDestructive
-								onClick={ () => {
-									openDeleteConfirmDialog();
+					<MenuGroup>
+						<MenuItem
+							onClick={ () => {
+								openRenameModal();
+								// Close the dropdown after opening the modal.
+								onClose();
+							} }
+						>
+							{ __( 'Rename' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => {
+								history.navigate(
+									`/wp_navigation/${ menuId }?canvas=edit`
+								);
+							} }
+						>
+							{ __( 'Edit' ) }
+						</MenuItem>
+						<MenuItem
+							onClick={ () => {
+								onDuplicate();
+								onClose();
+							} }
+						>
+							{ __( 'Duplicate' ) }
+						</MenuItem>
+						<MenuItem
+							isDestructive
+							onClick={ () => {
+								openDeleteConfirmDialog();
 
-									// Close the dropdown after opening the modal.
-									onClose();
-								} }
-							>
-								{ __( 'Delete' ) }
-							</MenuItem>
-						</MenuGroup>
-					</div>
+								// Close the dropdown after opening the modal.
+								onClose();
+							} }
+						>
+							{ __( 'Delete' ) }
+						</MenuItem>
+					</MenuGroup>
 				) }
 			</DropdownMenu>
 			{ deleteConfirmDialogOpen && (

package/src/components/sidebar-navigation-screen-patterns/index.js

@@ -120,6 +120,7 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) {
 			description={ __(
 				'Manage what patterns are available when editing the site.'
 			) }
+			isRoot={ ! backPath }
 			backPath={ backPath }
 			content={
 				<>

package/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -17,7 +17,7 @@ const useTemplatePartsGroupedByArea = ( items ) => {
 
 	const templatePartAreas = useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			select( coreStore ).getCurrentTheme()
 				?.default_template_part_areas || [],
 		[]
 	);

package/src/components/sidebar-navigation-screen-unsupported/index.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice, __experimentalSpacer as Spacer } from '@wordpress/components';
+
+export default function SidebarNavigationScreenUnsupported() {
+	return (
+		<Spacer padding={ 3 }>
+			<Notice status="warning" isDismissible={ false }>
+				{ __(
+					'The theme you are currently using does not support this screen.'
+				) }
+			</Notice>
+		</Spacer>
+	);
+}

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

@@ -2,14 +2,38 @@
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import Editor from '../editor';
+import { isClassicThemeWithStyleBookSupport } from './utils';
 
 export const homeRoute = {
 	name: 'home',
 	path: '/',
 	areas: {
-		sidebar: <SidebarNavigationScreenMain />,
-		preview: <Editor isHomeRoute />,
-		mobile: <SidebarNavigationScreenMain />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<Editor isHomeRoute />
+			) : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ||
+				isClassicThemeWithStyleBookSupport( siteData ) ? (
+				<SidebarNavigationScreenMain />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -27,10 +28,29 @@ export const navigationItemRoute = {
 	name: 'navigation-item',
 	path: '/wp_navigation/:postId',
 	areas: {
-		sidebar: (
-			<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
-		),
-		preview: <Editor />,
-		mobile: <MobileNavigationItemView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenu backPath="/navigation" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<Editor />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationItemView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };

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

@@ -8,6 +8,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import Editor from '../editor';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
+import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -27,8 +28,25 @@ export const navigationRoute = {
 	name: 'navigation',
 	path: '/navigation',
 	areas: {
-		sidebar: <SidebarNavigationScreenNavigationMenus backPath="/" />,
-		preview: <Editor />,
-		mobile: <MobileNavigationView />,
+		sidebar( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<SidebarNavigationScreenNavigationMenus backPath="/" />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
+		preview( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? <Editor /> : undefined;
+		},
+		mobile( { siteData } ) {
+			const isBlockTheme = siteData.currentTheme?.is_block_theme;
+			return isBlockTheme ? (
+				<MobileNavigationView />
+			) : (
+				<SidebarNavigationScreenUnsupported />
+			);
+		},
 	},
 };