@wordpress/edit-site 5.25.0 → 5.26.0

package/src/components/preferences-modal/index.js

@@ -7,15 +7,23 @@ import {
 	PreferencesModalSection,
 	store as interfaceStore,
 } from '@wordpress/interface';
-import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	PostTaxonomies,
+	PostExcerptCheck,
+	PageAttributesCheck,
+	PostFeaturedImageCheck,
+	PostTypeSupportCheck,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
+import EnablePanelOption from './enable-panel-option';
 import { store as editSiteStore } from '../../store';
 
 export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
@@ -28,13 +36,14 @@ export default function EditSitePreferencesModal() {
 	const toggleModal = () =>
 		isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );
 	const registry = useRegistry();
-	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
-		useDispatch( editSiteStore );
+	const { closeGeneralSidebar } = useDispatch( editSiteStore );
+	const { setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editorStore );
 
 	const { set: setPreference } = useDispatch( preferencesStore );
 	const toggleDistractionFree = () => {
 		registry.batch( () => {
-			setPreference( 'core/edit-site', 'fixedToolbar', true );
+			setPreference( 'core', 'fixedToolbar', true );
 			setIsInserterOpened( false );
 			setIsListViewOpened( false );
 			closeGeneralSidebar();
@@ -42,30 +51,83 @@ export default function EditSitePreferencesModal() {
 	};
 
 	const turnOffDistractionFree = () => {
-		setPreference( 'core/edit-site', 'distractionFree', false );
+		setPreference( 'core', 'distractionFree', false );
 	};
 
-	const sections = useMemo( () => [
+	const sections = [
 		{
 			name: 'general',
 			tabLabel: __( 'General' ),
 			content: (
-				<PreferencesModalSection title={ __( 'Interface' ) }>
-					<EnableFeature
-						featureName="showListViewByDefault"
-						help={ __(
-							'Opens the block list view sidebar by default.'
-						) }
-						label={ __( 'Always open list view' ) }
-					/>
-					<EnableFeature
-						featureName="showBlockBreadcrumbs"
-						help={ __(
-							'Shows block breadcrumbs at the bottom of the editor.'
+				<>
+					<PreferencesModalSection title={ __( 'Interface' ) }>
+						<EnableFeature
+							scope="core"
+							featureName="showListViewByDefault"
+							help={ __(
+								'Opens the block list view sidebar by default.'
+							) }
+							label={ __( 'Always open list view' ) }
+						/>
+						<EnableFeature
+							scope="core"
+							featureName="showBlockBreadcrumbs"
+							help={ __(
+								'Shows block breadcrumbs at the bottom of the editor.'
+							) }
+							label={ __( 'Display block breadcrumbs' ) }
+						/>
+						<EnableFeature
+							scope="core"
+							featureName="allowRightClickOverrides"
+							help={ __(
+								'Allows contextual list view menus via right-click, overriding browser defaults.'
+							) }
+							label={ __( 'Allow right-click contextual menus' ) }
+						/>
+					</PreferencesModalSection>
+					<PreferencesModalSection
+						title={ __( 'Document settings' ) }
+						description={ __(
+							'Select what settings are shown in the document panel.'
 						) }
-						label={ __( 'Display block breadcrumbs' ) }
-					/>
-				</PreferencesModalSection>
+					>
+						<PostTaxonomies
+							taxonomyWrapper={ ( content, taxonomy ) => (
+								<EnablePanelOption
+									label={ taxonomy.labels.menu_name }
+									panelName={ `taxonomy-panel-${ taxonomy.slug }` }
+								/>
+							) }
+						/>
+						<PostFeaturedImageCheck>
+							<EnablePanelOption
+								label={ __( 'Featured image' ) }
+								panelName="featured-image"
+							/>
+						</PostFeaturedImageCheck>
+						<PostExcerptCheck>
+							<EnablePanelOption
+								label={ __( 'Excerpt' ) }
+								panelName="post-excerpt"
+							/>
+						</PostExcerptCheck>
+						<PostTypeSupportCheck
+							supportKeys={ [ 'comments', 'trackbacks' ] }
+						>
+							<EnablePanelOption
+								label={ __( 'Discussion' ) }
+								panelName="discussion-panel"
+							/>
+						</PostTypeSupportCheck>
+						<PageAttributesCheck>
+							<EnablePanelOption
+								label={ __( 'Page attributes' ) }
+								panelName="page-attributes"
+							/>
+						</PageAttributesCheck>
+					</PreferencesModalSection>
+				</>
 			),
 		},
 		{
@@ -79,6 +141,7 @@ export default function EditSitePreferencesModal() {
 					) }
 				>
 					<EnableFeature
+						scope="core"
 						featureName="fixedToolbar"
 						onToggle={ turnOffDistractionFree }
 						help={ __(
@@ -87,6 +150,7 @@ export default function EditSitePreferencesModal() {
 						label={ __( 'Top toolbar' ) }
 					/>
 					<EnableFeature
+						scope="core"
 						featureName="distractionFree"
 						onToggle={ toggleDistractionFree }
 						help={ __(
@@ -95,6 +159,7 @@ export default function EditSitePreferencesModal() {
 						label={ __( 'Distraction free' ) }
 					/>
 					<EnableFeature
+						scope="core"
 						featureName="focusMode"
 						help={ __(
 							'Highlights the current block and fades other content.'
@@ -116,6 +181,7 @@ export default function EditSitePreferencesModal() {
 						) }
 					>
 						<EnableFeature
+							scope="core"
 							featureName="keepCaretInsideBlock"
 							help={ __(
 								'Keeps the text cursor within the block boundaries, aiding users with screen readers by preventing unintentional cursor movement outside the block.'
@@ -125,6 +191,7 @@ export default function EditSitePreferencesModal() {
 					</PreferencesModalSection>
 					<PreferencesModalSection title={ __( 'Interface' ) }>
 						<EnableFeature
+							scope="core"
 							featureName="showIconLabels"
 							label={ __( 'Show button text labels' ) }
 							help={ __(
@@ -135,7 +202,25 @@ export default function EditSitePreferencesModal() {
 				</>
 			),
 		},
-	] );
+		{
+			name: 'blocks',
+			tabLabel: __( 'Blocks' ),
+			content: (
+				<>
+					<PreferencesModalSection title={ __( 'Inserter' ) }>
+						<EnableFeature
+							scope="core"
+							featureName="mostUsedBlocks"
+							help={ __(
+								'Adds a category with the most frequently used blocks in the inserter.'
+							) }
+							label={ __( 'Show most used blocks' ) }
+						/>
+					</PreferencesModalSection>
+				</>
+			),
+		},
+	];
 	if ( ! isModalActive ) {
 		return null;
 	}

package/src/components/revisions/index.js

@@ -11,8 +11,7 @@ import {
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
+import { useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,23 +21,18 @@ import { unlock } from '../../lock-unlock';
 import { mergeBaseAndUserConfigs } from '../global-styles/global-styles-provider';
 import EditorCanvasContainer from '../editor-canvas-container';
 
-const { ExperimentalBlockEditorProvider, useGlobalStylesOutputWithConfig } =
-	unlock( blockEditorPrivateApis );
+const {
+	ExperimentalBlockEditorProvider,
+	GlobalStylesContext,
+	useGlobalStylesOutputWithConfig,
+} = unlock( blockEditorPrivateApis );
 
 function isObjectEmpty( object ) {
 	return ! object || Object.keys( object ).length === 0;
 }
 
-function Revisions( { onClose, userConfig, blocks } ) {
-	const { baseConfig } = useSelect(
-		( select ) => ( {
-			baseConfig:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeBaseGlobalStyles(),
-		} ),
-		[]
-	);
+function Revisions( { userConfig, blocks } ) {
+	const { base: baseConfig } = useContext( GlobalStylesContext );
 
 	const mergedConfig = useMemo( () => {
 		if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) {
@@ -71,7 +65,6 @@ function Revisions( { onClose, userConfig, blocks } ) {
 	return (
 		<EditorCanvasContainer
 			title={ __( 'Revisions' ) }
-			onClose={ onClose }
 			closeButtonLabel={ __( 'Close revisions' ) }
 			enableResizing={ true }
 		>

package/src/components/routes/link.js

@@ -15,9 +15,12 @@ import {
 
 const { useHistory } = unlock( routerPrivateApis );
 
-export function useLink( params = {}, state, shouldReplace = false ) {
-	const history = useHistory();
-
+export function getPostLinkProps(
+	history,
+	params = {},
+	state,
+	shouldReplace = false
+) {
 	function onClick( event ) {
 		event.preventDefault();
 
@@ -49,6 +52,11 @@ export function useLink( params = {}, state, shouldReplace = false ) {
 	};
 }
 
+export function useLink( params, state, shouldReplace ) {
+	const history = useHistory();
+	return getPostLinkProps( history, params, state, shouldReplace );
+}
+
 export default function Link( {
 	params = {},
 	state,

package/src/components/save-button/index.js

@@ -60,13 +60,26 @@ export default function SaveButton( {
 	const getLabel = () => {
 		if ( isPreviewingTheme() ) {
 			if ( isSaving ) {
-				return sprintf( 'Activating %s', previewingThemeName );
+				return sprintf(
+					/* translators: %s: The name of theme to be activated. */
+					__( 'Activating %s' ),
+					previewingThemeName
+				);
 			} else if ( disabled ) {
 				return __( 'Saved' );
 			} else if ( isDirty ) {
-				return sprintf( 'Activate %s & Save', previewingThemeName );
+				return sprintf(
+					/* translators: %s: The name of theme to be activated. */
+					__( 'Activate %s & Save' ),
+					previewingThemeName
+				);
 			}
-			return sprintf( 'Activate %s', previewingThemeName );
+
+			return sprintf(
+				/* translators: %s: The name of theme to be activated. */
+				__( 'Activate %s' ),
+				previewingThemeName
+			);
 		}
 
 		if ( isSaving ) {

package/src/components/sidebar/index.js

@@ -7,7 +7,6 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
@@ -32,9 +31,8 @@ import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen
 import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
+import SidebarNavigationScreenPagesDataViews from '../sidebar-navigation-screen-pages-dataviews';
 import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import DataViewsSidebarContent from '../sidebar-dataviews';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -68,20 +66,15 @@ function SidebarScreens() {
 				<SidebarNavigationScreenGlobalStyles />
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page">
-				<SidebarNavigationScreenPages />
+				{ window?.__experimentalAdminViews ? (
+					<SidebarNavigationScreenPagesDataViews />
+				) : (
+					<SidebarNavigationScreenPages />
+				) }
 			</SidebarScreenWrapper>
 			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />
 			</SidebarScreenWrapper>
-			{ window?.__experimentalAdminViews && (
-				<SidebarScreenWrapper path="/pages">
-					<SidebarNavigationScreen
-						title={ __( 'Pages' ) }
-						backPath="/page"
-						content={ <DataViewsSidebarContent /> }
-					/>
-				</SidebarScreenWrapper>
-			) }
 			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</SidebarScreenWrapper>

package/src/components/sidebar-dataviews/add-new-view.js

@@ -19,7 +19,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import DEFAULT_VIEWS from './default-views';
+import { DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 
 const { useHistory, useLocation } = unlock( routerPrivateApis );

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

@@ -7,10 +7,27 @@ import { trash } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { LAYOUT_TABLE, OPERATOR_IN } from '../../utils/constants';
+import {
+	LAYOUT_LIST,
+	LAYOUT_TABLE,
+	LAYOUT_GRID,
+	OPERATOR_IN,
+} from '../../utils/constants';
+
+export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
+	[ LAYOUT_TABLE ]: {},
+	[ LAYOUT_GRID ]: {
+		mediaField: 'featured-image',
+		primaryField: 'title',
+	},
+	[ LAYOUT_LIST ]: {
+		primaryField: 'title',
+		mediaField: 'featured-image',
+	},
+};
 
 const DEFAULT_PAGE_BASE = {
-	type: LAYOUT_TABLE,
+	type: LAYOUT_LIST,
 	search: '',
 	filters: [],
 	page: 1,
@@ -22,10 +39,12 @@ const DEFAULT_PAGE_BASE = {
 	// All fields are visible by default, so it's
 	// better to keep track of the hidden ones.
 	hiddenFields: [ 'date', 'featured-image' ],
-	layout: {},
+	layout: {
+		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
+	},
 };
 
-const DEFAULT_VIEWS = {
+export const DEFAULT_VIEWS = {
 	page: [
 		{
 			title: __( 'All' ),
@@ -55,5 +74,3 @@ const DEFAULT_VIEWS = {
 		},
 	],
 };
-
-export default DEFAULT_VIEWS;

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

@@ -8,14 +8,14 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 
-import { default as DEFAULT_VIEWS } from './default-views';
+import { DEFAULT_VIEWS } from './default-views';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
 const PATH_TO_TYPE = {
-	'/pages': 'page',
+	'/page': 'page',
 };
 
 export default function DataViewsSidebarContent() {

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,7 +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 { store as editorStore } from '@wordpress/editor';
+import {
+	PageAttributesPanel,
+	PostDiscussionPanel,
+	PostExcerptPanel,
+	PostFeaturedImagePanel,
+	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
+	store as editorStore,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -94,6 +102,12 @@ export default function PagePanels() {
 					<PageContent />
 				</PanelBody>
 			) }
+			<PostLastRevisionPanel />
+			<PostTaxonomiesPanel />
+			<PostFeaturedImagePanel />
+			<PostExcerptPanel />
+			<PostDiscussionPanel />
+			<PageAttributesPanel />
 		</>
 	);
 }

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 }
 		/>
 	);