@wordpress/edit-site 6.31.1-next.f56bd8138.0 → 6.32.1-next.47f435fc9.0

package/src/components/sidebar-dataviews/dataview-item.js

@@ -21,11 +21,9 @@ const { useLocation } = unlock( routerPrivateApis );
 export default function DataViewItem( {
 	title,
 	slug,
-	customViewId,
 	type,
 	icon,
 	isActive,
-	isCustom,
 	suffix,
 } ) {
 	const { path } = useLocation();
@@ -33,15 +31,9 @@ export default function DataViewItem( {
 	const iconToUse =
 		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
-	let activeView = isCustom ? customViewId : slug;
-	if ( activeView === 'all' ) {
-		activeView = undefined;
+	if ( slug === 'all' ) {
+		slug = undefined;
 	}
-	const query = {
-		layout: type,
-		activeView,
-		isCustom: isCustom ? 'true' : undefined,
-	};
 	return (
 		<HStack
 			justify="flex-start"
@@ -51,7 +43,9 @@ export default function DataViewItem( {
 		>
 			<SidebarNavigationItem
 				icon={ iconToUse }
-				to={ addQueryArgs( path, query ) }
+				to={ addQueryArgs( path, {
+					activeView: slug,
+				} ) }
 				aria-current={ isActive ? 'true' : undefined }
 			>
 				{ title }

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

@@ -3,26 +3,37 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
 import DataViewItem from './dataview-item';
-import CustomDataViewsList from './custom-dataviews-list';
+import { getDefaultViews } from '../post-list/view-utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
 export default function DataViewsSidebarContent( { postType } ) {
 	const {
-		query: { activeView = 'all', isCustom = 'false' },
+		query: { activeView = 'all' },
 	} = useLocation();
-	const defaultViews = useDefaultViews( { postType } );
+	const postTypeObject = useSelect(
+		( select ) => {
+			const { getPostType } = select( coreStore );
+			return getPostType( postType );
+		},
+		[ postType ]
+	);
+	const defaultViews = useMemo(
+		() => getDefaultViews( postTypeObject ),
+		[ postTypeObject ]
+	);
 	if ( ! postType ) {
 		return null;
 	}
-	const isCustomBoolean = isCustom === 'true';
 
 	return (
 		<>
@@ -35,22 +46,11 @@ export default function DataViewsSidebarContent( { postType } ) {
 							title={ dataview.title }
 							icon={ dataview.icon }
 							type={ dataview.view.type }
-							isActive={
-								! isCustomBoolean &&
-								dataview.slug === activeView
-							}
-							isCustom={ false }
+							isActive={ dataview.slug === activeView }
 						/>
 					);
 				} ) }
 			</ItemGroup>
-			{ window?.__experimentalCustomViews && (
-				<CustomDataViewsList
-					activeView={ activeView }
-					type={ postType }
-					isCustom
-				/>
-			) }
 		</>
 	);
 }

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

@@ -1,28 +1,14 @@
-.edit-site-sidebar-navigation-screen-dataviews__group-header {
-	margin-top: $grid-unit-40;
-	h2 {
-		font-size: 11px;
-		font-weight: 500;
-		text-transform: uppercase;
-	}
-}
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
 
 .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;
 
-	.edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
-		min-width: initial;
-	}
-
 	&:hover,
 	&:focus,
 	&[aria-current] {

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -21,7 +22,6 @@ import { seen, moreVertical } from '@wordpress/icons';
  * Internal dependencies
  */
 import GlobalStylesUI from '../global-styles/ui';
-import Page from '../page';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -120,25 +120,20 @@ export default function GlobalStylesUIWrapper() {
 	const [ section, onChangeSection ] = useSection();
 
 	return (
-		<>
-			<Page
-				actions={
-					! isMobileViewport ? (
-						<GlobalStylesPageActions
-							isStyleBookOpened={ isStyleBookOpened }
-							setIsStyleBookOpened={ setIsStyleBookOpened }
-							path={ path }
-						/>
-					) : null
-				}
-				className="edit-site-styles"
-				title={ __( 'Styles' ) }
-			>
-				<GlobalStylesUI
-					path={ section }
-					onPathChange={ onChangeSection }
-				/>
-			</Page>
-		</>
+		<Page
+			actions={
+				! isMobileViewport ? (
+					<GlobalStylesPageActions
+						isStyleBookOpened={ isStyleBookOpened }
+						setIsStyleBookOpened={ setIsStyleBookOpened }
+						path={ path }
+					/>
+				) : null
+			}
+			className="edit-site-styles"
+			title={ __( 'Styles' ) }
+		>
+			<GlobalStylesUI path={ section } onPathChange={ onChangeSection } />
+		</Page>
 	);
 }

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

@@ -1,4 +1,7 @@
-.edit-site-styles .edit-site-page-content {
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.edit-site-styles {
 	.edit-site-global-styles-screen-root {
 		box-shadow: none;
 		& > div > hr {
@@ -21,37 +24,8 @@
 			outline: none;
 		}
 	}
-	.edit-site-page-header {
-		padding-left: $grid-unit-60;
-		padding-right: $grid-unit-60;
-		@container (max-width: 430px) {
-			padding-left: $grid-unit-30;
-			padding-right: $grid-unit-30;
-		}
-	}
 	.edit-site-sidebar-button {
 		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

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar-navigation-item.components-item {
 	color: $gray-600;
 	// 6px right padding to align with + button

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

@@ -1,3 +1,8 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 .edit-site-sidebar-navigation-screen {
 	display: flex;
 	flex-direction: column;

package/src/components/sidebar-navigation-screen-main/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar-navigation-screen-main {
 	margin-left: -$grid-unit-20;
 	margin-right: -$grid-unit-20;

package/src/components/sidebar-navigation-screen-navigation-menu/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/colors" as *;
+
 .sidebar-navigation__more-menu {
 	.components-button {
 		color: $gray-200;

package/src/components/sidebar-navigation-screen-navigation-menus/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar-navigation-screen__description {
 	margin: 0 0 $grid-unit-40 0;
 }

package/src/components/sidebar-navigation-screen-patterns/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar-navigation-screen-patterns__group {
 	margin-bottom: $grid-unit-30;
 	margin-left: -$grid-unit-20;

package/src/components/sidebar-navigation-screen-templates-browse/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-sidebar-navigation-screen-templates-browse {
 	margin-left: -$grid-unit-20;
 	margin-right: -$grid-unit-20;

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

@@ -3,6 +3,9 @@
  */
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __ } from '@wordpress/i18n';
+import { loadView } from '@wordpress/views';
+import { resolveSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -14,9 +17,23 @@ import DataViewsSidebarContent from '../sidebar-dataviews';
 import PostList from '../post-list';
 import { unlock } from '../../lock-unlock';
 import { PostEdit } from '../post-edit';
+import { getDefaultView } from '../post-list/view-utils';
 
 const { useLocation } = unlock( routerPrivateApis );
 
+async function isListView( query ) {
+	const { activeView = 'all' } = query;
+	const postTypeObject =
+		await resolveSelect( coreStore ).getPostType( 'page' );
+	const view = await loadView( {
+		kind: 'postType',
+		name: 'page',
+		slug: activeView,
+		defaultView: getDefaultView( postTypeObject, activeView ),
+	} );
+	return view.type === 'list';
+}
+
 function MobilePagesView() {
 	const { query = {} } = useLocation();
 	const { canvas = 'view' } = query;
@@ -44,15 +61,13 @@ export const pagesRoute = {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			return isBlockTheme ? <PostList postType="page" /> : undefined;
 		},
-		preview( { query, siteData } ) {
+		async preview( { query, siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			if ( ! isBlockTheme ) {
 				return undefined;
 			}
-			const isListView =
-				( query.layout === 'list' || ! query.layout ) &&
-				query.isCustom !== 'true';
-			return isListView ? <Editor /> : undefined;
+			const isList = await isListView( query );
+			return isList ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
@@ -62,24 +77,22 @@ export const pagesRoute = {
 				<SidebarNavigationScreenUnsupported />
 			);
 		},
-		edit( { query } ) {
-			const hasQuickEdit =
-				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+		async edit( { query } ) {
+			const isList = await isListView( query );
+			const hasQuickEdit = ! isList && !! 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;
+		async content( { query } ) {
+			const isList = await isListView( query );
+			return isList ? 380 : undefined;
 		},
-		edit( { query } ) {
-			const hasQuickEdit =
-				( query.layout ?? 'list' ) !== 'list' && !! query.quickEdit;
+		async edit( { query } ) {
+			const isList = await isListView( query );
+			const hasQuickEdit = ! isList && !! query.quickEdit;
 			return hasQuickEdit ? 380 : undefined;
 		},
 	},

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

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { loadView } from '@wordpress/views';
+
 /**
  * Internal dependencies
  */
@@ -5,6 +10,18 @@ import Editor from '../editor';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SidebarNavigationScreenUnsupported from '../sidebar-navigation-screen-unsupported';
 import PageTemplates from '../page-templates';
+import { getDefaultView } from '../page-templates/view-utils';
+
+async function isTemplateListView( query ) {
+	const { activeView = 'active' } = query;
+	const view = await loadView( {
+		kind: 'postType',
+		name: 'wp_template',
+		slug: activeView,
+		defaultView: getDefaultView( activeView ),
+	} );
+	return view.type === 'list';
+}
 
 export const templatesRoute = {
 	name: 'templates',
@@ -22,12 +39,12 @@ export const templatesRoute = {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			return isBlockTheme ? <PageTemplates /> : undefined;
 		},
-		preview( { query, siteData } ) {
+		async preview( { query, siteData } ) {
 			const isBlockTheme = siteData.currentTheme?.is_block_theme;
 			if ( ! isBlockTheme ) {
 				return undefined;
 			}
-			const isListView = query.layout === 'list';
+			const isListView = await isTemplateListView( query );
 			return isListView ? <Editor /> : undefined;
 		},
 		mobile( { siteData } ) {
@@ -40,8 +57,8 @@ export const templatesRoute = {
 		},
 	},
 	widths: {
-		content( { query } ) {
-			const isListView = query.layout === 'list';
+		async content( { query } ) {
+			const isListView = await isTemplateListView( query );
 			return isListView ? 380 : undefined;
 		},
 	},

package/src/components/site-hub/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-site-hub {
 	display: flex;
 	align-items: center;

package/src/components/site-icon/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-site-icon__icon {
 	fill: currentColor;
 	width: 100%;

package/src/components/style-book/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-style-book {
 	// Ensure the style book fills the available vertical space.
 	// This is useful when the style book is used to fill a frame.

package/src/components/welcome-guide/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 .edit-site-welcome-guide {
 	width: 312px;
 

package/src/posts.scss

@@ -1,14 +1,17 @@
-@import "../../dataviews/src/style.scss";
-@import "./components/layout/style.scss";
-@import "./components/page/style.scss";
-@import "./components/save-hub/style.scss";
-@import "./components/save-panel/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/site-hub/style.scss";
-@import "./components/site-icon/style.scss";
-@import "./components/editor-canvas-container/style.scss";
-@import "./components/post-list/style.scss";
-@import "./components/resizable-frame/style.scss";
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/default-custom-properties";
+
+@use "@wordpress/admin-ui/build-style/style.css" as admin-ui;
+@use "@wordpress/dataviews/build-style/style.css" as dataviews;
+@use "./components/layout/style.scss" as *;
+@use "./components/save-hub/style.scss" as *;
+@use "./components/save-panel/style.scss" as *;
+@use "./components/sidebar/style.scss" as *;
+@use "./components/site-hub/style.scss" as *;
+@use "./components/site-icon/style.scss" as *;
+@use "./components/editor-canvas-container/style.scss" as *;
+@use "./components/post-list/style.scss" as *;
+@use "./components/resizable-frame/style.scss" as *;
 
 @include wordpress-admin-schemes();
 

package/src/style.scss

@@ -1,42 +1,45 @@
-@import "../../dataviews/src/style.scss";
-@import "../../fields/src/style.scss";
-@import "./components/add-new-template/style.scss";
-@import "./components/block-editor/style.scss";
-@import "./components/canvas-loader/style.scss";
-@import "./components/global-styles/style.scss";
-@import "./components/global-styles/screen-revisions/style.scss";
-@import "./components/global-styles-sidebar/style.scss";
-@import "./components/page/style.scss";
-@import "./components/page-patterns/style.scss";
-@import "./components/page-templates/style.scss";
-@import "./components/editor/style.scss";
-@import "./components/welcome-guide/style.scss";
-@import "./components/layout/style.scss";
-@import "./components/save-hub/style.scss";
-@import "./components/save-panel/style.scss";
-@import "./components/sidebar/style.scss";
-@import "./components/sidebar-button/style.scss";
-@import "./components/sidebar-navigation-item/style.scss";
-@import "./components/sidebar-navigation-screen/style.scss";
-@import "./components/sidebar-navigation-screen-details-footer/style.scss";
-@import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
-@import "./components/sidebar-navigation-screen-patterns/style.scss";
-@import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
-@import "./components/sidebar-navigation-screen-main/style.scss";
-@import "./components/sidebar-navigation-screen-templates-browse/style.scss";
-@import "./components/sidebar-dataviews/style.scss";
-@import "./components/site-hub/style.scss";
-@import "./components/site-icon/style.scss";
-@import "./components/style-book/style.scss";
-@import "./components/editor-canvas-container/style.scss";
-@import "./components/post-edit/style.scss";
-@import "./components/post-list/style.scss";
-@import "./components/resizable-frame/style.scss";
-@import "./hooks/push-changes-to-global-styles/style.scss";
-@import "./components/global-styles/font-library-modal/style.scss";
-@import "./components/pagination/style.scss";
-@import "./components/global-styles/variations/style.scss";
-@import "./components/sidebar-global-styles-wrapper/style.scss";
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/default-custom-properties";
+@use "@wordpress/admin-ui/build-style/style.css" as admin-ui;
+@use "@wordpress/dataviews/build-style/style.css" as dataviews;
+@use "@wordpress/fields/build-style/style.css" as fields;
+@use "./components/add-new-template/style.scss" as *;
+@use "./components/block-editor/style.scss" as *;
+@use "./components/canvas-loader/style.scss" as *;
+@use "./components/global-styles/style.scss" as *;
+@use "./components/global-styles/screen-revisions/style.scss" as *;
+@use "./components/global-styles-sidebar/style.scss" as *;
+@use "./components/page-patterns/style.scss" as *;
+@use "./components/page-templates/style.scss" as *;
+@use "./components/editor/style.scss" as *;
+@use "./components/welcome-guide/style.scss" as *;
+@use "./components/layout/style.scss" as *;
+@use "./components/save-hub/style.scss" as *;
+@use "./components/save-panel/style.scss" as *;
+@use "./components/sidebar/style.scss" as *;
+@use "./components/sidebar-button/style.scss" as *;
+@use "./components/sidebar-navigation-item/style.scss" as *;
+@use "./components/sidebar-navigation-screen/style.scss" as *;
+@use "./components/sidebar-navigation-screen-details-footer/style.scss" as *;
+@use "./components/sidebar-navigation-screen-navigation-menu/style.scss" as *;
+@use "./components/sidebar-navigation-screen-patterns/style.scss" as *;
+@use "./components/sidebar-navigation-screen-navigation-menus/style.scss" as *;
+@use "./components/sidebar-navigation-screen-main/style.scss" as *;
+@use "./components/sidebar-navigation-screen-templates-browse/style.scss" as *;
+@use "./components/sidebar-dataviews/style.scss" as *;
+@use "./components/site-hub/style.scss" as *;
+@use "./components/site-icon/style.scss" as *;
+@use "./components/style-book/style.scss" as *;
+@use "./components/editor-canvas-container/style.scss" as *;
+@use "./components/post-edit/style.scss" as *;
+@use "./components/post-list/style.scss" as *;
+@use "./components/resizable-frame/style.scss" as *;
+@use "./hooks/push-changes-to-global-styles/style.scss" as *;
+@use "./components/global-styles/font-library-modal/style.scss" as *;
+@use "./components/pagination/style.scss" as *;
+@use "./components/global-styles/variations/style.scss" as *;
+@use "./components/sidebar-global-styles-wrapper/style.scss" as *;
 
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {

package/tsconfig.json

@@ -3,6 +3,7 @@
 	"extends": "../../tsconfig.base.json",
 	"references": [
 		{ "path": "../a11y" },
+		{ "path": "../admin-ui" },
 		{ "path": "../api-fetch" },
 		{ "path": "../autop" },
 		{ "path": "../blob" },
@@ -36,6 +37,7 @@
 		{ "path": "../router" },
 		{ "path": "../style-engine" },
 		{ "path": "../url" },
+		{ "path": "../views" },
 		{ "path": "../wordcount" }
 	],
 	// NOTE: This package is being progressively typed. You are encouraged to