@wordpress/edit-site 4.2.0 → 4.3.0

package/build-style/style.css

@@ -773,20 +773,30 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
+}
+.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
   padding: 2px;
   border-radius: 2px;
   border: #e0e0e0 1px solid;
 }
-.edit-site-global-styles-variations_item.is-active {
+.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
   border: #1e1e1e 1px solid;
 }
-.edit-site-global-styles-variations_item:hover {
+.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
-.edit-site-global-styles-variations_item:focus {
+.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
   border: var(--wp-admin-theme-color) 1px solid;
 }
 
+.edit-site-global-styles-icon-with-current-color {
+  fill: currentColor;
+}
+
+.edit-site-global-styles__color-indicator-wrapper {
+  height: 24px;
+}
+
 .edit-site-header {
   align-items: center;
   background-color: #fff;
@@ -1537,7 +1547,7 @@ body.is-fullscreen-mode .edit-site-list-header {
   padding: 0 8px;
   height: 24px;
   border-radius: 2px;
-  background-color: #000;
+  background-color: #1e1e1e;
   color: #fff;
   align-items: center;
   font-size: 12px;
@@ -1614,6 +1624,43 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -4px 0 0 var(--wp-admin-theme-color);
 }
 
+@keyframes loadingpulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.edit-site-navigation-inspector {
+  padding: 16px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-leaf .block-editor-list-view-block-contents {
+  align-items: flex-start;
+  white-space: normal;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__title {
+  margin-top: 3px;
+}
+.edit-site-navigation-inspector .block-editor-list-view-block__menu-cell {
+  padding-right: 0;
+}
+
+.edit-site-navigation-inspector__placeholder {
+  padding: 8px;
+  margin: 8px;
+  background-color: #f0f0f0;
+  animation: loadingpulse 1s linear infinite;
+  animation-delay: 0.5s;
+}
+.edit-site-navigation-inspector__placeholder.is-child {
+  margin-left: 24px;
+  width: 50%;
+}
+
 .edit-site-template-card {
   display: flex;
   align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "4.2.0",
+	"version": "4.3.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,33 +27,33 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.5.0",
-		"@wordpress/api-fetch": "^6.2.0",
-		"@wordpress/block-editor": "^8.4.0",
-		"@wordpress/block-library": "^7.2.0",
-		"@wordpress/blocks": "^11.4.0",
-		"@wordpress/components": "^19.7.0",
-		"@wordpress/compose": "^5.3.0",
-		"@wordpress/core-data": "^4.3.0",
-		"@wordpress/data": "^6.5.0",
-		"@wordpress/deprecated": "^3.5.0",
-		"@wordpress/editor": "^12.4.0",
-		"@wordpress/element": "^4.3.0",
-		"@wordpress/hooks": "^3.5.0",
-		"@wordpress/html-entities": "^3.5.0",
-		"@wordpress/i18n": "^4.5.0",
-		"@wordpress/icons": "^8.1.0",
-		"@wordpress/interface": "^4.4.0",
-		"@wordpress/keyboard-shortcuts": "^3.3.0",
-		"@wordpress/keycodes": "^3.5.0",
-		"@wordpress/media-utils": "^3.3.0",
-		"@wordpress/notices": "^3.5.0",
-		"@wordpress/plugins": "^4.3.0",
-		"@wordpress/preferences": "^1.1.0",
-		"@wordpress/reusable-blocks": "^3.3.0",
-		"@wordpress/style-engine": "^0.4.0",
-		"@wordpress/url": "^3.6.0",
-		"@wordpress/viewport": "^4.3.0",
+		"@wordpress/a11y": "^3.6.0",
+		"@wordpress/api-fetch": "^6.3.0",
+		"@wordpress/block-editor": "^8.5.0",
+		"@wordpress/block-library": "^7.3.0",
+		"@wordpress/blocks": "^11.5.0",
+		"@wordpress/components": "^19.8.0",
+		"@wordpress/compose": "^5.4.0",
+		"@wordpress/core-data": "^4.4.0",
+		"@wordpress/data": "^6.6.0",
+		"@wordpress/deprecated": "^3.6.0",
+		"@wordpress/editor": "^12.5.0",
+		"@wordpress/element": "^4.4.0",
+		"@wordpress/hooks": "^3.6.0",
+		"@wordpress/html-entities": "^3.6.0",
+		"@wordpress/i18n": "^4.6.0",
+		"@wordpress/icons": "^8.2.0",
+		"@wordpress/interface": "^4.5.0",
+		"@wordpress/keyboard-shortcuts": "^3.4.0",
+		"@wordpress/keycodes": "^3.6.0",
+		"@wordpress/media-utils": "^3.4.0",
+		"@wordpress/notices": "^3.6.0",
+		"@wordpress/plugins": "^4.4.0",
+		"@wordpress/preferences": "^1.2.0",
+		"@wordpress/reusable-blocks": "^3.4.0",
+		"@wordpress/style-engine": "^0.5.0",
+		"@wordpress/url": "^3.7.0",
+		"@wordpress/viewport": "^4.4.0",
 		"classnames": "^2.3.1",
 		"downloadjs": "^1.4.7",
 		"history": "^5.1.0",
@@ -68,5 +68,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
+	"gitHead": "11eb1241e63c9240018323551c6753f8a5fa96f9"
 }

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/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

@@ -6,6 +6,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalBoxControl as BoxControl,
+	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
@@ -20,8 +21,9 @@ const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 export function useHasDimensionsPanel( name ) {
 	const hasPadding = useHasPadding( name );
 	const hasMargin = useHasMargin( name );
+	const hasGap = useHasGap( name );
 
-	return hasPadding || hasMargin;
+	return hasPadding || hasMargin || hasGap;
 }
 
 function useHasPadding( name ) {
@@ -38,6 +40,18 @@ function useHasMargin( name ) {
 	return settings && supports.includes( 'margin' );
 }
 
+function useHasGap( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ settings ] = useSetting( 'spacing.blockGap', name );
+	// 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 ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -79,6 +93,7 @@ function splitStyleValue( value ) {
 export default function DimensionsPanel( { name } ) {
 	const showPaddingControl = useHasPadding( name );
 	const showMarginControl = useHasMargin( name );
+	const showGapControl = useHasGap( name );
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units', name )[ 0 ] || [
 			'%',
@@ -118,9 +133,15 @@ export default function DimensionsPanel( { name } ) {
 	const resetMarginValue = () => setMarginValues( {} );
 	const hasMarginValue = () =>
 		!! marginValues && Object.keys( marginValues ).length;
+
+	const [ gapValue, setGapValue ] = useStyle( 'spacing.blockGap', name );
+	const resetGapValue = () => setGapValue( undefined );
+	const hasGapValue = () => !! gapValue;
+
 	const resetAll = () => {
 		resetPaddingValue();
 		resetMarginValue();
+		resetGapValue();
 	};
 
 	return (
@@ -161,6 +182,23 @@ export default function DimensionsPanel( { name } ) {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showGapControl && (
+				<ToolsPanelItem
+					hasValue={ hasGapValue }
+					label={ __( 'Block spacing' ) }
+					onDeselect={ resetGapValue }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Block spacing' ) }
+						__unstableInputWidth="80px"
+						min={ 0 }
+						onChange={ setGapValue }
+						units={ units }
+						value={ gapValue }
+					/>
+				</ToolsPanelItem>
+			) }
 		</ToolsPanel>
 	);
 }

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>