@wordpress/edit-site 5.13.0 → 5.14.0

package/src/components/{page-library → page-patterns}/patterns-list.js

@@ -51,19 +51,19 @@ export default function PatternsList( { categoryId, type } ) {
 						icon={ isRTL() ? chevronRight : chevronLeft }
 						label={ __( 'Back' ) }
 						onClick={ () => {
-							// Go back in history if we came from the library page.
+							// Go back in history if we came from the Patterns page.
 							// Otherwise push a stack onto the history.
-							if ( location.state?.backPath === '/library' ) {
+							if ( location.state?.backPath === '/patterns' ) {
 								history.back();
 							} else {
-								history.push( { path: '/library' } );
+								history.push( { path: '/patterns' } );
 							}
 						} }
 					/>
 				) }
 				<FlexBlock>
 					<SearchControl
-						className="edit-site-library__search"
+						className="edit-site-patterns__search"
 						onChange={ ( value ) => setFilterValue( value ) }
 						placeholder={ __( 'Search patterns' ) }
 						label={ __( 'Search patterns' ) }
@@ -75,8 +75,10 @@ export default function PatternsList( { categoryId, type } ) {
 			{ isResolving && __( 'Loading' ) }
 			{ ! isResolving && !! syncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
-						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+					<VStack className="edit-site-patterns__section-header">
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Synced' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that are kept in sync across your site'
@@ -86,15 +88,17 @@ export default function PatternsList( { categoryId, type } ) {
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ __( 'Synced patterns' ) }
+						label={ __( 'Synced' ) }
 						items={ syncedPatterns }
 					/>
 				</>
 			) }
 			{ ! isResolving && !! unsyncedPatterns.length && (
 				<>
-					<VStack className="edit-site-library__section-header">
-						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+					<VStack className="edit-site-patterns__section-header">
+						<Heading as="h2" level={ 4 }>
+							{ __( 'Standard' ) }
+						</Heading>
 						<Text variant="muted" as="p">
 							{ __(
 								'Patterns that can be changed freely without affecting your site'

package/src/components/{page-library → page-patterns}/style.scss

@@ -1,4 +1,4 @@
-.edit-site-library {
+.edit-site-patterns {
 	background: rgba(0, 0, 0, 0.05);
 	margin: $header-height 0 0;
 	.components-text {
@@ -6,7 +6,7 @@
 	}
 
 	.components-heading {
-		color: $white;
+		color: $gray-200;
 	}
 
 	@include break-medium {
@@ -14,7 +14,7 @@
 	}
 }
 
-.edit-site-library__grid {
+.edit-site-patterns__grid {
 	column-gap: $grid-unit-30;
 	@include break-large() {
 		column-count: 2;
@@ -25,13 +25,13 @@
 	padding-top: $border-width-focus-fallback;
 	margin-bottom: $grid-unit-40;
 
-	.edit-site-library__pattern {
+	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;
 		flex-direction: column;
 		margin-bottom: $grid-unit-60;
 
-		.edit-site-library__preview {
+		.edit-site-patterns__preview {
 			border-radius: $radius-block-ui;
 			cursor: pointer;
 			overflow: hidden;
@@ -48,12 +48,12 @@
 			}
 		}
 
-		.edit-site-library__footer,
-		.edit-site-library__button {
+		.edit-site-patterns__footer,
+		.edit-site-patterns__button {
 			color: $gray-600;
 		}
 
-		&.is-placeholder .edit-site-library__preview {
+		&.is-placeholder .edit-site-patterns__preview {
 			min-height: $grid-unit-80;
 			color: $gray-600;
 			border: 1px dashed $gray-800;
@@ -67,7 +67,7 @@
 		}
 	}
 
-	.edit-site-library__preview {
+	.edit-site-patterns__preview {
 		flex: 1;
 		margin-bottom: $grid-unit-20;
 	}
@@ -75,10 +75,10 @@
 
 // The increased specificity here is to overcome component styles
 // without relying on internal component class names.
-.edit-site-library__search {
+.edit-site-patterns__search {
 	&#{&} input[type="search"] {
 		background: $gray-800;
-		color: $gray-100;
+		color: $gray-200;
 
 		&:focus {
 			background: $gray-800;
@@ -90,16 +90,20 @@
 	}
 }
 
-.edit-site-library__pattern-title {
-	color: $gray-600;
+.edit-site-patterns__pattern-title {
+	color: $gray-200;
 
-	svg {
+	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
 		fill: $white;
 	}
+
+	.edit-site-patterns__pattern-lock-icon {
+		display: inline-flex;
+	}
 }
 
-.edit-site-library__no-results {
+.edit-site-patterns__no-results {
 	color: $gray-600;
 }

package/src/components/{page-library/use-library-settings.js → page-patterns/use-pattern-settings.js}

@@ -12,7 +12,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import { filterOutDuplicatesByName } from './utils';
 
-export default function useLibrarySettings() {
+export default function usePatternSettings() {
 	const storedSettings = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 		return getSettings();

package/src/components/{page-library → page-patterns}/use-patterns.js

@@ -38,6 +38,15 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
+const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
+const templatePartHasCategory = ( item, category ) => {
+	if ( category === 'uncategorized' ) {
+		return ! templatePartCategories.includes( item.templatePart.area );
+	}
+
+	return item.templatePart.area === category;
+};
+
 const useTemplatePartsAsPatterns = (
 	categoryId,
 	postType = TEMPLATE_PARTS,
@@ -83,7 +92,7 @@ const useTemplatePartsAsPatterns = (
 
 		return searchItems( templateParts, filterValue, {
 			categoryId,
-			hasCategory: ( item, area ) => item.templatePart.area === area,
+			hasCategory: templatePartHasCategory,
 		} );
 	}, [ templateParts, filterValue, categoryId ] );
 
@@ -145,7 +154,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status,
+	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,

package/src/components/{page-library → page-patterns}/utils.js

@@ -1,9 +1,9 @@
-export const DEFAULT_CATEGORY = 'header';
-export const DEFAULT_TYPE = 'wp_template_part';
+export const DEFAULT_CATEGORY = 'my-patterns';
+export const DEFAULT_TYPE = 'wp_block';
 export const PATTERNS = 'pattern';
 export const TEMPLATE_PARTS = 'wp_template_part';
 export const USER_PATTERNS = 'wp_block';
-export const USER_PATTERN_CATEGORY = 'custom-patterns';
+export const USER_PATTERN_CATEGORY = 'my-patterns';
 
 export const CORE_PATTERN_SOURCES = [
 	'core',

package/src/components/page-template-parts/index.js

@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	VisuallyHidden,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import Table from '../table';
+import Link from '../routes/link';
+import AddedBy from '../list/added-by';
+import TemplateActions from '../template-actions';
+import AddNewTemplate from '../add-new-template';
+import { store as editSiteStore } from '../../store';
+
+export default function PageTemplateParts() {
+	const { records: templateParts } = useEntityRecords(
+		'postType',
+		'wp_template_part',
+		{
+			per_page: -1,
+		}
+	);
+
+	const { canCreate } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			canCreate: ! supportsTemplatePartsMode,
+		};
+	} );
+
+	const columns = [
+		{
+			header: __( 'Template Part' ),
+			cell: ( templatePart ) => (
+				<VStack>
+					<Heading as="h3" level={ 5 }>
+						<Link
+							params={ {
+								postId: templatePart.id,
+								postType: templatePart.type,
+								canvas: 'view',
+							} }
+							state={ { backPath: '/wp_template_part/all' } }
+						>
+							{ decodeEntities(
+								templatePart.title?.rendered ||
+									templatePart.slug
+							) }
+						</Link>
+					</Heading>
+				</VStack>
+			),
+			maxWidth: 400,
+		},
+		{
+			header: __( 'Added by' ),
+			cell: ( templatePart ) => (
+				<AddedBy
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+		{
+			header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
+			cell: ( templatePart ) => (
+				<TemplateActions
+					postType={ templatePart.type }
+					postId={ templatePart.id }
+				/>
+			),
+		},
+	];
+
+	return (
+		<Page
+			title={ __( 'Template Parts' ) }
+			actions={
+				canCreate && (
+					<AddNewTemplate
+						templateType={ 'wp_template_part' }
+						showIcon={ false }
+						toggleProps={ { variant: 'primary' } }
+					/>
+				)
+			}
+		>
+			{ templateParts && (
+				<Table data={ templateParts } columns={ columns } />
+			) }
+		</Page>
+	);
+}

package/src/components/page-templates/index.js

@@ -46,7 +46,7 @@ export default function PageTemplates() {
 			header: __( 'Template' ),
 			cell: ( template ) => (
 				<VStack>
-					<Heading level={ 5 }>
+					<Heading as="h3" level={ 5 }>
 						<Link
 							params={ {
 								postId: template.id,

package/src/components/preferences-modal/enable-feature.js

@@ -6,14 +6,17 @@ import { ___unstablePreferencesModalBaseOption as BaseOption } from '@wordpress/
 import { store as preferencesStore } from '@wordpress/preferences';
 
 export default function EnableFeature( props ) {
-	const { featureName, ...remainingProps } = props;
+	const { featureName, onToggle = () => {}, ...remainingProps } = props;
 	const isChecked = useSelect(
 		( select ) =>
 			!! select( preferencesStore ).get( 'core/edit-site', featureName ),
 		[ featureName ]
 	);
 	const { toggle } = useDispatch( preferencesStore );
-	const onChange = () => toggle( 'core/edit-site', featureName );
+	const onChange = () => {
+		onToggle();
+		toggle( 'core/edit-site', featureName );
+	};
 	return (
 		<BaseOption
 			onChange={ onChange }

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

@@ -5,19 +5,42 @@ import {
 	PreferencesModal,
 	PreferencesModalTabs,
 	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';
 
 /**
  * Internal dependencies
  */
 import EnableFeature from './enable-feature';
+import { store as editSiteStore } from '../../store';
+
+export const PREFERENCES_MODAL_NAME = 'edit-site/preferences';
+
+export default function EditSitePreferencesModal() {
+	const isModalActive = useSelect( ( select ) =>
+		select( interfaceStore ).isModalActive( PREFERENCES_MODAL_NAME )
+	);
+	const { closeModal, openModal } = useDispatch( interfaceStore );
+	const toggleModal = () =>
+		isModalActive ? closeModal() : openModal( PREFERENCES_MODAL_NAME );
+	const registry = useRegistry();
+	const { closeGeneralSidebar, setIsListViewOpened, setIsInserterOpened } =
+		useDispatch( editSiteStore );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const toggleDistractionFree = () => {
+		registry.batch( () => {
+			setPreference( 'core/edit-site', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+		} );
+	};
 
-export default function EditSitePreferencesModal( {
-	isModalActive,
-	toggleModal,
-} ) {
 	const sections = useMemo( () => [
 		{
 			name: 'general',
@@ -29,6 +52,14 @@ export default function EditSitePreferencesModal( {
 						'Customize options related to the block editor interface and editing flow.'
 					) }
 				>
+					<EnableFeature
+						featureName="distractionFree"
+						onToggle={ toggleDistractionFree }
+						help={ __(
+							'Reduce visual distractions by hiding the toolbar and other elements to focus on writing.'
+						) }
+						label={ __( 'Distraction free' ) }
+					/>
 					<EnableFeature
 						featureName="focusMode"
 						help={ __(

package/src/components/sidebar/index.js

@@ -12,9 +12,9 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  * Internal dependencies
  */
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
-import SidebarNavigationScreenLibrary from '../sidebar-navigation-screen-library';
 import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
 import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
+import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
 import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 import useSyncPathWithURL, {
 	getPathFromURL,
@@ -56,15 +56,15 @@ function SidebarScreens() {
 			<NavigatorScreen path="/:postType(wp_template)">
 				<SidebarNavigationScreenTemplates />
 			</NavigatorScreen>
-			<NavigatorScreen path="/library">
-				<SidebarNavigationScreenLibrary />
+			<NavigatorScreen path="/patterns">
+				<SidebarNavigationScreenPatterns />
+			</NavigatorScreen>
+			<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
+				<SidebarNavigationScreenTemplatesBrowse />
 			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
 				<SidebarNavigationScreenPattern />
 			</NavigatorScreen>
-			<NavigatorScreen path="/:postType(wp_template)/all">
-				<SidebarNavigationScreenTemplatesBrowse />
-			</NavigatorScreen>
 			<NavigatorScreen path="/:postType(wp_template)/:postId">
 				<SidebarNavigationScreenTemplate />
 			</NavigatorScreen>

package/src/components/sidebar-button/style.scss

@@ -19,6 +19,6 @@
 	&:focus,
 	&:not([aria-disabled="true"]):active,
 	&[aria-expanded="true"] {
-		color: $white;
+		color: $gray-100;
 	}
 }

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

@@ -56,11 +56,13 @@ export function SidebarComplementaryAreaFills() {
 	useEffect( () => {
 		// Don't automatically switch tab when the sidebar is closed or when we
 		// are focused on page content.
-		if ( ! isEditorSidebarOpened || hasPageContentFocus ) {
+		if ( ! isEditorSidebarOpened ) {
 			return;
 		}
 		if ( hasBlockSelection ) {
-			enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			if ( ! hasPageContentFocus ) {
+				enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK );
+			}
 		} else {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}

package/src/components/sidebar-edit-mode/settings-header/index.js

@@ -18,6 +18,12 @@ import { STORE_NAME } from '../../../store/constants';
 import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants';
 import { store as editSiteStore } from '../../../store';
 
+const entityLabels = {
+	wp_navigation: __( 'Navigation' ),
+	wp_block: __( 'Pattern' ),
+	wp_template: __( 'Template' ),
+};
+
 const SettingsHeader = ( { sidebarName } ) => {
 	const { hasPageContentFocus, entityType } = useSelect( ( select ) => {
 		const { getEditedPostType, hasPageContentFocus: _hasPageContentFocus } =
@@ -29,8 +35,7 @@ const SettingsHeader = ( { sidebarName } ) => {
 		};
 	} );
 
-	const entityLabel =
-		entityType === 'wp_navigation' ? __( 'Navigation' ) : __( 'Template' );
+	const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template;
 
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 	const openTemplateSettings = () =>

package/src/components/sidebar-navigation-item/style.scss

@@ -9,12 +9,13 @@
 	&:hover,
 	&:focus,
 	&[aria-current] {
-		color: $white;
+		color: $gray-200;
 		background: $gray-800;
 	}
 
 	&[aria-current] {
 		background: var(--wp-admin-theme-color);
+		color: $white;
 	}
 
 	.edit-site-sidebar-navigation-item__drilldown-indicator {

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

@@ -61,7 +61,8 @@ export default function SidebarNavigationScreen( {
 						<NavigatorToParentButton
 							as={ SidebarButton }
 							icon={ isRTL() ? chevronRight : chevronLeft }
-							aria-label={ __( 'Back' ) }
+							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ ! isRoot && backPath && (
@@ -69,6 +70,7 @@ export default function SidebarNavigationScreen( {
 							onClick={ () => goTo( backPath, { isBack: true } ) }
 							icon={ icon }
 							label={ __( 'Back' ) }
+							showTooltip={ false }
 						/>
 					) }
 					{ isRoot && (
@@ -88,7 +90,7 @@ export default function SidebarNavigationScreen( {
 					) }
 					<Heading
 						className="edit-site-sidebar-navigation-screen__title"
-						color={ 'white' }
+						color={ '#e0e0e0' /* $gray-200 */ }
 						level={ 1 }
 						size={ 20 }
 					>

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

@@ -12,7 +12,6 @@
 }
 
 .edit-site-sidebar-navigation-screen__content {
-	color: $gray-400;
 	padding: 0 $grid-unit-20;
 
 	.components-item-group {
@@ -65,6 +64,8 @@
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
 	padding: $grid-unit-15 * 0.5 0 0 0;
+	overflow: hidden;
+	overflow-wrap: break-word;
 }
 
 .edit-site-sidebar-navigation-screen__actions {
@@ -106,7 +107,11 @@
 .edit-site-sidebar-navigation-screen__input-control {
 	width: 100%;
 	.components-input-control__container {
-		background: transparent;
+		background: $gray-800;
+
+		.components-button {
+			color: $gray-200 !important;
+		}
 	}
 	.components-input-control__input {
 		color: $gray-200 !important;

package/src/components/sidebar-navigation-screen-details-panel/style.scss

@@ -1,5 +1,5 @@
 .edit-site-sidebar-navigation-details-screen-panel {
-	margin-bottom: $grid-unit-30;
+	margin: $grid-unit-30 0;
 
 	&:last-of-type {
 		margin-bottom: 0;