Skip to content

Commit e09ad12

Browse files
SaxonFSaxonF
committed
add page component
1 parent 671d727 commit e09ad12

File tree

13 files changed

+813
-428
lines changed

13 files changed

+813
-428
lines changed

‎package-lock.json

+374-361
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"IS_GUTENBERG_PLUGIN": true
2323
},
2424
"dependencies": {
25+
"@tanstack/react-table": "8.9.1",
2526
"@types/gradient-parser": "0.1.2",
2627
"@wordpress/a11y": "file:packages/a11y",
2728
"@wordpress/annotations": "file:packages/annotations",

‎packages/edit-site/src/components/filter-bar/index.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
__experimentalHStack as HStack,
6+
SearchControl,
7+
__experimentalToggleGroupControl as ToggleGroupControl,
8+
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
9+
} from '@wordpress/components';
10+
import { menu, grid } from '@wordpress/icons';
11+
/**
12+
* Internal dependencies
13+
*/
14+
15+
export default function FilterBar() {
16+
return (
17+
<HStack
18+
className="edit-site-page-filter-bar"
19+
spacing={ 3 }
20+
alignment="left"
21+
>
22+
<SearchControl
23+
className="edit-site-page-filter-bar__search"
24+
label="Search templates..."
25+
placeholder="Search templates..."
26+
/>
27+
<ToggleGroupControl
28+
__nextHasNoMarginBottom
29+
label="view type"
30+
value="list"
31+
isBlock
32+
size="__unstable-large"
33+
hideLabelFromVision
34+
>
35+
<ToggleGroupControlOptionIcon
36+
icon={ menu }
37+
value="list"
38+
label="List"
39+
/>
40+
<ToggleGroupControlOptionIcon
41+
icon={ grid }
42+
value="grid"
43+
label="Grid"
44+
/>
45+
</ToggleGroupControl>
46+
</HStack>
47+
);
48+
}

‎packages/edit-site/src/components/filter-bar/style.scss

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.edit-site-page-filter-bar {
2+
margin-bottom: $grid-unit-30;
3+
.components-text-control__input {
4+
background: $gray-800;
5+
border: 1px solid $gray-700;
6+
color: $gray-100;
7+
}
8+
.components-toggle-group-control {
9+
border: none;
10+
background: $gray-800;
11+
box-shadow: none;
12+
}
13+
.components-base-control__field {
14+
margin: 0;
15+
.components-toggle-group-control-option-base {
16+
color: $gray-400;
17+
}
18+
}
19+
}
20+
21+
.edit-site-page-filter-bar__search {
22+
flex-grow: 1;
23+
svg {
24+
fill: $gray-400;
25+
}
26+
input[type="search"].components-search-control__input {
27+
background: $gray-800;
28+
color: $gray-100;
29+
height: 40px;
30+
border: none;
31+
&:focus {
32+
background: $gray-800;
33+
border: 1px solid $gray-700;
34+
box-shadow: none;
35+
}
36+
}
37+
}

‎packages/edit-site/src/components/layout/index.js

