diff --git a/lib/experimental/posts/load.php b/lib/experimental/posts/load.php index 3a9feba2750c1c..9be8d6945f19ff 100644 --- a/lib/experimental/posts/load.php +++ b/lib/experimental/posts/load.php @@ -11,14 +11,67 @@ * Renders the new posts dashboard page. */ function gutenberg_posts_dashboard() { + // Flag that we're loading the block editor. + // $current_screen = get_current_screen(); + // $current_screen->is_block_editor( true ); + + // Default to is-fullscreen-mode to avoid jumps in the UI. + // add_filter( + // 'admin_body_class', + // static function ( $classes ) { + // return "$classes is-fullscreen-mode"; + // } + // ); + + $block_editor_context = new WP_Block_Editor_Context( array( 'name' => 'core/edit-site' ) ); + $custom_settings = array( + 'siteUrl' => site_url(), + // 'postsPerPage' => get_option( 'posts_per_page' ), + 'styles' => get_block_editor_theme_styles(), + // 'defaultTemplateTypes' => $indexed_template_types, + // 'defaultTemplatePartAreas' => get_allowed_block_template_part_areas(), + 'supportsLayout' => wp_theme_has_theme_json(), + // 'supportsTemplatePartsMode' => ! wp_is_block_theme() && current_theme_supports( 'block-template-parts' ), + ); + $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 server-registered block schemas. + wp_add_inline_script( + 'wp-blocks', + 'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');' + ); + + wp_add_inline_script( + 'wp-blocks', + sprintf( 'wp.blocks.setCategories( %s );', wp_json_encode( isset( $editor_settings['blockCategories'] ) ? $editor_settings['blockCategories'] : array() ) ), + 'after' + ); + + /** 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', '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_style( 'wp-edit-site' ); + + wp_enqueue_media(); echo '
'; } @@ -29,7 +82,7 @@ function gutenberg_posts_dashboard() { */ function gutenberg_add_post_type_arg() { global $pagenow; - if ( $pagenow == 'admin.php' && isset( $_GET['page'] ) && $_GET['page'] == 'gutenberg-posts-dashboard' && empty( $_GET['postType'] ) ) { + 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; } diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 85a9a428fe2f2f..dc51bd0d31df70 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -44,12 +44,14 @@ 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 { BlockKeyboardShortcuts } = unlock( blockLibraryPrivateApis ); -export default function EditSiteEditor( { isLoading } ) { +export default function EditSiteEditor() { + const isLoading = useIsSiteEditorLoading(); const { editedPostType, editedPostId, diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 64406391c76f0e..36ca52088f6a8f 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -8,7 +8,6 @@ import { useEffect } from '@wordpress/element'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { useIsSiteEditorLoading } from './hooks'; import Editor from '../editor'; import PostsList from '../posts-app/posts-list'; import PagePatterns from '../page-patterns'; @@ -74,7 +73,6 @@ function useRedirectOldPaths() { } export default function useLayoutAreas() { - const isSiteEditorLoading = useIsSiteEditorLoading(); const { params } = useLocation(); const { postType, postId, path, layout, isCustom, canvas } = params; useRedirectOldPaths(); @@ -93,12 +91,10 @@ export default function useLayoutAreas() { /> ), content: , - preview: ( isListLayout || canvas === 'edit' ) && ( - - ), + preview: ( isListLayout || canvas === 'edit' ) && , mobile: canvas === 'edit' ? ( - + ) : ( ), @@ -119,9 +115,7 @@ export default function useLayoutAreas() { ), content: , - preview: ( isListLayout || canvas === 'edit' ) && ( - - ), + preview: ( isListLayout || canvas === 'edit' ) && , mobile: , }, widths: { @@ -140,9 +134,7 @@ export default function useLayoutAreas() { sidebar: , content: , mobile: , - preview: canvas === 'edit' && ( - - ), + preview: canvas === 'edit' && , }, }; } @@ -155,10 +147,8 @@ export default function useLayoutAreas() { sidebar: ( ), - preview: , - mobile: canvas === 'edit' && ( - - ), + preview: , + mobile: canvas === 'edit' && , }, }; } @@ -174,10 +164,8 @@ export default function useLayoutAreas() { backPath={ { postType: NAVIGATION_POST_TYPE } } /> ), - preview: , - mobile: canvas === 'edit' && ( - - ), + preview: , + mobile: canvas === 'edit' && , }, }; } @@ -187,10 +175,8 @@ export default function useLayoutAreas() { sidebar: ( ), - preview: , - mobile: canvas === 'edit' && ( - - ), + preview: , + mobile: canvas === 'edit' && , }, }; } @@ -200,10 +186,8 @@ export default function useLayoutAreas() { key: 'default', areas: { sidebar: , - preview: , - mobile: canvas === 'edit' && ( - - ), + preview: , + mobile: canvas === 'edit' && , }, }; } diff --git a/packages/edit-site/src/components/posts-app/router.js b/packages/edit-site/src/components/posts-app/router.js index 76c4525e48f22e..3a5f47c17f603e 100644 --- a/packages/edit-site/src/components/posts-app/router.js +++ b/packages/edit-site/src/components/posts-app/router.js @@ -9,7 +9,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { useIsSiteEditorLoading } from '../layout/hooks'; import Editor from '../editor'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; @@ -19,7 +18,6 @@ import PostsList from '../posts-app/posts-list'; const { useLocation } = unlock( routerPrivateApis ); export default function useLayoutAreas() { - const isSiteEditorLoading = useIsSiteEditorLoading(); const { params = {} } = useLocation(); const { postType, layout, canvas } = params; const labels = useSelect( @@ -30,25 +28,23 @@ export default function useLayoutAreas() { ); // Posts list. - if ( [ 'page', 'post' ].includes( postType ) ) { + if ( [ 'post' ].includes( postType ) ) { const isListLayout = layout === 'list' || ! layout; return { - key: 'pages', + key: 'posts-list', areas: { sidebar: ( } /> ), content: , - preview: ( isListLayout || canvas === 'edit' ) && ( - - ), + preview: ( isListLayout || canvas === 'edit' ) && , mobile: canvas === 'edit' ? ( - + ) : ( ), @@ -59,24 +55,13 @@ export default function useLayoutAreas() { }; } - // const defaultRoute = { - // key: 'index', - // areas: { - // sidebar: 'Empty Sidebar', - // content: , - // preview: undefined, - // mobile: Welcome to Posts, - // }, - // }; // Fallback shows the home page preview return { key: 'default', areas: { sidebar: , - preview: , - mobile: canvas === 'edit' && ( - - ), + preview: , + mobile: canvas === 'edit' && , }, }; } diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js index 04ea525c031536..ede7018a671dfe 100644 --- a/packages/edit-site/src/posts.js +++ b/packages/edit-site/src/posts.js @@ -1,7 +1,26 @@ /** * WordPress dependencies */ +import { store as blocksStore } from '@wordpress/blocks'; +import { + registerCoreBlocks, + __experimentalGetCoreBlocks, + __experimentalRegisterExperimentalCoreBlocks, +} from '@wordpress/block-library'; +import { dispatch } from '@wordpress/data'; import { createRoot, StrictMode } from '@wordpress/element'; +import { store as editorStore } from '@wordpress/editor'; +import { store as preferencesStore } from '@wordpress/preferences'; +import { + registerLegacyWidgetBlock, + registerWidgetGroupBlock, +} from '@wordpress/widgets'; + +/** + * Internal dependencies + */ +import './hooks'; +import { store as editSiteStore } from './store'; /** * Internal dependencies @@ -11,16 +30,67 @@ import PostsApp from './components/posts-app'; /** * Initializes the "Posts Dashboard" - * @param {string} id DOM element id. + * @param {string} id ID of the root element to render the screen in. + * @param {Object} settings Editor settings. */ -export function initializePostsDashboard( id ) { +export function initializePostsDashboard( id, settings ) { if ( ! globalThis.IS_GUTENBERG_PLUGIN ) { return; } - // initializeEditor( 'site-editor', {} ); const target = document.getElementById( id ); const root = createRoot( target ); + dispatch( blocksStore ).reapplyBlockTypeFilters(); + const coreBlocks = __experimentalGetCoreBlocks().filter( + ( { name } ) => name !== 'core/freeform' + ); + registerCoreBlocks( coreBlocks ); + dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' ); + registerLegacyWidgetBlock( { inserter: false } ); + registerWidgetGroupBlock( { inserter: false } ); + if ( globalThis.IS_GUTENBERG_PLUGIN ) { + __experimentalRegisterExperimentalCoreBlocks( { + enableFSEBlocks: true, + } ); + } + + // We dispatch actions and update the store synchronously before rendering + // so that we won't trigger unnecessary re-renders with useEffect. + dispatch( preferencesStore ).setDefaults( 'core/edit-site', { + welcomeGuide: true, + welcomeGuideStyles: true, + welcomeGuidePage: true, + welcomeGuideTemplate: true, + } ); + + dispatch( preferencesStore ).setDefaults( 'core', { + allowRightClickOverrides: true, + distractionFree: false, + editorMode: 'visual', + fixedToolbar: false, + focusMode: false, + inactivePanels: [], + keepCaretInsideBlock: false, + openPanels: [ 'post-status' ], + showBlockBreadcrumbs: true, + showListViewByDefault: false, + } ); + + dispatch( editSiteStore ).updateSettings( settings ); + + // Keep the defaultTemplateTypes in the core/editor settings too, + // so that they can be selected with core/editor selectors in any editor. + // This is needed because edit-site doesn't initialize with EditorProvider, + // which internally uses updateEditorSettings as well. + dispatch( editorStore ).updateEditorSettings( { + defaultTemplateTypes: settings.defaultTemplateTypes, + defaultTemplatePartAreas: settings.defaultTemplatePartAreas, + } ); + + // Prevent the default browser action for files dropped outside of dropzones. + window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false ); + window.addEventListener( 'drop', ( e ) => e.preventDefault(), false ); + root.render(