@wordpress/edit-site 5.12.6 → 5.12.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.6",
+	"version": "5.12.7",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,40 +29,40 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.35.1",
 		"@wordpress/api-fetch": "^6.32.1",
-		"@wordpress/block-editor": "^12.3.4",
-		"@wordpress/block-library": "^8.12.6",
-		"@wordpress/blocks": "^12.12.2",
-		"@wordpress/commands": "^0.6.4",
-		"@wordpress/components": "^25.1.4",
+		"@wordpress/block-editor": "^12.3.5",
+		"@wordpress/block-library": "^8.12.7",
+		"@wordpress/blocks": "^12.12.3",
+		"@wordpress/commands": "^0.6.5",
+		"@wordpress/components": "^25.1.5",
 		"@wordpress/compose": "^6.12.1",
-		"@wordpress/core-commands": "^0.4.4",
-		"@wordpress/core-data": "^6.12.4",
-		"@wordpress/data": "^9.5.2",
+		"@wordpress/core-commands": "^0.4.5",
+		"@wordpress/core-data": "^6.12.5",
+		"@wordpress/data": "^9.5.3",
 		"@wordpress/date": "^4.35.1",
 		"@wordpress/deprecated": "^3.35.1",
 		"@wordpress/dom": "^3.35.1",
-		"@wordpress/editor": "^13.12.4",
+		"@wordpress/editor": "^13.12.5",
 		"@wordpress/element": "^5.12.1",
 		"@wordpress/escape-html": "^2.35.1",
 		"@wordpress/hooks": "^3.35.1",
 		"@wordpress/html-entities": "^3.35.1",
 		"@wordpress/i18n": "^4.35.1",
 		"@wordpress/icons": "^9.26.2",
-		"@wordpress/interface": "^5.12.4",
-		"@wordpress/keyboard-shortcuts": "^4.12.2",
+		"@wordpress/interface": "^5.12.5",
+		"@wordpress/keyboard-shortcuts": "^4.12.3",
 		"@wordpress/keycodes": "^3.35.1",
 		"@wordpress/media-utils": "^4.26.1",
-		"@wordpress/notices": "^4.3.2",
-		"@wordpress/plugins": "^6.3.4",
-		"@wordpress/preferences": "^3.12.4",
+		"@wordpress/notices": "^4.3.3",
+		"@wordpress/plugins": "^6.3.5",
+		"@wordpress/preferences": "^3.12.5",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/reusable-blocks": "^4.12.4",
+		"@wordpress/reusable-blocks": "^4.12.5",
 		"@wordpress/router": "^0.4.1",
 		"@wordpress/style-engine": "^1.18.1",
 		"@wordpress/url": "^3.36.1",
-		"@wordpress/viewport": "^5.12.2",
-		"@wordpress/widgets": "^3.12.4",
+		"@wordpress/viewport": "^5.12.3",
+		"@wordpress/widgets": "^3.12.5",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "65fb4cd5187a47ca274c24c04a220bcdb2ddfa67"
+	"gitHead": "3eeb607ebb76c3bf06cb8acb462f0dc068f340f9"
 }

package/src/components/block-editor/use-site-editor-settings.js

@@ -12,11 +12,13 @@ import { unlock } from '../../lock-unlock';
 import inserterMediaCategories from './inserter-media-categories';
 
 export default function useSiteEditorSettings( templateType ) {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
+	const { storedSettings, canvasMode } = useSelect( ( select ) => {
+		const { getSettings, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
 		return {
 			storedSettings: getSettings(),
+			canvasMode: getCanvasMode(),
 		};
 	}, [] );
 
@@ -70,6 +72,7 @@ export default function useSiteEditorSettings( templateType ) {
 		const {
 			__experimentalAdditionalBlockPatterns,
 			__experimentalAdditionalBlockPatternCategories,
+			focusMode,
 			...restStoredSettings
 		} = storedSettings;
 
@@ -86,6 +89,7 @@ export default function useSiteEditorSettings( templateType ) {
 			// active for all entities.
 			templateLock: false,
 			template: false,
+			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+	}, [ storedSettings, blockPatterns, blockPatternCategories, canvasMode ] );
 }

package/src/components/create-pattern-modal/index.js

@@ -56,7 +56,7 @@ export default function CreatePatternModal( {
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
-							? { sync_status: syncType }
+							? { wp_pattern_sync_status: syncType }
 							: undefined,
 				},
 				{ throwOnError: true }

package/src/components/global-styles/palette.js

@@ -91,15 +91,16 @@ function Palette( { name } ) {
 					</HStack>
 				</NavigationButtonAsItem>
 			</ItemGroup>
-			{ themeColors?.length > 0 && (
-				<Button
-					variant="secondary"
-					icon={ shuffle }
-					onClick={ randomizeThemeColors }
-				>
-					{ __( 'Randomize colors' ) }
-				</Button>
-			) }
+			{ window.__experimentalEnableColorRandomizer &&
+				themeColors?.length > 0 && (
+					<Button
+						variant="secondary"
+						icon={ shuffle }
+						onClick={ randomizeThemeColors }
+					>
+						{ __( 'Randomize colors' ) }
+					</Button>
+				) }
 		</VStack>
 	);
 }

package/src/components/header-edit-mode/document-actions/style.scss

@@ -16,6 +16,14 @@
 		color: currentColor;
 		background: $gray-200;
 	}
