@wordpress/edit-site 5.22.0 → 5.24.0

package/src/components/layout/index.js

@@ -18,7 +18,7 @@ import {
 	useResizeObserver,
 } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useState, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { NavigableRegion } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
@@ -72,7 +72,6 @@ export default function Layout() {
 	useCommonCommands();
 	useBlockCommands();
 
-	const hubRef = useRef();
 	const { params } = useLocation();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isListPage = getIsListPage( params, isMobileViewport );
@@ -117,7 +116,7 @@ export default function Layout() {
 	} );
 	const disableMotion = useReducedMotion();
 	const showSidebar =
-		( isMobileViewport && ! isListPage ) ||
+		( isMobileViewport && canvasMode === 'view' && ! isListPage ) ||
 		( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) );
 	const showCanvas =
 		( isMobileViewport && isEditorPage && isEditing ) ||
@@ -193,6 +192,7 @@ export default function Layout() {
 						'is-full-canvas': isFullCanvas,
 						'is-edit-mode': isEditing,
 						'has-fixed-toolbar': hasFixedToolbar,
+						'is-block-toolbar-visible': hasBlockSelected,
 					}
 				) }
 			>
@@ -226,13 +226,6 @@ export default function Layout() {
 					animate={ headerAnimationState }
 				>
 					<SiteHub
-						variants={ {
-							isDistractionFree: { x: '-100%' },
-							isDistractionFreeHovering: { x: 0 },
-							view: { x: 0 },
-							edit: { x: 0 },
-						} }
-						ref={ hubRef }
 						isTransparent={ isResizableFrameOversized }
 						className="edit-site-layout__hub"
 					/>
@@ -290,7 +283,7 @@ export default function Layout() {
 							// (https://github.com/WordPress/gutenberg/pull/51558/files#r1231763003),
 							// so we can't remove the element entirely. Using `inert` will make
 							// it inaccessible to screen readers and keyboard navigation.
-							inert={ showSidebar ? undefined : 'inert' }
+							inert={ showSidebar ? undefined : 'true' }
 							animate={ { opacity: showSidebar ? 1 : 0 } }
 							transition={ {
 								type: 'tween',

package/src/components/layout/style.scss

@@ -157,11 +157,16 @@
 }
 
 // This shouldn't be necessary (we should have a way to say that a skeletton is relative
-.edit-site-layout__canvas .interface-interface-skeleton {
+.edit-site-layout__canvas .interface-interface-skeleton,
+.edit-site-page-pages-preview .interface-interface-skeleton {
 	position: relative !important;
 	min-height: 100% !important;
 }
 
+.edit-site-page-pages-preview {
+	height: 100%;
+}
+
 .edit-site-layout__view-mode-toggle.components-button {
 	position: relative;
 	color: $white;
@@ -249,23 +254,6 @@
 	}
 }
 
-.edit-site-layout.has-fixed-toolbar {
-	// making the header be lower than the content
-	// so the fixed toolbar can be positioned on top of it
-	// but only on desktop
-	@include break-medium() {
-		.edit-site-layout__canvas-container {
-			z-index: 5;
-		}
-		.edit-site-site-hub {
-			z-index: 4;
-		}
-		.edit-site-layout__header:focus-within {
-			z-index: 3;
-		}
-	}
-}
-
 .is-edit-mode.is-distraction-free {
 
 	.edit-site-layout__header-container {

package/src/components/list/added-by.js

@@ -22,20 +22,10 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	TEMPLATE_ORIGINS,
-} from '../../utils/constants';
+import { TEMPLATE_POST_TYPE, TEMPLATE_ORIGINS } from '../../utils/constants';
 
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
-/** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-];
-
 /**
  * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
  *
@@ -55,8 +45,6 @@ export function useAddedBy( postType, postId ) {
 	return useSelect(
 		( select ) => {
 			const {
-				getTheme,
-				getPlugin,
 				getEntityRecord,
 				getMedia,
 				getUser,
@@ -67,82 +55,54 @@ export function useAddedBy( postType, postId ) {
 				postType,
 				postId
 			);
+			const originalSource = template?.original_source;
+			const authorText = template?.author_text;
 
-			if ( TEMPLATE_POST_TYPE_NAMES.includes( template.type ) ) {
-				// Added by theme.
-				// Template originally provided by a theme, but customized by a user.
-				// Templates originally didn't have the 'origin' field so identify
-				// older customized templates by checking for no origin and a 'theme'
-				// or 'custom' source.
-				if (
-					template.has_theme_file &&
-					( template.origin === TEMPLATE_ORIGINS.theme ||
-						( ! template.origin &&
-							[
-								TEMPLATE_ORIGINS.theme,
-								TEMPLATE_ORIGINS.custom,
-							].includes( template.source ) ) )
-				) {
+			switch ( originalSource ) {
+				case 'theme': {
 					return {
-						type: 'theme',
+						type: originalSource,
 						icon: themeIcon,
-						text:
-							getTheme( template.theme )?.name?.rendered ||
-							template.theme,
+						text: authorText,
 						isCustomized:
 							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
-
-				// Added by plugin.
-				if (
-					template.has_theme_file &&
-					template.origin === TEMPLATE_ORIGINS.plugin
-				) {
+				case 'plugin': {
 					return {
-						type: TEMPLATE_ORIGINS.plugin,
+						type: originalSource,
 						icon: pluginIcon,
-						text:
-							getPlugin( template.theme )?.name || template.theme,
+						text: authorText,
 						isCustomized:
 							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
-
-				// Added by site.
-				// Template was created from scratch, but has no author. Author support
-				// was only added to templates in WordPress 5.9. Fallback to showing the
-				// site logo and title.
-				if (
-					! template.has_theme_file &&
-					template.source === TEMPLATE_ORIGINS.custom &&
-					! template.author
-				) {
+				case 'site': {
 					const siteData = getEntityRecord(
 						'root',
 						'__unstableBase'
 					);
 					return {
-						type: 'site',
+						type: originalSource,
 						icon: globeIcon,
 						imageUrl: siteData?.site_logo
 							? getMedia( siteData.site_logo )?.source_url
 							: undefined,
-						text: siteData?.name,
+						text: authorText,
+						isCustomized: false,
+					};
+				}
+				default: {
+					const user = getUser( template.author );
+					return {
+						type: 'user',
+						icon: authorIcon,
+						imageUrl: user?.avatar_urls?.[ 48 ],
+						text: authorText,
 						isCustomized: false,
 					};
 				}
 			}
-
-			// Added by user.
-			const user = getUser( template.author );
-			return {
-				type: 'user',
-				icon: authorIcon,
-				imageUrl: user?.avatar_urls?.[ 48 ],
-				text: user?.nickname,
-				isCustomized: false,
-			};
 		},
 		[ postType, postId ]
 	);
@@ -152,7 +112,7 @@ export function useAddedBy( postType, postId ) {
  * @param {Object} props
  * @param {string} props.imageUrl
  */
-function AvatarImage( { imageUrl } ) {
+export function AvatarImage( { imageUrl } ) {
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (

package/src/components/list/style.scss

@@ -148,33 +148,31 @@
 .edit-site-list-added-by__icon {
 	display: flex;
 	flex-shrink: 0;
-	align-items: center;
-	justify-content: center;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
-	background: $gray-800;
-	border-radius: 100%;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
 
 	svg {
-		fill: $white;
+		fill: currentColor;
 	}
 }
 
 .edit-site-list-added-by__avatar {
 	flex-shrink: 0;
 	overflow: hidden;
-	border-radius: 100%;
-	background: $gray-800;
-	width: $grid-unit-40;
-	height: $grid-unit-40;
+	width: $grid-unit-30;
+	height: $grid-unit-30;
+	align-items: center;
+	justify-content: center;
+	display: flex;
 
 	img {
-		width: $grid-unit-40;
-		height: $grid-unit-40;
+		width: 20px;
+		height: 20px;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
+		border-radius: 100%;
 	}
 
 	&.is-loaded {

package/src/components/{page-content-focus-manager → page-content-focus-notifications}/back-to-page-notification.js

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -25,26 +26,21 @@ export default function BackToPageNotification() {
  * switches from focusing on editing page content to editing a template.
  */
 export function useBackToPageNotification() {
-	const { isPage, hasPageContentFocus } = useSelect(
-		( select ) => ( {
-			isPage: select( editSiteStore ).isPage(),
-			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
-		} ),
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
 		[]
 	);
+	const { isPage } = useSelect( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
+	const { createInfoNotice } = useDispatch( noticesStore );
 
 	const alreadySeen = useRef( false );
-	const prevHasPageContentFocus = useRef( false );
-
-	const { createInfoNotice } = useDispatch( noticesStore );
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
 
 	useEffect( () => {
 		if (
+			isPage() &&
 			! alreadySeen.current &&
-			isPage &&
-			prevHasPageContentFocus.current &&
-			! hasPageContentFocus
+			renderingMode === 'template-only'
 		) {
 			createInfoNotice( __( 'You are editing a template.' ), {
 				isDismissible: true,
@@ -52,19 +48,11 @@ export function useBackToPageNotification() {
 				actions: [
 					{
 						label: __( 'Back to page' ),
-						onClick: () => setHasPageContentFocus( true ),
+						onClick: () => setRenderingMode( 'template-locked' ),
 					},
 				],
 			} );
 			alreadySeen.current = true;
 		}
-		prevHasPageContentFocus.current = hasPageContentFocus;
-	}, [
-		alreadySeen,
-		isPage,
-		prevHasPageContentFocus,
-		hasPageContentFocus,
-		createInfoNotice,
-		setHasPageContentFocus,
-	] );
+	}, [ isPage, renderingMode, createInfoNotice, setRenderingMode ] );
 }

package/src/components/{page-content-focus-manager → page-content-focus-notifications}/edit-template-notification.js

@@ -6,11 +6,7 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Component that:
@@ -27,14 +23,14 @@ import { store as editSiteStore } from '../../store';
  *                                                                  editor iframe canvas.
  */
 export default function EditTemplateNotification( { contentRef } ) {
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const renderingMode = useSelect(
+		( select ) => select( editorStore ).getRenderingMode(),
 		[]
 	);
 	const { getNotices } = useSelect( noticesStore );
 
 	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
@@ -42,7 +38,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 
 	useEffect( () => {
 		const handleClick = async ( event ) => {
-			if ( ! hasPageContentFocus ) {
+			if ( renderingMode === 'template-only' ) {
 				return;
 			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
@@ -62,7 +58,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 					actions: [
 						{
 							label: __( 'Edit template' ),
-							onClick: () => setHasPageContentFocus( false ),
+							onClick: () => setRenderingMode( 'template-only' ),
 						},
 					],
 				}
@@ -71,7 +67,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 		};
 
 		const handleDblClick = ( event ) => {
-			if ( ! hasPageContentFocus ) {
+			if ( renderingMode === 'template-only' ) {
 				return;
 			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
@@ -90,7 +86,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 			canvas?.removeEventListener( 'click', handleClick );
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ lastNoticeId, hasPageContentFocus, contentRef.current ] );
+	}, [ lastNoticeId, renderingMode, contentRef.current ] );
 
 	return (
 		<ConfirmDialog
@@ -98,7 +94,7 @@ export default function EditTemplateNotification( { contentRef } ) {
 			confirmButtonText={ __( 'Edit template' ) }
 			onConfirm={ () => {
 				setIsDialogOpen( false );
-				setHasPageContentFocus( false );
+				setRenderingMode( 'template-only' );
 			} }
 			onCancel={ () => setIsDialogOpen( false ) }
 		>

package/src/components/page-content-focus-notifications/index.js

@@ -0,0 +1,14 @@
+/**
+ * Internal dependencies
+ */
+import EditTemplateNotification from './edit-template-notification';
+import BackToPageNotification from './back-to-page-notification';
+
+export default function PageContentFocusNotifications( { contentRef } ) {
+	return (
+		<>
+			<EditTemplateNotification contentRef={ contentRef } />
+			<BackToPageNotification />
+		</>
+	);
+}

package/src/components/page-main/index.js

@@ -9,6 +9,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import PagePatterns from '../page-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
+import DataviewsTemplates from '../page-templates/dataviews-templates';
 import PagePages from '../page-pages';
 import { unlock } from '../../lock-unlock';
 
@@ -20,7 +21,11 @@ export default function PageMain() {
 	} = useLocation();
 
 	if ( path === '/wp_template/all' ) {
-		return <PageTemplates />;
+		return window?.__experimentalAdminViews ? (
+			<DataviewsTemplates />
+		) : (
+			<PageTemplates />
+		);
 	} else if ( path === '/wp_template_part/all' ) {
 		return <PageTemplateParts />;
 	} else if ( path === '/patterns' ) {