diff --git a/lib/experimental/posts/load.php b/lib/experimental/posts/load.php index 56a600ab97c05d..3fff8a151dfefc 100644 --- a/lib/experimental/posts/load.php +++ b/lib/experimental/posts/load.php @@ -14,7 +14,7 @@ function gutenberg_posts_dashboard() { wp_register_style( 'wp-gutenberg-posts-dashboard', gutenberg_url( 'build/edit-site/posts.css', __FILE__ ), - array() + array( 'wp-components', 'wp-commands' ) ); wp_enqueue_style( 'wp-gutenberg-posts-dashboard' ); wp_add_inline_script( 'wp-edit-site', 'window.wp.editSite.initializePostsDashboard( "gutenberg-posts-dashboard" );', 'after' ); diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index 764b188acf6a53..452c36014f5db9 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -17,10 +17,26 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; */ import Layout from '../layout'; import { unlock } from '../../lock-unlock'; +import { useCommonCommands } from '../../hooks/commands/use-common-commands'; +import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands'; +import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; +import useLayoutAreas from '../layout/router'; +import useSetCommandContext from '../../hooks/commands/use-set-command-context'; const { RouterProvider } = unlock( routerPrivateApis ); const { GlobalStylesProvider } = unlock( editorPrivateApis ); +function AppLayout() { + // This ensures the edited entity id and type are initialized properly. + useInitEditedEntityFromURL(); + useEditModeCommands(); + useCommonCommands(); + useSetCommandContext(); + const route = useLayoutAreas(); + + return ; +} + export default function App() { const { createErrorNotice } = useDispatch( noticesStore ); @@ -41,7 +57,7 @@ export default function App() { - + diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 45a2b79adca65c..72d48122057ac9 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -21,60 +21,44 @@ import { import { __ } from '@wordpress/i18n'; import { useState, useRef, useEffect } from '@wordpress/element'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { - CommandMenu, - privateApis as commandsPrivateApis, -} from '@wordpress/commands'; -import { - privateApis as blockEditorPrivateApis, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; +import { CommandMenu } from '@wordpress/commands'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { EditorSnackbars, privateApis as editorPrivateApis, } from '@wordpress/editor'; +import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; /** * Internal dependencies */ import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; -import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import SiteHub from '../site-hub'; import ResizableFrame from '../resizable-frame'; -import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url'; import { unlock } from '../../lock-unlock'; import SavePanel from '../save-panel'; import KeyboardShortcutsRegister from '../keyboard-shortcuts/register'; import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global'; -import { useCommonCommands } from '../../hooks/commands/use-common-commands'; -import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands'; import { useIsSiteEditorLoading } from './hooks'; -import useLayoutAreas from './router'; import useMovingAnimation from './animation'; import SidebarContent from '../sidebar'; import SaveHub from '../save-hub'; +import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url'; const { useCommands } = unlock( coreCommandsPrivateApis ); -const { useCommandContext } = unlock( commandsPrivateApis ); const { useGlobalStyle } = unlock( blockEditorPrivateApis ); const { NavigableRegion } = unlock( editorPrivateApis ); const ANIMATION_DURATION = 0.3; -export default function Layout() { - // This ensures the edited entity id and type are initialized properly. - useInitEditedEntityFromURL(); +export default function Layout( { route } ) { useSyncCanvasModeWithURL(); useCommands(); - useEditModeCommands(); - useCommonCommands(); - const isMobileViewport = useViewportMatch( 'medium', '<' ); const toggleRef = useRef(); - const { hasBlockSelected, canvasMode, previousShortcut, nextShortcut } = - useSelect( ( select ) => { + const { canvasMode, previousShortcut, nextShortcut } = useSelect( + ( select ) => { const { getAllShortcutKeyCombinations } = select( keyboardShortcutsStore ); @@ -87,10 +71,10 @@ export default function Layout() { nextShortcut: getAllShortcutKeyCombinations( 'core/editor/next-region' ), - hasBlockSelected: - select( blockEditorStore ).getBlockSelectionStart(), }; - }, [] ); + }, + [] + ); const navigateRegionsProps = useNavigateRegions( { previous: previousShortcut, next: nextShortcut, @@ -101,22 +85,11 @@ export default function Layout() { const isEditorLoading = useIsSiteEditorLoading(); const [ isResizableFrameOversized, setIsResizableFrameOversized ] = useState( false ); - const { key: routeKey, areas, widths } = useLayoutAreas(); + const { key: routeKey, areas, widths } = route; const animationRef = useMovingAnimation( { triggerAnimationOnChange: canvasMode + '__' + routeKey, } ); - // Sets the right context for the command palette - let commandContext = 'site-editor'; - - if ( canvasMode === 'edit' ) { - commandContext = 'entity-edit'; - } - if ( hasBlockSelected ) { - commandContext = 'block-selection-edit'; - } - useCommandContext( commandContext ); - const [ backgroundColor ] = useGlobalStyle( 'color.background' ); const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); const previousCanvaMode = usePrevious( canvasMode ); diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js new file mode 100644 index 00000000000000..3d803f0241d78b --- /dev/null +++ b/packages/edit-site/src/components/posts-app/index.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { + UnsavedChangesWarning, + privateApis as editorPrivateApis, +} from '@wordpress/editor'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import Layout from '../layout'; +import Page from '../page'; +import { unlock } from '../../lock-unlock'; + +const { RouterProvider } = unlock( routerPrivateApis ); +const { GlobalStylesProvider } = unlock( editorPrivateApis ); + +const defaultRoute = { + key: 'index', + areas: { + sidebar: 'Empty Sidebar', + content: Welcome to Posts, + preview: undefined, + mobile: Welcome to Posts, + }, +}; + +export default function PostsApp() { + return ( + + + + + + + ); +} diff --git a/packages/edit-site/src/hooks/commands/use-set-command-context.js b/packages/edit-site/src/hooks/commands/use-set-command-context.js new file mode 100644 index 00000000000000..2824a6cc99f1c3 --- /dev/null +++ b/packages/edit-site/src/hooks/commands/use-set-command-context.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { privateApis as commandsPrivateApis } from '@wordpress/commands'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +const { useCommandContext } = unlock( commandsPrivateApis ); + +/** + * React hook used to set the correct command context based on the current state. + */ +export default function useSetCommandContext() { + const { hasBlockSelected, canvasMode } = useSelect( ( select ) => { + const { getCanvasMode } = unlock( select( editSiteStore ) ); + const { getBlockSelectionStart } = select( blockEditorStore ); + return { + canvasMode: getCanvasMode(), + hasBlockSelected: getBlockSelectionStart(), + }; + }, [] ); + // Sets the right context for the command palette + let commandContext = 'site-editor'; + if ( canvasMode === 'edit' ) { + commandContext = 'entity-edit'; + } + if ( hasBlockSelected ) { + commandContext = 'block-selection-edit'; + } + useCommandContext( commandContext ); +} diff --git a/packages/edit-site/src/posts.js b/packages/edit-site/src/posts.js index ceee039806c9e7..19e787fff46305 100644 --- a/packages/edit-site/src/posts.js +++ b/packages/edit-site/src/posts.js @@ -3,6 +3,11 @@ */ import { createRoot, StrictMode } from '@wordpress/element'; +/** + * Internal dependencies + */ +import PostsApp from './components/posts-app'; + /** * Initializes the "Posts Dashboard" * @param {string} id DOM element id. @@ -14,7 +19,11 @@ export function initializePostsDashboard( id ) { const target = document.getElementById( id ); const root = createRoot( target ); - root.render( Welcome To Posts ); + root.render( + + + + ); return root; } diff --git a/packages/edit-site/src/posts.scss b/packages/edit-site/src/posts.scss index 777ee3fa3412d5..4150634913cb7c 100644 --- a/packages/edit-site/src/posts.scss +++ b/packages/edit-site/src/posts.scss @@ -1,3 +1,14 @@ +@import "../../dataviews/src/style.scss"; +@import "./components/layout/style.scss"; +@import "./components/page/style.scss"; +@import "./components/save-hub/style.scss"; +@import "./components/save-panel/style.scss"; +@import "./components/sidebar/style.scss"; +@import "./components/site-hub/style.scss"; +@import "./components/site-icon/style.scss"; +@import "./components/editor-canvas-container/style.scss"; +@import "./components/resizable-frame/style.scss"; + @include wordpress-admin-schemes(); #wpadminbar, @@ -7,13 +18,29 @@ #wpcontent { margin-left: 0; } +body.js #wpbody { + padding-top: 0; +} body { @include wp-admin-reset("#gutenberg-posts-dashboard"); +} +#gutenberg-posts-dashboard { @include reset; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - min-height: 100vh; + height: 100vh; + + // On mobile the main content area has to scroll, otherwise you can invoke + // the over-scroll bounce on the non-scrolling container, for a bad experience. + @include break-small { + bottom: 0; + left: 0; + min-height: 100vh; + position: fixed; + right: 0; + top: 0; + } + + .no-js & { + min-height: 0; + position: static; + } }