Skip to content

Commit

Permalink
Update to use new Page components added along with Table
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Jun 13, 2023
1 parent 6677423 commit fca8f9d
Show file tree
Hide file tree
Showing 15 changed files with 65 additions and 197 deletions.
8 changes: 3 additions & 5 deletions packages/edit-site/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(
Expand All @@ -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 );
Expand Down
72 changes: 0 additions & 72 deletions packages/edit-site/src/components/library/index.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -75,14 +80,18 @@ const GridItem = ( { categoryId, composite, icon, item } ) => {
canvas: 'edit',
} );

const previewClassNames = classnames( 'edit-site-library__preview', {
'is-inactive': item.type === PATTERNS,
} );

return (
<div
className="edit-site-library__pattern"
aria-label={ item.title }
aria-describedby={ item.description ? descriptionId : undefined }
>
<CompositeItem
className="edit-site-library__preview"
className={ previewClassNames }
role="option"
as="div"
{ ...composite }
Expand Down
113 changes: 25 additions & 88 deletions packages/edit-site/src/components/page-library/index.js
Original file line number Diff line number Diff line change
@@ -1,104 +1,41 @@
/**
* WordPress dependencies
*/
import {
VisuallyHidden,
__experimentalHeading as Heading,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
import { getQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
*/
import Page from '../page';
import Table from '../table';
import Link from '../routes/link';
import AddedBy from '../list/added-by';
import TemplateActions from '../template-actions';
import AddNewTemplate from '../add-new-template';
import { store as editSiteStore } from '../../store';
import PatternsList from './patterns-list';
import useLibrarySettings from './use-library-settings';
import { unlock } from '../../lock-unlock';

export default function PageTemplates() {
const { records: templateParts } = useEntityRecords(
'postType',
'wp_template_part',
{
per_page: -1,
}
);
const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );

const { canCreate } = useSelect( ( select ) => {
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 ) => (
<VStack>
<Heading level={ 5 }>
<Link
params={ {
postId: templatePart.id,
postType: templatePart.type,
canvas: 'edit',
} }
>
{ decodeEntities(
templatePart.title?.rendered ||
templatePart.slug
) }
</Link>
</Heading>
</VStack>
),
maxWidth: 400,
},
{
header: __( 'Added by' ),
cell: ( templatePart ) => (
<AddedBy
postType={ templatePart.type }
postId={ templatePart.id }
/>
),
},
{
header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
cell: ( templatePart ) => (
<TemplateActions
postType={ templatePart.type }
postId={ templatePart.id }
/>
),
},
];
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 (
<Page
title={ __( 'Template Parts' ) }
actions={
canCreate && (
<AddNewTemplate
templateType={ 'wp_template_part' }
showIcon={ false }
toggleProps={ { variant: 'primary' } }
/>
)
}
>
{ templateParts && (
<Table data={ templateParts } columns={ columns } />
) }
</Page>
<ExperimentalBlockEditorProvider settings={ settings }>
<Page className="edit-site-library">
<PatternsList
type={ type }
categoryId={ category }
label={ __( 'Patterns list' ) }
/>
</Page>
</ExperimentalBlockEditorProvider>
);
}
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/page-main/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function PageMain() {

if ( path === '/wp_template/all' ) {
return <PageTemplates />;
} else if ( path === '/wp_template_part/all' ) {
} else if ( path === '/library' ) {
return <PageLibrary />;
}

Expand Down
18 changes: 15 additions & 3 deletions packages/edit-site/src/components/page/index.js
Original file line number Diff line number Diff line change
@@ -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 (
<div className="edit-site-page">
<div className={ classes }>
{ title && (
<Header
title={ title }
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
@import "./components/global-styles/screen-revisions/style.scss";
@import "./components/header-edit-mode/style.scss";
@import "./components/header-edit-mode/document-actions/style.scss";
@import "./components/library/style.scss";
@import "./components/list/style.scss";
@import "./components/page/style.scss";
@import "./components/page-library/style.scss";
@import "./components/table/style.scss";
@import "./components/sidebar-edit-mode/style.scss";
@import "./components/sidebar-edit-mode/page-panels/style.scss";
Expand Down
11 changes: 0 additions & 11 deletions packages/edit-site/src/utils/get-is-library-page.js

This file was deleted.

2 changes: 1 addition & 1 deletion packages/edit-site/src/utils/get-is-list-page.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
* @return {boolean} Is list page or not.
*/
export default function getIsListPage( { path } ) {
return path === '/wp_template/all' || path === '/wp_template_part/all';
return path === '/wp_template/all' || path === '/library';
}

0 comments on commit fca8f9d

Please sign in to comment.