@wordpress/edit-site 5.25.0 → 5.25.1-next.79a6196f.0

package/src/components/sidebar-edit-mode/style.scss

@@ -99,13 +99,3 @@
 		}
 	}
 }
-
-.edit-site-sidebar-fixed-bottom-slot {
-	position: sticky;
-	bottom: 0;
-	background: $white;
-	display: flex;
-	padding: $grid-unit-20;
-	border-top: $border-width solid $gray-300;
-	box-sizing: content-box;
-}

package/src/components/sidebar-edit-mode/template-panel/index.js

@@ -3,7 +3,15 @@
  */
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
+import {
+	PageAttributesPanel,
+	PostDiscussionPanel,
+	PostExcerptPanel,
+	PostFeaturedImagePanel,
+	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
+	store as editorStore,
+} from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { navigation, symbol } from '@wordpress/icons';
@@ -14,10 +22,7 @@ import { navigation, symbol } from '@wordpress/icons';
 import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
-import LastRevision from './last-revision';
 import SidebarCard from '../sidebar-card';
-import PatternCategories from './pattern-categories';
-import { PATTERN_TYPES } from '../../../utils/constants';
 
 const CARD_ICONS = {
 	wp_block: symbol,
@@ -25,49 +30,48 @@ const CARD_ICONS = {
 };
 
 export default function TemplatePanel() {
-	const { title, description, icon, record, postType } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
+	const { title, description, icon, record } = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 
-			const type = getEditedPostType();
-			const postId = getEditedPostId();
-			const _record = getEditedEntityRecord( 'postType', type, postId );
-			const info = getTemplateInfo( _record );
+		const type = getEditedPostType();
+		const postId = getEditedPostId();
+		const _record = getEditedEntityRecord( 'postType', type, postId );
+		const info = getTemplateInfo( _record );
 
-			return {
-				title: info.title,
-				description: info.description,
-				icon: info.icon,
-				record: _record,
-				postType: type,
-			};
-		},
-		[]
-	);
+		return {
+			title: info.title,
+			description: info.description,
+			icon: info.icon,
+			record: _record,
+		};
+	}, [] );
 
 	if ( ! title && ! description ) {
 		return null;
 	}
 
 	return (
-		<PanelBody className="edit-site-template-panel">
-			<SidebarCard
-				className="edit-site-template-card"
-				title={ decodeEntities( title ) }
-				icon={ CARD_ICONS[ record?.type ] ?? icon }
-				description={ decodeEntities( description ) }
-				actions={ <TemplateActions template={ record } /> }
-			>
-				<TemplateAreas />
-			</SidebarCard>
-			<LastRevision />
-			{ postType === PATTERN_TYPES.user && (
-				<PatternCategories post={ record } />
-			) }
-		</PanelBody>
+		<>
+			<PanelBody>
+				<SidebarCard
+					className="edit-site-template-card"
+					title={ decodeEntities( title ) }
+					icon={ CARD_ICONS[ record?.type ] ?? icon }
+					description={ decodeEntities( description ) }
+					actions={ <TemplateActions template={ record } /> }
+				>
+					<TemplateAreas />
+				</SidebarCard>
+			</PanelBody>
+			<PostLastRevisionPanel />
+			<PostTaxonomiesPanel />
+			<PostFeaturedImagePanel />
+			<PostExcerptPanel />
+			<PostDiscussionPanel />
+			<PageAttributesPanel />
+		</>
 	);
 }

package/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -29,10 +29,6 @@
 	}
 }
 
-.edit-site-template-revisions {
-	margin-left: math.div(-$grid-unit-10, 2);
-}
-
 h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;

package/src/components/sidebar-navigation-screen-details-footer/index.js

