@wordpress/edit-site 6.50.0 → 7.0.0

package/src/components/page-patterns/fields.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useMemo, useId } from '@wordpress/element';
 import { BlockPreview } from '@wordpress/block-editor';
 import { parse } from '@wordpress/blocks';
@@ -10,11 +10,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import {
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	OPERATOR_IS,
-} from '../../utils/constants';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useStyle } = unlock( editorPrivateApis );
@@ -65,47 +61,3 @@ export const previewField = {
 	render: PreviewField,
 	enableSorting: false,
 };
-
-const SYNC_FILTERS = [
-	{
-		value: PATTERN_SYNC_TYPES.full,
-		label: _x( 'Synced', 'pattern (singular)' ),
-		description: __( 'Patterns that are kept in sync across the site.' ),
-	},
-	{
-		value: PATTERN_SYNC_TYPES.unsynced,
-		label: _x( 'Not synced', 'pattern (singular)' ),
-		description: __(
-			'Patterns that can be changed freely without affecting the site.'
-		),
-	},
-];
-
-export const patternStatusField = {
-	label: __( 'Sync status' ),
-	id: 'sync-status',
-	render: ( { item } ) => {
-		const syncStatus =
-			'wp_pattern_sync_status' in item
-				? item.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full
-				: PATTERN_SYNC_TYPES.unsynced;
-		// User patterns can have their sync statuses checked directly.
-		// Non-user patterns are all unsynced for the time being.
-		return (
-			<span
-				className={ `edit-site-patterns__field-sync-status-${ syncStatus }` }
-			>
-				{
-					SYNC_FILTERS.find( ( { value } ) => value === syncStatus )
-						.label
-				}
-			</span>
-		);
-	},
-	elements: SYNC_FILTERS,
-	filterBy: {
-		operators: [ OPERATOR_IS ],
-		isPrimary: true,
-	},
-	enableSorting: false,
-};

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

@@ -26,12 +26,11 @@ import { unlock } from '../../lock-unlock';
 import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsActions from './actions';
 import { useEditPostAction } from '../dataviews-actions';
-import { patternStatusField, previewField } from './fields';
+import { previewField } from './fields';
 import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-const { usePostActions, usePostFields, patternTitleField } =
-	unlock( editorPrivateApis );
+const { usePostActions, usePostFields } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
@@ -104,27 +103,10 @@ export default function DataviewsPatterns() {
 		syncStatus: viewSyncStatus,
 	} );
 
