@wordpress/edit-site 4.4.0 → 4.7.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,
@@ -86,30 +87,34 @@ export default function NewTemplate( { postType } ) {
 	);
 	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 +167,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/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 } 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,17 @@ 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 +68,50 @@ 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 +130,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const isTemplatePart = templateType === 'wp_template_part';
+	const hasBlocks = blocks.length !== 0;
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
@@ -127,7 +146,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	// Conditionally include NavMenu sidebar in Plugin only.
 	// Optimise for dead code elimination.
 	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
-	let MaybeNavMenuSidebarToggle = 'Fragment';
+	let MaybeNavMenuSidebarToggle = Fragment;
 
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
@@ -186,7 +205,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/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/context-menu.js

@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
@@ -24,28 +24,28 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	return (
 		<ItemGroup>
 			{ hasTypographyPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ typography }
 					path={ parentMenu + '/typography' }
 				>
 					{ __( 'Typography' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasColorPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ color }
 					path={ parentMenu + '/colors' }
 				>
 					{ __( 'Colors' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 			{ hasLayoutPanel && (
-				<NavigationButton
+				<NavigationButtonAsItem
 					icon={ layout }
 					path={ parentMenu + '/layout' }
 				>
 					{ __( 'Layout' ) }
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			) }
 		</ItemGroup>
 	);

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

@@ -7,30 +7,33 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHeading as Heading,
 	__experimentalView as View,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
-import { NavigationBackButton } from './navigation-button';
-
 function ScreenHeader( { title, description } ) {
 	return (
-		<VStack spacing={ 2 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationBackButton
-						icon={ isRTL() ? chevronRight : chevronLeft }
-						size="small"
-						aria-label={ __( 'Navigate to the previous view' ) }
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
+		<VStack spacing={ 0 }>
+			<View>
+				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
+					<HStack spacing={ 2 }>
+						<NavigatorBackButton
+							style={
+								// TODO: This style override is also used in ToolsPanelHeader.
+								// It should be supported out-of-the-box by Button.
+								{ minWidth: 24, padding: 0 }
+							}
+							icon={ isRTL() ? chevronRight : chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<Spacer>
+							<Heading level={ 5 }>{ title }</Heading>
+						</Spacer>
+					</HStack>
 				</Spacer>
-			</HStack>
+			</View>
 			{ description && (
 				<p className="edit-site-global-styles-header__description">
 					{ description }

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

@@ -20,7 +20,7 @@ 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 );

package/src/components/global-styles/navigation-button.js

@@ -28,12 +28,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( props ) {
+function NavigationButtonAsItem( props ) {
 	return <NavigatorButton as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( props ) {
+function NavigationBackButtonAsItem( props ) {
 	return <NavigatorBackButton as={ GenericNavigationButton } { ...props } />;
 }
 
-export { NavigationButton, NavigationBackButton };
+export { NavigationButtonAsItem, NavigationBackButtonAsItem };

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

@@ -16,7 +16,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { useSetting } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 
@@ -58,7 +58,7 @@ function Palette( { name } ) {
 		<VStack spacing={ 3 }>
 			<Subtitle>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
-				<NavigationButton path={ screenPath }>
+				<NavigationButtonAsItem path={ screenPath }>
 					<HStack
 						direction={
 							colors.length === 0 ? 'row-reverse' : 'row'
@@ -73,7 +73,7 @@ function Palette( { name } ) {
 						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
-				</NavigationButton>
+				</NavigationButtonAsItem>
 			</ItemGroup>
 		</VStack>
 	);

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

@@ -22,7 +22,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 
 function useSortedBlockTypes() {
 	const blockItems = useSelect(
@@ -61,12 +61,12 @@ function BlockMenuItem( { block } ) {
 	}
 
 	return (
-		<NavigationButton path={ '/blocks/' + block.name }>
+		<NavigationButtonAsItem path={ '/blocks/' + block.name }>
 			<HStack justify="flex-start">
 				<BlockIcon icon={ block.icon } />
 				<FlexItem>{ block.title }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

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

@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
@@ -33,7 +33,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/background' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/background' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator
@@ -42,7 +42,7 @@ function BackgroundColorItem( { name, parentMenu } ) {
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Background' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -56,14 +56,14 @@ function TextColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/text' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/text' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Text' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 
@@ -77,14 +77,14 @@ function LinkColorItem( { name, parentMenu } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/colors/link' }>
+		<NavigationButtonAsItem path={ parentMenu + '/colors/link' }>
 			<HStack justify="flex-start">
 				<ColorIndicatorWrapper expanded={ false }>
 					<ColorIndicator colorValue={ color } />
 				</ColorIndicatorWrapper>
 				<FlexItem>{ __( 'Links' ) }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }