@wordpress/edit-site 4.1.1 → 4.3.1

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

@@ -15,6 +15,21 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import {
+	archive,
+	blockMeta,
+	category,
+	home,
+	list,
+	media,
+	notFound,
+	page,
+	post,
+	postAuthor,
+	postDate,
+	search,
+	tag,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -27,12 +42,33 @@ const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
 	'single-post',
 	'page',
+	'index',
 	'archive',
+	'author',
+	'category',
+	'date',
+	'tag',
+	'taxonomy',
 	'search',
 	'404',
-	'index',
 ];
 
+const TEMPLATE_ICONS = {
+	'front-page': home,
+	'single-post': post,
+	page,
+	archive,
+	search,
+	404: notFound,
+	index: list,
+	category,
+	author: postAuthor,
+	taxonomy: blockMeta,
+	date: postDate,
+	tag,
+	attachment: media,
+};
+
 export default function NewTemplate( { postType } ) {
 	const history = useHistory();
 	const { templates, defaultTemplateTypes } = useSelect(
@@ -50,7 +86,6 @@ export default function NewTemplate( { postType } ) {
 	);
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { getLastEntitySaveError } = useSelect( coreStore );
 
 	async function createTemplate( { slug } ) {
 		try {
@@ -67,18 +102,10 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
-				}
+				},
+				{ throwOnError: true }
 			);
 
-			const lastEntitySaveError = getLastEntitySaveError(
-				'postType',
-				'wp_template',
-				template.id
-			);
-			if ( lastEntitySaveError ) {
-				throw lastEntitySaveError;
-			}
-
 			// Navigate to the created template editor.
 			history.push( {
 				postId: template.id,
@@ -111,6 +138,14 @@ export default function NewTemplate( { postType } ) {
 		return null;
 	}
 
+	// Update the sort order to match the DEFAULT_TEMPLATE_SLUGS order.
+	missingTemplates.sort( ( template1, template2 ) => {
+		return (
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template1.slug ) -
+			DEFAULT_TEMPLATE_SLUGS.indexOf( template2.slug )
+		);
+	} );
+
 	return (
 		<DropdownMenu
 			className="edit-site-new-template-dropdown"
@@ -131,6 +166,8 @@ export default function NewTemplate( { postType } ) {
 							missingTemplates,
 							( { title, description, slug } ) => (
 								<MenuItem
+									icon={ TEMPLATE_ICONS[ slug ] }
+									iconPosition="left"
 									info={ description }
 									key={ slug }
 									onClick={ () => {

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

@@ -8,20 +8,26 @@ import classnames from 'classnames';
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useRef } from '@wordpress/element';
-import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
 	BlockEditorProvider,
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
+	__unstableBlockToolbarLastItem,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
+	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
+import { listView } from '@wordpress/icons';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -42,17 +48,44 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings, templateType, templateId, page } = useSelect(
+	const { settings } = useSelect(
 		( select ) => {
-			const {
-				getSettings,
-				getEditedPostType,
-				getEditedPostId,
-				getPage,
-			} = select( editSiteStore );
+			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
+			);
 
 			return {
-				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				templateId: getEditedPostId(),
 				page: getPage(),
@@ -60,11 +93,19 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		},
 		[ setIsInserterOpen ]
 	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	const openNavigationSidebar = useCallback( () => {
+		enableComplementaryArea(
+			'core/edit-site',
+			'edit-site/navigation-menu'
+		);
+	}, [ enableComplementaryArea ] );
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -72,6 +113,26 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 
 	const isTemplatePart = templateType === 'wp_template_part';
 
+	const NavMenuSidebarToggle = () => (
+		<ToolbarGroup>
+			<ToolbarButton
+				className="components-toolbar__control"
+				label={ __( 'Open list view' ) }
+				onClick={ openNavigationSidebar }
+				icon={ listView }
+			/>
+		</ToolbarGroup>
+	);
+
+	// 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';
+
+	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+	}
+
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -133,6 +194,15 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						<BlockInspectorButton onClick={ onClose } />
 					) }
 				</__unstableBlockSettingsMenuFirstItem>
+				<__unstableBlockToolbarLastItem>
+					<__unstableBlockNameContext.Consumer>
+						{ ( blockName ) =>
+							blockName === 'core/navigation' && (
+								<MaybeNavMenuSidebarToggle />
+							)
+						}
+					</__unstableBlockNameContext.Consumer>
+				</__unstableBlockToolbarLastItem>
 			</BlockTools>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>

package/src/components/editor/index.js

@@ -5,7 +5,11 @@ import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover, Button, Notice } from '@wordpress/components';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
-import { BlockContextProvider, BlockBreadcrumb } from '@wordpress/block-editor';
+import {
+	BlockContextProvider,
+	BlockBreadcrumb,
+	BlockStyles,
+} from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
 	ComplementaryArea,
@@ -21,6 +25,7 @@ import {
 	ShortcutProvider,
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -61,6 +66,7 @@ function Editor( { onError } ) {
 		previousShortcut,
 		nextShortcut,
 		editorMode,
+		showIconLabels,
 	} = useSelect( ( select ) => {
 		const {
 			isInserterOpened,
@@ -105,6 +111,10 @@ function Editor( { onError } ) {
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ),
 			editorMode: getEditorMode(),
+			showIconLabels: select( preferencesStore ).get(
+				'core/edit-site',
+				'showIconLabels'
+			),
 		};
 	}, [] );
 	const { setPage, setIsInserterOpened } = useDispatch( editSiteStore );
@@ -203,6 +213,10 @@ function Editor( { onError } ) {
 										<SidebarComplementaryAreaFills />
 										<InterfaceSkeleton
 											labels={ interfaceLabels }
+											className={
+												showIconLabels &&
+												'show-icon-labels'
+											}
 											secondarySidebar={ secondarySidebar() }
 											sidebar={
 												sidebarIsOpened && (
@@ -217,12 +231,16 @@ function Editor( { onError } ) {
 													openEntitiesSavedStates={
 														openEntitiesSavedStates
 													}
+													showIconLabels={
+														showIconLabels
+													}
 												/>
 											}
 											notices={ <EditorSnackbars /> }
 											content={
 												<>
 													<EditorNotices />
+													<BlockStyles.Slot scope="core/block-inspector" />
 													{ editorMode === 'visual' &&
 														template && (
 															<BlockEditor

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

@@ -4,7 +4,7 @@
 import {
 	__experimentalBorderRadiusControl as BorderRadiusControl,
 	__experimentalBorderStyleControl as BorderStyleControl,
-	__experimentalColorGradientControl as ColorGradientControl,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 } from '@wordpress/block-editor';
 import {
 	__experimentalToolsPanel as ToolsPanel,
@@ -17,14 +17,15 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+import {
+	getSupportedGlobalStylesPanels,
+	useColorsPerOrigin,
+	useSetting,
+	useStyle,
+} from './hooks';
 
 const MIN_BORDER_WIDTH = 0;
 
-// Defining empty array here instead of inline avoids unnecessary re-renders of
-// color control.
-const EMPTY_ARRAY = [];
-
 export function useHasBorderPanel( name ) {
 	const controls = [
 		useHasBorderColorControl( name ),
@@ -100,13 +101,32 @@ export default function BorderPanel( { name } ) {
 	const showBorderStyle = useHasBorderStyleControl( name );
 	const [ borderStyle, setBorderStyle ] = useStyle( 'border.style', name );
 
+	// When we set a border color or width ensure we have a style so the user
+	// can see a visible border.
+	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
+		if ( !! value && ! borderStyle ) {
+			setBorderStyle( 'solid' );
+		}
+
+		setStyle( value || undefined );
+	};
+
 	// Border color.
 	const showBorderColor = useHasBorderColorControl( name );
 	const [ borderColor, setBorderColor ] = useStyle( 'border.color', name );
-	const [ colors = EMPTY_ARRAY ] = useSetting( 'color.palette' );
 	const disableCustomColors = ! useSetting( 'color.custom' )[ 0 ];
 	const disableCustomGradients = ! useSetting( 'color.customGradient' )[ 0 ];
 
+	const borderColorSettings = [
+		{
+			label: __( 'Color' ),
+			colors: useColorsPerOrigin( name ),
+			colorValue: borderColor,
+			onColorChange: handleOnChangeWithStyle( setBorderColor ),
+			clearable: false,
+		},
+	];
+
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( name );
 	const [ borderRadiusValues, setBorderRadius ] = useStyle(
@@ -128,16 +148,6 @@ export default function BorderPanel( { name } ) {
 		setBorderWidth( undefined );
 	};
 
-	// When we set a border color or width ensure we have a style so the user
-	// can see a visible border.
-	const handleOnChangeWithStyle = ( setStyle ) => ( value ) => {
-		if ( !! value && ! borderStyle ) {
-			setBorderStyle( 'solid' );
-		}
-
-		setStyle( value || undefined );
-	};
-
 	return (
 		<ToolsPanel label={ __( 'Border' ) } resetAll={ resetAll }>
 			{ showBorderWidth && (
@@ -178,17 +188,13 @@ export default function BorderPanel( { name } ) {
 					onDeselect={ createResetCallback( setBorderColor ) }
 					isShownByDefault={ true }
 				>
-					<ColorGradientControl
-						label={ __( 'Color' ) }
-						colorValue={ borderColor }
-						colors={ colors }
-						gradients={ undefined }
+					<ColorGradientSettingsDropdown
+						__experimentalHasMultipleOrigins
+						__experimentalIsRenderedInSidebar
 						disableCustomColors={ disableCustomColors }
 						disableCustomGradients={ disableCustomGradients }
-						onColorChange={ handleOnChangeWithStyle(
-							setBorderColor
-						) }
-						clearable={ false }
+						enableAlpha
+						settings={ borderColorSettings }
 					/>
 				</ToolsPanelItem>
 			) }

package/src/components/global-styles/color-indicator-wrapper.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Flex } from '@wordpress/components';
+
+function ColorIndicatorWrapper( { className, ...props } ) {
+	return (
+		<Flex
+			className={ classnames(
+				'edit-site-global-styles__color-indicator-wrapper',
+				className
+			) }
+			{ ...props }
+		/>
+	);
+}
+
+export default ColorIndicatorWrapper;

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

@@ -43,8 +43,13 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-
-	return settings && supports.includes( '--wp--style--block-gap' );
+	// Do not show the gap control panel for block-level global styles
+	// as they do not work on the frontend.
+	// See: https://github.com/WordPress/gutenberg/pull/39845.
+	// We can revert this condition when they're working again.
+	return !! name
+		? false
+		: settings && supports.includes( '--wp--style--block-gap' );
 }
 
 function filterValuesBySides( values, sides ) {

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

@@ -9,7 +9,7 @@ import {
 	__experimentalView as View,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
-import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
+import { chevronRight, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -22,12 +22,7 @@ function ScreenHeader( { title, description } ) {
 			<HStack spacing={ 2 }>
 				<View>
 					<NavigationBackButton
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
+						icon={ isRTL() ? chevronRight : chevronLeft }
 						size="small"
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>

package/src/components/global-styles/icon-with-current-color.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export function IconWithCurrentColor( { className, ...props } ) {
+	return (
+		<Icon
+			className={ classnames(
+				className,
+				'edit-site-global-styles-icon-with-current-color'
+			) }
+			{ ...props }
+		/>
+	);
+}

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

@@ -8,16 +8,18 @@ import {
 	FlexItem,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { IconWithCurrentColor } from './icon-with-current-color';
 
 function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
 		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
+					<IconWithCurrentColor icon={ icon } size={ 24 } />
 					<FlexItem>{ children }</FlexItem>
 				</HStack>
 			) }

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

@@ -7,7 +7,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
-	FlexBlock,
 	ColorIndicator,
 } from '@wordpress/components';
 import { __, _n, sprintf } from '@wordpress/i18n';
@@ -19,6 +18,7 @@ import { useMemo } from '@wordpress/element';
 import Subtitle from './subtitle';
 import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
 
 const EMPTY_COLORS = [];
 
@@ -64,16 +64,13 @@ function Palette( { name } ) {
 							colors.length === 0 ? 'row-reverse' : 'row'
 						}
 					>
-						<FlexBlock>
-							<ZStack isLayered={ false } offset={ -8 }>
-								{ colors.slice( 0, 5 ).map( ( { color } ) => (
-									<ColorIndicator
-										key={ color }
-										colorValue={ color }
-									/>
-								) ) }
-							</ZStack>
-						</FlexBlock>
+						<ZStack isLayered={ false } offset={ -8 }>
+							{ colors.slice( 0, 5 ).map( ( { color } ) => (
+								<ColorIndicatorWrapper key={ color }>
+									<ColorIndicator colorValue={ color } />
+								</ColorIndicatorWrapper>
+							) ) }
+						</ZStack>
 						<FlexItem>{ paletteButtonText }</FlexItem>
 					</HStack>
 				</NavigationButton>