Posts list powered by DataViews

lib/experimental/posts/load.php

@@ -7,22 +7,78 @@
 
 add_action( 'admin_menu', 'gutenberg_replace_posts_dashboard' );
 
+// Default to is-fullscreen-mode to avoid jumps in the UI.
+add_filter(
+	'admin_body_class',
+	static function ( $classes ) {
+		return "$classes is-fullscreen-mode";
+	}
+);
+
 /**
  * Renders the new posts dashboard page.
  */
 function gutenberg_posts_dashboard() {
+	$block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) );
+	$custom_settings      = array(
+		'siteUrl'        => site_url(),
+		'styles'         => get_block_editor_theme_styles(),
+		'supportsLayout' => wp_theme_has_theme_json(),
+	);
+
+	$editor_settings         = get_block_editor_settings( $custom_settings, $block_editor_context );
+	$active_global_styles_id = WP_Theme_JSON_Resolver::get_user_global_styles_post_id();
+	$active_theme            = get_stylesheet();
+
+	$preload_paths = array(
+		array( '/wp/v2/media', 'OPTIONS' ),
+		'/wp/v2/types?context=view',
+		'/wp/v2/global-styles/' . $active_global_styles_id . '?context=edit',
+		'/wp/v2/global-styles/' . $active_global_styles_id,
+		'/wp/v2/global-styles/themes/' . $active_theme,
+	);
+	block_editor_rest_api_preload( $preload_paths, $block_editor_context );
+
+	// Preload server-registered block schemas.
+	wp_add_inline_script(
+		'wp-blocks',
+		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+	);
+
+	/** This action is documented in wp-admin/edit-form-blocks.php */
+	do_action( 'enqueue_block_editor_assets' );
 	wp_register_style(
 		'wp-gutenberg-posts-dashboard',
 		gutenberg_url( 'build/edit-site/posts.css', __FILE__ ),
-		array( 'wp-components', 'wp-commands' )
+		array( 'wp-components', 'wp-commands', 'wp-edit-site' )
 	);
 	wp_enqueue_style( 'wp-gutenberg-posts-dashboard' );
-	wp_add_inline_script( 'wp-edit-site', 'window.wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard" );', 'after' );
+	wp_add_inline_script(
+		'wp-edit-site',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard", %s );
+			} );',
+			wp_json_encode( $editor_settings )
+		)
+	);
 	wp_enqueue_script( 'wp-edit-site' );
-
+	wp_enqueue_media();
 	echo '<div id="gutenberg-posts-dashboard"></div>';
 }
 
+/**
+ * Redirects to the new posts dashboard page and adds the postType query arg.
+ */
+function gutenberg_add_post_type_arg() {
+	global $pagenow;
+	if ( 'admin.php' === $pagenow && isset( $_GET['page'] ) && 'gutenberg-posts-dashboard' === $_GET['page'] && empty( $_GET['postType'] ) ) {
+		wp_redirect( admin_url( '/admin.php?page=gutenberg-posts-dashboard&postType=post' ) );
+		exit;
+	}
+}
+add_action( 'admin_init', 'gutenberg_add_post_type_arg' );
+
 /**
  * Replaces the default posts menu item with the new posts dashboard.
  */

packages/dataviews/src/dataviews.tsx

@@ -18,7 +18,10 @@ import Filters from './filters';
 import Search from './search';
 import { LAYOUT_TABLE, LAYOUT_GRID } from './constants';
 import { VIEW_LAYOUTS } from './layouts';
-import BulkActions from './bulk-actions';
+import {
+	default as BulkActions,
+	useSomeItemHasAPossibleBulkAction,
+} from './bulk-actions';
 import { normalizeFields } from './normalize-fields';
 import BulkActionsToolbar from './bulk-actions-toolbar';
 import type { Action, Field, View, ViewBaseProps } from './types';
@@ -51,22 +54,6 @@ const defaultGetItemId = ( item: ItemWithId ) => item.id;
 
 const defaultOnSelectionChange = () => {};
 
