WIP: Posts list (#62705)

Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: annezazu <[email protected]>
WordPress · Jul 1, 2024 · a1f47af · a1f47af
1 parent 4bc4099
commit a1f47af
Show file tree

Hide file tree

Showing 20 changed files with 482 additions and 269 deletions.
diff --git a/lib/experimental/posts/load.php b/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.
  */

diff --git a/packages/dataviews/src/dataviews.tsx b/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,

diff --git a/packages/dataviews/src/style.scss b/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);
- }
  }
  }
 

diff --git a/...site/src/components/add-new-page/index.js → ...site/src/components/add-new-post/index.js b/...site/src/components/add-new-page/index.js → ...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>

diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/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 =

diff --git a/packages/edit-site/src/components/editor/index.js b/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>