@wordpress/edit-site 6.49.1 → 6.50.1-next.v.202607070741.0

package/src/components/editor/index.js

@@ -1,14 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, __unstableMotion as motion } from '@wordpress/components';
-import { useInstanceId, useReducedMotion } from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
@@ -21,7 +16,7 @@ import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
-import { Icon, arrowUpLeft, arrowUpRight } from '@wordpress/icons';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -37,7 +32,6 @@ import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import SaveButton from '../save-button';
 import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
-import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import { ViewportSync } from '../block-editor/use-viewport-sync';
 import useEditorTitle from './use-editor-title';
@@ -53,30 +47,6 @@ const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-const toggleHomeIconVariants = {
-	edit: {
-		opacity: 0,
-		scale: 0.2,
-	},
-	hover: {
-		opacity: 1,
-		scale: 1,
-		clipPath: 'inset( 22% round 2px )',
-	},
-};
-
-const siteIconVariants = {
-	edit: {
-		clipPath: 'inset(0% round 0px)',
-	},
-	hover: {
-		clipPath: 'inset( 22% round 2px )',
-	},
-	tap: {
-		clipPath: 'inset(0% round 0px)',
-	},
-};
-
 function getListPathForPostType( postType ) {
 	switch ( postType ) {
 		case 'navigation':
@@ -113,7 +83,6 @@ function getNavigationPath( location, postType ) {
 }
 
 export default function EditSiteEditor( { isHomeRoute = false } ) {
-	const disableMotion = useReducedMotion();
 	const location = useLocation();
 	const history = useHistory();
 	const { canvas = 'view' } = location.query;
@@ -123,15 +92,10 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	// deprecated sync state with url
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
-	const { isBlockBasedTheme, hasSiteIcon } = useSelect( ( select ) => {
-		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
-
-		return {
-			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			hasSiteIcon: !! siteData?.site_icon_url,
-		};
-	}, [] );
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreDataStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
 	const postWithTemplate = !! context?.postId;
 	useEditorTitle(
 		postWithTemplate ? context.postType : postType,
@@ -204,11 +168,6 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 	);
 
 	const isReady = ! isLoading;
-	const transition = {
-		duration: disableMotion ? 0 : 0.2,
-	};
-
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
 
 	return ! isBlockBasedTheme && isHomeRoute ? (
 		<SitePreview />
@@ -246,14 +205,7 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 						<BackButton>
 							{ ( { length } ) =>
 								length <= 1 && (
-									<motion.div
-										className="edit-site-editor__view-mode-toggle"
-										transition={ transition }
-										animate="edit"
-										initial="edit"
-										whileHover="hover"
-										whileTap="tap"
-									>
+									<div className="edit-site-editor__view-mode-toggle">
 										<Button
 											__next40pxDefaultSize
 											label={ __( 'Open Navigation' ) }
@@ -275,52 +227,17 @@ export default function EditSiteEditor( { isHomeRoute = false } ) {
 													}
 												);
 											} }
-										>
-											{ ! hasAdminBarInEditor && (
-												<motion.div
-													variants={
-														! disableMotion &&
-														siteIconVariants
-													}
-												>
-													<SiteIcon className="edit-site-editor__view-mode-toggle-icon" />
-												</motion.div>
-											) }
-										</Button>
-										{ hasAdminBarInEditor ? (
-											<div className="edit-site-editor__back-icon">
-												<Icon
-													icon={
-														isRTL()
-															? arrowUpRight
-															: arrowUpLeft
-													}
-												/>
-											</div>
-										) : (
-											<motion.div
-												className={ clsx(
-													'edit-site-editor__back-icon',
-													{
-														'has-site-icon':
-															hasSiteIcon,
-													}
-												) }
-												variants={
-													! disableMotion &&
-													toggleHomeIconVariants
+										/>
+										<div className="edit-site-editor__back-icon">
+											<Icon
+												icon={
+													isRTL()
+														? chevronRight
+														: chevronLeft
 												}
-											>
-												<Icon
-													icon={
-														isRTL()
-															? arrowUpRight
-															: arrowUpLeft
-													}
-												/>
-											</motion.div>
-										) }
-									</motion.div>
+											/>
+										</div>
+									</div>
 								)
 							}
 						</BackButton>

package/src/components/editor/style.scss

@@ -24,13 +24,12 @@
 }
 
 .edit-site-editor__view-mode-toggle {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 	view-transition-name: toggle;
-	/* stylelint-enable */
+	position: relative;
 	top: 0;
 	left: 0;
-	height: $header-height;
-	width: $header-height;
+	height: $button-size-compact;
+	width: $button-size-compact;
 	z-index: 100;
 
 	.components-button {
@@ -53,12 +52,8 @@
 		}
 	}
 
-	.edit-site-editor__view-mode-toggle-icon {
-		svg,
-		img {
-			background: $gray-900;
-			display: block;
-		}
+	&:hover .edit-site-editor__back-icon {
+		color: var(--wp-admin-theme-color);
 	}
 }
 
@@ -66,21 +61,15 @@
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: $header-height;
-	height: $header-height;
+	width: $button-size-compact;
+	height: $button-size-compact;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background-color: hsla(0, 0%, 80%);
+	background-color: transparent;
 	pointer-events: none;
 
 	svg {
 		fill: currentColor;
 	}
-
-	&.has-site-icon {
-		background-color: hsla(0, 0%, 100%, 0.6);
-		-webkit-backdrop-filter: saturate(180%) blur(15px);
-		backdrop-filter: saturate(180%) blur(15px);
-	}
 }

