@wordpress/edit-site 5.18.0 → 5.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.18.0",
+	"version": "5.19.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,44 +27,44 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.41.0",
-		"@wordpress/api-fetch": "^6.38.0",
-		"@wordpress/block-editor": "^12.9.0",
-		"@wordpress/block-library": "^8.18.0",
-		"@wordpress/blocks": "^12.18.0",
-		"@wordpress/commands": "^0.12.0",
-		"@wordpress/components": "^25.7.0",
-		"@wordpress/compose": "^6.18.0",
-		"@wordpress/core-commands": "^0.10.0",
-		"@wordpress/core-data": "^6.18.0",
-		"@wordpress/data": "^9.11.0",
-		"@wordpress/date": "^4.41.0",
-		"@wordpress/deprecated": "^3.41.0",
-		"@wordpress/dom": "^3.41.0",
-		"@wordpress/editor": "^13.18.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/escape-html": "^2.41.0",
-		"@wordpress/hooks": "^3.41.0",
-		"@wordpress/html-entities": "^3.41.0",
-		"@wordpress/i18n": "^4.41.0",
-		"@wordpress/icons": "^9.32.0",
-		"@wordpress/interface": "^5.18.0",
-		"@wordpress/keyboard-shortcuts": "^4.18.0",
-		"@wordpress/keycodes": "^3.41.0",
-		"@wordpress/media-utils": "^4.32.0",
-		"@wordpress/notices": "^4.9.0",
-		"@wordpress/patterns": "^1.2.0",
-		"@wordpress/plugins": "^6.9.0",
-		"@wordpress/preferences": "^3.18.0",
-		"@wordpress/primitives": "^3.39.0",
-		"@wordpress/private-apis": "^0.23.0",
-		"@wordpress/reusable-blocks": "^4.18.0",
-		"@wordpress/router": "^0.10.0",
-		"@wordpress/style-engine": "^1.24.0",
-		"@wordpress/url": "^3.42.0",
-		"@wordpress/viewport": "^5.18.0",
-		"@wordpress/widgets": "^3.18.0",
-		"@wordpress/wordcount": "^3.41.0",
+		"@wordpress/a11y": "^3.42.0",
+		"@wordpress/api-fetch": "^6.39.0",
+		"@wordpress/block-editor": "^12.10.0",
+		"@wordpress/block-library": "^8.19.0",
+		"@wordpress/blocks": "^12.19.0",
+		"@wordpress/commands": "^0.13.0",
+		"@wordpress/components": "^25.8.0",
+		"@wordpress/compose": "^6.19.0",
+		"@wordpress/core-commands": "^0.11.0",
+		"@wordpress/core-data": "^6.19.0",
+		"@wordpress/data": "^9.12.0",
+		"@wordpress/date": "^4.42.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/editor": "^13.19.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/escape-html": "^2.42.0",
+		"@wordpress/hooks": "^3.42.0",
+		"@wordpress/html-entities": "^3.42.0",
+		"@wordpress/i18n": "^4.42.0",
+		"@wordpress/icons": "^9.33.0",
+		"@wordpress/interface": "^5.19.0",
+		"@wordpress/keyboard-shortcuts": "^4.19.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/media-utils": "^4.33.0",
+		"@wordpress/notices": "^4.10.0",
+		"@wordpress/patterns": "^1.3.0",
+		"@wordpress/plugins": "^6.10.0",
+		"@wordpress/preferences": "^3.19.0",
+		"@wordpress/primitives": "^3.40.0",
+		"@wordpress/private-apis": "^0.24.0",
+		"@wordpress/reusable-blocks": "^4.19.0",
+		"@wordpress/router": "^0.11.0",
+		"@wordpress/style-engine": "^1.25.0",
+		"@wordpress/url": "^3.43.0",
+		"@wordpress/viewport": "^5.19.0",
+		"@wordpress/widgets": "^3.19.0",
+		"@wordpress/wordcount": "^3.42.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/components/add-new-pattern/index.js

@@ -2,12 +2,16 @@
  * WordPress dependencies
  */
 import { DropdownMenu } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { useState, useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { plus, symbol, symbolFilled } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
+import {
+	privateApis as editPatternsPrivateApis,
+	store as patternsStore,
+} from '@wordpress/patterns';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,12 +20,19 @@ import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
+import usePatternCategories from '../sidebar-navigation-screen-patterns/use-pattern-categories';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { CreatePatternModal } = unlock( editPatternsPrivateApis );
 
 export default function AddNewPattern() {
 	const history = useHistory();
+	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -29,6 +40,11 @@ export default function AddNewPattern() {
 		const settings = select( editSiteStore ).getSettings();
 		return !! settings.supportsTemplatePartsMode;
 	}, [] );
+	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const patternUploadInputRef = useRef();
+	const { patternCategories } = usePatternCategories();
 
 	function handleCreatePattern( { pattern, categoryId } ) {
 		setShowPatternModal( false );
@@ -76,6 +92,14 @@ export default function AddNewPattern() {
 		} );
 	}
 
+	controls.push( {
+		icon: symbol,
+		onClick: () => {
+			patternUploadInputRef.current.click();
+		},
+		title: __( 'Import pattern from JSON' ),
+	} );
+
 	return (
 		<>
 			<DropdownMenu
@@ -101,6 +125,60 @@ export default function AddNewPattern() {
 					onError={ handleError }
 				/>
 			) }
+
+			<input
+				type="file"
+				accept=".json"
+				hidden
+				ref={ patternUploadInputRef }
+				onChange={ async ( event ) => {
+					const file = event.target.files?.[ 0 ];
+					if ( ! file ) return;
+					try {
+						const currentCategoryId =
+							params.categoryType !== TEMPLATE_PART_POST_TYPE &&
+							patternCategories.find(
+								( category ) =>
+									category.name === params.categoryId
+							)?.id;
+						const pattern = await createPatternFromFile(
+							file,
+							currentCategoryId
+								? [ currentCategoryId ]
+								: undefined
+						);
+
+						// Navigate to the All patterns category for the newly created pattern
+						// if we're not on that page already.
+						if ( ! currentCategoryId ) {
+							history.push( {
+								path: `/patterns`,
+								categoryType: PATTERN_TYPES.theme,
+								categoryId: PATTERN_DEFAULT_CATEGORY,
+							} );
+						}
+
+						createSuccessNotice(
+							sprintf(
+								// translators: %s: The imported pattern's title.
+								__( 'Imported "%s" from JSON.' ),
+								pattern.title.raw
+							),
+							{
+								type: 'snackbar',
+								id: 'import-pattern-success',
+							}
+						);
+					} catch ( err ) {
+						createErrorNotice( err.message, {
+							type: 'snackbar',
+							id: 'import-pattern-error',
+						} );
+					} finally {
+						event.target.value = '';
+					}
+				} }
+			/>
 		</>
 	);
 }

package/src/components/add-new-template/index.js