-function useSomeItemHasAPossibleBulkAction< Item >(
-	actions: Action< Item >[],
-	data: Item[]
-) {
-	return useMemo( () => {
-		return data.some( ( item ) => {
-			return actions.some( ( action ) => {
-				return (
-					action.supportsBulk &&
-					( ! action.isEligible || action.isEligible( item ) )
-				);
-			} );
-		} );
-	}, [ actions, data ] );
-}
-
 export default function DataViews< Item >( {
 	view,
 	onChangeView,

packages/dataviews/src/style.scss

@@ -196,7 +196,7 @@
 			text-transform: uppercase;
 			font-weight: 500;
 
-			&:has(.dataviews-view-table-header-button) {
+			&:has(.dataviews-view-table-header-button):not(:first-child) {
 				padding-left: $grid-unit-05;
 			}
 		}
@@ -263,7 +263,6 @@
 	color: $gray-700;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	display: block;
 	width: 100%;
 
 	a {
@@ -332,11 +331,6 @@
 			.dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
 				color: $gray-900;
 			}
-
-			.page-pages-preview-field__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);
-			}
 		}
 	}
 

packages/edit-site/src/components/add-new-page/index.js → packages/edit-site/src/components/add-new-post/index.js

@@ -9,45 +9,50 @@ import {
 	TextControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 import { serialize, synchronizeBlocksWithTemplate } from '@wordpress/blocks';
 
-export default function AddNewPageModal( { onSave, onClose } ) {
-	const [ isCreatingPage, setIsCreatingPage ] = useState( false );
+export default function AddNewPostModal( { postType, onSave, onClose } ) {
+	const labels = useSelect(
+		( select ) => select( coreStore ).getPostType( postType )?.labels,
+		[ postType ]
+	);
+	const [ isCreatingPost, setIsCreatingPost ] = useState( false );
 	const [ title, setTitle ] = useState( '' );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
 	const { resolveSelect } = useRegistry();
 
-	async function createPage( event ) {
+	async function createPost( event ) {
 		event.preventDefault();
 
-		if ( isCreatingPage ) {
+		if ( isCreatingPost ) {
 			return;
 		}
-		setIsCreatingPage( true );
+		setIsCreatingPost( true );
 		try {
-			const pagePostType =
-				await resolveSelect( coreStore ).getPostType( 'page' );
+			const postTypeObject =
+				await resolveSelect( coreStore ).getPostType( postType );
 			const newPage = await saveEntityRecord(
 				'postType',
-				'page',
+				postType,
 				{
 					status: 'draft',
 					title,
 					slug: title || __( 'No title' ),
 					content:
-						!! pagePostType.template && pagePostType.template.length
+						!! postTypeObject.template &&
+						postTypeObject.template.length
 							? serialize(
 									synchronizeBlocksWithTemplate(
 										[],
-										pagePostType.template
+										postTypeObject.template
 									)
 							  )
 							: undefined,
@@ -59,40 +64,41 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 
 			createSuccessNotice(
 				sprintf(
-					// translators: %s: Title of the created template e.g: "Category".
+					// translators: %s: Title of the created post e.g: "Hello world".
 					__( '"%s" successfully created.' ),
 					decodeEntities( newPage.title?.rendered || title )
 				),
-				{
-					type: 'snackbar',
-				}
+				{ type: 'snackbar' }
 			);
 		} catch ( error ) {
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
-					: __( 'An error occurred while creating the page.' );
+					: __( 'An error occurred while creating the item.' );
 
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',
 			} );
 		} finally {
-			setIsCreatingPage( false );
+			setIsCreatingPost( false );
 		}
 	}
 
 	return (
 		<Modal
-			title={ __( 'Draft a new page' ) }
+			title={
+				// translators: %s: post type singular_name label e.g: "Page".
+				sprintf( __( 'Draft new: %s' ), labels?.singular_name )
+			}
 			onRequestClose={ onClose }
 			focusOnMount="firstContentElement"
 			size="small"
 		>
-			<form onSubmit={ createPage }>
+			<form onSubmit={ createPost }>
 				<VStack spacing={ 3 }>
 					<TextControl
 						__next40pxDefaultSize
-						label={ __( 'Page title' ) }
+						label={ __( 'Title' ) }
 						onChange={ setTitle }
 						placeholder={ __( 'No title' ) }
 						value={ title }
@@ -109,8 +115,8 @@ export default function AddNewPageModal( { onSave, onClose } ) {
 							__next40pxDefaultSize
 							variant="primary"
 							type="submit"
-							isBusy={ isCreatingPage }
-							aria-disabled={ isCreatingPage }
+							isBusy={ isCreatingPost }
+							aria-disabled={ isCreatingPost }
 						>
 							{ __( 'Create draft' ) }
 						</Button>

packages/edit-site/src/components/block-editor/use-site-editor-settings.js

@@ -114,35 +114,40 @@ function useNavigateToPreviousEntityRecord() {
 
 export function useSpecificEditorSettings() {
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
-		( select ) => {
-			const {
-				getEditedPostType,
-				getEditedPostId,
-				getEditedPostContext,
-				getCanvasMode,
-				getSettings,
-			} = unlock( select( editSiteStore ) );
-			const { getEditedEntityRecord } = select( coreStore );
-			const usedPostType = getEditedPostType();
-			const usedPostId = getEditedPostId();
-			const _record = getEditedEntityRecord(
-				'postType',
-				usedPostType,
-				usedPostId
-			);
-			const _context = getEditedPostContext();
-			return {
-				templateSlug: _record.slug,
-				canvasMode: getCanvasMode(),
-				settings: getSettings(),
-				postWithTemplate: _context?.postId,
-			};
-		},
-		[]
-	);
+	const {
+		templateSlug,
+		canvasMode,
+		settings,
+		shouldUseTemplateAsDefaultRenderingMode,
+	} = useSelect( ( select ) => {
+		const {
+			getEditedPostType,
+			getEditedPostId,
+			getEditedPostContext,
+			getCanvasMode,
+			getSettings,
+		} = unlock( select( editSiteStore ) );
+		const { getEditedEntityRecord } = select( coreStore );
+		const usedPostType = getEditedPostType();
+		const usedPostId = getEditedPostId();
+		const _record = getEditedEntityRecord(
+			'postType',
+			usedPostType,
+			usedPostId
+		);
+		const _context = getEditedPostContext();
+		return {
+			templateSlug: _record.slug,
+			canvasMode: getCanvasMode(),
+			settings: getSettings(),
+			// TODO: The `postType` check should be removed when the default rendering mode per post type is merged.
+			// @see https://github.com/WordPress/gutenberg/pull/62304/
+			shouldUseTemplateAsDefaultRenderingMode:
+				_context?.postId && _context?.postType !== 'post',
+		};
+	}, [] );
 	const archiveLabels = useArchiveLabel( templateSlug );
-	const defaultRenderingMode = postWithTemplate
+	const defaultRenderingMode = shouldUseTemplateAsDefaultRenderingMode
 		? 'template-locked'
 		: 'post-only';
 	const onNavigateToPreviousEntityRecord =

packages/edit-site/src/components/editor/index.js

@@ -44,12 +44,15 @@ import SiteEditorMoreMenu from '../more-menu';
 import SiteIcon from '../site-icon';
 import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
+import { useIsSiteEditorLoading } from '../layout/hooks';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
+const { useHistory, useLocation } = unlock( routerPrivateApis );
 const { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis );
 
-export default function EditSiteEditor( { isLoading } ) {
+export default function EditSiteEditor( { isPostsList = false } ) {
+	const { params } = useLocation();
+	const isLoading = useIsSiteEditorLoading();
 	const {
 		editedPostType,
 		editedPostId,
@@ -215,9 +218,20 @@ export default function EditSiteEditor( { isLoading } ) {
 									<Button
 										label={ __( 'Open Navigation' ) }
 										className="edit-site-layout__view-mode-toggle"
-										onClick={ () =>
-											setCanvasMode( 'view' )
-										}
+										onClick={ () => {
+											setCanvasMode( 'view' );
+											// TODO: this is a temporary solution to navigate to the posts list if we are
+											// come here through `posts list` and are in focus mode editing a template, template part etc..
+											if (
+												isPostsList &&
+												params?.focusMode
+											) {
+												history.push( {
+													page: 'gutenberg-posts-dashboard',
+													postType: 'post',
+												} );
+											}
+										} }
 									>
 										<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
 									</Button>