@wordpress/edit-site 6.13.1-next.cd6172eb0.0 → 6.15.0

package/src/components/maybe-editor/index.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+import Editor from '../editor';
+
+export function MaybeEditor( { showEditor = true } ) {
+	const { isBlockBasedTheme, siteUrl } = useSelect( ( select ) => {
+		const { getEntityRecord, getCurrentTheme } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+
+		return {
+			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
+			siteUrl: siteData?.home,
+		};
+	}, [] );
+
+	// If theme is block based, return the Editor, otherwise return the site preview.
+	return isBlockBasedTheme || showEditor ? (
+		<Editor />
+	) : (
+		<iframe
+			src={ siteUrl }
+			title={ __( 'Site Preview' ) }
+			style={ {
+				display: 'block',
+				width: '100%',
+				height: '100%',
+				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;' );
+				// Make interactive elements unclickable.
+				const interactiveElements = document.querySelectorAll(
+					'a, button, input, details, audio'
+				);
+				interactiveElements.forEach( ( element ) => {
+					element.style.pointerEvents = 'none';
+					element.tabIndex = -1;
+					element.setAttribute( 'aria-hidden', 'true' );
+				} );
+			} }
+		/>
+	);
+}

package/src/components/page/style.scss

@@ -4,8 +4,10 @@
 	height: calc(100% - #{$header-height});
 	/* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
 	container: edit-site-page / inline-size;
-	transition: width ease-out 0.2s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: width ease-out 0.2s;
+	}
 
 	@include break-medium() {
 		height: 100%;
@@ -19,8 +21,10 @@
 	position: sticky;
 	top: 0;
 	z-index: z-index(".edit-site-page-header");
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
 
 	.components-heading {
 		color: $gray-900;
@@ -41,7 +45,6 @@
 	}
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.edit-site-page-header {
 		padding: $grid-unit-20 $grid-unit-30;

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

@@ -6,65 +6,34 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalHStack as HStack,
-	Button,
-	Tooltip,
-	FlexBlock,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
 import {
 	BlockPreview,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { Icon, lockSmall } from '@wordpress/icons';
+import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
-import { decodeEntities } from '@wordpress/html-entities';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import {
-	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useAddedBy } from '../page-templates/hooks';
-import { defaultGetTitle } from './search-items';
 
-const { useLink } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function PreviewWrapper( { item, onClick, ariaDescribedBy, children } ) {
-	return (
-		<button
-			className="page-patterns-preview-field__button"
-			type="button"
-			onClick={ item.type !== PATTERN_TYPES.theme ? onClick : undefined }
-			aria-label={ defaultGetTitle( item ) }
-			aria-describedby={ ariaDescribedBy }
-			aria-disabled={ item.type === PATTERN_TYPES.theme }
-		>
-			{ children }
-		</button>
-	);
-}
-
 function PreviewField( { item } ) {
 	const descriptionId = useId();
 	const description = item.description || item?.excerpt?.raw;
-	const isUserPattern = item.type === PATTERN_TYPES.user;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { onClick } = useLink(
-		`/${ item.type }/${
-			isUserPattern || isTemplatePart ? item.id : item.name
-		}?canvas=edit`
-	);
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??
@@ -79,23 +48,18 @@ function PreviewField( { item } ) {
 		<div
 			className="page-patterns-preview-field"
 			style={ { backgroundColor } }
+			aria-describedby={ !! description ? descriptionId : undefined }
 		>
-			<PreviewWrapper
-				item={ item }
-				onClick={ onClick }
-				ariaDescribedBy={ !! description ? descriptionId : undefined }
-			>
-				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
-				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
-				{ ! isEmpty && (
-					<BlockPreview.Async>
-						<BlockPreview
-							blocks={ blocks }
-							viewportWidth={ item.viewportWidth }
-						/>
-					</BlockPreview.Async>
-				) }
-			</PreviewWrapper>
+			{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
+			{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+			{ ! isEmpty && (
+				<BlockPreview.Async>
+					<BlockPreview
+						blocks={ blocks }
+						viewportWidth={ item.viewportWidth }
+					/>
+				</BlockPreview.Async>
+			) }
 			{ !! description && (
 				<div hidden id={ descriptionId }>
 					{ description }
@@ -112,57 +76,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	const isUserPattern = item.type === PATTERN_TYPES.user;
-	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const { onClick } = useLink(
-		`/${ item.type }/${
-			isUserPattern || isTemplatePart ? item.id : item.name
-		}?canvas=edit`
-	);
-	const title = decodeEntities( defaultGetTitle( item ) );
-	return (
-		<HStack alignment="center" justify="flex-start" spacing={ 2 }>
-			<FlexBlock className="edit-site-patterns__pattern-title">
-				{ item.type === PATTERN_TYPES.theme ? (
-					title
-				) : (
-					<Button
-						__next40pxDefaultSize
-						variant="link"
-						onClick={ onClick }
-						// Required for the grid's roving tab index system.
-						// See https://github.com/WordPress/gutenberg/pull/51898#discussion_r1243399243.
-						tabIndex="-1"
-					>
-						{ title }
-					</Button>
-				) }
-			</FlexBlock>
-			{ item.type === PATTERN_TYPES.theme && (
-				<Tooltip
-					placement="top"
-					text={ __( 'This pattern cannot be edited.' ) }
-				>
-					<Icon
-						className="edit-site-patterns__pattern-lock-icon"
-						icon={ lockSmall }
-						size={ 24 }
-					/>
-				</Tooltip>
-			) }
-		</HStack>
-	);
-}
-
-export const titleField = {
-	label: __( 'Title' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.raw || item.title,
-	render: TitleField,
-	enableHiding: false,
-};
-
 const SYNC_FILTERS = [
 	{
 		value: PATTERN_SYNC_TYPES.full,

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

@@ -9,6 +9,7 @@ import { usePrevious } from '@wordpress/compose';
 import { useEntityRecords } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { patternTitleField } from '@wordpress/fields';
 
 /**
  * Internal dependencies
@@ -29,23 +30,18 @@ import { useEditPostAction } from '../dataviews-actions';
 import {
 	patternStatusField,
 	previewField,
-	titleField,
 	templatePartAuthorField,
 } from './fields';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { usePostActions } = unlock( editorPrivateApis );
-const { useLocation } = unlock( routerPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
 		layout: {
-			primaryField: 'title',
 			styles: {
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -54,8 +50,6 @@ const defaultLayouts = {
 	},
 	[ LAYOUT_GRID ]: {
 		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
 			badgeFields: [ 'sync-status' ],
 		},
 	},
@@ -65,15 +59,18 @@ const DEFAULT_VIEW = {
 	search: '',
 	page: 1,
 	perPage: 20,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
-	fields: [ 'title', 'sync-status' ],
+	titleField: 'title',
+	mediaField: 'preview',
+	fields: [ 'sync-status' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function DataviewsPatterns() {
 	const {
 		query: { postType = 'wp_block', categoryId: categoryIdFromURL },
 	} = useLocation();
+	const history = useHistory();
 	const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY;
 	const [ view, setView ] = useState( DEFAULT_VIEW );
 	const previousCategoryId = usePrevious( categoryId );
@@ -105,7 +102,7 @@ export default function DataviewsPatterns() {
 	}, [ records ] );
 
 	const fields = useMemo( () => {
-		const _fields = [ previewField, titleField ];
+		const _fields = [ previewField, patternTitleField ];
 
 		if ( postType === PATTERN_TYPES.user ) {
 			_fields.push( patternStatusField );
@@ -183,6 +180,21 @@ export default function DataviewsPatterns() {
 					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
+					isItemClickable={ ( item ) =>
+						item.type !== PATTERN_TYPES.theme
+					}
+					onClickItem={ ( item ) => {
+						history.navigate(
+							`/${ item.type }/${
+								[
+									PATTERN_TYPES.user,
+									TEMPLATE_PART_POST_TYPE,
+								].includes( item.type )
+									? item.id
+									: item.name
+							}?canvas=edit`
+						);
+					} }
 					view={ view }
 					onChangeView={ setView }
 					defaultLayouts={ defaultLayouts }

package/src/components/page-patterns/style.scss

@@ -12,28 +12,6 @@
 		width: 96px;
 		flex-grow: 0;
 	}
-
-	.page-patterns-preview-field__button {
-		box-shadow: none;
-		border: none;
-		padding: 0;
-		background-color: unset;
-		box-sizing: border-box;
-		cursor: pointer;
-		overflow: hidden;
-		height: 100%;
-		border-radius: $grid-unit-05;
-
-		&:focus-visible {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows High Contrast mode will show this outline, but not the box-shadow.
-			outline: 2px solid transparent;
-		}
-
-		&[aria-disabled="true"] {
-			cursor: default;
-		}
-	}
 }
 
 .edit-site-patterns__pattern-icon {
@@ -48,10 +26,12 @@
 	top: 0;
 	z-index: 2;
 	flex-shrink: 0;
-	transition: padding ease-out 0.1s;
-	@include reduce-motion("transition");
 	min-height: $grid-unit-50;
 
+	@media not (prefers-reduced-motion) {
+		transition: padding ease-out 0.1s;
+	}
+
 	.edit-site-patterns__title {
 		min-height: $grid-unit-50;
 
@@ -71,34 +51,6 @@
 	}
 }
 
-.edit-site-patterns__pattern-title {
-	display: block;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	color: inherit;
-
-	.is-link {
-		text-decoration: none;
-		color: $gray-200;
-
-		&:hover,
-		&:focus {
-			color: $white;
-		}
-	}
-
-	.edit-site-patterns__pattern-icon {
-		border-radius: $grid-unit-05;
-		background: var(--wp-block-synced-color);
-		fill: $white;
-	}
-
-	.edit-site-patterns__pattern-lock-icon {
-		fill: currentcolor;
-	}
-}
-
 .edit-site-page-patterns-dataviews {
 	.dataviews-view-grid__badge-fields {
 		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
@@ -142,7 +94,6 @@
 	}
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
 	.edit-site-page-patterns-dataviews .edit-site-patterns__section-header {
 		padding-left: $grid-unit-30;

package/src/components/page-templates/fields.js

@@ -16,7 +16,6 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { EditorProvider } from '@wordpress/editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -25,7 +24,6 @@ import { useAddedBy } from './hooks';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useLink, Link } = unlock( routerPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 function PreviewField( { item } ) {
@@ -34,7 +32,6 @@ function PreviewField( { item } ) {
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );
-	const { onClick } = useLink( `/${ item.type }/${ item.id }?canvas=edit` );
 
 	const isEmpty = ! blocks?.length;
 	// Wrap everything in a block editor provider to ensure 'styles' that are needed
@@ -50,19 +47,12 @@ function PreviewField( { item } ) {
 				className="page-templates-preview-field"
 				style={ { backgroundColor } }
 			>
-				<button
-					className="page-templates-preview-field__button"
-					type="button"
-					onClick={ onClick }
-					aria-label={ item.title?.rendered || item.title }
-				>
-					{ isEmpty && __( 'Empty template' ) }
-					{ ! isEmpty && (
-						<BlockPreview.Async>
-							<BlockPreview blocks={ blocks } />
-						</BlockPreview.Async>
-					) }
-				</button>
+				{ isEmpty && __( 'Empty template' ) }
+				{ ! isEmpty && (
+					<BlockPreview.Async>
+						<BlockPreview blocks={ blocks } />
+					</BlockPreview.Async>
+				) }
 			</div>
 		</EditorProvider>
 	);
@@ -75,23 +65,6 @@ export const previewField = {
 	enableSorting: false,
 };
 
-function TitleField( { item } ) {
-	return (
-		<Link to={ `/${ item.type }/${ item.id }?canvas=edit` }>
-			{ decodeEntities( item.title?.rendered ) || __( '(no title)' ) }
-		</Link>
-	);
-}
-
-export const titleField = {
-	label: __( 'Template' ),
-	id: 'title',
-	getValue: ( { item } ) => item.title?.rendered,
-	render: TitleField,
-	enableHiding: false,
-	enableGlobalSearch: true,
-};
-
 export const descriptionField = {
 	label: __( 'Description' ),
 	id: 'description',

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

@@ -7,6 +7,7 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { templateTitleField } from '@wordpress/fields';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -23,12 +24,8 @@ import {
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
-import {
-	authorField,
-	descriptionField,
-	previewField,
-	titleField,
-} from './fields';
+import { authorField, descriptionField, previewField } from './fields';
+import { useEvent } from '@wordpress/compose';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -38,25 +35,9 @@ const EMPTY_ARRAY = [];
 
 const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		fields: [ 'template', 'author' ],
+		showMedia: false,
 		layout: {
-			primaryField: 'title',
-			combinedFields: [
-				{
-					id: 'template',
-					label: __( 'Template' ),
-					children: [ 'title', 'description' ],
-					direction: 'vertical',
-				},
-			],
 			styles: {
-				template: {
-					maxWidth: 400,
-					minWidth: 320,
-				},
-				preview: {
-					width: '1%',
-				},
 				author: {
 					width: '1%',
 				},
@@ -64,18 +45,10 @@ const defaultLayouts = {
 		},
 	},
 	[ LAYOUT_GRID ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			mediaField: 'preview',
-			primaryField: 'title',
-			columnFields: [ 'description' ],
-		},
+		showMedia: true,
 	},
 	[ LAYOUT_LIST ]: {
-		fields: [ 'title', 'description', 'author' ],
-		layout: {
-			primaryField: 'title',
-		},
+		showMedia: false,
 	},
 };
 
@@ -88,9 +61,12 @@ const DEFAULT_VIEW = {
 		field: 'title',
 		direction: 'asc',
 	},
-	fields: defaultLayouts[ LAYOUT_GRID ].fields,
-	layout: defaultLayouts[ LAYOUT_GRID ].layout,
+	titleField: 'title',
+	descriptionField: 'description',
+	mediaField: 'preview',
+	fields: [ 'author' ],
 	filters: [],
+	...defaultLayouts[ LAYOUT_GRID ],
 };
 
 export default function PageTemplates() {
@@ -103,8 +79,6 @@ export default function PageTemplates() {
 		return {
 			...DEFAULT_VIEW,
 			type: usedType,
-			layout: defaultLayouts[ usedType ].layout,
-			fields: defaultLayouts[ usedType ].fields,
 			filters:
 				activeView !== 'all'
 					? [
@@ -115,14 +89,23 @@ export default function PageTemplates() {
 							},
 					  ]
 					: [],
+			...defaultLayouts[ usedType ],
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
+
+	// Sync the layout from the URL to the view state.
+	useEffect( () => {
+		setView( ( currentView ) => ( {
+			...currentView,
+			type: layout ?? DEFAULT_VIEW.type,
+		} ) );
+	}, [ setView, layout ] );
+
+	// Sync the active view from the URL to the view state.
 	useEffect( () => {
-		const usedType = layout ?? DEFAULT_VIEW.type;
 		setView( ( currentView ) => ( {
 			...currentView,
-			type: usedType,
 			filters:
 				activeView !== 'all'
 					? [
@@ -134,7 +117,7 @@ export default function PageTemplates() {
 					  ]
 					: [],
 		} ) );
-	}, [ activeView, layout ] );
+	}, [ setView, activeView ] );
 
 	const { records, isResolving: isLoadingData } =
 		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
@@ -172,7 +155,7 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			previewField,
-			titleField,
+			templateTitleField,
 			descriptionField,
 			{
 				...authorField,
@@ -196,20 +179,16 @@ export default function PageTemplates() {
 		[ postTypeActions, editAction ]
 	);
 
-	const onChangeView = useCallback(
-		( newView ) => {
-			if ( newView.type !== view.type ) {
-				history.navigate(
-					addQueryArgs( path, {
-						layout: newView.type,
-					} )
-				);
-			}
-
-			setView( newView );
-		},
-		[ view.type, setView, history, path ]
-	);
+	const onChangeView = useEvent( ( newView ) => {
+		setView( newView );
+		if ( newView.type !== layout ) {
+			history.navigate(
+				addQueryArgs( path, {
+					layout: newView.type,
+				} )
+			);
+		}
+	} );
 
 	return (
 		<Page
@@ -227,6 +206,10 @@ export default function PageTemplates() {
 				view={ view }
 				onChangeView={ onChangeView }
 				onChangeSelection={ onChangeSelection }
+				isItemClickable={ () => true }
+				onClickItem={ ( { id } ) => {
+					history.navigate( `/wp_template/${ id }?canvas=edit` );
+				} }
 				selection={ selection }
 				defaultLayouts={ defaultLayouts }
 			/>