-	const templatePartFields = usePostFields( {
-		postType: TEMPLATE_PART_POST_TYPE,
-	} );
-	const templatePartAuthorField = templatePartFields.find(
-		( field ) => field.id === 'author'
-	);
-
+	const postTypeFields = usePostFields( { postType } );
 	const fields = useMemo( () => {
-		const _fields = [ previewField, patternTitleField ];
-
-		if ( postType === PATTERN_TYPES.user ) {
-			_fields.push( patternStatusField );
-		} else if (
-			postType === TEMPLATE_PART_POST_TYPE &&
-			templatePartAuthorField
-		) {
-			_fields.push( templatePartAuthorField );
-		}
-
-		return _fields;
-	}, [ postType, templatePartAuthorField ] );
+		return [ previewField, ...( postTypeFields || [] ) ];
+	}, [ postTypeFields ] );
 
 	const { data, paginationInfo } = useMemo( () => {
 		// Search is managed server-side as well as filters for patterns.

package/src/components/page-patterns/style.scss

@@ -67,7 +67,7 @@
 
 .edit-site-page-patterns-dataviews {
 	.dataviews-view-grid__badge-fields {
-		.dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
+		.dataviews-view-grid__field-value:has(.fields-field__pattern-sync-status-fully) {
 			background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 			color: var(--wp-block-synced-color);
 		}

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

@@ -67,9 +67,8 @@ const EntitiesSavedStatesForPreview = ( {
 	);
 
 	const activateTheme = useActivateTheme();
-	const onSave = async ( values ) => {
+	const onSave = async () => {
 		await activateTheme();
-		return values;
 	};
 
 	return (

package/src/components/sidebar/style.scss

@@ -4,6 +4,8 @@
 
 .edit-site-sidebar__content {
 	flex-grow: 1;
+	flex-basis: 0;
+	min-height: 0;
 	overflow-y: auto;
 	// Prevents horizontal overflow while animating screen transitions
 	overflow-x: hidden;

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

@@ -2,17 +2,9 @@
 	color: var(--wpds-color-foreground-interactive-neutral);
 	flex-shrink: 0;
 
-	// Focus (resets default button focus and use focus-visible).
-	&:focus:not(:disabled) {
-		box-shadow: none;
+	&:focus:not(:focus-visible) {
 		outline: none;
 	}
-	&:focus-visible:not(:disabled) {
-		box-shadow:
-			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-admin-theme-color);
-		outline: 3px solid transparent;
-	}
 
 	&:hover:not(:disabled,[aria-disabled="true"]),
 	&:focus-visible,

package/src/components/sidebar-global-styles/style.scss

@@ -16,11 +16,14 @@
 		padding-right: 0;
 
 		.global-styles-ui-sidebar__navigator-screen {
-			padding-top: $grid-unit-15;
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
-			padding-bottom: $grid-unit-15;
+			padding: $grid-unit-15;
 			outline: none;
+
+			.global-styles-ui-color-palette__tablist-container {
+				margin-inline: -$grid-unit-15;
+				width: calc(100% + #{$grid-unit-15 * 2});
+				padding-inline: $grid-unit-15;
+			}
 		}
 	}
 	.edit-site-sidebar-button {

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

@@ -1,3 +1,4 @@
+@use "@wordpress/base-styles/mixins";
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-sidebar-navigation-item.components-item {
@@ -10,21 +11,24 @@
 	&:hover,
 	&:focus,
 	&[aria-current="true"] {
-		color: var(--wpds-color-foreground-interactive-neutral-active);
+		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 
 		.edit-site-sidebar-navigation-item__drilldown-indicator {
-			fill: var(--wpds-color-foreground-interactive-neutral-active);
+			fill: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 
 	&[aria-current="true"] {
 		background: var(--wpds-color-background-interactive-neutral-weak-active);
-		color: var(--wpds-color-foreground-interactive-neutral-active);
-		font-weight: $font-weight-medium;
+		color: var(--wpds-color-foreground-interactive-neutral-weak-active);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 	}
 
 	// Make sure the focus style is drawn on top of the current item background.
 	&:focus-visible {
+		// TODO: remove once the <Item> component has migrated to the WPDS focus color token.
+		--wp-components-color-accent: var(--wpds-color-stroke-focus);
+
 		transform: translateZ(0);
 	}
 

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

@@ -35,7 +35,7 @@
 	position: sticky;
 	top: 0;
 	background: var(--wpds-color-background-surface-neutral-weak);
-	padding-top: $grid-unit-60;
+	padding-top: $grid-unit-40;
 	margin-bottom: $grid-unit-10;
 	padding-bottom: $grid-unit-10;
 	// Title needs to appear above other UI in the section content.

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

@@ -27,7 +27,7 @@
 		&:hover,
 		&:focus,
 		&[aria-current] {
-			color: var(--wpds-color-foreground-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 
@@ -35,7 +35,7 @@
 		color: var(--wpds-color-foreground-interactive-neutral-weak);
 		&:hover,
 		&:focus {
-			color: var(--wpds-color-foreground-interactive-neutral-active);
+			color: var(--wpds-color-foreground-interactive-neutral-weak-active);
 		}
 	}
 

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

@@ -21,7 +21,7 @@
 
 	h2 {
 		font-size: 11px;
-		font-weight: $font-weight-medium;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		text-transform: uppercase;
 	}
 }

package/src/components/site-editor-routes/styles.js

@@ -16,7 +16,7 @@ import SidebarGlobalStyles from '../sidebar-global-styles';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 const { StyleBookPreview } = unlock( editorPrivateApis );
 
-function StylesPreviewArea() {
+function StylesPreviewArea( { siteData } ) {
 	const { path, query } = useLocation();
 	const history = useHistory();
 	const isStylebook = query.preview === 'stylebook';
@@ -36,6 +36,7 @@ function StylesPreviewArea() {
 			<StyleBookPreview
 				path={ section }
 				onPathChange={ onChangeSection }
+				settings={ siteData.editorSettings }
 			/>
 		);
 	}
@@ -49,7 +50,9 @@ export const stylesRoute = {
 	areas: {
 		content: <SidebarGlobalStyles />,
 		sidebar: <SidebarNavigationScreenGlobalStyles backPath="/" />,
-		preview: <StylesPreviewArea />,
+		preview: ( { siteData } ) => (
+			<StylesPreviewArea siteData={ siteData } />
+		),
 		mobileContent: <SidebarGlobalStyles />,
 	},
 	widths: {

package/src/components/site-hub/index.js

@@ -1,134 +1,35 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
 import { __, isRTL } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import { memo, forwardRef, useContext } from '@wordpress/element';
-import { Icon, arrowUpLeft, arrowUpRight, search } from '@wordpress/icons';
-import { store as commandsStore } from '@wordpress/commands';
-import { displayShortcut } from '@wordpress/keycodes';
-import { VisuallyHidden } from '@wordpress/ui';
-import { filterURLForDisplay } from '@wordpress/url';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import SiteIcon from '../site-icon';
 import { unlock } from '../../lock-unlock';
 import { SidebarNavigationContext } from '../sidebar';
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-const SiteHub = memo(
-	forwardRef( ( { isTransparent }, ref ) => {
-		const { dashboardLink, homeUrl, siteTitle } = useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-
-			const { getEntityRecord } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
-			return {
-				dashboardLink: getSettings().__experimentalDashboardLink,
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
-			};
-		}, [] );
-		const { open: openCommandCenter } = useDispatch( commandsStore );
-
-		return (
-			<div className="edit-site-site-hub">
-				<HStack justify="flex-start" spacing="0">
-					<div
-						className={ clsx(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
-						) }
-					>
-						<Button
-							__next40pxDefaultSize
-							ref={ ref }
-							href={ dashboardLink }
-							label={ __( 'Go to the Dashboard' ) }
-							className="edit-site-layout__view-mode-toggle"
-							style={ {
-								transform: 'scale(0.5333) translateX(-4px)', // Offset to position the icon 12px from viewport edge
-								borderRadius: 4,
-							} }
-						>
-							<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-						</Button>
-					</div>
-
-					<HStack>
-						<div className="edit-site-site-hub__title">
-							<Button
-								__next40pxDefaultSize
-								variant="link"
-								href={ homeUrl }
-								target="_blank"
-							>
-								{ decodeEntities( siteTitle ) }
-								<VisuallyHidden render={ <span /> }>
-									{
-										/* translators: accessibility text */
-										__( '(opens in a new tab)' )
-									}
-								</VisuallyHidden>
-							</Button>
-						</div>
-						<HStack
-							spacing={ 0 }
-							expanded={ false }
-							className="edit-site-site-hub__actions"
-						>
-							<Button
-								size="compact"
-								className="edit-site-site-hub_toggle-command-center"
-								icon={ search }
-								onClick={ () => openCommandCenter() }
-								label={ __( 'Open command palette' ) }
-								shortcut={ displayShortcut.primary( 'k' ) }
-							/>
-						</HStack>
-					</HStack>
-				</HStack>
-			</div>
-		);
-	} )
-);
-
-export default SiteHub;
-
 export const SiteHubMobile = memo(
-	forwardRef( ( { isTransparent }, ref ) => {
+	forwardRef( ( props, ref ) => {
 		const { path } = useLocation();
 		const history = useHistory();
 		const { navigate } = useContext( SidebarNavigationContext );
-		const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 
 		const {
 			dashboardLink,
-			homeUrl,
-			siteTitle,
 			isBlockTheme,
 			isClassicThemeWithStyleBookSupport,
 		} = useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
-			const { getEntityRecord, getCurrentTheme } = select( coreStore );
-			const _site = getEntityRecord( 'root', 'site' );
+			const { getCurrentTheme } = select( coreStore );
 			const currentTheme = getCurrentTheme();
 			const settings = getSettings();
 			const supportsEditorStyles =
@@ -138,18 +39,12 @@ export const SiteHubMobile = memo(
 
 			return {
 				dashboardLink: settings.__experimentalDashboardLink,
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				siteTitle:
-					! _site?.title && !! _site?.url
-						? filterURLForDisplay( _site?.url )
-						: _site?.title,
 				isBlockTheme: currentTheme?.is_block_theme,
 				isClassicThemeWithStyleBookSupport:
 					! currentTheme?.is_block_theme &&
 					( supportsEditorStyles || hasThemeJson ),
 			};
 		}, [] );
-		const { open: openCommandCenter } = useDispatch( commandsStore );
 
 		let backPath;
 
@@ -181,66 +76,13 @@ export const SiteHubMobile = memo(
 
 		return (
 			<div className="edit-site-site-hub">
-				<HStack justify="flex-start" spacing="0">
-					<div
-						className={ clsx(
-							'edit-site-site-hub__view-mode-toggle-container',
-							{
-								'has-transparent-background': isTransparent,
-							}
-						) }
-					>
-						<Button
-							__next40pxDefaultSize
-							ref={ ref }
-							className="edit-site-layout__view-mode-toggle"
-							style={ {
-								transform: 'scale(0.5)',
-								borderRadius: 4,
-							} }
-							{ ...backButtonProps }
-						>
-							{ hasAdminBarInEditor ? (
-								<Icon
-									icon={
-										isRTL() ? arrowUpRight : arrowUpLeft
-									}
-									size={ 48 }
-								/>
-							) : (
-								<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
-							) }
-						</Button>
-					</div>
-
-					<HStack>
-						<div className="edit-site-site-hub__title">
-							<Button
-								__next40pxDefaultSize
-								variant="link"
-								href={ homeUrl }
-								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
-							>
-								{ decodeEntities( siteTitle ) }
-							</Button>
-						</div>
-						<HStack
-							spacing={ 0 }
-							expanded={ false }
-							className="edit-site-site-hub__actions"
-						>
-							<Button
-								__next40pxDefaultSize
-								className="edit-site-site-hub_toggle-command-center"
-								icon={ search }
-								onClick={ () => openCommandCenter() }
-								label={ __( 'Open command palette' ) }
-								shortcut={ displayShortcut.primary( 'k' ) }
-							/>
-						</HStack>
-					</HStack>
-				</HStack>
+				<Button
+					size="compact"
+					ref={ ref }
+					className="edit-site-site-hub__back-button"
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					{ ...backButtonProps }
+				/>
 			</div>
 		);
 	} )

package/src/components/site-hub/style.scss

@@ -3,90 +3,13 @@
 .edit-site-site-hub {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
-	gap: $grid-unit-10;
-	margin-right: $grid-unit-15;
+	padding-left: $grid-unit-20;
 	height: $header-height;
 }
 
-.edit-site-site-hub__actions {
-	flex-shrink: 0;
-}
-
-.edit-site-site-hub__view-mode-toggle-container {
-	height: $header-height;
-	width: $header-height;
-	flex-shrink: 0;
-
-	&.has-transparent-background .edit-site-layout__view-mode-toggle-icon {
-		background: transparent;
-	}
-}
-
-.edit-site-site-hub__title .components-button {
-	color: var(--wpds-color-foreground-interactive-neutral);
-	display: block;
-	flex-grow: 1;
-	font-size: 15px;
-	font-weight: $font-weight-medium;
-	overflow: hidden;
-	// Add space for the ↗ to render.
-	padding-right: $grid-unit-20;
-
-	// Create 12px gap between site icon and site title
-	margin-left: - $grid-unit-05;
-	position: relative;
-	text-decoration: none;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&:hover,
-	&:focus,
-	&:active {
-		color: var(--wpds-color-foreground-interactive-neutral);
-	}
-
-	&:focus {
-		// Defer to :focus-visible below.
-		box-shadow: none;
-		outline: none;
-	}
-
-	&:focus-visible {
-		// Push the shadow away from the title.
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wpds-color-background-surface-neutral-weak), 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 2px solid transparent;
-		outline-offset: 2px;
-	}
-
-	&::after {
-		content: "\2197";
-		font-weight: 400;
-		opacity: 0;
-		position: absolute;
-		right: 0;
-
-		@media not (prefers-reduced-motion) {
-			transition: opacity 0.1s linear;
-		}
-	}
-
-	&:hover::after,
-	&:focus::after,
-	&:active::after {
-		opacity: 1;
-	}
-}
-
-.edit-site-site-hub_toggle-command-center {
-	color: var(--wpds-color-foreground-interactive-neutral);
-
-	&:hover,
-	&:active {
-		svg {
-			fill: var(--wpds-color-foreground-interactive-neutral-active);
-		}
+.edit-site-site-hub__back-button {
+	&:hover:not(:disabled, [aria-disabled="true"]),
+	&:active:not(:disabled, [aria-disabled="true"]) {
+		color: var(--wpds-color-foreground-interactive-neutral-active);
 	}
 }

package/src/index.js

@@ -74,7 +74,9 @@ export function initializeEditor( id, settings ) {
 		showListViewByDefault: false,
 		enableChoosePatternModal: true,
 		showCollaborationCursor: false,
-		showCollaborationNotifications: true,
+		showCollaborationJoinNotifications: true,
+		showCollaborationLeaveNotifications: true,
+		showCollaborationPostSaveNotifications: true,
 	} );
 
 	if ( window.__clientSideMediaProcessing ) {