@wordpress/edit-site 4.4.0 → 4.7.0

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/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/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/list/style.scss

@@ -95,6 +95,7 @@
 		// Added by.
 		.edit-site-list-table-column:nth-child(2) {
 			width: calc(40% - 18px);
+			word-break: break-word;
 		}
 
 		// Actions.

package/src/components/list/table.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	VisuallyHidden,

package/src/components/navigation-sidebar/navigation-panel/constants.js

@@ -31,7 +31,7 @@ export const TEMPLATES_SECONDARY = [
 	'date',
 	'tag',
 	'attachment',
-	'single-post',
+	'single',
 	'front-page',
 ];
 
@@ -45,7 +45,7 @@ export const TEMPLATES_GENERAL = [ 'page-home' ];
 export const TEMPLATES_POSTS_PREFIXES = [
 	'post-',
 	'author-',
-	'single-post-',
+	'single-',
 	'tag-',
 ];
 

package/src/components/preferences-modal/index.js

@@ -39,7 +39,14 @@ export default function EditSitePreferencesModal( {
 					<EnableFeature
 						featureName="showIconLabels"
 						label={ __( 'Show button text labels' ) }
-						help={ __( 'Show text instead of icons on buttons' ) }
+						help={ __( 'Show text instead of icons on buttons.' ) }
+					/>
+					<EnableFeature
+						featureName="showListViewByDefault"
+						help={ __(
+							'Opens the block list view sidebar by default.'
+						) }
+						label={ __( 'Always open list view' ) }
 					/>
 				</PreferencesModalSection>
 			),

package/src/components/routes/use-title.js

@@ -6,6 +6,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -36,8 +37,8 @@ export default function useTitle( title ) {
 			const formattedTitle = sprintf(
 				/* translators: Admin screen title. 1: Admin screen name, 2: Network or site name. */
 				__( '%1$s ‹ %2$s — WordPress' ),
-				title,
-				siteTitle
+				decodeEntities( title ),
+				decodeEntities( siteTitle )
 			);
 
 			document.title = formattedTitle;

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/global-styles-sidebar.js

@@ -37,11 +37,11 @@ export default function GlobalStylesSidebar() {
 						<DropdownMenu
 							icon={ moreVertical }
 							label={ __( 'More Global Styles Actions' ) }
-							toggleProps={ { disabled: ! canReset } }
 							controls={ [
 								{
 									title: __( 'Reset to defaults' ),
 									onClick: onReset,
+									isDisabled: ! canReset,
 								},
 								{
 									title: __( 'Welcome Guide' ),

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';
@@ -46,6 +46,7 @@ export function SidebarComplementaryAreaFills() {
 		[]
 	);
 	const { enableComplementaryArea } = useDispatch( interfaceStore );
+
 	useEffect( () => {
 		if ( ! isEditorSidebarOpened ) return;
 		if ( hasBlockSelection ) {
@@ -54,6 +55,7 @@ export function SidebarComplementaryAreaFills() {
 			enableComplementaryArea( STORE_NAME, SIDEBAR_TEMPLATE );
 		}
 	}, [ hasBlockSelection, isEditorSidebarOpened ] );
+
 	let sidebarName = sidebar;
 	if ( ! isEditorSidebarOpened ) {
 		sidebarName = hasBlockSelection ? SIDEBAR_BLOCK : SIDEBAR_TEMPLATE;
@@ -62,7 +64,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/navigation-menu-sidebar/style.scss

@@ -14,7 +14,6 @@
 	padding: $grid-unit-20;
 
 	.block-editor-list-view-leaf .block-editor-list-view-block-contents {
-		align-items: flex-start;
 		white-space: normal;
 	}
 

package/src/components/sidebar/style.scss

@@ -88,51 +88,8 @@
 	line-height: 1;
 }
 
-
-.edit-site-global-styles-sidebar__border-box-control__popover,
-.edit-site-global-styles-sidebar__border-box-control__popover-top,
-.edit-site-global-styles-sidebar__border-box-control__popover-right,
-.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
-.edit-site-global-styles-sidebar__border-box-control__popover-left {
-	.components-popover__content {
-		width: 282px;
-	}
-}
-
-$split-border-control-offset: 55px;
-
-@include break-medium() {
-	.edit-site-global-styles-sidebar__border-box-control__popover,
-	.edit-site-global-styles-sidebar__border-box-control__popover-left {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 } !important;
-		}
-	}
-
-	.edit-site-global-styles-sidebar__border-box-control__popover-top,
-	.edit-site-global-styles-sidebar__border-box-control__popover-bottom {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 + $split-border-control-offset } !important;
-		}
-	}
-
-	.edit-site-global-styles-sidebar__border-box-control__popover-right {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 + ( $split-border-control-offset * 2 )} !important;
-		}
-	}
-
-	.edit-site-global-styles-sidebar__border-box-control__popover,
-	.edit-site-global-styles-sidebar__border-box-control__popover-top,
-	.edit-site-global-styles-sidebar__border-box-control__popover-right,
-	.edit-site-global-styles-sidebar__border-box-control__popover-bottom,
-	.edit-site-global-styles-sidebar__border-box-control__popover-left {
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-50 + $grid-unit-15) } !important;
-		}
-
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-50 + $grid-unit-15) } !important;
-		}
-	}
+// Override the `hr` styles defined in the `ComplementaryArea` component
+// from the `@wordpress/interface` package.
+.edit-site-global-styles-sidebar hr {
+	margin: 0;
 }

package/src/components/template-details/index.js

@@ -50,6 +50,9 @@ export default function TemplateDetails( { template, onClose } ) {
 		postId: undefined,
 	} );
 
+	// Only user-created and non-default templates can change the name.
+	const canEditTitle = template.is_custom && ! template.has_theme_file;
+
 	if ( ! template ) {
 		return null;
 	}
@@ -62,7 +65,7 @@ export default function TemplateDetails( { template, onClose } ) {
 	return (
 		<div className="edit-site-template-details">
 			<div className="edit-site-template-details__group">
-				{ template.is_custom ? (
+				{ canEditTitle ? (
 					<EditTemplateTitle template={ template } />
 				) : (
 					<Heading

package/src/index.js

@@ -13,6 +13,7 @@ import {
 	__experimentalFetchUrlData as fetchUrlData,
 } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { store as viewportStore } from '@wordpress/viewport';
@@ -64,8 +65,24 @@ export function reinitializeEditor( target, settings ) {
 			keepCaretInsideBlock: false,
 			welcomeGuide: true,
 			welcomeGuideStyles: true,
+			shouldListViewOpenByDefault: false,
 		} );
 
+		// Check if the block list view should be open by default.
+		if (
+			select( preferencesStore ).get(
+				'core/edit-site',
+				'showListViewByDefault'
+			)
+		) {
+			dispatch( editSiteStore ).setIsListViewOpened( true );
+		}
+
+		dispatch( interfaceStore ).setDefaultComplementaryArea(
+			'core/edit-site',
+			'edit-site/template'
+		);
+
 		dispatch( editSiteStore ).updateSettings( settings );
 
 		// Keep the defaultTemplateTypes in the core/editor settings too,
@@ -103,7 +120,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 );