@@ -42,7 +42,7 @@ export default function SidebarNavigationScreenDetailsFooter( {
 	return (
 		<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
 			<SidebarNavigationItem
-				label={ __( 'Revisions' ) }
+				aria-label={ __( 'Revisions' ) }
 				{ ...hrefProps }
 				{ ...otherProps }
 			>

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -9,6 +9,7 @@ import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/com
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -86,8 +87,8 @@ function SidebarNavigationScreenGlobalStylesContent() {
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
-	const { openGeneralSidebar, setIsListViewOpened } =
-		useDispatch( editSiteStore );
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setIsListViewOpened } = useDispatch( editorStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )

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

@@ -31,7 +31,7 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export default function SidebarNavigationScreenPage() {
+export default function SidebarNavigationScreenPage( { backPath } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const history = useHistory();
 	const {
@@ -88,6 +88,7 @@ export default function SidebarNavigationScreenPage() {
 
 	return record ? (
 		<SidebarNavigationScreen
+			backPath={ backPath }
 			title={ decodeEntities(
 				record?.title?.rendered || __( '(no title)' )
 			) }

package/src/components/sidebar-navigation-screen-pages-dataviews/index.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { layout } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useLink } from '../routes/link';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import DataViewsSidebarContent from '../sidebar-dataviews';
+
+const PageItem = ( { postType = 'page', postId, ...props } ) => {
+	const linkInfo = useLink(
+		{
+			postType,
+			postId,
+		},
+		{
+			backPath: '/page',
+		}
+	);
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
+};
+
+export default function SidebarNavigationScreenPagesDataViews() {
+	const { records: templateRecords } = useEntityRecords(
+		'postType',
+		TEMPLATE_POST_TYPE,
+		{
+			per_page: -1,
+		}
+	);
+	const templates = useMemo(
+		() =>
+			templateRecords?.filter( ( { slug } ) =>
+				[ '404', 'search' ].includes( slug )
+			),
+		[ templateRecords ]
+	);
+
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Pages' ) }
+			content={ <DataViewsSidebarContent /> }
+			footer={
+				<VStack spacing={ 0 }>
+					{ templates?.map( ( item ) => (
+						<PageItem
+							postType={ TEMPLATE_POST_TYPE }
+							postId={ item.id }
+							key={ item.id }
+							icon={ layout }
+							withChevron
+						>
+							<Truncate numberOfLines={ 1 }>
+								{ decodeEntities(
+									item.title?.rendered || __( '(no title)' )
+								) }
+							</Truncate>
+						</PageItem>
+					) ) }
+				</VStack>
+			}
+		/>
+	);
+}

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

@@ -4,6 +4,7 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -30,20 +31,11 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
 
 export default function SidebarNavigationScreenTemplates() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-
 	const { records: templates, isResolving: isLoading } = useEntityRecords(
 		'postType',
 		TEMPLATE_POST_TYPE,
-		{
-			per_page: -1,
-		}
-	);
-
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
+		{ per_page: -1 }
 	);
-
 	const browseAllLink = useLink( { path: '/wp_template/all' } );
 	const canCreate = ! isMobileViewport;
 	return (
@@ -66,24 +58,7 @@ export default function SidebarNavigationScreenTemplates() {
 				<>
 					{ isLoading && __( 'Loading templates…' ) }
 					{ ! isLoading && (
-						<ItemGroup>
-							{ ! templates?.length && (
-								<Item>{ __( 'No templates found' ) }</Item>
-							) }
-							{ sortedTemplates.map( ( template ) => (
-								<TemplateItem
-									postType={ TEMPLATE_POST_TYPE }
-									postId={ template.id }
-									key={ template.id }
-									withChevron
-								>
-									{ decodeEntities(
-										template.title?.rendered ||
-											template.slug
-									) }
-								</TemplateItem>
-							) ) }
-						</ItemGroup>
+						<SidebarTemplatesList templates={ templates } />
 					) }
 				</>
 			}
@@ -97,3 +72,85 @@ export default function SidebarNavigationScreenTemplates() {
 		/>
 	);
 }
+
+function TemplatesGroup( { title, templates } ) {
+	return (
+		<ItemGroup>
+			{ !! title && (
+				<Item className="edit-site-sidebar-navigation-screen-templates__templates-group-title">
+					{ title }
+				</Item>
+			) }
+			{ templates.map( ( template ) => (
+				<TemplateItem
+					postType={ TEMPLATE_POST_TYPE }
+					postId={ template.id }
+					key={ template.id }
+					withChevron
+				>
+					{ decodeEntities(
+						template.title?.rendered || template.slug
+					) }
+				</TemplateItem>
+			) ) }
+		</ItemGroup>
+	);
+}
+function SidebarTemplatesList( { templates } ) {
+	if ( ! templates?.length ) {
+		return (
+			<ItemGroup>
+				<Item>{ __( 'No templates found' ) }</Item>
+			</ItemGroup>
+		);
+	}
+	const sortedTemplates = templates ? [ ...templates ] : [];
+	sortedTemplates.sort( ( a, b ) =>
+		a.title.rendered.localeCompare( b.title.rendered )
+	);
+	const { hierarchyTemplates, customTemplates, ...plugins } =
+		sortedTemplates.reduce(
+			( accumulator, template ) => {
+				const {
+					original_source: originalSource,
+					author_text: authorText,
+				} = template;
+				if ( originalSource === 'plugin' ) {
+					if ( ! accumulator[ authorText ] ) {
+						accumulator[ authorText ] = [];
+					}
+					accumulator[ authorText ].push( template );
+				} else if ( template.is_custom ) {
+					accumulator.customTemplates.push( template );
+				} else {
+					accumulator.hierarchyTemplates.push( template );
+				}
+				return accumulator;
+			},
+			{ hierarchyTemplates: [], customTemplates: [] }
+		);
+	return (
+		<VStack spacing={ 3 }>
+			{ !! hierarchyTemplates.length && (
+				<TemplatesGroup templates={ hierarchyTemplates } />
+			) }
+			{ !! customTemplates.length && (
+				<TemplatesGroup
+					title={ __( 'Custom' ) }
+					templates={ customTemplates }
+				/>
+			) }
+			{ Object.entries( plugins ).map(
+				( [ plugin, pluginTemplates ] ) => {
+					return (
+						<TemplatesGroup
+							key={ plugin }
+							title={ plugin }
+							templates={ pluginTemplates }
+						/>
+					);
+				}
+			) }
+		</VStack>
+	);
+}

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

@@ -0,0 +1,9 @@
+.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
+	text-transform: uppercase;
+	color: $gray-200;
+	// 6px right padding to align with + button
+	padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
+	border-top: 1px solid $gray-800;
+	font-size: 11px;
+	font-weight: 500;
+}

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

@@ -73,7 +73,10 @@
 .edit-site-site-hub_toggle-command-center {
 	color: $gray-200;
 
-	&:hover {
-		color: $gray-100;
+	&:hover,
+	&:active {
+		svg {
+			fill: $gray-100;
+		}
 	}
 }

package/src/components/style-book/index.js

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import {
 	Disabled,
-	TabPanel,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
@@ -27,7 +26,7 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { useResizeObserver } from '@wordpress/compose';
-import { useMemo, useState, memo } from '@wordpress/element';
+import { useMemo, useState, memo, useContext } from '@wordpress/element';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
 /**
@@ -35,15 +34,20 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
+import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
+const {
+	ExperimentalBlockEditorProvider,
+	useGlobalStyle,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+} = unlock( blockEditorPrivateApis );
 
 const {
 	CompositeV2: Composite,
 	CompositeItemV2: CompositeItem,
 	useCompositeStoreV2: useCompositeStore,
+	Tabs,
 } = unlock( componentsPrivateApis );
 
 // The content area of the Style Book is rendered within an iframe so that global styles
@@ -118,6 +122,10 @@ const STYLE_BOOK_IFRAME_STYLES = `
 	}
 `;
 
+function isObjectEmpty( object ) {
+	return ! object || Object.keys( object ).length === 0;
+}
+
 function getExamples() {
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.
@@ -174,7 +182,9 @@ function StyleBook( {
 	onClick,
 	onSelect,
 	showCloseButton = true,
+	onClose,
 	showTabs = true,
+	userConfig = {},
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
@@ -195,18 +205,37 @@ function StyleBook( {
 				} ) ),
 		[ examples ]
 	);
+	const { base: baseConfig } = useContext( GlobalStylesContext );
+
+	const mergedConfig = useMemo( () => {
+		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
+			return mergeBaseAndUserConfigs( baseConfig, userConfig );
+		}
+		return {};
+	}, [ baseConfig, userConfig ] );
 
+	// Copied from packages/edit-site/src/components/revisions/index.js
+	// could we create a shared hook?
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
+
 	const settings = useMemo(
 		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
 
+	const [ globalStyles ] = useGlobalStylesOutputWithConfig( mergedConfig );
+
+	settings.styles =
+		! isObjectEmpty( globalStyles ) && ! isObjectEmpty( userConfig )
+			? globalStyles
+			: settings.styles;
+
 	return (
 		<EditorCanvasContainer
+			onClose={ onClose }
 			enableResizing={ enableResizing }
 			closeButtonLabel={
 				showCloseButton ? __( 'Close Style Book' ) : null
@@ -224,22 +253,37 @@ function StyleBook( {
 			>
 				{ resizeObserver }
 				{ showTabs ? (
-					<TabPanel
-						className="edit-site-style-book__tab-panel"
-						tabs={ tabs }
-					>
-						{ ( tab ) => (
-							<StyleBookBody
-								category={ tab.name }
-								examples={ examples }
-								isSelected={ isSelected }
-								onSelect={ onSelect }
-								settings={ settings }
-								sizes={ sizes }
-								title={ tab.title }
-							/>
-						) }
-					</TabPanel>
+					<div className="edit-site-style-book__tabs">
+						<Tabs>
+							<Tabs.TabList>
+								{ tabs.map( ( tab ) => (
+									<Tabs.Tab
+										tabId={ tab.name }
+										key={ tab.name }
+									>
+										{ tab.title }
+									</Tabs.Tab>
+								) ) }
+							</Tabs.TabList>
+							{ tabs.map( ( tab ) => (
+								<Tabs.TabPanel
+									key={ tab.name }
+									tabId={ tab.name }
+									focusable={ false }
+								>
+									<StyleBookBody
+										category={ tab.name }
+										examples={ examples }
+										isSelected={ isSelected }
+										onSelect={ onSelect }
+										settings={ settings }
+										sizes={ sizes }
+										title={ tab.title }
+									/>
+								</Tabs.TabPanel>
+							) ) }
+						</Tabs>
+					</div>
 				) : (
 					<StyleBookBody
 						examples={ examples }

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

@@ -17,13 +17,13 @@
 	}
 }
 
-.edit-site-style-book__tab-panel {
-	.components-tab-panel__tabs {
+.edit-site-style-book__tabs {
+	[role="tablist"] {
 		background: $white;
 		color: $gray-900;
 	}
 
-	.components-tab-panel__tab-content {
+	[role="tabpanel"] {
 		bottom: 0;
 		left: 0;
 		overflow: auto;

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -54,7 +54,10 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			return {
 				hasLoadedAllDependencies: !! base && !! siteData,
 				homepageId:
-					siteData?.show_on_front === 'page'
+					siteData?.show_on_front === 'page' &&
+					[ 'number', 'string' ].includes(
+						typeof siteData.page_on_front
+					)
 						? siteData.page_on_front.toString()
 						: null,
 				url: base?.home,

package/src/hooks/commands/use-edit-mode-commands.js

@@ -217,22 +217,18 @@ function useEditUICommands() {
 		isListViewOpen,
 		isDistractionFree,
 	} = useSelect( ( select ) => {
-		const { isListViewOpened, getEditorMode } = select( editSiteStore );
+		const { get } = select( preferencesStore );
+		const { getEditorMode } = select( editSiteStore );
+		const { isListViewOpened } = select( editorStore );
 		return {
 			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
 			editorMode: getEditorMode(),
 			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			showBlockBreadcrumbs: select( preferencesStore ).get(
-				'core/edit-site',
-				'showBlockBreadcrumbs'
-			),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			isListViewOpen: isListViewOpened(),
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
+			isDistractionFree: get( 'core', 'distractionFree' ),
 		};
 	}, [] );
 	const { openModal } = useDispatch( interfaceStore );
@@ -277,7 +273,7 @@ function useEditUICommands() {
 		name: 'core/toggle-spotlight-mode',
 		label: __( 'Toggle spotlight mode' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-site', 'focusMode' );
+			toggle( 'core', 'focusMode' );
 			close();
 		},
 	} );
@@ -295,7 +291,7 @@ function useEditUICommands() {
 		name: 'core/toggle-top-toolbar',
 		label: __( 'Toggle top toolbar' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-site', 'fixedToolbar' );
+			toggle( 'core', 'fixedToolbar' );
 			if ( isDistractionFree ) {
 				toggleDistractionFree();
 			}
@@ -338,7 +334,7 @@ function useEditUICommands() {
 			? __( 'Hide block breadcrumbs' )
 			: __( 'Show block breadcrumbs' ),
 		callback: ( { close } ) => {
-			toggle( 'core/edit-site', 'showBlockBreadcrumbs' );
+			toggle( 'core', 'showBlockBreadcrumbs' );
 			close();
 			createInfoNotice(
 				showBlockBreadcrumbs