+
+	@include break-medium() {
+		width: 50%;
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
 }
 
 .edit-site-document-actions__command {

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

@@ -108,6 +108,9 @@ export default function HeaderEditMode() {
 		};
 	}, [] );
 
+	const { get: getPreference } = useSelect( preferencesStore );
+	const hasFixedToolbar = getPreference( editSiteStore.name, 'fixedToolbar' );
+
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
 		setIsInserterOpened,
@@ -213,14 +216,18 @@ export default function HeaderEditMode() {
 						) }
 						{ isLargeViewport && (
 							<>
-								<ToolbarItem
-									as={ ToolSelector }
-									showTooltip={ ! showIconLabels }
-									variant={
-										showIconLabels ? 'tertiary' : undefined
-									}
-									disabled={ ! isVisualMode }
-								/>
+								{ ! hasFixedToolbar && (
+									<ToolbarItem
+										as={ ToolSelector }
+										showTooltip={ ! showIconLabels }
+										variant={
+											showIconLabels
+												? 'tertiary'
+												: undefined
+										}
+										disabled={ ! isVisualMode }
+									/>
+								) }
 								<ToolbarItem
 									as={ UndoButton }
 									showTooltip={ ! showIconLabels }
@@ -257,7 +264,8 @@ export default function HeaderEditMode() {
 									/>
 								) }
 								{ isZoomedOutViewExperimentEnabled &&
-									! isDistractionFree && (
+									! isDistractionFree &&
+									! hasFixedToolbar && (
 										<ToolbarItem
 											as={ Button }
 											className="edit-site-header-edit-mode__zoom-out-view-toggle"

package/src/components/layout/index.js

@@ -143,7 +143,7 @@ export default function Layout() {
 		headerAnimationState = canvasMode; // edit, view, init
 	}
 
-	// Sets the right context for the command center
+	// Sets the right context for the command palette
 	const commandContext =
 		canvasMode === 'edit' && isEditorPage
 			? 'site-editor-edit'

package/src/components/layout/style.scss

@@ -4,17 +4,6 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-
-	// Expand the fixed block toolbar to cover the document title control.
-	.block-editor-block-contextual-toolbar {
-		@include break-medium() {
-			&.is-fixed {
-				// the combined with of the tools at the right of the header and the margin left
-				width: calc(100% - 240px - #{$grid-unit-80} - #{$grid-unit-70});
-			}
-		}
-	}
-
 }
 
 .edit-site-layout__hub {

package/src/components/page/header.js

@@ -18,7 +18,7 @@ export default function Header( { title, subTitle, actions } ) {
 		<HStack as="header" alignment="left" className="edit-site-page-header">
 			<FlexBlock className="edit-site-page-header__page-title">
 				<Heading
-					as="h1"
+					as="h2"
 					level={ 4 }
 					className="edit-site-page-header__title"
 				>

package/src/components/page-content-focus-manager/disable-non-page-content-blocks.js

@@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { PAGE_CONTENT_BLOCK_TYPES } from './constants';
 
 const { useBlockEditingMode } = unlock( blockEditorPrivateApis );
 
+const PAGE_CONTENT_BLOCK_TYPES = [
+	'core/post-title',
+	'core/post-featured-image',
+	'core/post-content',
+];
+
 /**
  * Component that when rendered, makes it so that the site editor allows only
  * page content to be edited.
  */
 export default function DisableNonPageContentBlocks() {
 	useDisableNonPageContentBlocks();
+	return null;
 }
 
 /**
@@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() {
 
 const withDisableNonPageContentBlocks = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name );
-		const mode = isContent ? 'contentOnly' : undefined;
+		const isDescendentOfQueryLoop = !! props.context.queryId;
+		const isPageContent =
+			PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) &&
+			! isDescendentOfQueryLoop;
+		const mode = isPageContent ? 'contentOnly' : undefined;
 		useBlockEditingMode( mode );
 		return <BlockEdit { ...props } />;
 	},

package/src/components/page-patterns/grid-item.js

@@ -122,7 +122,12 @@ export default function GridItem( { categoryId, composite, icon, item } ) {
 					aria-label={ item.title }
 					aria-describedby={
 						ariaDescriptions.length
-							? ariaDescriptions.join( ' ' )
+							? ariaDescriptions
+									.map(
+										( _, index ) =>
+											`${ descriptionId }-${ index }`
+									)
+									.join( ' ' )
 							: undefined
 					}
 				>

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

@@ -79,14 +79,14 @@ export default function PatternsList( { categoryId, type } ) {
 						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
-								'Patterns that are kept in sync across your site'
+								'Patterns that are kept in sync across the site'
 							) }
 						</Text>
 					</VStack>
 					<Grid
 						icon={ symbol }
 						categoryId={ categoryId }
-						label={ __( 'Synced patterns' ) }
+						label={ __( 'Synced' ) }
 						items={ syncedPatterns }
 					/>
 				</>
@@ -97,7 +97,7 @@ export default function PatternsList( { categoryId, type } ) {
 						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
 						<Text variant="muted" as="p">
 							{ __(
-								'Patterns that can be changed freely without affecting your site'
+								'Patterns that can be changed freely without affecting the site'
 							) }
 						</Text>
 					</VStack>

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

@@ -38,14 +38,8 @@ 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 templatePartHasCategory = ( item, category ) =>
+	item.templatePart.area === category;
 
 const useTemplatePartsAsPatterns = (
 	categoryId,
@@ -154,7 +148,7 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	categories: reusableBlock.wp_pattern,
 	id: reusableBlock.id,
 	name: reusableBlock.slug,
-	syncStatus: reusableBlock.meta?.sync_status || SYNC_TYPES.full,
+	syncStatus: reusableBlock.wp_pattern_sync_status || SYNC_TYPES.full,
 	title: reusableBlock.title.raw,
 	type: reusableBlock.type,
 	reusableBlock,

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

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

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/sidebar-edit-mode/page-panels/page-content.js

@@ -6,22 +6,24 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants';
 import { unlock } from '../../../lock-unlock';
 
 const { BlockQuickNavigation } = unlock( blockEditorPrivateApis );
 
 export default function PageContent() {
-	const clientIds = useSelect(
+	const clientIdsTree = useSelect(
 		( select ) =>
-			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
-				PAGE_CONTENT_BLOCK_TYPES
-			),
+			unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(),
 		[]
 	);
+	const clientIds = useMemo(
+		() => clientIdsTree.map( ( { clientId } ) => clientId ),
+		[ clientIdsTree ]
+	);
 	return <BlockQuickNavigation clientIds={ clientIds } />;
 }

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

@@ -98,6 +98,20 @@
 	border-top: 1px solid $gray-800;
 }
 
+.edit-site-sidebar__notice {
+	background: $gray-800;
+	color: $gray-300;
+	margin: $grid-unit-30 0;
+	&.is-dismissible {
+		padding-right: $grid-unit-10;
+	}
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):focus,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
+	.components-notice__dismiss:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover {
+		color: $gray-100;
+	}
+}
+
 /* In general style overrides are discouraged.
  * This is a temporary solution to override the InputControl component's styles.
  * The `Theme` component will potentially be the more appropriate approach
@@ -107,7 +121,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-global-styles/index.js

@@ -37,17 +37,27 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const { createNotice } = useDispatch( noticesStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
-	const { hasGlobalStyleVariations, isDistractionFree } = useSelect(
-		( select ) => ( {
-			hasGlobalStyleVariations:
-				!! select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-			isDistractionFree: select( preferencesStore ).get(
-				editSiteStore.name,
-				'distractionFree'
-			),
-		} ),
+	const { get: getPrefference } = useSelect( preferencesStore );
+
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
 		[]
 	);
 	if ( hasGlobalStyleVariations ) {
@@ -63,19 +73,7 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 		<SidebarNavigationItem
 			{ ...props }
 			onClick={ () => {
-				// Disable distraction free mode.
-				if ( isDistractionFree ) {
-					setPreference(
-						editSiteStore.name,
-						'distractionFree',
-						false
-					);
-					createNotice(
-						'info',
-						__( 'Distraction free mode turned off.' ),
-						{ type: 'snackbar' }
-					);
-				}
+				turnOffDistractionFreeMode();
 				// Switch to edit mode.
 				setCanvasMode( 'edit' );
 				// Open global styles sidebar.
@@ -170,22 +168,41 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { createNotice } = useDispatch( noticesStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { get: getPrefference } = useSelect( preferencesStore );
+	const { isViewMode, isStyleBookOpened } = useSelect( ( select ) => {
+		const { getCanvasMode, getEditorCanvasContainerView } = unlock(
+			select( editSiteStore )
+		);
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(),
+		};
+	}, [] );
 
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
-		[]
-	);
+	const turnOffDistractionFreeMode = useCallback( () => {
+		const isDistractionFree = getPrefference(
+			editSiteStore.name,
+			'distractionFree'
+		);
+		if ( ! isDistractionFree ) {
+			return;
+		}
+		setPreference( editSiteStore.name, 'distractionFree', false );
+		createNotice( 'info', __( 'Distraction free mode turned off' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}, [ createNotice, setPreference, getPrefference ] );
 
-	const openGlobalStyles = useCallback(
-		async () =>
-			Promise.all( [
-				setCanvasMode( 'edit' ),
-				openGeneralSidebar( 'edit-site/global-styles' ),
-			] ),
-		[ setCanvasMode, openGeneralSidebar ]
-	);
+	const openGlobalStyles = useCallback( async () => {
+		turnOffDistractionFreeMode();
+		return Promise.all( [
+			setCanvasMode( 'edit' ),
+			openGeneralSidebar( 'edit-site/global-styles' ),
+		] );
+	}, [ setCanvasMode, openGeneralSidebar, turnOffDistractionFreeMode ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();
@@ -246,7 +263,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 					</>
 				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && (
+			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }

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

@@ -20,6 +20,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -42,46 +43,49 @@ export default function SidebarNavigationScreenMain() {
 				'Customize the appearance of your website using the block editor.'
 			) }
 			content={
-				<ItemGroup>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/navigation"
-						withChevron
-						icon={ navigation }
-					>
-						{ __( 'Navigation' ) }
-					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
-						withChevron
-						icon={ styles }
-					>
-						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/page"
-						withChevron
-						icon={ page }
-					>
-						{ __( 'Pages' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/wp_template"
-						withChevron
-						icon={ layout }
-					>
-						{ __( 'Templates' ) }
-					</NavigatorButton>
-					<NavigatorButton
-						as={ SidebarNavigationItem }
-						path="/patterns"
-						withChevron
-						icon={ symbol }
-					>
-						{ __( 'Patterns' ) }
-					</NavigatorButton>
-				</ItemGroup>
+				<>
+					<ItemGroup>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/navigation"
+							withChevron
+							icon={ navigation }
+						>
+							{ __( 'Navigation' ) }
+						</NavigatorButton>
+						<SidebarNavigationItemGlobalStyles
+							withChevron
+							icon={ styles }
+						>
+							{ __( 'Styles' ) }
+						</SidebarNavigationItemGlobalStyles>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/page"
+							withChevron
+							icon={ page }
+						>
+							{ __( 'Pages' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/wp_template"
+							withChevron
+							icon={ layout }
+						>
+							{ __( 'Templates' ) }
+						</NavigatorButton>
+						<NavigatorButton
+							as={ SidebarNavigationItem }
+							path="/patterns"
+							withChevron
+							icon={ symbol }
+						>
+							{ __( 'Patterns' ) }
+						</NavigatorButton>
+					</ItemGroup>
+					<TemplatePartHint />
+				</>
 			}
 		/>
 	);