@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.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,31 +36,121 @@ 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();
 		} );
 	};
 
-	const sections = useMemo( () => [
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
+	const sections = [
 		{
 			name: 'general',
 			tabLabel: __( 'General' ),
+			content: (
+				<>
+					<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.'
+						) }
+					>
+						<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>
+				</>
+			),
+		},
+		{
+			name: 'appearance',
+			tabLabel: __( 'Appearance' ),
 			content: (
 				<PreferencesModalSection
 					title={ __( 'Appearance' ) }
 					description={ __(
-						'Customize options related to the block editor interface and editing flow.'
+						'Customize the editor interface to suit your needs.'
 					) }
 				>
 					<EnableFeature
+						scope="core"
+						featureName="fixedToolbar"
+						onToggle={ turnOffDistractionFree }
+						help={ __(
+							'Access all block and document tools in a single place.'
+						) }
+						label={ __( 'Top toolbar' ) }
+					/>
+					<EnableFeature
+						scope="core"
 						featureName="distractionFree"
 						onToggle={ toggleDistractionFree }
 						help={ __(
@@ -61,55 +159,68 @@ export default function EditSitePreferencesModal() {
 						label={ __( 'Distraction free' ) }
 					/>
 					<EnableFeature
+						scope="core"
 						featureName="focusMode"
 						help={ __(
 							'Highlights the current block and fades other content.'
 						) }
 						label={ __( 'Spotlight mode' ) }
 					/>
-					<EnableFeature
-						featureName="showIconLabels"
-						label={ __( 'Show button text labels' ) }
-						help={ __( 'Show text instead of icons on buttons.' ) }
-					/>
-					<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.'
-						) }
-						label={ __( 'Display block breadcrumbs' ) }
-					/>
 				</PreferencesModalSection>
 			),
 		},
+		{
+			name: 'accessibility',
+			tabLabel: __( 'Accessibility' ),
+			content: (
+				<>
+					<PreferencesModalSection
+						title={ __( 'Navigation' ) }
+						description={ __(
+							'Optimize the editing experience for enhanced control.'
+						) }
+					>
+						<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.'
+							) }
+							label={ __( 'Contain text cursor inside block' ) }
+						/>
+					</PreferencesModalSection>
+					<PreferencesModalSection title={ __( 'Interface' ) }>
+						<EnableFeature
+							scope="core"
+							featureName="showIconLabels"
+							label={ __( 'Show button text labels' ) }
+							help={ __(
+								'Show text instead of icons on buttons across the interface.'
+							) }
+						/>
+					</PreferencesModalSection>
+				</>
+			),
+		},
 		{
 			name: 'blocks',
 			tabLabel: __( 'Blocks' ),
 			content: (
-				<PreferencesModalSection
-					title={ __( 'Block interactions' ) }
-					description={ __(
-						'Customize how you interact with blocks in the block library and editing canvas.'
-					) }
-				>
-					<EnableFeature
-						featureName="keepCaretInsideBlock"
-						help={ __(
-							'Aids screen readers by stopping text caret from leaving blocks.'
-						) }
-						label={ __( 'Contain text cursor inside block' ) }
-					/>
-				</PreferencesModalSection>
+				<>
+					<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/routes/use-title.js

@@ -38,8 +38,8 @@ export default function useTitle( title ) {
 		if ( title && siteTitle ) {
 			// @see https://github.com/WordPress/wordpress-develop/blob/94849898192d271d533e09756007e176feb80697/src/wp-admin/admin-header.php#L67-L68
 			const formattedTitle = sprintf(
-				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
-				__( '%1$s ‹ %2$s — WordPress' ),
+				/* translators: Admin document title. 1: Admin screen name, 2: Network or site name. */
+				__( '%1$s ‹ %2$s ‹ Editor — WordPress' ),
 				decodeEntities( title ),
 				decodeEntities( siteTitle )
 			);
@@ -47,14 +47,7 @@ export default function useTitle( title ) {
 			document.title = formattedTitle;
 
 			// Announce title on route change for screen readers.
-			speak(
-				sprintf(
-					/* translators: The page title that is currently displaying. */
-					__( 'Now displaying: %s' ),
-					document.title
-				),
-				'assertive'
-			);
+			speak( title, 'assertive' );
 		}
 	}, [ title, siteTitle, location ] );
 }

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 ) {
@@ -103,6 +116,7 @@ export default function SaveButton( {
 			showTooltip={ showTooltip }
 			icon={ icon }
 			__next40pxDefaultSize={ __next40pxDefaultSize }
+			size="compact"
 		>
 			{ label }
 		</Button>

package/src/components/sidebar/index.js

@@ -1,8 +1,12 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { memo, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
@@ -27,59 +31,65 @@ 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 );
 
+function SidebarScreenWrapper( { className, ...props } ) {
+	return (
+		<NavigatorScreen
+			className={ classNames(
+				'edit-site-sidebar__screen-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 function SidebarScreens() {
 	useSyncPathWithURL();
 
 	return (
 		<>
-			<NavigatorScreen path="/">
+			<SidebarScreenWrapper path="/">
 				<SidebarNavigationScreenMain />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation">
 				<SidebarNavigationScreenNavigationMenus />
-			</NavigatorScreen>
-			<NavigatorScreen path="/navigation/:postType/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/navigation/:postType/:postId">
 				<SidebarNavigationScreenNavigationMenu />
-			</NavigatorScreen>
-			<NavigatorScreen path="/wp_global_styles">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page">
-				<SidebarNavigationScreenPages />
-			</NavigatorScreen>
-			<NavigatorScreen path="/page/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page">
+				{ window?.__experimentalAdminViews ? (
+					<SidebarNavigationScreenPagesDataViews />
+				) : (
+					<SidebarNavigationScreenPages />
+				) }
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/page/:postId">
 				<SidebarNavigationScreenPage />
-			</NavigatorScreen>
-			{ window?.__experimentalAdminViews && (
-				<NavigatorScreen path="/pages">
-					<SidebarNavigationScreen
-						title={ __( 'Pages' ) }
-						backPath="/page"
-						content={ <DataViewsSidebarContent /> }
-					/>
-				</NavigatorScreen>
-			) }
-			<NavigatorScreen path="/:postType(wp_template)">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
-			</NavigatorScreen>
-			<NavigatorScreen path="/patterns">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/patterns">
 				<SidebarNavigationScreenPatterns />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
 				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
-			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/:postId">
+			</SidebarScreenWrapper>
+			<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
-			</NavigatorScreen>
+			</SidebarScreenWrapper>
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -1,14 +1,17 @@
 .edit-site-sidebar__content {
 	flex-grow: 1;
 	overflow-y: auto;
+}
+
+.edit-site-sidebar__screen-wrapper {
+	@include custom-scrollbars-on-hover(transparent, $gray-700);
+	scrollbar-gutter: stable;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
 
-	.components-navigator-screen {
-		@include custom-scrollbars-on-hover(transparent, $gray-700);
-		scrollbar-gutter: stable;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
+	// This matches the logo padding
+	padding: 0 $grid-unit-15;
 }
 
 .edit-site-sidebar__footer {
@@ -17,8 +20,3 @@
 	margin: 0 $canvas-padding;
 	padding: $canvas-padding 0;
 }
-
-.edit-site-sidebar__content > div {
-	// This matches the logo padding
-	padding: 0 $grid-unit-15;
-}

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/dataview-item.js

@@ -6,9 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { page, columns, pullRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { __experimentalHStack as HStack } from '@wordpress/components';
+import { VIEW_LAYOUTS } from '@wordpress/dataviews';
 
 /**
  * Internal dependencies
@@ -18,11 +18,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { unlock } from '../../lock-unlock';
 const { useLocation } = unlock( routerPrivateApis );
 
-function getDataViewIcon( type ) {
-	const icons = { list: page, grid: columns, 'side-by-side': pullRight };
-	return icons[ type ];
-}
-
 export default function DataViewItem( {
 	title,
 	slug,
@@ -37,7 +32,8 @@ export default function DataViewItem( {
 		params: { path },
 	} = useLocation();
 
-	const iconToUse = icon || getDataViewIcon( type );
+	const iconToUse =
+		icon || VIEW_LAYOUTS.find( ( v ) => v.type === type ).icon;
 
 	const linkInfo = useLink( {
 		path,

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

@@ -7,10 +7,27 @@ import { trash } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { OPERATOR_IN } from '../dataviews/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: 'list',
+	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() {