@wordpress/edit-site 4.4.0 → 4.5.0

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/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>
 	);
 }
 

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

@@ -3,8 +3,8 @@
  */
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
 	FlexItem,
 	CardBody,
@@ -21,7 +21,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 
@@ -37,48 +37,58 @@ function ScreenRoot() {
 	return (
 		<Card size="small">
 			<CardBody>
-				<VStack spacing={ 2 }>
+				<VStack spacing={ 4 }>
 					<Card>
 						<CardMedia>
 							<StylesPreview />
 						</CardMedia>
 					</Card>
 					{ !! variations?.length && (
-						<NavigationButton path="/variations">
-							<HStack justify="space-between">
-								<FlexItem>{ __( 'Browse styles' ) }</FlexItem>
-								<IconWithCurrentColor
-									icon={
-										isRTL() ? chevronLeft : chevronRight
-									}
-								/>
-							</HStack>
-						</NavigationButton>
+						<ItemGroup>
+							<NavigationButtonAsItem path="/variations">
+								<HStack justify="space-between">
+									<FlexItem>
+										{ __( 'Browse styles' ) }
+									</FlexItem>
+									<IconWithCurrentColor
+										icon={
+											isRTL() ? chevronLeft : chevronRight
+										}
+									/>
+								</HStack>
+							</NavigationButtonAsItem>
+						</ItemGroup>
 					) }
+					<ContextMenu />
 				</VStack>
 			</CardBody>
 
-			<CardBody>
-				<ContextMenu />
-			</CardBody>
-
 			<CardDivider />
 
 			<CardBody>
+				<Spacer
+					as="p"
+					paddingTop={ 2 }
+					/*
+					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
+					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
+					 */
+					paddingX="13px"
+					marginBottom={ 4 }
+				>
+					{ __(
+						'Customize the appearance of specific blocks for the whole site.'
+					) }
+				</Spacer>
 				<ItemGroup>
-					<Item>
-						{ __(
-							'Customize the appearance of specific blocks for the whole site.'
-						) }
-					</Item>
-					<NavigationButton path="/blocks">
+					<NavigationButtonAsItem path="/blocks">
 						<HStack justify="space-between">
 							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
 							<IconWithCurrentColor
 								icon={ isRTL() ? chevronLeft : chevronRight }
 							/>
 						</HStack>
-					</NavigationButton>
+					</NavigationButtonAsItem>
 				</ItemGroup>
 			</CardBody>
 		</Card>

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

@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import { NavigationButton } from './navigation-button';
+import { NavigationButtonAsItem } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -44,7 +44,7 @@ function Item( { name, parentMenu, element, label } ) {
 	}
 
 	return (
-		<NavigationButton path={ parentMenu + '/typography/' + element }>
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
 			<HStack justify="flex-start">
 				<FlexItem
 					className="edit-site-global-styles-screen-typography__indicator"
@@ -62,7 +62,7 @@ function Item( { name, parentMenu, element, label } ) {
 				</FlexItem>
 				<FlexItem>{ label }</FlexItem>
 			</HStack>
-		</NavigationButton>
+		</NavigationButtonAsItem>
 	);
 }
 

package/src/components/header/style.scss

@@ -104,8 +104,9 @@ body.is-navigation-sidebar-open {
 	margin: 0 -6px 0;
 }
 
+
 /**
- * Buttons in the Toolbar
+ * Buttons on the right side
  */
 
 .edit-site-header__actions {
@@ -113,36 +114,23 @@ body.is-navigation-sidebar-open {
 	align-items: center;
 	padding-right: $grid-unit-05;
 
-	.interface-pinned-items {
-		display: none;
-
-		@include break-medium() {
-			display: inline-flex;
-		}
+	@include break-small () {
+		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
 	}
 
-	// Adjust button paddings to scale better to mobile.
-	.editor-post-saved-state,
-	.components-button.components-button {
-		margin-right: $grid-unit-05;
-
-		@include break-small() {
-			margin-right: $grid-unit-15;
-		}
-	}
+	gap: $grid-unit-05;
 
-	.editor-post-saved-state,
-	.components-button.is-tertiary {
-		padding: 0 #{$grid-unit-15 * 0.5};
+	@include break-small() {
+		gap: $grid-unit-10;
 	}
 
-	.edit-site-more-menu .components-button,
-	.interface-pinned-items .components-button {
-		margin-right: 0;
-	}
+	// Pinned items.
+	.interface-pinned-items {
+		display: none;
 
-	@include break-small() {
-		padding-right: $grid-unit-20;
+		@include break-medium() {
+			display: inline-flex;
+		}
 	}
 }
 
@@ -192,11 +180,8 @@ body.is-navigation-sidebar-open {
 	.edit-site-save-button__button {
 		padding-left: 6px;
 		padding-right: 6px;
-		margin-right: $grid-unit-05;
-	}
-	.block-editor-post-preview__button-toggle {
-		margin-right: $grid-unit-05;
 	}
+
 	// The inserter and the template details toggle have custom labels, different from their aria-label, so we don't want to display both.
 	.edit-site-header-toolbar__inserter-toggle.edit-site-header-toolbar__inserter-toggle,
 	.edit-site-document-actions__get-info.edit-site-document-actions__get-info.edit-site-document-actions__get-info {

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -59,11 +59,7 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<ListView
-					showNestedBlocks
-					__experimentalFeatures
-					__experimentalPersistentListViewFeatures
-				/>
+				<ListView />
 			</div>
 		</div>
 	);

package/src/components/sidebar/index.js

@@ -4,7 +4,7 @@
 import { createSlotFill, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { cog } from '@wordpress/icons';
-import { useEffect } from '@wordpress/element';
+import { useEffect, Fragment } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -62,7 +62,7 @@ export function SidebarComplementaryAreaFills() {
 	// 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 MaybeNavigationMenuSidebar = 'Fragment';
+	let MaybeNavigationMenuSidebar = Fragment;
 
 	if ( process.env.IS_GUTENBERG_PLUGIN ) {
 		MaybeNavigationMenuSidebar = NavigationMenuSidebar;

package/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js

@@ -50,13 +50,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 	}, [ updateBlockListSettings, innerBlocks ] );
 	return (
 		<>
-			<ListView
-				id={ id }
-				showNestedBlocks
-				expandNested={ false }
-				__experimentalFeatures
-				__experimentalPersistentListViewFeatures
-			/>
+			<ListView id={ id } />
 		</>
 	);
 }

package/src/components/sidebar/style.scss

@@ -136,3 +136,9 @@ $split-border-control-offset: 55px;
 		}
 	}
 }
+
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.edit-site-global-styles-sidebar hr {
+	margin: 0;
+}

package/src/index.js

@@ -103,7 +103,6 @@ export function initializeEditor( id, settings ) {
 	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
 		fetchLinkSuggestions( search, searchOptions, settings );
 	settings.__experimentalFetchRichUrlData = fetchUrlData;
-	settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
 
 	const target = document.getElementById( id );