@wordpress/edit-site 5.25.0 → 5.26.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/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

package/src/index.js

@@ -53,16 +53,22 @@ export function initializeEditor( id, settings ) {
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	dispatch( preferencesStore ).setDefaults( 'core/edit-site', {
 		editorMode: 'visual',
-		fixedToolbar: false,
-		focusMode: false,
-		distractionFree: false,
-		keepCaretInsideBlock: false,
 		welcomeGuide: true,
 		welcomeGuideStyles: true,
 		welcomeGuidePage: true,
 		welcomeGuideTemplate: true,
-		showListViewByDefault: false,
+	} );
+
+	dispatch( preferencesStore ).setDefaults( 'core', {
+		allowRightClickOverrides: true,
+		distractionFree: false,
+		fixedToolbar: false,
+		focusMode: false,
+		inactivePanels: [],
+		keepCaretInsideBlock: false,
+		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,
+		showListViewByDefault: false,
 	} );
 
 	dispatch( interfaceStore ).setDefaultComplementaryArea(

package/src/store/actions.js

@@ -321,23 +321,38 @@ export function setIsNavigationPanelOpened() {
 }
 
 /**
- * Opens or closes the inserter.
+ * Returns an action object used to open/close the inserter.
  *
- * @param {boolean|Object} value                Whether the inserter should be
- *                                              opened (true) or closed (false).
- *                                              To specify an insertion point,
- *                                              use an object.
- * @param {string}         value.rootClientId   The root client ID to insert at.
- * @param {number}         value.insertionIndex The index to insert at.
+ * @deprecated
  *
- * @return {Object} Action object.
+ * @param {boolean|Object} value Whether the inserter should be opened (true) or closed (false).
  */
-export function setIsInserterOpened( value ) {
-	return {
-		type: 'SET_IS_INSERTER_OPENED',
-		value,
+export const setIsInserterOpened =
+	( value ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).setIsInserterOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsInserterOpened",
+		} );
+		registry.dispatch( editorStore ).setIsInserterOpened( value );
+	};
+
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @deprecated
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ */
+export const setIsListViewOpened =
+	( isOpen ) =>
+	( { registry } ) => {
+		deprecated( "dispatch( 'core/edit-site' ).setIsListViewOpened", {
+			since: '6.5',
+			alternative: "dispatch( 'core/editor').setIsListViewOpened",
+		} );
+		registry.dispatch( editorStore ).setIsListViewOpened( isOpen );
 	};
-}
 
 /**
  * Returns an action object used to update the settings.
@@ -353,27 +368,6 @@ export function updateSettings( settings ) {
 	};
 }
 
-/**
- * Sets whether the list view panel should be open.
- *
- * @param {boolean} isOpen If true, opens the list view. If false, closes it.
- *                         It does not toggle the state, but sets it directly.
- */
-export const setIsListViewOpened =
-	( isOpen ) =>
-	( { dispatch, registry } ) => {
-		const isDistractionFree = registry
-			.select( preferencesStore )
-			.get( 'core/edit-site', 'distractionFree' );
-		if ( isDistractionFree && isOpen ) {
-			dispatch.toggleDistractionFree();
-		}
-		dispatch( {
-			type: 'SET_IS_LIST_VIEW_OPENED',
-			isOpen,
-		} );
-	};
-
 /**
  * Sets whether the save view panel should be open.
  *
@@ -530,7 +524,7 @@ export const openGeneralSidebar =
 	( { dispatch, registry } ) => {
 		const isDistractionFree = registry
 			.select( preferencesStore )
-			.get( 'core/edit-site', 'distractionFree' );
+			.get( 'core', 'distractionFree' );
 		if ( isDistractionFree ) {
 			dispatch.toggleDistractionFree();
 		}
@@ -567,7 +561,7 @@ export const switchEditorMode =
 		} else if ( mode === 'text' ) {
 			const isDistractionFree = registry
 				.select( preferencesStore )
-				.get( 'core/edit-site', 'distractionFree' );
+				.get( 'core', 'distractionFree' );
 			if ( isDistractionFree ) {
 				dispatch.toggleDistractionFree();
 			}
@@ -608,25 +602,21 @@ export const toggleDistractionFree =
 	( { dispatch, registry } ) => {
 		const isDistractionFree = registry
 			.select( preferencesStore )
-			.get( 'core/edit-site', 'distractionFree' );
+			.get( 'core', 'distractionFree' );
 		if ( ! isDistractionFree ) {
 			registry.batch( () => {
 				registry
 					.dispatch( preferencesStore )
-					.set( 'core/edit-site', 'fixedToolbar', true );
-				dispatch.setIsInserterOpened( false );
-				dispatch.setIsListViewOpened( false );
+					.set( 'core', 'fixedToolbar', true );
+				registry.dispatch( editorStore ).setIsInserterOpened( false );
+				registry.dispatch( editorStore ).setIsListViewOpened( false );
 				dispatch.closeGeneralSidebar();
 			} );
 		}
 		registry.batch( () => {
 			registry
 				.dispatch( preferencesStore )
-				.set(
-					'core/edit-site',
-					'distractionFree',
-					! isDistractionFree
-				);
+				.set( 'core', 'distractionFree', ! isDistractionFree );
 			registry
 				.dispatch( noticesStore )
 				.createInfoNotice(