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

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

@@ -5,24 +5,6 @@
 	width: 100%;
 	border-radius: $radius-medium;
 
-	.page-templates-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: $radius-medium;
-
-		&: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;
-		}
-	}
-
 	.dataviews-view-list & {
 		.block-editor-block-preview__container {
 			height: 120px;
@@ -85,9 +67,11 @@
 		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
 		border-radius: 100%;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 0.1s linear;
+		}
 	}
 
 	&.is-loaded {

package/src/components/post-edit/index.js

@@ -22,7 +22,7 @@ import { unlock } from '../../lock-unlock';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
-const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
+const { usePostFields, PostCardPanel } = unlock( editorPrivateApis );
 
 const fieldsWithBulkEditSupport = [
 	'title',
@@ -34,17 +34,22 @@ const fieldsWithBulkEditSupport = [
 
 function PostEditForm( { postType, postId } ) {
 	const ids = useMemo( () => postId.split( ',' ), [ postId ] );
-	const { record } = useSelect(
+	const { record, hasFinishedResolution } = useSelect(
 		( select ) => {
+			const args = [ 'postType', postType, ids[ 0 ] ];
+
+			const {
+				getEditedEntityRecord,
+				hasFinishedResolution: hasFinished,
+			} = select( coreDataStore );
+
 			return {
 				record:
-					ids.length === 1
-						? select( coreDataStore ).getEditedEntityRecord(
-								'postType',
-								postType,
-								ids[ 0 ]
-						  )
-						: null,
+					ids.length === 1 ? getEditedEntityRecord( ...args ) : null,
+				hasFinishedResolution: hasFinished(
+					'getEditedEntityRecord',
+					args
+				),
 			};
 		},
 		[ postType, ids ]
@@ -76,7 +81,6 @@ function PostEditForm( { postType, postId } ) {
 					id: 'featured_media',
 					layout: 'regular',
 				},
-				'title',
 				{
 					id: 'status',
 					label: __( 'Status & Visibility' ),
@@ -159,15 +163,15 @@ function PostEditForm( { postType, postId } ) {
 
 	return (
 		<VStack spacing={ 4 }>
-			{ ids.length === 1 && (
-				<PostCardPanel postType={ postType } postId={ ids[ 0 ] } />
+			<PostCardPanel postType={ postType } postId={ ids } />
+			{ hasFinishedResolution && (
+				<DataForm
+					data={ ids.length === 1 ? record : multiEdits }
+					fields={ fieldsWithDependency }
+					form={ form }
+					onChange={ onChange }
+				/>
 			) }
-			<DataForm
-				data={ ids.length === 1 ? record : multiEdits }
-				fields={ fieldsWithDependency }
-				form={ form }
-				onChange={ onChange }
-			/>
 		</VStack>
 	);
 }

package/src/components/post-list/index.js

@@ -13,7 +13,7 @@ import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { drawerRight } from '@wordpress/icons';
-import { usePrevious } from '@wordpress/compose';
+import { useEvent, usePrevious } from '@wordpress/compose';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -55,7 +55,7 @@ const getCustomView = ( editedEntityRecord ) => {
 
 	return {
 		...content,
-		layout: defaultLayouts[ content.type ]?.layout,
+		...defaultLayouts[ content.type ],
 	};
 };
 
@@ -109,56 +109,56 @@ function useView( postType ) {
 		return {
 			...initialView,
 			type,
+			...defaultLayouts[ type ],
 		};
 	} );
 
-	const setViewWithUrlUpdate = useCallback(
-		( newView ) => {
-			if ( newView.type === LAYOUT_LIST && ! layout ) {
-				// Skip updating the layout URL param if
-				// it is not present and the newView.type is LAYOUT_LIST.
-			} else if ( newView.type !== layout ) {
-				history.navigate(
-					addQueryArgs( path, {
-						layout: newView.type,
-					} )
-				);
-			}
+	const setViewWithUrlUpdate = useEvent( ( newView ) => {
+		setView( newView );
 
-			setView( newView );
+		if ( isCustom === 'true' && editedEntityRecord?.id ) {
+			editEntityRecord(
+				'postType',
+				'wp_dataviews',
+				editedEntityRecord?.id,
+				{
+					content: JSON.stringify( newView ),
+				}
+			);
+		}
 
-			if ( isCustom === 'true' && editedEntityRecord?.id ) {
-				editEntityRecord(
-					'postType',
-					'wp_dataviews',
-					editedEntityRecord?.id,
-					{
-						content: JSON.stringify( newView ),
-					}
-				);
-			}
-		},
-		[
-			history,
-			isCustom,
-			editEntityRecord,
-			editedEntityRecord?.id,
-			layout,
-			path,
-		]
-	);
+		const currentUrlLayout = layout ?? LAYOUT_LIST;
+		if ( newView.type !== currentUrlLayout ) {
+			history.navigate(
+				addQueryArgs( path, {
+					layout: newView.type,
+				} )
+			);
+		}
+	} );
 
 	// When layout URL param changes, update the view type
 	// without affecting any other config.
+	const onUrlLayoutChange = useEvent( () => {
+		setView( ( prevView ) => {
+			const newType = layout ?? LAYOUT_LIST;
+			if ( newType === prevView.type ) {
+				return prevView;
+			}
+
+			return {
+				...prevView,
+				type: newType,
+				...defaultLayouts[ newType ],
+			};
+		} );
+	} );
 	useEffect( () => {
-		setView( ( prevView ) => ( {
-			...prevView,
-			type: layout ?? LAYOUT_LIST,
-		} ) );
-	}, [ layout ] );
+		onUrlLayoutChange();
+	}, [ onUrlLayoutChange, layout ] );
 
 	// When activeView or isCustom URL parameters change, reset the view.
-	useEffect( () => {
+	const onUrlActiveViewChange = useEvent( () => {
 		let newView;
 		if ( isCustom === 'true' ) {
 			newView = getCustomView( editedEntityRecord );
@@ -171,11 +171,21 @@ function useView( postType ) {
 			setView( {
 				...newView,
 				type,
+				...defaultLayouts[ type ],
 			} );
 		}
-	}, [ activeView, isCustom, layout, defaultViews, editedEntityRecord ] );
+	} );
+	useEffect( () => {
+		onUrlActiveViewChange();
+	}, [
+		onUrlActiveViewChange,
+		activeView,
+		isCustom,
+		defaultViews,
+		editedEntityRecord,
+	] );
 
-	return [ view, setViewWithUrlUpdate, setViewWithUrlUpdate ];
+	return [ view, setViewWithUrlUpdate ];
 }
 
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
@@ -184,6 +194,10 @@ function getItemId( item ) {
 	return item.id.toString();
 }
 
+function getItemLevel( item ) {
+	return item.level;
+}
+
 export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
 	const defaultViews = useDefaultViews( { postType } );
@@ -209,7 +223,6 @@ export default function PostList( { postType } ) {
 		},
 		[ location.path, location.query.isCustom, history ]
 	);
-
 	const getActiveViewFilters = ( views, match ) => {
 		const found = views.find( ( { slug } ) => slug === match );
 		return found?.filters ?? [];
@@ -290,6 +303,7 @@ export default function PostList( { postType } ) {
 			_embed: 'author',
 			order: view.sort?.direction,
 			orderby: view.sort?.field,
+			orderby_hierarchy: !! view.showLevels,
 			search: view.search,
 			...filters,
 		};
@@ -411,6 +425,7 @@ export default function PostList( { postType } ) {
 					history.navigate( `/${ postType }/${ id }?canvas=edit` );
 				} }
 				getItemId={ getItemId }
+				getItemLevel={ getItemLevel }
 				defaultLayouts={ defaultLayouts }
 				header={
 					window.__experimentalQuickEditDataViews &&

package/src/components/post-list/style.scss

@@ -65,42 +65,6 @@
 	}
 }
 
-.edit-site-post-list__title span {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}
-
-.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable
-.edit-site-post-list__title
-span,
-.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable
-.edit-site-post-list__title
-span {
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	display: block;
-	flex-grow: 0;
-	color: $gray-900;
-
-	&:hover {
-		color: var(--wp-admin-theme-color);
-	}
-	@include link-reset();
-}
-
-.edit-site-post-list__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-}
-
 .edit-site-post-list__status-icon {
 	height: $grid-unit-30;
 	width: $grid-unit-30;

package/src/components/resizable-frame/index.js

@@ -15,6 +15,8 @@ import {
 import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import { __, isRTL } from '@wordpress/i18n';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -106,6 +108,10 @@ function ResizableFrame( {
 		'edit-site-resizable-frame-handle-help'
 	);
 	const defaultAspectRatio = defaultSize.width / defaultSize.height;
+	const isBlockTheme = useSelect( ( select ) => {
+		const { getCurrentTheme } = select( coreStore );
+		return getCurrentTheme()?.is_block_theme;
+	}, [] );
 
 	const handleResizeStart = ( _event, _direction, ref ) => {
 		// Remember the starting width so we don't have to get `ref.offsetWidth` on
@@ -153,7 +159,10 @@ function ResizableFrame( {
 		const remainingWidth =
 			ref.ownerDocument.documentElement.offsetWidth - ref.offsetWidth;
 
-		if ( remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ) {
+		if (
+			remainingWidth > SNAP_TO_EDIT_CANVAS_MODE_THRESHOLD ||
+			! isBlockTheme
+		) {
 			// Reset the initial aspect ratio if the frame is resized slightly
 			// above the sidebar but not far enough to trigger full screen.
 			setFrameSize( INITIAL_FRAME_SIZE );

package/src/components/sidebar-dataviews/custom-dataviews-list.js

@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -85,6 +85,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
 	const history = useHistory();
+	const location = useLocation();
 	const { dataview } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord } = select( coreStore );
@@ -145,10 +146,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											const {
-												params: { postType },
-											} = history.getLocationWithParams();
-											history.replace( { postType } );
+											history.replace( {
+												postType:
+													location.query.postType,
+											} );
 										}
 										onClose();
 									} }
@@ -212,7 +213,7 @@ export default function CustomDataViewsList( { type, activeView, isCustom } ) {
 			<div className="edit-site-sidebar-navigation-screen-dataviews__group-header">
 				<Heading level={ 2 }>{ __( 'Custom Views' ) }</Heading>
 			</div>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-dataviews__custom-items">
 				{ customDataViews.map( ( customViewRecord ) => {
 					return (
 						<CustomDataViewItem

package/src/components/sidebar-dataviews/default-views.js

@@ -27,28 +27,9 @@ import {
 } from '../../utils/constants';
 
 export const defaultLayouts = {
-	[ LAYOUT_TABLE ]: {
-		layout: {
-			primaryField: 'title',
-			styles: {
-				title: {
-					maxWidth: 300,
-				},
-			},
-		},
-	},
-	[ LAYOUT_GRID ]: {
-		layout: {
-			mediaField: 'featured_media',
-			primaryField: 'title',
-		},
-	},
-	[ LAYOUT_LIST ]: {
-		layout: {
-			primaryField: 'title',
-			mediaField: 'featured_media',
-		},
-	},
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {},
+	[ LAYOUT_LIST ]: {},
 };
 
 const DEFAULT_POST_BASE = {
@@ -58,11 +39,14 @@ const DEFAULT_POST_BASE = {
 	page: 1,
 	perPage: 20,
 	sort: {
-		field: 'date',
-		direction: 'desc',
+		field: 'title',
+		direction: 'asc',
 	},
-	fields: [ 'title', 'author', 'status' ],
-	layout: defaultLayouts[ LAYOUT_LIST ].layout,
+	showLevels: true,
+	titleField: 'title',
+	mediaField: 'featured_media',
+	fields: [ 'author', 'status' ],
+	...defaultLayouts[ LAYOUT_LIST ],
 };
 
 export function useDefaultViews( { postType } ) {

package/src/components/sidebar-dataviews/index.js

@@ -26,7 +26,7 @@ export default function DataViewsSidebarContent( { postType } ) {
 
 	return (
 		<>
-			<ItemGroup>
+			<ItemGroup className="edit-site-sidebar-dataviews">
 				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem

package/src/components/sidebar-dataviews/style.scss

@@ -7,9 +7,17 @@
 	}
 }
 
+.edit-site-sidebar-dataviews {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+}
+
+.edit-site-sidebar-navigation-screen-dataviews__custom-items .edit-site-sidebar-dataviews-dataview-item {
+	padding-right: $grid-unit-10;
+}
+
 .edit-site-sidebar-dataviews-dataview-item {
 	border-radius: $radius-small;
-	padding-right: $grid-unit-10;
 
 	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
 		min-width: initial;

package/src/components/sidebar-global-styles-wrapper/index.js

@@ -5,11 +5,9 @@ import { __ } from '@wordpress/i18n';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
+import { seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,58 +15,42 @@ import { addQueryArgs } from '@wordpress/url';
 import GlobalStylesUI from '../global-styles/ui';
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
-import StyleBook from '../style-book';
-import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { Menu } = unlock( componentsPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
+	path,
 } ) => {
+	const history = useHistory();
 	return (
-		<Menu
-			trigger={
-				<Button __next40pxDefaultSize variant="tertiary" size="compact">
-					{ __( 'Preview' ) }
-				</Button>
-			}
-		>
-			<Menu.RadioItem
-				value
-				checked={ isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( true ) }
-				defaultChecked
-			>
-				<Menu.ItemLabel>{ __( 'Style book' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview blocks and styles.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-			<Menu.RadioItem
-				value={ false }
-				checked={ ! isStyleBookOpened }
-				name="styles-preview-actions"
-				onChange={ () => setIsStyleBookOpened( false ) }
-			>
-				<Menu.ItemLabel>{ __( 'Site' ) }</Menu.ItemLabel>
-				<Menu.ItemHelpText>
-					{ __( 'Preview your site.' ) }
-				</Menu.ItemHelpText>
-			</Menu.RadioItem>
-		</Menu>
+		<Button
+			isPressed={ isStyleBookOpened }
+			icon={ seen }
+			label={ __( 'Style Book' ) }
+			onClick={ () => {
+				setIsStyleBookOpened( ! isStyleBookOpened );
+				const updatedPath = ! isStyleBookOpened
+					? addQueryArgs( path, { preview: 'stylebook' } )
+					: removeQueryArgs( path, 'preview' );
+				// Navigate to the updated path.
+				history.navigate( updatedPath );
+			} }
+			size="compact"
+		/>
 	);
 };
 
-export default function GlobalStylesUIWrapper() {
+/**
+ * Hook to deal with navigation and location state.
+ *
+ * @return {Array}  The current section and a function to update it.
+ */
+export const useSection = () => {
 	const { path, query } = useLocation();
 	const history = useHistory();
-	const { canvas = 'view' } = query;
-	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ section, onChangeSection ] = useMemo( () => {
+	return useMemo( () => {
 		return [
 			query.section ?? '/',
 			( updatedSection ) => {
@@ -80,6 +62,16 @@ export default function GlobalStylesUIWrapper() {
 			},
 		];
 	}, [ path, query.section, history ] );
+};
+
+export default function GlobalStylesUIWrapper() {
+	const { path } = useLocation();
+
+	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
+		path.includes( 'preview=stylebook' )
+	);
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ section, onChangeSection ] = useSection();
 
 	return (
 		<>
@@ -89,6 +81,7 @@ export default function GlobalStylesUIWrapper() {
 						<GlobalStylesPageActions
 							isStyleBookOpened={ isStyleBookOpened }
 							setIsStyleBookOpened={ setIsStyleBookOpened }
+							path={ path }
 						/>
 					) : null
 				}
@@ -100,45 +93,6 @@ export default function GlobalStylesUIWrapper() {
 					onPathChange={ onChangeSection }
 				/>
 			</Page>
-			{ canvas === 'view' && isStyleBookOpened && (
-				<StyleBook
-					enableResizing={ false }
-					showCloseButton={ false }
-					showTabs={ false }
-					isSelected={ ( blockName ) =>
-						// Match '/blocks/core%2Fbutton' and
-						// '/blocks/core%2Fbutton/typography', but not
-						// '/blocks/core%2Fbuttons'.
-						section ===
-							`/blocks/${ encodeURIComponent( blockName ) }` ||
-						section.startsWith(
-							`/blocks/${ encodeURIComponent( blockName ) }/`
-						)
-					}
-					path={ section }
-					onSelect={ ( blockName ) => {
-						if (
-							STYLE_BOOK_COLOR_GROUPS.find(
-								( group ) => group.slug === blockName
-							)
-						) {
-							// Go to color palettes Global Styles.
-							onChangeSection( '/colors/palette' );
-							return;
-						}
-						if ( blockName === 'typography' ) {
-							// Go to typography Global Styles.
-							onChangeSection( '/typography' );
-							return;
-						}
-
-						// Now go to the selected block.
-						onChangeSection(
-							`/blocks/${ encodeURIComponent( blockName ) }`
-						);
-					} }
-				/>
-			) }
 		</>
 	);
 }

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

@@ -33,3 +33,25 @@
 		color: $gray-900;
 	}
 }
+
+.show-icon-labels {
+	.edit-site-styles .edit-site-page-content {
+		.edit-site-page-header__actions {
+			.components-button.has-icon {
+				width: auto;
+				padding: 0 $grid-unit-10;
+
+				// Hide the button icons when labels are set to display...
+				svg {
+					display: none;
+				}
+				// ... and display labels.
+				&::after {
+					content: attr(aria-label);
+					font-size: $helptext-font-size;
+				}
+			}
+
+		}
+	}
+}

package/src/components/sidebar-navigation-item/style.scss

@@ -18,6 +18,12 @@
 	&[aria-current="true"] {
 		background: $gray-800;
 		color: $white;
+		font-weight: $font-weight-medium;
+	}
+
+	// Make sure the focus style is drawn on top of the current item background.
+	&:focus-visible {
+		transform: translateZ(0);
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {