@wordpress/edit-site 5.13.0 → 5.15.0

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 /**
@@ -11,14 +11,73 @@ import { store as editSiteStore } from '../../store';
 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 ) );
+function useArchiveLabel( templateSlug ) {
+	const taxonomyMatches = templateSlug?.match(
+		/^(category|tag|taxonomy-([^-]+))$|^(((category|tag)|taxonomy-([^-]+))-(.+))$/
+	);
+	let taxonomy;
+	let term;
+	if ( taxonomyMatches ) {
+		// If is for a all taxonomies of a type
+		if ( taxonomyMatches[ 1 ] ) {
+			taxonomy = taxonomyMatches[ 2 ]
+				? taxonomyMatches[ 2 ]
+				: taxonomyMatches[ 1 ];
+		}
+		// If is for a all taxonomies of a type
+		else if ( taxonomyMatches[ 3 ] ) {
+			taxonomy = taxonomyMatches[ 6 ]
+				? taxonomyMatches[ 6 ]
+				: taxonomyMatches[ 4 ];
+			term = taxonomyMatches[ 7 ];
+		}
+		taxonomy = taxonomy === 'tag' ? 'post_tag' : taxonomy;
 
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
+		//getTaxonomy( 'category' );
+		//wp.data.select('core').getEntityRecords( 'taxonomy', 'category', {slug: 'newcat'} );
+	}
+	return useSelect(
+		( select ) => {
+			const { getEntityRecords, getTaxonomy } = select( coreStore );
+			let archiveTypeLabel;
+			let archiveNameLabel;
+			if ( taxonomy ) {
+				archiveTypeLabel =
+					getTaxonomy( taxonomy )?.labels?.singular_name;
+			}
+			if ( term ) {
+				const records = getEntityRecords( 'taxonomy', taxonomy, {
+					slug: term,
+					per_page: 1,
+				} );
+				if ( records && records[ 0 ] ) {
+					archiveNameLabel = records[ 0 ].name;
+				}
+			}
+			return {
+				archiveTypeLabel,
+				archiveNameLabel,
+			};
+		},
+		[ taxonomy, term ]
+	);
+}
+
+export default function useSiteEditorSettings() {
+	const { setIsInserterOpened } = useDispatch( editSiteStore );
+	const { storedSettings, canvasMode, templateType } = useSelect(
+		( select ) => {
+			const { getSettings, getCanvasMode, getEditedPostType } = unlock(
+				select( editSiteStore )
+			);
+			return {
+				storedSettings: getSettings( setIsInserterOpened ),
+				canvasMode: getCanvasMode(),
+				templateType: getEditedPostType(),
+			};
+		},
+		[ setIsInserterOpened ]
+	);
 
 	const settingsBlockPatterns =
 		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
@@ -27,14 +86,27 @@ export default function useSiteEditorSettings( templateType ) {
 		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
 		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
 
-	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
-		( select ) => ( {
-			restBlockPatterns: select( coreStore ).getBlockPatterns(),
-			restBlockPatternCategories:
-				select( coreStore ).getBlockPatternCategories(),
-		} ),
-		[]
-	);
+	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 archiveLabels = useArchiveLabel( templateSlug );
+
 	const blockPatterns = useMemo(
 		() =>
 			[
@@ -70,6 +142,7 @@ export default function useSiteEditorSettings( templateType ) {
 		const {
 			__experimentalAdditionalBlockPatterns,
 			__experimentalAdditionalBlockPatternCategories,
+			focusMode,
 			...restStoredSettings
 		} = storedSettings;
 
@@ -78,14 +151,16 @@ export default function useSiteEditorSettings( templateType ) {
 			inserterMediaCategories,
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
-			// Temporary fix for bug in Block Editor Provider:
-			// see: https://github.com/WordPress/gutenberg/issues/51489.
-			// Some Site Editor entities (e.g. `wp_navigation`) may utilise
-			// template locking in their settings. Therefore this must be
-			// explicitly "unset" to avoid the template locking UI remaining
-			// active for all entities.
-			templateLock: false,
-			template: false,
+			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
+			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
+			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 		};
-	}, [ storedSettings, blockPatterns, blockPatternCategories ] );
+	}, [
+		storedSettings,
+		blockPatterns,
+		blockPatternCategories,
+		canvasMode,
+		archiveLabels.archiveTypeLabel,
+		archiveLabels.archiveNameLabel,
+	] );
 }

package/src/components/canvas-spinner/index.js

@@ -2,21 +2,11 @@
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 export default function CanvasSpinner() {
-	const [ textColor ] = useGlobalStyle( 'color.text' );
-
 	return (
 		<div className="edit-site-canvas-spinner">
-			<Spinner style={ { color: textColor } } />
+			<Spinner />
 		</div>
 	);
 }

package/src/components/canvas-spinner/style.scss

@@ -2,6 +2,24 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
+	opacity: 0;
 	align-items: center;
 	justify-content: center;
+
+	animation: 0.5s ease 1s edit-site-canvas-spinner__fade-in-animation;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+
+	circle {
+		stroke: rgba($black, 0.3);
+	}
+}
+
+@keyframes edit-site-canvas-spinner__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }

package/src/components/code-editor/index.js

@@ -1,50 +1,56 @@
+/**
+ * External dependencies
+ */
+import Textarea from 'react-autosize-textarea';
+
 /**
  * WordPress dependencies
  */
