diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index a477ae6957c15..29b4605e67d25 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -36,7 +36,6 @@ import Sidebar from '../sidebar'; import Editor from '../editor'; import ErrorBoundary from '../error-boundary'; import { store as editSiteStore } from '../../store'; -import getIsLibraryPage from '../../utils/get-is-library-page'; import getIsListPage from '../../utils/get-is-list-page'; import Header from '../header-edit-mode'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; @@ -66,9 +65,8 @@ export default function Layout() { const hubRef = useRef(); const { params } = useLocation(); - const isLibraryPage = getIsLibraryPage( params ); const isListPage = getIsListPage( params ); - const isEditorPage = ! isListPage && ! isLibraryPage; + const isEditorPage = ! isListPage; const { hasFixedToolbar, canvasMode, previousShortcut, nextShortcut } = useSelect( ( select ) => { const { getAllShortcutKeyCombinations } = select( @@ -95,14 +93,14 @@ export default function Layout() { const disableMotion = useReducedMotion(); const isMobileViewport = useViewportMatch( 'medium', '<' ); const showSidebar = - ( isMobileViewport && isEditorPage ) || + ( isMobileViewport && ! isListPage ) || ( ! isMobileViewport && ( canvasMode === 'view' || ! isEditorPage ) ); const showCanvas = ( isMobileViewport && isEditorPage && isEditing ) || ! isMobileViewport || ! isEditorPage; const isFullCanvas = - ( isMobileViewport && ! isEditorPage ) || ( isEditorPage && isEditing ); + ( isMobileViewport && isListPage ) || ( isEditorPage && isEditing ); const [ canvasResizer, canvasSize ] = useResizeObserver(); const [ fullResizer ] = useResizeObserver(); const [ isResizing ] = useState( false ); diff --git a/packages/edit-site/src/components/library/index.js b/packages/edit-site/src/components/library/index.js deleted file mode 100644 index 4e87f4a09cc95..0000000000000 --- a/packages/edit-site/src/components/library/index.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; -import { EditorSnackbars } from '@wordpress/editor'; -import { __ } from '@wordpress/i18n'; -import { InterfaceSkeleton } from '@wordpress/interface'; -import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; -import { getQueryArgs } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import PatternsList from './patterns-list'; -import useLibrarySettings from './use-library-settings'; -import useTitle from '../routes/use-title'; -import { unlock } from '../../private-apis'; - -const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); - -const DEFAULT_TYPE = 'wp_template_part'; -const DEFAULT_CATEGORY = 'header'; - -export default function Library() { - const { categoryType, categoryId } = getQueryArgs( window.location.href ); - const type = categoryType || DEFAULT_TYPE; - const category = categoryId || DEFAULT_CATEGORY; - const settings = useLibrarySettings(); - - // Do we need shortcuts if we aren't displaying a header? - const { previousShortcut, nextShortcut } = useSelect( ( select ) => { - return { - previousShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/edit-site/previous-region' ), - nextShortcut: select( - keyboardShortcutsStore - ).getAllShortcutKeyCombinations( 'core/edit-site/next-region' ), - }; - }, [] ); - - useTitle( __( 'Library' ) ); - - // If we only have a single region, due to not including a header on this page, - // do we need the aria-label section? - const regionLabels = { body: __( 'Library - Content' ) }; - - return ( - } - content={ - // Wrap everything in a block editor provider. - // This ensures 'styles' that are needed for the previews are synced - // from the site editor store to the block editor store. - - - - } - shortcuts={ { - previous: previousShortcut, - next: nextShortcut, - } } - /> - ); -} diff --git a/packages/edit-site/src/components/library/grid-item.js b/packages/edit-site/src/components/page-library/grid-item.js similarity index 94% rename from packages/edit-site/src/components/library/grid-item.js rename to packages/edit-site/src/components/page-library/grid-item.js index 87eeb74ee6741..f3aed978d513b 100644 --- a/packages/edit-site/src/components/library/grid-item.js +++ b/packages/edit-site/src/components/page-library/grid-item.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -75,6 +80,10 @@ const GridItem = ( { categoryId, composite, icon, item } ) => { canvas: 'edit', } ); + const previewClassNames = classnames( 'edit-site-library__preview', { + 'is-inactive': item.type === PATTERNS, + } ); + return (
{ aria-describedby={ item.description ? descriptionId : undefined } > { - const { supportsTemplatePartsMode } = - select( editSiteStore ).getSettings(); - return { - postType: select( coreStore ).getPostType( 'wp_template_part' ), - canCreate: ! supportsTemplatePartsMode, - }; - } ); +const DEFAULT_TYPE = 'wp_template_part'; +const DEFAULT_CATEGORY = 'header'; - const columns = [ - { - header: __( 'Template Part' ), - cell: ( templatePart ) => ( - - - - { decodeEntities( - templatePart.title?.rendered || - templatePart.slug - ) } - - - - ), - maxWidth: 400, - }, - { - header: __( 'Added by' ), - cell: ( templatePart ) => ( - - ), - }, - { - header: { __( 'Actions' ) }, - cell: ( templatePart ) => ( - - ), - }, - ]; +export default function PageLibrary() { + const { categoryType, categoryId } = getQueryArgs( window.location.href ); + const type = categoryType || DEFAULT_TYPE; + const category = categoryId || DEFAULT_CATEGORY; + const settings = useLibrarySettings(); + // Wrap everything in a block editor provider. + // This ensures 'styles' that are needed for the previews are synced + // from the site editor store to the block editor store. return ( - - ) - } - > - { templateParts && ( - - ) } - + + + + + ); } diff --git a/packages/edit-site/src/components/library/no-patterns.js b/packages/edit-site/src/components/page-library/no-patterns.js similarity index 100% rename from packages/edit-site/src/components/library/no-patterns.js rename to packages/edit-site/src/components/page-library/no-patterns.js diff --git a/packages/edit-site/src/components/library/patterns-list.js b/packages/edit-site/src/components/page-library/patterns-list.js similarity index 100% rename from packages/edit-site/src/components/library/patterns-list.js rename to packages/edit-site/src/components/page-library/patterns-list.js diff --git a/packages/edit-site/src/components/library/style.scss b/packages/edit-site/src/components/page-library/style.scss similarity index 87% rename from packages/edit-site/src/components/library/style.scss rename to packages/edit-site/src/components/page-library/style.scss index 3fc024688a442..e7193ae3f53d8 100644 --- a/packages/edit-site/src/components/library/style.scss +++ b/packages/edit-site/src/components/page-library/style.scss @@ -1,17 +1,8 @@ $library-color: #e0e0e0; -.edit-site-layout { - .edit-site-library { - width: 100%; - - .interface-interface-skeleton__editor { - .interface-interface-skeleton__body { - .interface-interface-skeleton__content { - border-radius: 0; - } - } - } - } +.edit-site-library { + background: $gray-900; + margin: 0; } .edit-site-library__section-header { @@ -43,6 +34,10 @@ $library-color: #e0e0e0; border-radius: $radius-block-ui * 4; cursor: pointer; overflow: hidden; + + &.is-inactive { + cursor: default; + } } .edit-site-library__footer, diff --git a/packages/edit-site/src/components/library/use-library-settings.js b/packages/edit-site/src/components/page-library/use-library-settings.js similarity index 96% rename from packages/edit-site/src/components/library/use-library-settings.js rename to packages/edit-site/src/components/page-library/use-library-settings.js index 58913437bcbc9..07811997b371d 100644 --- a/packages/edit-site/src/components/library/use-library-settings.js +++ b/packages/edit-site/src/components/page-library/use-library-settings.js @@ -8,7 +8,7 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { unlock } from '../../private-apis'; +import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; export default function useLibrarySettings() { diff --git a/packages/edit-site/src/components/library/use-patterns.js b/packages/edit-site/src/components/page-library/use-patterns.js similarity index 99% rename from packages/edit-site/src/components/library/use-patterns.js rename to packages/edit-site/src/components/page-library/use-patterns.js index c9a74f66dc400..1b6862005075d 100644 --- a/packages/edit-site/src/components/library/use-patterns.js +++ b/packages/edit-site/src/components/page-library/use-patterns.js @@ -9,7 +9,7 @@ import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { unlock } from '../../private-apis'; +import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; const EMPTY_PATTERN_LIST = []; diff --git a/packages/edit-site/src/components/page-main/index.js b/packages/edit-site/src/components/page-main/index.js index 03fd0072cc367..ebcf35dfb0c1f 100644 --- a/packages/edit-site/src/components/page-main/index.js +++ b/packages/edit-site/src/components/page-main/index.js @@ -19,7 +19,7 @@ export default function PageMain() { if ( path === '/wp_template/all' ) { return ; - } else if ( path === '/wp_template_part/all' ) { + } else if ( path === '/library' ) { return ; } diff --git a/packages/edit-site/src/components/page/index.js b/packages/edit-site/src/components/page/index.js index 6836456c8eb9b..c0c48ff65b056 100644 --- a/packages/edit-site/src/components/page/index.js +++ b/packages/edit-site/src/components/page/index.js @@ -1,12 +1,24 @@ /** - * Internal dependencies + * External dependencies */ +import classnames from 'classnames'; +/** + * Internal dependencies + */ import Header from './header'; -export default function Page( { title, subTitle, actions, children } ) { +export default function Page( { + title, + subTitle, + actions, + children, + className, +} ) { + const classes = classnames( 'edit-site-page', className ); + return ( -
+
{ title && (