@wordpress/edit-site 6.3.0 → 6.4.0

package/src/components/{posts-app → post-list}/style.scss

@@ -1,16 +1,16 @@
-.posts-list-page__featured-image {
+.edit-site-post-list__featured-image {
 	height: 100%;
 	object-fit: cover;
 	width: 100%;
 }
 
-.posts-list-page__featured-image-wrapper {
+.edit-site-post-list__featured-image-wrapper {
 	height: 100%;
 	width: 100%;
 	border-radius: $grid-unit-05;
 
-	&.is-layout-table:not(:has(.posts-list-page-preview-field__button)),
-	&.is-layout-table .posts-list-page-preview-field__button {
+	&.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)),
+	&.is-layout-table .edit-site-post-list__featured-image-button {
 		width: $grid-unit-40;
 		height: $grid-unit-40;
 		display: block;
@@ -33,7 +33,7 @@
 	}
 }
 
-.posts-list-page-preview-field__button {
+.edit-site-post-list__featured-image-button {
 	box-shadow: none;
 	border: none;
 	padding: 0;
@@ -53,18 +53,18 @@
 }
 
 .dataviews-view-grid__card.is-selected {
-	.posts-list-page-preview-field__button::after {
+	.edit-site-post-list__featured-image-button::after {
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 	}
 }
 
-.posts-list-page-title span {
+.edit-site-post-list__title span {
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
 
-.posts-list-page-title-badge {
+.edit-site-post-list__title-badge {
 	background: $gray-100;
 	color: $gray-700;
 	padding: 0 $grid-unit-05;
@@ -72,11 +72,14 @@
 	font-size: 12px;
 	font-weight: 400;
 	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
 }
 
-.posts-list-page-post-author-field__icon-container {
+.edit-site-post-list__status-icon {
 	height: $grid-unit-30;
+	width: $grid-unit-30;
 	svg {
 		fill: currentColor;
+		margin-left: -$grid-unit-05;
 	}
 }

package/src/components/posts-app/router.js

@@ -13,7 +13,7 @@ import Editor from '../editor';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
 import DataViewsSidebarContent from '../sidebar-dataviews';
-import PostsList from '../posts-app/posts-list';
+import PostList from '../post-list';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -40,7 +40,7 @@ export default function useLayoutAreas() {
 						content={ <DataViewsSidebarContent /> }
 					/>
 				),
-				content: <PostsList postType={ postType } />,
+				content: <PostList postType={ postType } />,
 				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isPostsList />
 				),
@@ -48,7 +48,7 @@ export default function useLayoutAreas() {
 					canvas === 'edit' ? (
 						<Editor isPostsList />
 					) : (
-						<PostsList postType={ postType } />
+						<PostList postType={ postType } />
 					),
 			},
 			widths: {

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 } ) {

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

@@ -3,20 +3,55 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useRef, useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 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, useHistory } = unlock( routerPrivateApis );
+
+/**
+ * Hook to switch to table layout when switching to the trash view.
+ * When going out of the trash view, it switches back to the previous layout if
+ * there was an automatic switch to table layout.
+ */
+function useSwitchToTableOnTrash() {
+	const {
+		params: { activeView, layout, ...restParams },
+	} = useLocation();
+	const history = useHistory();
+	const viewToSwitchOutOfTrash = useRef( undefined );
+	const previousActiveView = usePrevious( activeView );
+	useEffect( () => {
+		if ( activeView === 'trash' && previousActiveView !== 'trash' ) {
+			viewToSwitchOutOfTrash.current = layout || 'list';
+			history.push( { ...restParams, layout: 'table', activeView } );
+		} else if (
+			previousActiveView === 'trash' &&
+			activeView !== 'trash' &&
+			viewToSwitchOutOfTrash.current
+		) {
+			history.push( {
+				...restParams,
+				layout: viewToSwitchOutOfTrash.current,
+				activeView,
+			} );
+			viewToSwitchOutOfTrash.current = undefined;
+		}
+	}, [ previousActiveView, activeView, layout, history, restParams ] );
+}
+
 export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
+	useSwitchToTableOnTrash();
 	const DEFAULT_VIEWS = useDefaultViews( { postType } );
 	if ( ! postType ) {
 		return null;

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/hooks/push-changes-to-global-styles/index.js

@@ -375,7 +375,7 @@ function PushChangesToGlobalStyles( props ) {
 const withPushChangesToGlobalStyles = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => (
 		<>
-			<BlockEdit { ...props } />
+			<BlockEdit key="edit" { ...props } />
 			{ props.isSelected && <PushChangesToGlobalStyles { ...props } /> }
 		</>
 	)

package/src/index.js

@@ -28,7 +28,11 @@ import { store as editSiteStore } from './store';
 import { unlock } from './lock-unlock';
 import App from './components/app';
 
-const { registerDefaultActions } = unlock( editorPrivateApis );
+const {
+	registerDefaultActions,
+	registerCoreBlockBindingsSources,
+	bootstrapBlockBindingsSourcesFromServer,
+} = unlock( editorPrivateApis );
 
 /**
  * Initializes the site editor screen.
@@ -45,6 +49,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 } );

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();

package/src/store/selectors.js

@@ -2,16 +2,19 @@
  * WordPress dependencies
  */
 import { store as coreDataStore } from '@wordpress/core-data';
-import { createRegistrySelector } from '@wordpress/data';
+import { createRegistrySelector, createSelector } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as editorStore } from '@wordpress/editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
+import getFilteredTemplatePartBlocks from '../utils/get-filtered-template-parts';
 
 /**
  * @typedef {'template'|'template_type'} TemplateType Template type.
@@ -71,7 +74,17 @@ export const __experimentalGetPreviewDeviceType = createRegistrySelector(
  * @return {Object} Whether the current user can create media or not.
  */
 export const getCanUserCreateMedia = createRegistrySelector(
-	( select ) => () => select( coreDataStore ).canUser( 'create', 'media' )
+	( select ) => () => {
+		deprecated(
+			`wp.data.select( 'core/edit-site' ).getCanUserCreateMedia()`,
+			{
+				since: '6.7',
+				alternative: `wp.data.select( 'core' ).canUser( 'create', { kind: 'root', type: 'media' } )`,
+			}
+		);
+
+		return select( coreDataStore ).canUser( 'create', 'media' );
+	}
 );
 
 /**
@@ -82,13 +95,11 @@ export const getCanUserCreateMedia = createRegistrySelector(
  * @return {Array} The available reusable blocks.
  */
 export const getReusableBlocks = createRegistrySelector( ( select ) => () => {
-	deprecated(
-		"select( 'core/core' ).getEntityRecords( 'postType', 'wp_block' )",
-		{
-			since: '6.5',
-			version: '6.8',
-		}
-	);
+	deprecated( `select( 'core/edit-site' ).getReusableBlocks()`, {
+		since: '6.5',
+		version: '6.8',
+		alternative: `select( 'core/core' ).getEntityRecords( 'postType', 'wp_block' )`,
+	} );
 	const isWeb = Platform.OS === 'web';
 	return isWeb
 		? select( coreDataStore ).getEntityRecords( 'postType', 'wp_block', {
@@ -232,18 +243,46 @@ export function isSaveViewOpened( state ) {
 	return state.saveViewPanel;
 }
 
+function getBlocksAndTemplateParts( select ) {
+	const templateParts = select( coreDataStore ).getEntityRecords(
+		'postType',
+		TEMPLATE_PART_POST_TYPE,
+		{ per_page: -1 }
+	);
+
+	const { getBlocksByName, getBlocksByClientId } = select( blockEditorStore );
+
+	const clientIds = getBlocksByName( 'core/template-part' );
+	const blocks = getBlocksByClientId( clientIds );
+	return [ blocks, templateParts ];
+}
+
 /**
  * Returns the template parts and their blocks for the current edited template.
  *
+ * @deprecated
  * @param {Object} state Global application state.
  * @return {Array} Template parts and their blocks in an array.
  */
 export const getCurrentTemplateTemplateParts = createRegistrySelector(
-	( select ) => () => {
-		return unlock(
-			select( editorStore )
-		).getCurrentTemplateTemplateParts();
-	}
+	( select ) =>
+		createSelector(
+			() => {
+				deprecated(
+					`select( 'core/edit-site' ).getCurrentTemplateTemplateParts()`,
+					{
+						since: '6.7',
+						version: '6.9',
+						alternative: `select( 'core/block-editor' ).getBlocksByName( 'core/template-part' )`,
+					}
+				);
+
+				return getFilteredTemplatePartBlocks(
+					...getBlocksAndTemplateParts( select )
+				);
+			},
+			() => getBlocksAndTemplateParts( select )
+		)
 );
 
 /**

package/src/store/test/selectors.js

@@ -1,34 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { store as coreDataStore } from '@wordpress/core-data';
-
 /**
  * Internal dependencies
  */
-import {
-	getCanUserCreateMedia,
-	getEditedPostType,
-	getEditedPostId,
-	isPage,
-} from '../selectors';
+import { getEditedPostType, getEditedPostId, isPage } from '../selectors';
 
 describe( 'selectors', () => {
-	const canUser = jest.fn( () => true );
-	getCanUserCreateMedia.registry = {
-		select: jest.fn( () => ( { canUser } ) ),
-	};
-
-	describe( 'getCanUserCreateMedia', () => {
-		it( "selects `canUser( 'create', 'media' )` from the core store", () => {
-			expect( getCanUserCreateMedia() ).toBe( true );
-			expect(
-				getCanUserCreateMedia.registry.select
-			).toHaveBeenCalledWith( coreDataStore );
-			expect( canUser ).toHaveBeenCalledWith( 'create', 'media' );
-		} );
-	} );
-
 	describe( 'getEditedPostId', () => {
 		it( 'returns the template ID', () => {
 			const state = { editedPost: { id: 10 } };

package/src/style.scss

@@ -28,7 +28,8 @@
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
 @import "./components/editor-canvas-container/style.scss";
-@import "./components/posts-app/style.scss";
+@import "./components/post-edit/style.scss";
+@import "./components/post-list/style.scss";
 @import "./components/resizable-frame/style.scss";
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";

package/src/utils/get-filtered-template-parts.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { isTemplatePart } from '@wordpress/blocks';
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Get a flattened and filtered list of template parts and the matching block for that template part.
+ *
+ * Takes a list of blocks defined within a template, and a list of template parts, and returns a
+ * flattened list of template parts and the matching block for that template part.
+ *
+ * @param {Array}  blocks        Blocks to flatten.
+ * @param {?Array} templateParts Available template parts.
+ * @return {Array} An array of template parts and their blocks.
+ */
+export default function getFilteredTemplatePartBlocks(
+	blocks = EMPTY_ARRAY,
+	templateParts
+) {
+	const templatePartsById = templateParts
+		? // Key template parts by their ID.
+		  templateParts.reduce(
+				( newTemplateParts, part ) => ( {
+					...newTemplateParts,
+					[ part.id ]: part,
+				} ),
+				{}
+		  )
+		: {};
+
+	const result = [];
+
+	// Iterate over all blocks, recursing into inner blocks.
+	// Output will be based on a depth-first traversal.
+	const stack = [ ...blocks ];
+	while ( stack.length ) {
+		const { innerBlocks, ...block } = stack.shift();
+		// Place inner blocks at the beginning of the stack to preserve order.
+		stack.unshift( ...innerBlocks );
+
+		if ( isTemplatePart( block ) ) {
+			const {
+				attributes: { theme, slug },
+			} = block;
+			const templatePartId = `${ theme }//${ slug }`;
+			const templatePart = templatePartsById[ templatePartId ];
+
+			// Only add to output if the found template part block is in the list of available template parts.
+			if ( templatePart ) {
+				result.push( {
+					templatePart,
+					block,
+				} );
+			}
+		}
+	}
+
+	return result;
+}