@@ -8,9 +8,10 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import NewTemplate from './new-template';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function AddNewTemplate( {
-	templateType = 'wp_template',
+	templateType = TEMPLATE_POST_TYPE,
 	...props
 } ) {
 	const postType = useSelect(
@@ -22,7 +23,7 @@ export default function AddNewTemplate( {
 		return null;
 	}
 
-	if ( templateType === 'wp_template' ) {
+	if ( templateType === TEMPLATE_POST_TYPE ) {
 		return <NewTemplate { ...props } postType={ postType } />;
 	}
 

package/src/components/add-new-template/new-template.js

@@ -42,6 +42,11 @@ import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
 /**
  * Internal dependencies
  */
@@ -190,7 +195,7 @@ export default function NewTemplate( {
 			const { title, description, slug } = template;
 			const newTemplate = await saveEntityRecord(
 				'postType',
-				'wp_template',
+				TEMPLATE_POST_TYPE,
 				{
 					description,
 					// Slugs need to be strings, so this is for template `404`

package/src/components/add-new-template/utils.js

@@ -9,6 +9,11 @@ import { useMemo, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { blockMeta, post, archive } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+
 /**
  * @typedef IHasNameAndId
  * @property {string|number} id   The entity's id.
@@ -48,9 +53,13 @@ export const mapToIHasNameAndId = ( entities, path ) => {
 export const useExistingTemplates = () => {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-			} ),
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			),
 		[]
 	);
 };

package/src/components/app/index.js

@@ -3,7 +3,6 @@
  */
 import { SlotFillProvider } from '@wordpress/components';
 import { UnsavedChangesWarning } from '@wordpress/editor';
-import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -35,16 +34,14 @@ export default function App() {
 	}
 
 	return (
-		<ShortcutProvider style={ { height: '100%' } }>
-			<SlotFillProvider>
-				<GlobalStylesProvider>
-					<UnsavedChangesWarning />
-					<RouterProvider>
-						<Layout />
-						<PluginArea onError={ onPluginAreaError } />
-					</RouterProvider>
-				</GlobalStylesProvider>
-			</SlotFillProvider>
-		</ShortcutProvider>
+		<SlotFillProvider>
+			<GlobalStylesProvider>
+				<UnsavedChangesWarning />
+				<RouterProvider>
+					<Layout />
+					<PluginArea onError={ onPluginAreaError } />
+				</RouterProvider>
+			</GlobalStylesProvider>
+		</SlotFillProvider>
 	);
 }

package/src/components/block-editor/back-button.js

@@ -9,6 +9,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
+import {
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -16,8 +20,8 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 function BackButton() {
 	const location = useLocation();
 	const history = useHistory();
-	const isTemplatePart = location.params.postType === 'wp_template_part';
-	const isNavigationMenu = location.params.postType === 'wp_navigation';
+	const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE;
+	const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE;
 	const previousTemplateId = location.state?.fromTemplateId;
 
 	const isFocusMode = isTemplatePart || isNavigationMenu;

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

@@ -8,9 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	__unstableEditorStyles as EditorStyles,
-	__unstableIframe as Iframe,
-	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -24,7 +22,17 @@ import { __ } from '@wordpress/i18n';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
+	blockEditorPrivateApis
+);
+
+function EditorCanvas( {
+	enableResizing,
+	settings,
+	children,
+	contentRef,
+	...props
+} ) {
 	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
 		( select ) => ( {
 			deviceType:
@@ -38,7 +46,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const deviceStyles = useResizeCanvas( deviceType );
-	const mouseMoveTypingRef = useMouseMoveTypingReset();
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -65,20 +72,25 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 	};
 
 	return (
-		<Iframe
-			expand={ isZoomOutMode }
-			scale={ ( isZoomOutMode && 0.45 ) || undefined }
-			frameSize={ isZoomOutMode ? 100 : undefined }
-			style={ enableResizing ? {} : deviceStyles }
-			ref={ mouseMoveTypingRef }
-			name="editor-canvas"
-			className={ classnames( 'edit-site-visual-editor__editor-canvas', {
-				'is-focused': isFocused && canvasMode === 'view',
-			} ) }
-			{ ...props }
-			{ ...( canvasMode === 'view' ? viewModeProps : {} ) }
+		<BlockCanvas
+			height="100%"
+			iframeProps={ {
+				expand: isZoomOutMode,
+				scale: isZoomOutMode ? 0.45 : undefined,
+				frameSize: isZoomOutMode ? 100 : undefined,
+				style: enableResizing ? {} : deviceStyles,
+				className: classnames(
+					'edit-site-visual-editor__editor-canvas',
+					{
+						'is-focused': isFocused && canvasMode === 'view',
+					}
+				),
+				...props,
+				...( canvasMode === 'view' ? viewModeProps : {} ),
+			} }
+			styles={ settings.styles }
+			contentRef={ contentRef }
 		>
-			<EditorStyles styles={ settings.styles } />
 			<style>{
 				// Forming a "block formatting context" to prevent margin collapsing.
 				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
@@ -93,7 +105,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 				}}}`
 			}</style>
 			{ children }
-		</Iframe>
+		</BlockCanvas>
 	);
 }
 

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

@@ -10,14 +10,9 @@ import { useRef } from '@wordpress/element';
 import {
 	BlockList,
 	BlockTools,
-	__unstableUseClipboardHandler as useClipboardHandler,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	useMergeRefs,
-	useViewportMatch,
-	useResizeObserver,
-} from '@wordpress/compose';
+import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -76,8 +71,6 @@ export default function SiteEditorCanvas() {
 		! isMobileViewport;
 
 	const contentRef = useRef();
-	const mergedRefs = useMergeRefs( [ contentRef, useClipboardHandler() ] );
-
 	const isTemplateTypeNavigation = templateType === 'wp_navigation';
 
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
@@ -127,8 +120,7 @@ export default function SiteEditorCanvas() {
 								<EditorCanvas
 									enableResizing={ enableResizing }
 									settings={ settings }
-									contentRef={ mergedRefs }
-									readonly={ isViewMode }
+									contentRef={ contentRef }
 								>
 									{ resizeObserver }
 									<BlockList

package/src/components/block-editor/style.scss

@@ -31,6 +31,7 @@
 		display: block;
 		width: 100%;
 		height: 100%;
+		background: $white;
 	}
 
 	.edit-site-visual-editor__editor-canvas {
@@ -76,7 +77,7 @@
 			contextual toolbar has been redesigned.
 			See: https://github.com/WordPress/gutenberg/issues/40450
 		*/
-		.block-editor-block-contextual-toolbar {
+		.block-editor-block-contextual-toolbar.is-fixed {
 			display: none;
 		}
 	}
@@ -172,3 +173,89 @@
 	}
 }
 
+// Fixed contextual toolbar
+@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");
+
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+	position: sticky;
+	top: 0;
+	z-index: z-index(".block-editor-block-popover");
+	display: block;
+	width: 100%;
+
+	// on desktop and tablet viewports the toolbar is fixed
+	// on top of interface header
+	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
+
+	@include break-medium() {
+		// leave room for block inserter, undo and redo, list view
+		margin-left: $toolbar-margin;
+		// position on top of interface header
+		position: fixed;
+		top: $admin-bar-height;
+		// Don't fill up when empty
+		min-height: initial;
+		// has to be flex for collapse button to fit
+		display: flex;
+
+		// Mimic the height of the parent, vertically align center, and provide a max-height.
+		height: $header-height;
+		align-items: center;
+
+
+		// on tablet viewports the toolbar is fixed
+		// on top of interface header and covers the whole header
+		// except for the inserter on the left
+		width: calc(100% - #{$toolbar-margin});
+
+		&.is-collapsed {
+			width: initial;
+		}
+
+		&:empty {
+			width: initial;
+		}
+
+		.is-fullscreen-mode & {
+			// leave room for block inserter, undo and redo, list view
+			// and some margin left
+			margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
+
+			top: 0;
+
+			&.is-collapsed {
+				width: initial;
+			}
+
+			&:empty {
+				width: initial;
+			}
+		}
+
+		.show-icon-labels & {
+			margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
+			width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
+
+			.is-fullscreen-mode & {
+				margin-left: $grid-unit * 18; // site hub, inserter and margin
+			}
+		}
+	}
+
+	// on desktop viewports the toolbar is fixed
+	// on top of interface header and leaves room
+	// for the block inserter the publish button
+	@include break-large() {
+		width: auto;
+		.show-icon-labels & {
+			width: auto; //there are no undo, redo and list view buttons
+		}
+
+		.is-fullscreen-mode & {
+			// in full screen mode we need to account for
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 280px - #{4 * $grid-unit-80});
+		}
+	}
+}

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

@@ -106,25 +106,30 @@ export default function useSiteEditorSettings() {
 		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories, templateSlug } =
-		useSelect( ( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const usedPostType = getEditedPostType();
-			const usedPostId = getEditedPostId();
-			const _record = getEditedEntityRecord(
-				'postType',
-				usedPostType,
-				usedPostId
-			);
-			return {
-				restBlockPatterns: select( coreStore ).getBlockPatterns(),
-				restBlockPatternCategories:
-					select( coreStore ).getBlockPatternCategories(),
-				templateSlug: _record.slug,
-			};
-		}, [] );
+	const {
+		restBlockPatterns,
+		restBlockPatternCategories,
+		templateSlug,
+		userPatternCategories,
+	} = useSelect( ( select ) => {
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getEditedEntityRecord, getUserPatternCategories } =
+			select( coreStore );
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		const _record = getEditedEntityRecord(
+			'postType',
+			usedPostType,
+			usedPostId
+		);
+		return {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+			templateSlug: _record.slug,
+			userPatternCategories: getUserPatternCategories(),
+		};
+	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
 
 	const blockPatterns = useMemo(
@@ -171,6 +176,7 @@ export default function useSiteEditorSettings() {
 			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
+			__experimentalUserPatternCategories: userPatternCategories,
 			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -179,6 +185,7 @@ export default function useSiteEditorSettings() {
 		storedSettings,
 		blockPatterns,
 		blockPatternCategories,
+		userPatternCategories,
 		canvasMode,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,