@wordpress/edit-site 4.5.0 → 4.8.0

package/src/components/list/actions/rename-menu-item.js

@@ -19,12 +19,10 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const [ title, setTitle ] = useState( () => template.title.rendered );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
-	const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
-		coreStore
-	);
-	const { createSuccessNotice, createErrorNotice } = useDispatch(
-		noticesStore
-	);
+	const { editEntityRecord, saveEditedEntityRecord } =
+		useDispatch( coreStore );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
 
 	if ( ! template.is_custom ) {
 		return null;

package/src/components/list/added-by.js

@@ -106,9 +106,10 @@ function AddedByPlugin( { slug, isCustomized } ) {
 }
 
 function AddedByAuthor( { id } ) {
-	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
-		id,
-	] );
+	const user = useSelect(
+		( select ) => select( coreStore ).getUser( id ),
+		[ id ]
+	);
 
 	return (
 		<BaseAddedBy

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/index.js

@@ -18,10 +18,8 @@ export const {
 	Slot: NavigationPanelPreviewSlot,
 } = createSlotFill( 'EditSiteNavigationPanelPreview' );
 
-const {
-	Fill: NavigationSidebarFill,
-	Slot: NavigationSidebarSlot,
-} = createSlotFill( 'EditSiteNavigationSidebar' );
+const { Fill: NavigationSidebarFill, Slot: NavigationSidebarSlot } =
+	createSlotFill( 'EditSiteNavigationSidebar' );
 
 function NavigationSidebar( { isDefaultOpen = false, activeTemplateType } ) {
 	const isDesktopViewport = useViewportMatch( 'medium' );

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/save-button/index.js

@@ -16,10 +16,8 @@ export default function SaveButton( {
 	isEntitiesSavedStatesOpen,
 } ) {
 	const { isDirty, isSaving } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDirtyEntityRecords,
-			isSavingEntityRecord,
-		} = select( coreStore );
+		const { __experimentalGetDirtyEntityRecords, isSavingEntityRecord } =
+			select( coreStore );
 		const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
 		return {
 			isDirty: dirtyEntityRecords.length > 0,

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

@@ -28,9 +28,10 @@ export const SidebarInspectorFill = InspectorFill;
 export function SidebarComplementaryAreaFills() {
 	const { sidebar, isEditorSidebarOpened, hasBlockSelection } = useSelect(
 		( select ) => {
-			const _sidebar = select(
-				interfaceStore
-			).getActiveComplementaryArea( STORE_NAME );
+			const _sidebar =
+				select( interfaceStore ).getActiveComplementaryArea(
+					STORE_NAME
+				);
 			const _isEditorSidebarOpened = [
 				SIDEBAR_BLOCK,
 				SIDEBAR_TEMPLATE,
@@ -38,14 +39,14 @@ export function SidebarComplementaryAreaFills() {
 			return {
 				sidebar: _sidebar,
 				isEditorSidebarOpened: _isEditorSidebarOpened,
-				hasBlockSelection: !! select(
-					blockEditorStore
-				).getBlockSelectionStart(),
+				hasBlockSelection:
+					!! select( blockEditorStore ).getBlockSelectionStart(),
 			};
 		},
 		[]
 	);
 	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;

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

@@ -35,9 +35,8 @@ export default function NavigationInspector() {
 			getBlock,
 		} = select( blockEditorStore );
 
-		const { getEntityRecords, hasFinishedResolution, isResolving } = select(
-			coreStore
-		);
+		const { getEntityRecords, hasFinishedResolution, isResolving } =
+			select( coreStore );
 
 		const navigationMenusQuery = [
 			'postType',
@@ -46,14 +45,12 @@ export default function NavigationInspector() {
 		];
 
 		// Get the active Navigation block (if present).
-		const selectedNavId = __experimentalGetActiveBlockIdByBlockNames(
-			'core/navigation'
-		);
+		const selectedNavId =
+			__experimentalGetActiveBlockIdByBlockNames( 'core/navigation' );
 
 		// Get all Navigation blocks currently within the editor canvas.
-		const navBlockIds = __experimentalGetGlobalBlocksByName(
-			'core/navigation'
-		);
+		const navBlockIds =
+			__experimentalGetGlobalBlocksByName( 'core/navigation' );
 		const idToRef = {};
 		navBlockIds.forEach( ( id ) => {
 			idToRef[ id ] = getBlock( id )?.attributes?.ref;

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,55 +88,6 @@
 	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 {

package/src/components/sidebar/template-card/index.js

@@ -16,9 +16,8 @@ export default function TemplateCard() {
 	const { title, description, icon } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
-			editorStore
-		);
+		const { __experimentalGetTemplateInfo: getTemplateInfo } =
+			select( editorStore );
 
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();

package/src/components/sidebar/template-card/template-areas.js

@@ -16,14 +16,14 @@ import { __ } from '@wordpress/i18n';
 import { store as editSiteStore } from '../../../store';
 
 function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === area

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/components/template-details/template-areas.js

@@ -75,14 +75,14 @@ function TemplatePartItem( {
 	clientId,
 	closeTemplateDetailsDropdown,
 } ) {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const templatePartArea = useSelect(
 		( select ) => {
-			const defaultAreas = select(
-				editorStore
-			).__experimentalGetDefaultTemplatePartAreas();
+			const defaultAreas =
+				select(
+					editorStore
+				).__experimentalGetDefaultTemplatePartAreas();
 
 			return defaultAreas.find(
 				( defaultArea ) => defaultArea.area === templatePart.area

package/src/components/template-part-converter/index.js

@@ -12,9 +12,8 @@ import ConvertToTemplatePart from './convert-to-template-part';
 
 export default function TemplatePartConverter() {
 	const { clientIds, blocks } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds, getBlocksByClientId } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientIds, getBlocksByClientId } =
+			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		return {
 			clientIds: selectedBlockClientIds,

package/src/components/url-query-controller/index.js

@@ -11,9 +11,8 @@ import { useLocation } from '../routes';
 import { store as editSiteStore } from '../../store';
 
 export default function URLQueryController() {
-	const { setTemplate, setTemplatePart, setPage } = useDispatch(
-		editSiteStore
-	);
+	const { setTemplate, setTemplatePart, setPage } =
+		useDispatch( editSiteStore );
 	const {
 		params: { postId, postType },
 	} = useLocation();

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,