-import { parse, __unstableSerializeAndClean } from '@wordpress/blocks';
-import { useEntityBlockEditor, useEntityProp } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
-import CodeEditorTextArea from './code-editor-text-area';
 
 export default function CodeEditor() {
-	const { templateType, shortcut } = useSelect( ( select ) => {
-		const { getEditedPostType } = select( editSiteStore );
+	const instanceId = useInstanceId( CodeEditor );
+	const { shortcut, content, blocks, type, id } = useSelect( ( select ) => {
+		const { getEditedEntityRecord } = select( coreStore );
+		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+		const _type = getEditedPostType();
+		const _id = getEditedPostId();
+		const editedRecord = getEditedEntityRecord( 'postType', _type, _id );
+
 		return {
-			templateType: getEditedPostType(),
 			shortcut: getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
+			content: editedRecord?.content,
+			blocks: editedRecord?.blocks,
+			type: _type,
+			id: _id,
 		};
 	}, [] );
-	const [ contentStructure, setContent ] = useEntityProp(
-		'postType',
-		templateType,
-		'content'
-	);
-	const [ blocks, , onChange ] = useEntityBlockEditor(
-		'postType',
-		templateType
-	);
-
+	const { editEntityRecord } = useDispatch( coreStore );
 	// Replicates the logic found in getEditedPostContent().
-	let content;
-	if ( contentStructure instanceof Function ) {
-		content = contentStructure( { blocks } );
-	} else if ( blocks ) {
-		// If we have parsed blocks already, they should be our source of truth.
-		// Parsing applies block deprecations and legacy block conversions that
-		// unparsed content will not have.
-		content = __unstableSerializeAndClean( blocks );
-	} else {
-		content = contentStructure;
-	}
+	const realContent = useMemo( () => {
+		if ( content instanceof Function ) {
+			return content( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			return __unstableSerializeAndClean( blocks );
+		}
+		return content;
+	}, [ content, blocks ] );
 
 	const { switchEditorMode } = useDispatch( editSiteStore );
 	return (
@@ -60,14 +66,26 @@ export default function CodeEditor() {
 				</Button>
 			</div>
 			<div className="edit-site-code-editor__body">
-				<CodeEditorTextArea
-					value={ content }
-					onChange={ ( newContent ) => {
-						onChange( parse( newContent ), {
+				<VisuallyHidden
+					as="label"
+					htmlFor={ `code-editor-text-area-${ instanceId }` }
+				>
+					{ __( 'Type text or HTML' ) }
+				</VisuallyHidden>
+				<Textarea
+					autoComplete="off"
+					dir="auto"
+					value={ realContent }
+					onChange={ ( event ) => {
+						editEntityRecord( 'postType', type, id, {
+							content: event.target.value,
+							blocks: undefined,
 							selection: undefined,
 						} );
 					} }
-					onInput={ setContent }
+					className="edit-site-code-editor-text-area"
+					id={ `code-editor-text-area-${ instanceId }` }
+					placeholder={ __( 'Start writing with text or HTML' ) }
 				/>
 			</div>
 		</div>

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

@@ -14,19 +14,22 @@ 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
  */
-import { SYNC_TYPES, USER_PATTERN_CATEGORY } from '../page-library/utils';
+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.full );
+	const [ syncType, setSyncType ] = useState( SYNC_TYPES.unsynced );
 	const [ isSubmitting, setIsSubmitting ] = useState( false );
 
 	const onSyncChange = () => {
@@ -52,9 +55,12 @@ export default function CreatePatternModal( {
 				'wp_block',
 				{
 					title: name || __( 'Untitled Pattern' ),
-					content: '',
+					content: blocks?.length ? serialize( blocks ) : '',
 					status: 'publish',
-					meta: { sync_status: syncType },
+					meta:
+						syncType === SYNC_TYPES.unsynced
+							? { wp_pattern_sync_status: syncType }
+							: undefined,
 				},
 				{ throwOnError: true }
 			);
@@ -73,12 +79,10 @@ export default function CreatePatternModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create a pattern' ) }
+			title={ title || __( 'Create pattern' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-pattern-modal"
 		>
-			<p>{ __( 'Turn this block into a pattern to reuse later' ) }</p>
-
 			<form
 				onSubmit={ async ( event ) => {
 					event.preventDefault();
@@ -100,13 +104,11 @@ export default function CreatePatternModal( {
 						__nextHasNoMarginBottom
 					/>
 					<ToggleControl
-						label={ __( 'Synced' ) }
+						label={ __( 'Keep all pattern instances in sync' ) }
 						onChange={ onSyncChange }
-						help={
-							syncType === SYNC_TYPES.full
-								? __( 'Content is synced' )
-								: __( 'Content is not synced' )
-						}
+						help={ __(
+							'Editing the original pattern will also update anywhere the pattern is used.'
+						) }
 						checked={ syncType === SYNC_TYPES.full }
 					/>
 					<HStack justify="right">

package/src/components/create-template-part-modal/index.js

@@ -101,7 +101,7 @@ export default function CreateTemplatePartModal( {
 
 	return (
 		<Modal
-			title={ __( 'Create a template part' ) }
+			title={ __( 'Create template part' ) }
 			onRequestClose={ closeModal }
 			overlayClassName="edit-site-create-template-part-modal"
 		>

package/src/components/editor/index.js

@@ -63,6 +63,18 @@ const typeLabels = {
 	wp_block: __( 'Pattern' ),
 };
 
+// Prevent accidental removal of certain blocks, asking the user for
+// confirmation.
+const blockRemovalRules = {
+	'core/query': __( 'Query Loop displays a list of posts or pages.' ),
+	'core/post-content': __(
+		'Post Content displays the content of a post or page.'
+	),
+	'core/post-template': __(
+		'Post Template displays each post or page in a Query Loop.'
+	),
+};
+
 export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
@@ -180,6 +192,7 @@ export default function Editor( { isLoading } ) {
 						<SidebarComplementaryAreaFills />
 						{ isEditMode && <StartTemplateOptions /> }
 						<InterfaceSkeleton
+							isDistractionFree={ true }
 							enableRegionNavigation={ false }
 							className={ classnames(
 								'edit-site-editor__interface-skeleton',
@@ -196,7 +209,9 @@ export default function Editor( { isLoading } ) {
 									{ showVisualEditor && editedPost && (
 										<>
 											<BlockEditor />
-											<BlockRemovalWarningModal />
+											<BlockRemovalWarningModal
+												rules={ blockRemovalRules }
+											/>
 										</>
 									) }
 									{ editorMode === 'text' &&

package/src/components/editor/style.scss

@@ -6,6 +6,10 @@
 	&.is-loading {
 		opacity: 0;
 	}
+
+	.interface-interface-skeleton__header {
+		border: 0;
+	}
 }
 
 .edit-site-editor__toggle-save-panel {

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/global-styles/stories/index.js

@@ -367,6 +367,7 @@ const BASE_SETTINGS = {
 			textColumns: false,
 			textDecoration: true,
 			textTransform: true,
+			writingMode: false,
 			fluid: true,
 			fontFamilies: {
 				theme: [

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

@@ -11,6 +11,7 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalUseNavigator as useNavigator,
 	createSlotFill,
+	Button,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
@@ -142,33 +143,42 @@ function GlobalStylesRevisionsMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
-				{ ( { onClose } ) => (
-					<MenuGroup>
-						{ hasRevisions && (
+			{ canReset || hasRevisions ? (
+				<DropdownMenu icon={ backup } label={ __( 'Revisions' ) }>
+					{ ( { onClose } ) => (
+						<MenuGroup>
+							{ hasRevisions && (
+								<MenuItem
+									onClick={ loadRevisions }
+									icon={
+										<RevisionsCountBadge>
+											{ revisionsCount }
+										</RevisionsCountBadge>
+									}
+								>
+									{ __( 'Revision history' ) }
+								</MenuItem>
+							) }
 							<MenuItem
-								onClick={ loadRevisions }
-								icon={
-									<RevisionsCountBadge>
-										{ revisionsCount }
-									</RevisionsCountBadge>
-								}
+								onClick={ () => {
+									onReset();
+									onClose();
+								} }
+								disabled={ ! canReset }
 							>
-								{ __( 'Revision history' ) }
+								{ __( 'Reset to defaults' ) }
 							</MenuItem>
-						) }
-						<MenuItem
-							onClick={ () => {
-								onReset();
-								onClose();
-							} }
-							disabled={ ! canReset }
-						>
-							{ __( 'Reset to defaults' ) }
-						</MenuItem>
-					</MenuGroup>
-				) }
-			</DropdownMenu>
+						</MenuGroup>
+					) }
+				</DropdownMenu>
+			) : (
+				<Button
+					label={ __( 'Revisions' ) }
+					icon={ backup }
+					disabled
+					__experimentalIsFocusable
+				/>
+			) }
 		</GlobalStylesMenuFill>
 	);
 }

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

@@ -20,6 +20,7 @@ import {
 	chevronLeftSmall as chevronLeftSmallIcon,
 	page as pageIcon,
 	navigation as navigationIcon,
+	symbol,
 } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useState, useEffect, useRef } from '@wordpress/element';
@@ -118,10 +119,17 @@ function TemplateDocumentActions( { className, onBack } ) {
 
 	const entityLabel = getEntityLabel( record.type );
 
+	let typeIcon = icon;
+	if ( record.type === 'wp_navigation' ) {
+		typeIcon = navigationIcon;
+	} else if ( record.type === 'wp_block' ) {
+		typeIcon = symbol;
+	}
+
 	return (
 		<BaseDocumentActions
 			className={ className }
-			icon={ record.type === 'wp_navigation' ? navigationIcon : icon }
+			icon={ typeIcon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">

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;