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

package/src/components/sidebar-edit-mode/default-sidebar.js

@@ -5,8 +5,6 @@ import {
 	ComplementaryArea,
 	ComplementaryAreaMoreMenuItem,
 } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function DefaultSidebar( {
 	className,
@@ -19,15 +17,6 @@ export default function DefaultSidebar( {
 	headerClassName,
 	panelClassName,
 } ) {
-	const showIconLabels = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-
 	return (
 		<>
 			<ComplementaryArea
@@ -41,7 +30,6 @@ export default function DefaultSidebar( {
 				header={ header }
 				headerClassName={ headerClassName }
 				panelClassName={ panelClassName }
-				showIconLabels={ showIconLabels }
 			>
 				{ children }
 			</ComplementaryArea>

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -1,13 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { FlexItem, FlexBlock, Flex, Button } from '@wordpress/components';
+import {
+	FlexItem,
+	FlexBlock,
+	Flex,
+	Button,
+	__experimentalUseNavigator as useNavigator,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { styles, seen } from '@wordpress/icons';
+import { styles, seen, backup } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -17,33 +24,51 @@ import { GlobalStylesUI } from '../global-styles';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesMenuSlot } from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
+import { store as coreStore } from '@wordpress/core-data';
 
 export default function GlobalStylesSidebar() {
 	const {
 		shouldClearCanvasContainerView,
 		isStyleBookOpened,
 		showListViewByDefault,
+		hasRevisions,
+		isRevisionsOpened,
+		isRevisionsStyleBookOpened,
 	} = useSelect( ( select ) => {
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEditorCanvasContainerView, getCanvasMode } = unlock(
 			select( editSiteStore )
 		);
+		const canvasContainerView = getEditorCanvasContainerView();
 		const _isVisualEditorMode =
 			'visual' === select( editSiteStore ).getEditorMode();
 		const _isEditCanvasMode = 'edit' === getCanvasMode();
 		const _showListViewByDefault = select( preferencesStore ).get(
-			'core/edit-site',
+			'core',
 			'showListViewByDefault'
 		);
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
 
 		return {
-			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+			isStyleBookOpened: 'style-book' === canvasContainerView,
 			shouldClearCanvasContainerView:
 				'edit-site/global-styles' !==
 					getActiveComplementaryArea( 'core/edit-site' ) ||
 				! _isVisualEditorMode ||
 				! _isEditCanvasMode,
 			showListViewByDefault: _showListViewByDefault,
+			hasRevisions:
+				!! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count,
+			isRevisionsStyleBookOpened:
+				'global-styles-revisions:style-book' === canvasContainerView,
+			isRevisionsOpened:
+				'global-styles-revisions' === canvasContainerView,
 		};
 	}, [] );
 	const { setEditorCanvasContainerView } = unlock(
@@ -56,7 +81,47 @@ export default function GlobalStylesSidebar() {
 		}
 	}, [ shouldClearCanvasContainerView ] );
 
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
+	const { setIsListViewOpened } = useDispatch( editorStore );
+	const { goTo } = useNavigator();
+
+	const toggleRevisions = () => {
+		setIsListViewOpened( false );
+		if ( isRevisionsStyleBookOpened ) {
+			goTo( '/' );
+			setEditorCanvasContainerView( 'style-book' );
+			return;
+		}
+		if ( isRevisionsOpened ) {
+			goTo( '/' );
+			setEditorCanvasContainerView( undefined );
+			return;
+		}
+		goTo( '/revisions' );
+
+		if ( isStyleBookOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+		} else {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+		}
+	};
+	const toggleStyleBook = () => {
+		if ( isRevisionsOpened ) {
+			setEditorCanvasContainerView(
+				'global-styles-revisions:style-book'
+			);
+			return;
+		}
+		if ( isRevisionsStyleBookOpened ) {
+			setEditorCanvasContainerView( 'global-styles-revisions' );
+			return;
+		}
+		setIsListViewOpened( isStyleBookOpened && showListViewByDefault );
+		setEditorCanvasContainerView(
+			isStyleBookOpened ? undefined : 'style-book'
+		);
+	};
 
 	return (
 		<DefaultSidebar
@@ -79,16 +144,22 @@ export default function GlobalStylesSidebar() {
 						<Button
 							icon={ seen }
 							label={ __( 'Style Book' ) }
-							isPressed={ isStyleBookOpened }
+							isPressed={
+								isStyleBookOpened || isRevisionsStyleBookOpened
+							}
 							disabled={ shouldClearCanvasContainerView }
-							onClick={ () => {
-								setIsListViewOpened(
-									isStyleBookOpened && showListViewByDefault
-								);
-								setEditorCanvasContainerView(
-									isStyleBookOpened ? undefined : 'style-book'
-								);
-							} }
+							onClick={ toggleStyleBook }
+						/>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							label={ __( 'Revisions' ) }
+							icon={ backup }
+							onClick={ toggleRevisions }
+							disabled={ ! hasRevisions }
+							isPressed={
+								isRevisionsOpened || isRevisionsStyleBookOpened
+							}
 						/>
 					</FlexItem>
 					<GlobalStylesMenuSlot />

package/src/components/sidebar-edit-mode/page-panels/index.js

@@ -12,6 +12,15 @@ import { humanTimeDiff } from '@wordpress/date';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import {
+	PageAttributesPanel,
+	PostDiscussionPanel,
+	PostExcerptPanel,
+	PostFeaturedImagePanel,
+	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -22,28 +31,39 @@ import PageContent from './page-content';
 import PageSummary from './page-summary';
 
 export default function PagePanels() {
-	const { id, type, hasResolved, status, date, password, title, modified } =
-		useSelect( ( select ) => {
-			const { getEditedPostContext } = select( editSiteStore );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const context = getEditedPostContext();
-			const queryArgs = [ 'postType', context.postType, context.postId ];
-			const page = getEditedEntityRecord( ...queryArgs );
-			return {
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				title: page?.title,
-				id: page?.id,
-				type: page?.type,
-				status: page?.status,
-				date: page?.date,
-				password: page?.password,
-				modified: page?.modified,
-			};
-		}, [] );
+	const {
+		id,
+		type,
+		hasResolved,
+		status,
+		date,
+		password,
+		title,
+		modified,
+		renderingMode,
+	} = useSelect( ( select ) => {
+		const { getEditedPostContext } = select( editSiteStore );
+		const { getEditedEntityRecord, hasFinishedResolution } =
+			select( coreStore );
+		const { getRenderingMode } = select( editorStore );
+		const context = getEditedPostContext();
+		const queryArgs = [ 'postType', context.postType, context.postId ];
+		const page = getEditedEntityRecord( ...queryArgs );
+		return {
+			hasResolved: hasFinishedResolution(
+				'getEditedEntityRecord',
+				queryArgs
+			),
+			title: page?.title,
+			id: page?.id,
+			type: page?.type,
+			status: page?.status,
+			date: page?.date,
+			password: page?.password,
+			modified: page?.modified,
+			renderingMode: getRenderingMode(),
+		};
+	}, [] );
 
 	if ( ! hasResolved ) {
 		return null;
@@ -77,9 +97,17 @@ export default function PagePanels() {
 					postType={ type }
 				/>
 			</PanelBody>
-			<PanelBody title={ __( 'Content' ) }>
-				<PageContent />
-			</PanelBody>
+			{ renderingMode !== 'post-only' && (
+				<PanelBody title={ __( 'Content' ) }>
+					<PageContent />
+				</PanelBody>
+			) }
+			<PostLastRevisionPanel />
+			<PostTaxonomiesPanel />
+			<PostFeaturedImagePanel />
+			<PostExcerptPanel />
+			<PostDiscussionPanel />
+			<PageAttributesPanel />
 		</>
 	);
 }

package/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -6,13 +6,13 @@ import {
 	PostAuthorPanel,
 	PostURLPanel,
 	PostSchedulePanel,
+	PostTemplatePanel,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import PageStatus from './page-status';
-import EditTemplate from './edit-template';
 
 export default function PageSummary( {
 	status,
@@ -31,7 +31,7 @@ export default function PageSummary( {
 				postType={ postType }
 			/>
 			<PostSchedulePanel />
-			<EditTemplate />
+			<PostTemplatePanel />
 			<PostURLPanel />
 			<PostAuthorPanel />
 		</VStack>

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

@@ -1,39 +1,9 @@
-.edit-site-swap-template-modal {
-	z-index: z-index(".edit-site-swap-template-modal");
-}
+
 
 .edit-site-page-panels__swap-template__confirm-modal__actions {
 	margin-top: $grid-unit-30;
 }
 
-.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
-	column-count: 2;
-	column-gap: $grid-unit-30;
-
-	// Small top padding required to avoid cutting off the visible outline when hovering items
-	padding-top: $border-width-focus-fallback;
-
-	@include break-medium() {
-		column-count: 3;
-	}
-
-	@include break-wide() {
-		column-count: 4;
-	}
-
-	.block-editor-block-patterns-list__list-item {
-		break-inside: avoid-column;
-	}
-
-	.block-editor-block-patterns-list__item {
-		// Avoid to override the BlockPatternList component
-		// default hover and focus styles.
-		&:not(:focus):not(:hover) .block-editor-block-preview__container {
-			box-shadow: 0 0 0 1px $gray-300;
-		}
-	}
-}
-
 .edit-site-change-status__content {
 	.components-popover__content {
 		min-width: 320px;
@@ -69,14 +39,3 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
-.edit-site-page-panels-edit-template__dropdown {
-	.components-popover__content {
-		min-width: 240px;
-	}
-	.components-button.is-pressed,
-	.components-button.is-pressed:hover {
-		background: inherit;
-		color: inherit;
-	}
-}

package/src/components/sidebar-edit-mode/plugin-sidebar/index.js

@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { ComplementaryArea } from '@wordpress/interface';
-import { useSelect } from '@wordpress/data';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
@@ -71,21 +69,11 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * ```
  */
 export default function PluginSidebarEditSite( { className, ...props } ) {
-	const showIconLabels = useSelect(
-		( select ) =>
-			!! select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-		[]
-	);
-
 	return (
 		<ComplementaryArea
 			panelClassName={ className }
 			className="edit-site-sidebar-edit-mode"
 			scope="core/edit-site"
-			showIconLabels={ showIconLabels }
 			{ ...props }
 		/>
 	);

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-navigation-menu/rename-modal.js

@@ -27,16 +27,22 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
 					/>
 					<HStack justify="right">
-						<Button variant="tertiary" onClick={ onClose }>
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
 							{ __( 'Cancel' ) }
 						</Button>
 
 						<Button
+							__next40pxDefaultSize
 							disabled={ ! isEditedMenuTitleValid }
 							variant="primary"
 							type="submit"

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)' )
 			) }