@wordpress/edit-site 6.3.0 → 6.5.0

package/src/components/sidebar-dataviews/default-views.js

@@ -26,17 +26,31 @@ import {
 	OPERATOR_IS_ANY,
 } from '../../utils/constants';
 
-export const DEFAULT_CONFIG_PER_VIEW_TYPE = {
+export const defaultLayouts = {
 	[ LAYOUT_TABLE ]: {
-		primaryField: 'title',
+		layout: {
+			primaryField: 'title',
+			styles: {
+				'featured-image': {
+					width: '1%',
+				},
+				title: {
+					maxWidth: 300,
+				},
+			},
+		},
 	},
 	[ LAYOUT_GRID ]: {
-		mediaField: 'featured-image',
-		primaryField: 'title',
+		layout: {
+			mediaField: 'featured-image',
+			primaryField: 'title',
+		},
 	},
 	[ LAYOUT_LIST ]: {
-		primaryField: 'title',
-		mediaField: 'featured-image',
+		layout: {
+			primaryField: 'title',
+			mediaField: 'featured-image',
+		},
 	},
 };
 
@@ -51,9 +65,7 @@ const DEFAULT_POST_BASE = {
 		direction: 'desc',
 	},
 	fields: [ 'title', 'author', 'status' ],
-	layout: {
-		...DEFAULT_CONFIG_PER_VIEW_TYPE[ LAYOUT_LIST ],
-	},
+	layout: defaultLayouts[ LAYOUT_LIST ].layout,
 };
 
 export function useDefaultViews( { postType } ) {
@@ -65,105 +77,105 @@ export function useDefaultViews( { postType } ) {
 		[ postType ]
 	);
 	return useMemo( () => {
-		return {
-			[ postType ]: [
-				{
-					title: labels?.all_items || __( 'All items' ),
-					slug: 'all',
-					icon: pages,
-					view: DEFAULT_POST_BASE,
-				},
-				{
-					title: __( 'Published' ),
-					slug: 'published',
-					icon: published,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'publish',
-							},
-						],
-					},
+		return [
+			{
+				title: labels?.all_items || __( 'All items' ),
+				slug: 'all',
+				icon: pages,
+				view: DEFAULT_POST_BASE,
+			},
+			{
+				title: __( 'Published' ),
+				slug: 'published',
+				icon: published,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'publish',
+						},
+					],
 				},
-				{
-					title: __( 'Scheduled' ),
-					slug: 'future',
-					icon: scheduled,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'future',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Scheduled' ),
+				slug: 'future',
+				icon: scheduled,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'future',
+						},
+					],
 				},
-				{
-					title: __( 'Drafts' ),
-					slug: 'drafts',
-					icon: drafts,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'draft',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Drafts' ),
+				slug: 'drafts',
+				icon: drafts,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'draft',
+						},
+					],
 				},
-				{
-					title: __( 'Pending' ),
-					slug: 'pending',
-					icon: pending,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'pending',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Pending' ),
+				slug: 'pending',
+				icon: pending,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'pending',
+						},
+					],
 				},
-				{
-					title: __( 'Private' ),
-					slug: 'private',
-					icon: notAllowed,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'private',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Private' ),
+				slug: 'private',
+				icon: notAllowed,
+				view: {
+					...DEFAULT_POST_BASE,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'private',
+						},
+					],
 				},
-				{
-					title: __( 'Trash' ),
-					slug: 'trash',
-					icon: trash,
-					view: {
-						...DEFAULT_POST_BASE,
-						filters: [
-							{
-								field: 'status',
-								operator: OPERATOR_IS_ANY,
-								value: 'trash',
-							},
-						],
-					},
+			},
+			{
+				title: __( 'Trash' ),
+				slug: 'trash',
+				icon: trash,
+				view: {
+					...DEFAULT_POST_BASE,
+					type: LAYOUT_TABLE,
+					layout: defaultLayouts[ LAYOUT_TABLE ].layout,
+					filters: [
+						{
+							field: 'status',
+							operator: OPERATOR_IS_ANY,
+							value: 'trash',
+						},
+					],
 				},
-			],
-		};
-	}, [ labels, postType ] );
+			},
+		];
+	}, [ labels ] );
 }

package/src/components/sidebar-dataviews/index.js

@@ -9,15 +9,16 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { useDefaultViews } from './default-views';
 import { unlock } from '../../lock-unlock';
-const { useLocation } = unlock( routerPrivateApis );
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
 
