@wordpress/edit-site 4.5.0 → 4.8.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, find, includes, map } from 'lodash';
+import { filter, includes, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,10 +37,11 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { useHistory } from '../routes';
+import { store as editSiteStore } from '../../store';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
-	'single-post',
+	'single',
 	'page',
 	'index',
 	'archive',
@@ -55,7 +56,7 @@ const DEFAULT_TEMPLATE_SLUGS = [
 
 const TEMPLATE_ICONS = {
 	'front-page': home,
-	'single-post': post,
+	single: post,
 	page,
 	archive,
 	search,
@@ -78,38 +79,41 @@ export default function NewTemplate( { postType } ) {
 				'wp_template',
 				{ per_page: -1 }
 			),
-			defaultTemplateTypes: select(
-				editorStore
-			).__experimentalGetDefaultTemplateTypes(),
+			defaultTemplateTypes:
+				select( editorStore ).__experimentalGetDefaultTemplateTypes(),
 		} ),
 		[]
 	);
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
+	const { setTemplate } = useDispatch( editSiteStore );
 
-	async function createTemplate( { slug } ) {
+	async function createTemplate( template ) {
 		try {
-			const { title, description } = find( defaultTemplateTypes, {
-				slug,
-			} );
+			const { title, description, slug } = template;
 
-			const template = await saveEntityRecord(
+			const newTemplate = await saveEntityRecord(
 				'postType',
 				'wp_template',
 				{
-					excerpt: description,
+					description,
 					// Slugs need to be strings, so this is for template `404`
 					slug: slug.toString(),
 					status: 'publish',
 					title,
+					// This adds a post meta field in template that is part of `is_custom` value calculation.
+					is_wp_suggestion: true,
 				},
 				{ throwOnError: true }
 			);
 
+			// Set template before navigating away to avoid initial stale value.
+			setTemplate( newTemplate.id, newTemplate.slug );
+
 			// Navigate to the created template editor.
 			history.push( {
-				postId: template.id,
-				postType: template.type,
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			// TODO: Add a success notice?
@@ -162,23 +166,23 @@ export default function NewTemplate( { postType } ) {
 			{ () => (
 				<NavigableMenu className="edit-site-new-template-dropdown__popover">
 					<MenuGroup label={ postType.labels.add_new_item }>
-						{ map(
-							missingTemplates,
-							( { title, description, slug } ) => (
+						{ map( missingTemplates, ( template ) => {
+							const { title, description, slug } = template;
+							return (
 								<MenuItem
 									icon={ TEMPLATE_ICONS[ slug ] }
 									iconPosition="left"
 									info={ description }
 									key={ slug }
 									onClick={ () => {
-										createTemplate( { slug } );
+										createTemplate( template );
 										// We will be navigated way so no need to close the dropdown.
 									} }
 								>
 									{ title }
 								</MenuItem>
-							)
-						) }
+							);
+						} ) }
 					</MenuGroup>
 				</NavigableMenu>
 			) }

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

@@ -30,9 +30,8 @@ export default function BlockInspectorButton( { onClick = () => {} } ) {
 		} ),
 		[]
 	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	const label = isBlockInspectorOpen
 		? __( 'Hide more settings' )

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

@@ -2,12 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { omit, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef, Fragment } from '@wordpress/element';
+import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
 import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
@@ -48,44 +49,13 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings } = useSelect(
+	const { storedSettings, templateType, templateId, page } = useSelect(
 		( select ) => {
-			let storedSettings = select( editSiteStore ).getSettings(
-				setIsInserterOpen
-			);
-
-			if ( ! storedSettings.__experimentalBlockPatterns ) {
-				storedSettings = {
-					...storedSettings,
-					__experimentalBlockPatterns: select(
-						coreStore
-					).getBlockPatterns(),
-				};
-			}
-
-			if ( ! storedSettings.__experimentalBlockPatternCategories ) {
-				storedSettings = {
-					...storedSettings,
-					__experimentalBlockPatternCategories: select(
-						coreStore
-					).getBlockPatternCategories(),
-				};
-			}
-
-			return {
-				settings: storedSettings,
-			};
-		},
-		[ setIsInserterOpen ]
-	);
-
-	const { templateType, templateId, page } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId, getPage } = select(
-				editSiteStore
-			);
+			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
+				select( editSiteStore );
 
 			return {
+				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				templateId: getEditedPostId(),
 				page: getPage(),
@@ -94,6 +64,49 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		[ setIsInserterOpen ]
 	);
 
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+	const settingsBlockPatternCategories =
+		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
+		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
+
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
+		( select ) => ( {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories:
+				select( coreStore ).getBlockPatternCategories(),
+		} ),
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() => unionBy( settingsBlockPatterns, restBlockPatterns, 'name' ),
+		[ settingsBlockPatterns, restBlockPatterns ]
+	);
+
+	const blockPatternCategories = useMemo(
+		() =>
+			unionBy(
+				settingsBlockPatternCategories,
+				restBlockPatternCategories,
+				'name'
+			),
+		[ settingsBlockPatternCategories, restBlockPatternCategories ]
+	);
+
+	const settings = useMemo(
+		() => ( {
+			...omit( storedSettings, [
+				'__experimentalAdditionalBlockPatterns',
+				'__experimentalAdditionalBlockPatternCategories',
+			] ),
+			__experimentalBlockPatterns: blockPatterns,
+			__experimentalBlockPatternCategories: blockPatternCategories,
+		} ),
+		[ storedSettings, blockPatterns, blockPatternCategories ]
+	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		templateType
@@ -112,6 +125,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const isTemplatePart = templateType === 'wp_template_part';
+	const hasBlocks = blocks.length !== 0;
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
@@ -186,7 +200,9 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					<BlockList
 						className="edit-site-block-editor__block-list wp-site-blocks"
 						__experimentalLayout={ LAYOUT }
-						renderAppender={ isTemplatePart ? false : undefined }
+						renderAppender={
+							isTemplatePart && hasBlocks ? false : undefined
+						}
 					/>
 				</ResizableEditor>
 				<__unstableBlockSettingsMenuFirstItem>

package/src/components/code-editor/code-editor-text-area.js

@@ -3,17 +3,11 @@
  */
 import Textarea from 'react-autosize-textarea';
 
-/**
- * WordPress dependencies
- */
-/**
- * WordPress dependencies
- */
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { VisuallyHidden } from '@wordpress/components';
 
@@ -21,6 +15,7 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 	const [ stateValue, setStateValue ] = useState( value );
 	const [ isDirty, setIsDirty ] = useState( false );
 	const instanceId = useInstanceId( CodeEditorTextArea );
+	const valueRef = useRef();
 
 	if ( ! isDirty && stateValue !== value ) {
 		setStateValue( value );
@@ -42,6 +37,7 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 		onInput( newValue );
 		setStateValue( newValue );
 		setIsDirty( true );
+		valueRef.current = newValue;
 	};
 
 	/**
@@ -56,6 +52,15 @@ export default function CodeEditorTextArea( { value, onChange, onInput } ) {
 		}
 	};
 
+	// Ensure changes aren't lost when component unmounts.
+	useEffect( () => {
+		return () => {
+			if ( valueRef.current ) {
+				onChange( valueRef.current );
+			}
+		};
+	}, [] );
+
 	return (
 		<>
 			<VisuallyHidden

package/src/components/edit-template-part-menu-button/index.js

@@ -34,9 +34,8 @@ function EditTemplatePartMenuItem( { selectedClientId, onClose } ) {
 	const { params } = useLocation();
 	const selectedTemplatePart = useSelect(
 		( select ) => {
-			const block = select( blockEditorStore ).getBlock(
-				selectedClientId
-			);
+			const block =
+				select( blockEditorStore ).getBlock( selectedClientId );
 
 			if ( block && isTemplatePart( block ) ) {
 				const { theme, slug } = block.attributes;

package/src/components/editor/index.js

@@ -119,10 +119,8 @@ function Editor( { onError } ) {
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
 
-	const [
-		isEntitiesSavedStatesOpen,
-		setIsEntitiesSavedStatesOpen,
-	] = useState( false );
+	const [ isEntitiesSavedStatesOpen, setIsEntitiesSavedStatesOpen ] =
+		useState( false );
 	const openEntitiesSavedStates = useCallback(
 		() => setIsEntitiesSavedStatesOpen( true ),
 		[]
@@ -217,7 +215,8 @@ function Editor( { onError } ) {
 										<InterfaceSkeleton
 											labels={ {
 												...interfaceLabels,
-												secondarySidebar: secondarySidebarLabel,
+												secondarySidebar:
+													secondarySidebarLabel,
 											} }
 											className={
 												showIconLabels &&

package/src/components/global-styles/border-panel.js

@@ -182,18 +182,8 @@ export default function BorderPanel( { name } ) {
 						onChange={ onBorderChange }
 						showStyle={ showBorderStyle }
 						value={ border }
-						popoverClassNames={ {
-							linked:
-								'edit-site-global-styles-sidebar__border-box-control__popover',
-							top:
-								'edit-site-global-styles-sidebar__border-box-control__popover-top',
-							right:
-								'edit-site-global-styles-sidebar__border-box-control__popover-right',
-							bottom:
-								'edit-site-global-styles-sidebar__border-box-control__popover-bottom',
-							left:
-								'edit-site-global-styles-sidebar__border-box-control__popover-left',
-						} }
+						popoverPlacement="left-start"
+						popoverOffset={ 40 }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>

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

@@ -48,9 +48,8 @@ const cleanEmptyObject = ( object ) => {
 
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, settings, styles } = useSelect( ( select ) => {
-		const _globalStylesId = select(
-			coreStore
-		).__experimentalGetCurrentGlobalStylesId();
+		const _globalStylesId =
+			select( coreStore ).__experimentalGetCurrentGlobalStylesId();
 		const record = _globalStylesId
 			? select( coreStore ).getEditedEntityRecord(
 					'root',
@@ -108,11 +107,8 @@ function useGlobalStylesBaseConfig() {
 }
 
 function useGlobalStylesContext() {
-	const [
-		isUserConfigReady,
-		userConfig,
-		setUserConfig,
-	] = useGlobalStylesUserConfig();
+	const [ isUserConfigReady, userConfig, setUserConfig ] =
+		useGlobalStylesUserConfig();
 	const [ isBaseConfigReady, baseConfig ] = useGlobalStylesBaseConfig();
 	const mergedConfig = useMemo( () => {
 		if ( ! baseConfig || ! userConfig ) {

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -20,6 +15,8 @@ import { __ } from '@wordpress/i18n';
 import { useSetting } from './hooks';
 import Subtitle from './subtitle';
 
+const noop = () => {};
+
 export default function GradientPalettePanel( { name } ) {
 	const [ themeGradients, setThemeGradients ] = useSetting(
 		'color.gradients.theme',

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

@@ -20,16 +20,17 @@ import {
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
 
-const EMPTY_CONFIG = { isGlobalStylesUserThemeJSON: true, version: 1 };
+const EMPTY_CONFIG = { settings: {}, styles: {} };
 
 export const useGlobalStylesReset = () => {
 	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
 	const canReset = !! config && ! isEqual( config, EMPTY_CONFIG );
 	return [
 		canReset,
-		useCallback( () => setUserConfig( () => EMPTY_CONFIG ), [
-			setUserConfig,
-		] ),
+		useCallback(
+			() => setUserConfig( () => EMPTY_CONFIG ),
+			[ setUserConfig ]
+		),
 	];
 };
 

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

@@ -11,7 +11,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -79,10 +79,25 @@ const StylesPreview = ( { label, isFocused } ) => {
 		)
 		.slice( 0, 2 );
 
+	// Reset leaked styles from WP common.css.
+	const editorStyles = useMemo( () => {
+		if ( styles ) {
+			return [
+				...styles,
+				{
+					css: 'body{min-width: 0;}',
+					isGlobalStyles: true,
+				},
+			];
+		}
+
+		return styles;
+	}, [ styles ] );
+
 	return (
 		<Iframe
 			className="edit-site-global-styles-preview__iframe"
-			head={ <EditorStyles styles={ styles } /> }
+			head={ <EditorStyles styles={ editorStyles } /> }
 			style={ {
 				height: normalizedHeight * ratio,
 				visibility: ! width ? 'hidden' : 'visible',

package/src/components/global-styles/screen-block-list.js

@@ -40,10 +40,10 @@ function useSortedBlockTypes() {
 		type.push( block );
 		return blocks;
 	};
-	const {
-		core: coreItems,
-		noncore: nonCoreItems,
-	} = blockItems.reduce( groupByType, { core: [], noncore: [] } );
+	const { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(
+		groupByType,
+		{ core: [], noncore: [] }
+	);
 	return [ ...coreItems, ...nonCoreItems ];
 }
 

package/src/components/global-styles/screen-root.js

@@ -28,9 +28,10 @@ import StylesPreview from './preview';
 function ScreenRoot() {
 	const { variations } = useSelect( ( select ) => {
 		return {
-			variations: select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations(),
 		};
 	}, [] );
 

package/src/components/global-styles/screen-style-variations.js

@@ -79,6 +79,7 @@ function Variation( { variation } ) {
 				onKeyDown={ selectOnEnter }
 				tabIndex="0"
 				aria-label={ variation?.title }
+				aria-current={ isActive }
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
@@ -96,9 +97,10 @@ function Variation( { variation } ) {
 function ScreenStyleVariations() {
 	const { variations } = useSelect( ( select ) => {
 		return {
-			variations: select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations(),
 		};
 	}, [] );
 
@@ -109,7 +111,11 @@ function ScreenStyleVariations() {
 				settings: {},
 				styles: {},
 			},
-			...variations,
+			...variations.map( ( variation ) => ( {
+				...variation,
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			} ) ),
 		];
 	}, [ variations ] );
 

package/src/components/global-styles/use-global-styles-output.js

@@ -220,11 +220,8 @@ function getStylesDeclarations( blockStyles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( blockStyles, { selector: 'self' } );
+	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		const cssProperty = rule.key.startsWith( '--' )
 			? rule.key
 			: kebabCase( rule.key );

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

@@ -66,7 +66,7 @@
 	}
 }
 
-.edit-site-document-actions__info-dropdown > .components-popover__content > div {
+.edit-site-document-actions__info-dropdown > .components-popover__content {
 	padding: 0;
 	min-width: 240px;
 }

package/src/components/header/index.js

@@ -57,9 +57,8 @@ export default function Header( {
 			getEditorMode,
 		} = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		const postType = getEditedPostType();

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

@@ -36,10 +36,10 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-site/toggle-mode' ),
-			isRichEditingEnabled: select( editSiteStore ).getSettings()
-				.richEditingEnabled,
-			isCodeEditingEnabled: select( editSiteStore ).getSettings()
-				.codeEditingEnabled,
+			isRichEditingEnabled:
+				select( editSiteStore ).getSettings().richEditingEnabled,
+			isCodeEditingEnabled:
+				select( editSiteStore ).getSettings().codeEditingEnabled,
 			mode: select( editSiteStore ).getEditorMode(),
 		} ),
 		[]

package/src/components/header/more-menu/copy-content-menu-item.js

@@ -18,9 +18,8 @@ export default function CopyContentMenuItem() {
 	const { createNotice } = useDispatch( noticesStore );
 	const getText = useSelect( ( select ) => {
 		return () => {
-			const { getEditedPostId, getEditedPostType } = select(
-				editSiteStore
-			);
+			const { getEditedPostId, getEditedPostType } =
+				select( editSiteStore );
 			const { getEditedEntityRecord } = select( coreStore );
 			const record = getEditedEntityRecord(
 				'postType',
@@ -49,5 +48,5 @@ export default function CopyContentMenuItem() {
 
 	const ref = useCopyToClipboard( getText, onSuccess );
 
-	return <MenuItem ref={ ref }>{ __( 'Copy all content' ) }</MenuItem>;
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
 }

package/src/components/header/more-menu/site-export.js

@@ -26,9 +26,8 @@ export default function SiteExport() {
 			const contentDisposition = response.headers.get(
 				'content-disposition'
 			);
-			const contentDispositionMatches = contentDisposition.match(
-				/=(.+)\.zip/
-			);
+			const contentDispositionMatches =
+				contentDisposition.match( /=(.+)\.zip/ );
 			const fileName = contentDispositionMatches[ 1 ]
 				? contentDispositionMatches[ 1 ]
 				: 'edit-site-export';

package/src/components/keyboard-shortcuts/index.js

@@ -19,10 +19,8 @@ import { SIDEBAR_BLOCK } from '../sidebar/constants';
 import { STORE_NAME } from '../../store/constants';
 
 function KeyboardShortcuts( { openEntitiesSavedStates } ) {
-	const {
-		__experimentalGetDirtyEntityRecords,
-		isSavingEntityRecord,
-	} = useSelect( coreStore );
+	const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+		useSelect( coreStore );
 	const { getEditorMode } = useSelect( editSiteStore );
 	const isListViewOpen = useSelect(
 		( select ) => select( editSiteStore ).isListViewOpened(),
@@ -36,12 +34,10 @@ function KeyboardShortcuts( { openEntitiesSavedStates } ) {
 		[]
 	);
 	const { redo, undo } = useDispatch( coreStore );
-	const { setIsListViewOpened, switchEditorMode } = useDispatch(
-		editSiteStore
-	);
-	const { enableComplementaryArea, disableComplementaryArea } = useDispatch(
-		interfaceStore
-	);
+	const { setIsListViewOpened, switchEditorMode } =
+		useDispatch( editSiteStore );
+	const { enableComplementaryArea, disableComplementaryArea } =
+		useDispatch( interfaceStore );
 
 	useShortcut( 'core/edit-site/save', ( event ) => {
 		event.preventDefault();

package/src/components/list/actions/index.js

@@ -19,9 +19,8 @@ import RenameMenuItem from './rename-menu-item';
 export default function Actions( { template } ) {
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );