@wordpress/edit-site 4.5.0 → 4.6.0

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

@@ -2,12 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { omit, unionBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useRef, Fragment } from '@wordpress/element';
+import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
 import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
@@ -48,44 +49,17 @@ const LAYOUT = {
 };
 
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings } = useSelect(
+	const { storedSettings, templateType, templateId, page } = useSelect(
 		( select ) => {
-			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
-			);
+			const {
+				getSettings,
+				getEditedPostType,
+				getEditedPostId,
+				getPage,
+			} = select( editSiteStore );
 
 			return {
+				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				templateId: getEditedPostId(),
 				page: getPage(),
@@ -94,6 +68,50 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		[ setIsInserterOpen ]
 	);
 
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+	const settingsBlockPatternCategories =
+		storedSettings.__experimentalAdditionalBlockPatternCategories ?? // WP 6.0
+		storedSettings.__experimentalBlockPatternCategories; // WP 5.9
+
+	const { restBlockPatterns, restBlockPatternCategories } = useSelect(
+		( select ) => ( {
+			restBlockPatterns: select( coreStore ).getBlockPatterns(),
+			restBlockPatternCategories: select(
+				coreStore
+			).getBlockPatternCategories(),
+		} ),
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() => unionBy( settingsBlockPatterns, restBlockPatterns, 'name' ),
+		[ settingsBlockPatterns, restBlockPatterns ]
+	);
+
+	const blockPatternCategories = useMemo(
+		() =>
+			unionBy(
+				settingsBlockPatternCategories,
+				restBlockPatternCategories,
+				'name'
+			),
+		[ settingsBlockPatternCategories, restBlockPatternCategories ]
+	);
+
+	const settings = useMemo(
+		() => ( {
+			...omit( storedSettings, [
+				'__experimentalAdditionalBlockPatterns',
+				'__experimentalAdditionalBlockPatternCategories',
+			] ),
+			__experimentalBlockPatterns: blockPatterns,
+			__experimentalBlockPatternCategories: blockPatternCategories,
+		} ),
+		[ storedSettings, blockPatterns, blockPatternCategories ]
+	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		templateType
@@ -112,6 +130,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const isTemplatePart = templateType === 'wp_template_part';
+	const hasBlocks = blocks.length !== 0;
 
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
@@ -186,7 +205,9 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 					<BlockList
 						className="edit-site-block-editor__block-list wp-site-blocks"
 						__experimentalLayout={ LAYOUT }
-						renderAppender={ isTemplatePart ? false : undefined }
+						renderAppender={
+							isTemplatePart && hasBlocks ? false : undefined
+						}
 					/>
 				</ResizableEditor>
 				<__unstableBlockSettingsMenuFirstItem>

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

@@ -182,18 +182,8 @@ export default function BorderPanel( { name } ) {
 						onChange={ onBorderChange }
 						showStyle={ showBorderStyle }
 						value={ border }
-						popoverClassNames={ {
-							linked:
-								'edit-site-global-styles-sidebar__border-box-control__popover',
-							top:
-								'edit-site-global-styles-sidebar__border-box-control__popover-top',
-							right:
-								'edit-site-global-styles-sidebar__border-box-control__popover-right',
-							bottom:
-								'edit-site-global-styles-sidebar__border-box-control__popover-bottom',
-							left:
-								'edit-site-global-styles-sidebar__border-box-control__popover-left',
-						} }
+						popoverPlacement="left-start"
+						popoverOffset={ 40 }
 						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>

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

@@ -20,7 +20,7 @@ import {
 import { getValueFromVariable, getPresetVariableFromValue } from './utils';
 import { GlobalStylesContext } from './context';
 
-const EMPTY_CONFIG = { isGlobalStylesUserThemeJSON: true, version: 1 };
+const EMPTY_CONFIG = { settings: {}, styles: {} };
 
 export const useGlobalStylesReset = () => {
 	const { user: config, setUserConfig } = useContext( GlobalStylesContext );

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

@@ -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;

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