+81-67
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands
3535
*/
3636
import Sidebar from '../sidebar';
3737
import Editor from '../editor';
38-
import ListPage from '../list';
38+
import PageMainTemplates from '../page-main-templates';
3939
import ErrorBoundary from '../error-boundary';
4040
import { store as editSiteStore } from '../../store';
4141
import getIsListPage from '../../utils/get-is-list-page';
@@ -275,76 +275,90 @@ export default function Layout() {
275275
<SavePanel />
276276

277277
{ showCanvas && (
278-
<div
279-
className={ classnames(
280-
'edit-site-layout__canvas-container',
281-
{
282-
'is-resizing': isResizing,
283-
}
278+
<>
279+
{ isListPage && (
280+
<div className="edit-site-layout__main">
281+
<PageMainTemplates />
282+
</div>
284283
) }
285-
style={ {
286-
paddingTop: showFrame ? canvasPadding : 0,
287-
paddingBottom: showFrame ? canvasPadding : 0,
288-
} }
289-
>
290-
{ canvasResizer }
291-
{ !! canvasSize.width && (
292-
<motion.div
293-
whileHover={
294-
isEditorPage && canvasMode === 'view'
295-
? {
296-
scale: 1.005,
297-
transition: {
298-
duration:
299-
disableMotion ||
300-
isResizing
301-
? 0
302-
: 0.5,
303-
ease: 'easeOut',
304-
},
305-
}
306-
: {}
307-
}
308-
initial={ false }
309-
layout="position"
310-
className="edit-site-layout__canvas"
311-
transition={ {
312-
type: 'tween',
313-
duration:
314-
disableMotion || isResizing
315-
? 0
316-
: ANIMATION_DURATION,
317-
ease: 'easeOut',
284+
{ isEditorPage && (
285+
<div
286+
className={ classnames(
287+
'edit-site-layout__canvas-container',
288+
{
289+
'is-resizing': isResizing,
290+
}
291+
) }
292+
style={ {
293+
paddingTop: showFrame
294+
? canvasPadding
295+
: 0,
296+
paddingBottom: showFrame
297+
? canvasPadding
298+
: 0,
318299
} }
319300
>
320-
<motion.div
321-
style={ {
322-
position: 'absolute',
323-
top: 0,
324-
left: 0,
325-
bottom: 0,
326-
} }
327-
initial={ false }
328-
animate={ {
329-
width: canvasWidth,
330-
} }
331-
transition={ {
332-
type: 'tween',
333-
duration:
334-
disableMotion || isResizing
335-
? 0
336-
: ANIMATION_DURATION,
337-
ease: 'easeOut',
338-
} }
339-
>
340-
<ErrorBoundary>
341-
{ isEditorPage && <Editor /> }
342-
{ isListPage && <ListPage /> }
343-
</ErrorBoundary>
344-
</motion.div>
345-
</motion.div>
301+
{ canvasResizer }
302+
{ !! canvasSize.width && (
303+
<motion.div
304+
whileHover={
305+
isEditorPage &&
306+
canvasMode === 'view'
307+
? {
308+
scale: 1.005,
309+
transition: {
310+
duration:
311+
disableMotion ||
312+
isResizing
313+
? 0
314+
: 0.5,
315+
ease: 'easeOut',
316+
},
317+
}
318+
: {}
319+
}
320+
initial={ false }
321+
layout="position"
322+
className="edit-site-layout__canvas"
323+
transition={ {
324+
type: 'tween',
325+
duration:
326+
disableMotion || isResizing
327+
? 0
328+
: ANIMATION_DURATION,
329+
ease: 'easeOut',
330+
} }
331+
>
332+
<motion.div
333+
style={ {
334+
position: 'absolute',
335+
top: 0,
336+
left: 0,
337+
bottom: 0,
338+
} }
339+
initial={ false }
340+
animate={ {
341+
width: canvasWidth,
342+
} }
343+
transition={ {
344+
type: 'tween',
345+
duration:
346+
disableMotion ||
347+
isResizing
348+
? 0
349+
: ANIMATION_DURATION,
350+
ease: 'easeOut',
351+
} }
352+
>
353+
<ErrorBoundary>
354+
<Editor />
355+
</ErrorBoundary>
356+
</motion.div>
357+
</motion.div>
358+
) }
359+
</div>
346360
) }
347-
</div>
361+
</>
348362
) }
349363
</div>
350364
</div>

‎packages/edit-site/src/components/layout/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,11 @@
8181
}
8282
}
8383

84+
.edit-site-layout__main {
85+
flex-grow: 1;
86+
border-left: 1px solid $gray-800;
87+
}
88+
8489
.edit-site-layout__canvas-container {
8590
position: relative;
8691
flex-grow: 1;

‎packages/edit-site/src/components/page-main-templates/index.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { Button } from '@wordpress/components';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import Page from '../page';
10+
import FilterBar from '../filter-bar';
11+
import Table from '../table';
12+
13+
export default function PageMainTemplates() {
14+
return (
15+
<Page
16+
title="Templates"
17+
subTitle="Manage all your templates"
18+
actions={ <Button variant="primary">New Template</Button> }
19+
>
20+
<FilterBar />
21+
<Table />
22+
</Page>
23+
);
24+
}

‎packages/edit-site/src/components/page/header.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
__experimentalHeading as Heading,
6+
__experimentalText as Text,
7+
__experimentalHStack as HStack,
8+
FlexBlock,
9+
FlexItem,
10+
} from '@wordpress/components';
11+
12+
/**
13+
* Internal dependencies
14+
*/
15+
16+
export default function Header( { title, subTitle, actions } ) {
17+
return (
18+
<HStack as="header" alignment="left" className="edit-site-page-header">
19+
<FlexBlock className="edit-site-page-header__page-title">
20+
<Heading
21+
has="h1"
22+
level={ 3 }
23+
className="edit-site-page-header__title"
24+
>
25+
{ title }
26+
</Heading>
27+
<Text as="p" className="edit-site-page-header__sub-title">
28+
{ subTitle }
29+
</Text>
30+
</FlexBlock>
31+
<FlexItem className="edit-site-page-header__actions">
32+
{ actions }
33+
</FlexItem>
34+
</HStack>
35+
);
36+
}

‎packages/edit-site/src/components/page/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { __experimentalVStack as VStack } from '@wordpress/components';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
10+
import Header from './header';
11+
12+
export default function Page( { title, subTitle, actions, children } ) {
13+
return (
14+
<VStack spacing={ 0 } className="edit-site-page">
15+
<Header title={ title } subTitle={ subTitle } actions={ actions } />
16+
<div className="edit-site-page-content">{ children }</div>
17+
</VStack>
18+
);
19+
}

‎packages/edit-site/src/components/page/style.scss

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.edit-site-page {
2+
color: $gray-400;
3+
}
4+
5+
.edit-site-page-header {
6+
padding: $grid-unit-40;
7+
.components-text {
8+
color: $gray-400;
9+
}
10+
.components-heading {
11+
color: $gray-100;
12+
}
13+
.edit-site-page-header__sub-title {
14+
margin-top: $grid-unit-10;
15+
}
16+
}
17+
18+
.edit-site-page-content {
19+
padding: 0 $grid-unit-40 $grid-unit-40;
20+
}

0 commit comments

Comments
 (0)