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 (
-