@wordpress/edit-site 5.12.6 → 5.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.12.6",
+	"version": "5.12.8",
 	"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.6",
+		"@wordpress/block-library": "^8.12.8",
+		"@wordpress/blocks": "^12.12.3",
+		"@wordpress/commands": "^0.6.6",
+		"@wordpress/components": "^25.1.6",
 		"@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.6",
+		"@wordpress/core-data": "^6.12.6",
+		"@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.6",
 		"@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.6",
+		"@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.6",
+		"@wordpress/preferences": "^3.12.6",
 		"@wordpress/primitives": "^3.33.1",
 		"@wordpress/private-apis": "^0.17.1",
-		"@wordpress/reusable-blocks": "^4.12.4",
+		"@wordpress/reusable-blocks": "^4.12.6",
 		"@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.6",
 		"@wordpress/wordcount": "^3.35.1",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "65fb4cd5187a47ca274c24c04a220bcdb2ddfa67"
+	"gitHead": "86ecd96b3bcada6b4cc35bb2455b3029cebb0ff3"
 }

package/src/components/block-editor/editor-canvas.js

@@ -88,7 +88,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 					enableResizing ? 'min-height:0!important;' : ''
 				}}body{position:relative; ${
 					canvasMode === 'view'
-						? 'cursor: pointer; height: 100vh'
+						? 'cursor: pointer; min-height: 100vh;'
 						: ''
 				}}}`
 			}</style>

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

@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -21,9 +22,11 @@ import { useDispatch } from '@wordpress/data';
 import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-patterns/utils';
 
 export default function CreatePatternModal( {
+	blocks = [],
 	closeModal,
 	onCreate,
 	onError,
+	title,
 } ) {
 	const [ name, setName ] = useState( '' );
 	const [ syncType, setSyncType ] = useState( SYNC_TYPES.unsynced );
@@ -52,11 +55,11 @@ export default function CreatePatternModal( {
 				'wp_block',
 				{
 					title: name || __( 'Untitled Pattern' ),
-					content: '',
+					content: blocks?.length ? serialize( blocks ) : '',
 					status: 'publish',
 					meta:
 						syncType === SYNC_TYPES.unsynced
-							? { sync_status: syncType }
+							? { wp_pattern_sync_status: syncType }
 							: undefined,
 				},
 				{ throwOnError: true }
@@ -76,7 +79,7 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create pattern' ) }
+			title={ title || __( 'Create pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>

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 {
@@ -32,6 +40,10 @@
 	overflow: hidden;
 	grid-column: 2 / 3;
 
+	.block-editor-block-icon {
+		min-width: $grid-unit-30;
+	}
+
 	h1 {
 		white-space: nowrap;
 		overflow: hidden;

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

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_PARTS,
+	PATTERNS,
+	SYNC_TYPES,
+	USER_PATTERNS,
+	USER_PATTERN_CATEGORY,
+} from './utils';
+import {
+	useExistingTemplateParts,
+	getUniqueTemplatePartTitle,
+	getCleanTemplatePartSlug,
+} from '../../utils/template-part-create';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+function getPatternMeta( item ) {
+	if ( item.type === PATTERNS ) {
+		return { wp_pattern_sync_status: SYNC_TYPES.unsynced };
+	}
+
+	const syncStatus = item.reusableBlock.wp_pattern_sync_status;
+	const isUnsynced = syncStatus === SYNC_TYPES.unsynced;
+
+	return {
+		...item.reusableBlock.meta,
+		wp_pattern_sync_status: isUnsynced ? syncStatus : undefined,
+	};
+}
+
+export default function DuplicateMenuItem( {
+	categoryId,
+	item,
+	label = __( 'Duplicate' ),
+	onClose,
+} ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+	const { createErrorNotice, createSuccessNotice } =
+		useDispatch( noticesStore );
+
+	const history = useHistory();
+	const existingTemplateParts = useExistingTemplateParts();
+
+	async function createTemplatePart() {
+		try {
+			const copiedTitle = sprintf(
+				/* translators: %s: Existing template part title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+			const title = getUniqueTemplatePartTitle(
+				copiedTitle,
+				existingTemplateParts
+			);
+			const slug = getCleanTemplatePartSlug( title );
+			const { area, content } = item.templatePart;
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_template_part',
+				{ slug, title, content, area },
+				{ throwOnError: true }
+			);
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
+					__( '"%s" created.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: __( 'Edit' ),
+							onClick: () =>
+								history.push( {
+									postType: TEMPLATE_PARTS,
+									postId: result?.id,
+									categoryType: TEMPLATE_PARTS,
+									categoryId,
+								} ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __(
+							'An error occurred while creating the template part.'
+					  );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	async function createPattern() {
+		try {
+			const isThemePattern = item.type === PATTERNS;
+			const title = sprintf(
+				/* translators: %s: Existing pattern title */
+				__( '%s (Copy)' ),
+				item.title
+			);
+
+			const result = await saveEntityRecord(
+				'postType',
+				'wp_block',
+				{
+					content: isThemePattern
+						? item.content
+						: item.reusableBlock.content,
+					meta: getPatternMeta( item ),
+					status: 'publish',
+					title,
+				},
+				{ throwOnError: true }
+			);
+
+			const actionLabel = isThemePattern
+				? __( 'View my patterns' )
+				: __( 'Edit' );
+
+			const newLocation = isThemePattern
+				? {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						path: '/patterns',
+				  }
+				: {
+						categoryType: USER_PATTERNS,
+						categoryId: USER_PATTERN_CATEGORY,
+						postType: USER_PATTERNS,
+						postId: result?.id,
+				  };
+
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+					__( '"%s" added to my patterns.' ),
+					title
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-patterns-success',
+					actions: [
+						{
+							label: actionLabel,
+							onClick: () => history.push( newLocation ),
+						},
+					],
+				}
+			);
+
+			onClose();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the pattern.' );
+
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+			onClose();
+		}
+	}
+
+	const createItem =
+		item.type === TEMPLATE_PARTS ? createTemplatePart : createPattern;
+
+	return <MenuItem onClick={ createItem }>{ label }</MenuItem>;
+}