package/src/components/layout/index.js

@@ -19,6 +19,7 @@ import {
 	useResizeObserver,
 	usePrevious,
 } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect, useMemo } from '@wordpress/element';
 import {
@@ -37,7 +38,7 @@ import { Tooltip } from '@wordpress/ui';
 /**
  * Internal dependencies
  */
-import { default as SiteHub, SiteHubMobile } from '../site-hub';
+import { SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
 import SaveKeyboardShortcut from '../save-keyboard-shortcut';
@@ -57,13 +58,12 @@ function Layout() {
 	const { query, name: routeKey, areas, widths } = useLocation();
 	// Force canvas to 'view' on notfound route to show the error message and allow navigation.
 	const canvas = routeKey === 'notfound' ? 'view' : query?.canvas ?? 'view';
-	const hasAdminBarInEditor = window.__experimentalAdminBarInEditor;
-	const showDesktopSiteHub = ! hasAdminBarInEditor;
-	const showMobileSiteHub = ! hasAdminBarInEditor || routeKey !== 'home';
+	const showMobileSiteHub = !! areas.mobileContent;
 	const hasMobileAreas =
 		areas.mobileSidebar || areas.mobileContent || areas.preview;
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const toggleRef = useRef();
+	const mobileToggleRef = useRef();
+	const sidebarRegionRef = useRef();
 	const navigateRegionsProps = useNavigateRegions();
 	const disableMotion = useReducedMotion();
 	const [ canvasResizer, canvasSize ] = useResizeObserver();
@@ -88,7 +88,11 @@ function Layout() {
 	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
-			toggleRef.current?.focus();
+			const desktopToggle = sidebarRegionRef.current
+				? // We're typically expecting the `<DashboardBackButton />` component as the first tabbable element.
+				  focus.tabbable.find( sidebarRegionRef.current )[ 0 ]
+				: undefined;
+			( desktopToggle ?? mobileToggleRef.current )?.focus();
 		}
 		// Should not depend on the previous canvas mode value but the next.
 	}, [ canvas ] );
@@ -116,6 +120,7 @@ function Layout() {
 					*/ }
 					{ ( ! isMobileViewport || ! hasMobileAreas ) && (
 						<NavigableRegion
+							ref={ sidebarRegionRef }
 							ariaLabel={ __( 'Navigation' ) }
 							className="edit-site-layout__sidebar-region"
 						>
@@ -137,14 +142,6 @@ function Layout() {
 										} }
 										className="edit-site-layout__sidebar"
 									>
-										{ showDesktopSiteHub && (
-											<SiteHub
-												ref={ toggleRef }
-												isTransparent={
-													isResizableFrameOversized
-												}
-											/>
-										) }
 										<SidebarNavigationProvider>
 											<SidebarContent
 												shouldAnimate={
@@ -176,7 +173,7 @@ function Layout() {
 									<>
 										{ showMobileSiteHub && (
 											<SiteHubMobile
-												ref={ toggleRef }
+												ref={ mobileToggleRef }
 												isTransparent={
 													isResizableFrameOversized
 												}

package/src/components/layout/style.scss

@@ -17,6 +17,7 @@
 
 .edit-site-layout__content {
 	height: 100%;
+	min-height: 0;
 	flex-grow: 1;
 	display: flex;
 }
@@ -33,15 +34,16 @@
 	// This is only necessary for the exit animation
 	.edit-site-layout.is-full-canvas & {
 		position: fixed !important;
-		height: 100vh;
+		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
 		left: 0;
-		top: 0;
+		top: var(--wp-admin--admin-bar--height, 0);
 	}
 
 	.edit-site-layout__sidebar {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
+		min-height: 0;
 	}
 
 	.resizable-editor__drag-handle {
@@ -163,7 +165,6 @@
 	height: 100%;
 }
 
-/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	animation-delay: 255ms;
 }
@@ -175,16 +176,13 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 		animation: none !important;
 	}
 }
-/* stylelint-enable  */
 
 .edit-site-layout.is-full-canvas .edit-site-layout__sidebar-region .edit-site-layout__view-mode-toggle {
 	display: none;
 }
 
 .edit-site-layout__view-mode-toggle.components-button {
-	/* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 	view-transition-name: toggle;
-	/* stylelint-enable  */
 	position: relative;
 	color: var(--wpds-color-foreground-interactive-neutral);
 	height: $header-height;
@@ -254,7 +252,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 	&.is-entity-save-view-open {
 		&:focus,
 		&:focus-within {
-			top: 0;
+			top: var(--wp-admin--admin-bar--height, 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-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-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.