+const { useLocation } = unlock( routerPrivateApis );
+
 export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const DEFAULT_VIEWS = useDefaultViews( { postType } );
+	const defaultViews = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;
 	}
@@ -26,7 +27,7 @@ export default function DataViewsSidebarContent() {
 	return (
 		<>
 			<ItemGroup>
-				{ DEFAULT_VIEWS[ postType ].map( ( dataview ) => {
+				{ defaultViews.map( ( dataview ) => {
 					return (
 						<DataViewItem
 							key={ dataview.slug }

package/src/components/sidebar-navigation-screen-global-styles/content.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
+
+const noop = () => {};
+
+export default function SidebarNavigationScreenGlobalStylesContent() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings(),
+		};
+	}, [] );
+
+	const gap = 3;
+
+	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+	// loaded. This is necessary because the Iframe component waits until
+	// the block editor store's `__internalIsInitialized` is true before
+	// rendering the iframe. Without this, the iframe previews will not render
+	// in mobile viewport sizes, where the editor canvas is hidden.
+	return (
+		<BlockEditorProvider
+			settings={ storedSettings }
+			onChange={ noop }
+			onInput={ noop }
+		>
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
+				<StyleVariationsContainer gap={ gap } />
+				<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
+				<TypographyVariations
+					title={ __( 'Typography' ) }
+					gap={ gap }
+				/>
+			</VStack>
+		</BlockEditorProvider>
+	);
+}

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -5,9 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalVStack as VStack } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -16,7 +14,6 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import StyleVariationsContainer from '../global-styles/style-variations-container';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
@@ -24,11 +21,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import ColorVariations from '../global-styles/variations/variations-color';
-import TypographyVariations from '../global-styles/variations/variations-typography';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-
-const noop = () => {};
+import SidebarNavigationScreenGlobalStylesContent from './content';
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -63,53 +56,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
-function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings(),
-		};
-	}, [] );
-
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( [
-		'color',
-	] );
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( [ 'typography' ] );
-
-	const gap = 3;
-
-	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
-	// loaded. This is necessary because the Iframe component waits until
-	// the block editor store's `__internalIsInitialized` is true before
-	// rendering the iframe. Without this, the iframe previews will not render
-	// in mobile viewport sizes, where the editor canvas is hidden.
-	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
-		>
-			<VStack
-				spacing={ 10 }
-				className="edit-site-global-styles-variation-container"
-			>
-				<StyleVariationsContainer gap={ gap } />
-				{ colorVariations?.length && (
-					<ColorVariations title={ __( 'Palettes' ) } gap={ gap } />
-				) }
-				{ typographyVariations?.length && (
-					<TypographyVariations
-						title={ __( 'Typography' ) }
-						gap={ gap }
-					/>
-				) }
-			</VStack>
-		</BlockEditorProvider>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();

package/src/components/site-hub/index.js

@@ -7,7 +7,11 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, __experimentalHStack as HStack } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	VisuallyHidden,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -80,9 +84,14 @@ const SiteHub = memo(
 								variant="link"
 								href={ homeUrl }
 								target="_blank"
-								label={ __( 'View site (opens in a new tab)' ) }
 							>
 								{ decodeEntities( siteTitle ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
 							</Button>
 						</div>
 						<HStack

package/src/components/site-icon/style.scss

@@ -1,9 +1,11 @@
 .edit-site-site-icon__icon {
 	fill: currentColor;
+	width: 100%;
+	height: 100%;
 
 	.edit-site-layout.is-full-canvas & {
 		// Make the WordPress icon not so big in full canvas.
-		padding: $grid-unit-15 * 0.5; // 6px.
+		padding: $grid-unit-15;
 	}
 }
 
@@ -12,6 +14,7 @@
 	height: 100%;
 	object-fit: cover;
 	background: #333;
+	aspect-ratio: 1 / 1;
 
 	.edit-site-layout.is-full-canvas & {
 		border-radius: 0;

package/src/components/style-book/index.js

@@ -13,6 +13,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
+	getBlockType,
 	getBlockTypes,
 	getBlockFromExample,
 	createBlock,
@@ -128,37 +129,7 @@ function isObjectEmpty( object ) {
 }
 
 function getExamples() {
-	// Use our own example for the Heading block so that we can show multiple
-	// heading levels.
-	const headingsExample = {
-		name: 'core/heading',
-		title: __( 'Headings' ),
-		category: 'text',
-		blocks: [
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 1,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 2,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 3,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 4,
-			} ),
-			createBlock( 'core/heading', {
-				content: __( 'Code Is Poetry' ),
-				level: 5,
-			} ),
-		],
-	};
-
-	const otherExamples = getBlockTypes()
+	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
@@ -174,7 +145,31 @@ function getExamples() {
 			blocks: getBlockFromExample( blockType.name, blockType.example ),
 		} ) );
 
-	return [ headingsExample, ...otherExamples ];
+	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );
+
+	if ( ! isHeadingBlockRegistered ) {
+		return nonHeadingBlockExamples;
+	}
+
+	// Use our own example for the Heading block so that we can show multiple
+	// heading levels.
+	const headingsExample = {
+		name: 'core/heading',
+		title: __( 'Headings' ),
+		category: 'text',
+		blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => {
+			return createBlock( 'core/heading', {
+				content: sprintf(
+					// translators: %d: heading level e.g: "1", "2", "3"
+					__( 'Heading %d' ),
+					level
+				),
+				level,
+			} );
+		} ),
+	};
+
+	return [ headingsExample, ...nonHeadingBlockExamples ];
 }
 
 function StyleBook( {

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -90,6 +90,11 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				return undefined;
 			}
 
+			// Don't trigger resolution for multi-selected posts.
+			if ( postId && postId.includes( ',' ) ) {
+				return undefined;
+			}
+
 			const {
 				getEditedEntityRecord,
 				getEntityRecords,

package/src/hooks/push-changes-to-global-styles/index.js

@@ -26,7 +26,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
-import cloneDeep from '../../utils/clone-deep';
 import setNestedValue from '../../utils/set-nested-value';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
@@ -259,8 +258,8 @@ function PushChangesToGlobalStylesControl( {
 		if ( changes.length > 0 ) {
 			const { style: blockStyles } = attributes;
 
-			const newBlockStyles = cloneDeep( blockStyles );
-			const newUserConfig = cloneDeep( userConfig );
+			const newBlockStyles = structuredClone( blockStyles );
+			const newUserConfig = structuredClone( userConfig );
 
 			for ( const { path, value } of changes ) {
 				setNestedValue( newBlockStyles, path, undefined );
@@ -375,7 +374,7 @@ function PushChangesToGlobalStyles( props ) {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => (
 		<>
-			<BlockEdit { ...props } />
+			<BlockEdit key="edit" { ...props } />
 			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
 		</>
 	)

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -91,7 +90,7 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig(
 	const propertiesAsString = properties.toString();
 
 	return useMemo( () => {
-		const clonedUserVariation = cloneDeep( userVariation );
+		const clonedUserVariation = structuredClone( userVariation );
 
 		// Get user variation and remove the settings for the given property.
 		const userVariationWithoutProperties = removePropertiesFromObject(
@@ -167,7 +166,7 @@ export const filterObjectByProperties = ( object, properties ) => {
  */
 export function isVariationWithProperties( variation, properties ) {
 	const variationWithProperties = filterObjectByProperties(
-		cloneDeep( variation ),
+		structuredClone( variation ),
 		properties
 	);
 

package/src/index.js

@@ -28,7 +28,10 @@ import { store as editSiteStore } from './store';
 import { unlock } from './lock-unlock';
 import App from './components/app';
 
-const { registerDefaultActions } = unlock( editorPrivateApis );
+const {
+	registerCoreBlockBindingsSources,
+	bootstrapBlockBindingsSourcesFromServer,
+} = unlock( editorPrivateApis );
 
 /**
  * Initializes the site editor screen.
@@ -45,6 +48,8 @@ export function initializeEditor( id, settings ) {
 		( { name } ) => name !== 'core/freeform'
 	);
 	registerCoreBlocks( coreBlocks );
+	bootstrapBlockBindingsSourcesFromServer( settings?.blockBindingsSources );
+	registerCoreBlockBindingsSources();
 	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
@@ -53,7 +58,6 @@ export function initializeEditor( id, settings ) {
 			enableFSEBlocks: true,
 		} );
 	}
-	registerDefaultActions();
 
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.

package/src/posts.scss

@@ -7,7 +7,7 @@
 @import "./components/site-hub/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/editor-canvas-container/style.scss";
-@import "./components/posts-app/style.scss";
+@import "./components/post-list/style.scss";
 @import "./components/resizable-frame/style.scss";
 
 @include wordpress-admin-schemes();