Skip to content

Commit 1c50271

Browse files
wellmannwellmann
committed
refactor layout + update translation files and scripts
1 parent 80902d3 commit 1c50271

20 files changed

+370
-165
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
# WP React Admin Page Example
22

3+
## Overview
4+
This WordPress plugin is designed to demonstrate the usage of React within a WordPress admin page. It utilizes React, TypeScript and [Gutenberg components](https://wordpress.github.io/gutenberg/).
5+
36
![1](screenshot.jpg)

‎assets/components/App.module.css‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
/* Set brand color here */
2-
/* :root {
2+
/*:root {
33
--wp-admin-theme-color: hotpink;
4-
--wp-admin-theme-color-darker-10: deeppink;
4+
--wp-admin-theme-color-darker-10: hotpink;
55
--wp-admin-theme-color-darker-20: deeppink;
6-
} */
6+
}*/
7+
8+
:global(.wrap),
9+
:global(#wpfooter) {
10+
11+
a {
12+
color: var(--wp-admin-theme-color);
13+
14+
&:focus {
15+
box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
16+
}
17+
}
18+
}
719

820
.topBar {
21+
position: sticky;
22+
top: var(--wp-admin--admin-bar--height);
923
margin-top: -10px;
1024
margin-inline: -22px -20px;
1125
padding-block: 1em;
1226
padding-inline: 22px 20px;
1327
background-color: #fff;
1428
border-bottom: 1px solid rgba(0, 0, 0, .1);
29+
z-index: 9999;
1530

1631
svg {
1732
max-width: 2em;
@@ -26,11 +41,20 @@
2641
}
2742
}
2843

29-
.mainNav :global(.components-tab-panel__tabs) {
30-
background-color: #fff;
31-
box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px;
32-
border-radius: 7px;
33-
overflow: hidden;
44+
.mainNav {
45+
46+
:global(.components-tab-panel__tabs) {
47+
justify-content: center;
48+
background-color: #fff;
49+
box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px;
50+
border-radius: 7px;
51+
overflow: hidden;
52+
}
53+
}
54+
55+
.inner {
56+
max-width: 800px;
57+
margin-inline: auto;
3458
}
3559

3660
.snackbar {

‎assets/components/App.tsx‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -24,62 +24,65 @@ const App = ({ title }: { title: string }) => {
2424

2525
useEffect(() => {
2626
setShowAnnouncement(true);
27-
setError(__('This is an example error message.', 'wp-react-page-admin-example'));
28-
setSuccess(__('Example success', 'wp-react-page-admin-example'));
27+
setError(__('This is an example error message.', 'wp-react-admin-page-example'));
28+
setSuccess(__('Example success', 'wp-react-admin-page-example'));
2929
}, []);
3030

3131
return (
32-
<Grid
33-
columns={ 1 }
34-
gap={ 12 }
35-
>
32+
<>
3633
<TopBar
3734
title={ title }
3835
/>
39-
{ showAnnouncement && (
40-
<Notice
41-
status="info"
42-
onRemove={ () => setShowAnnouncement(null) }
43-
actions={[
36+
<Spacer marginY={ 12 } />
37+
<Grid
38+
columns={ 1 }
39+
gap={ 12 }
40+
className={ style.inner }
41+
>
42+
{ showAnnouncement && (
43+
<Notice
44+
status="info"
45+
onRemove={ () => setShowAnnouncement(null) }
46+
actions={[
47+
{
48+
label: __('Click me!', 'wp-react-admin-page-example'),
49+
onClick: () => setShowAnnouncement(null)
50+
},
51+
{
52+
label: __('Or visit a link for more info', 'wp-react-admin-page-example'),
53+
url: 'https://wordpress.org',
54+
variant: 'link'
55+
}
56+
]}
57+
>
58+
<h2>{ __('Announcement banner', 'wp-react-admin-page-example') }</h2>
59+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
60+
</Notice>
61+
) }
62+
<TabPanel
63+
activeClass="is-active"
64+
onSelect={ setTab }
65+
initialTabName={ tab }
66+
className={ style.mainNav }
67+
tabs={ [
68+
{
69+
name: 'tab-1',
70+
title: __('Tab 1', 'wp-react-admin-page-example'),
71+
component: TabOne
72+
},
4473
{
45-
label: 'Click me!',
46-
onClick: () => setShowAnnouncement(null)
74+
name: 'tab-2',
75+
title: __('Tab 2', 'wp-react-admin-page-example'),
76+
component: TabTwo
4777
},
4878
{
49-
label: 'Or visit a link for more info',
50-
url: 'https://wordpress.org',
51-
variant: 'link'
52-
}
53-
]}
79+
name: 'tab-3',
80+
title: __('Tab 3', 'wp-react-admin-page-example'),
81+
component: TabThree
82+
},
83+
] }
5484
>
55-
<h2>Announcement banner</h2>
56-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
57-
</Notice>
58-
) }
59-
<TabPanel
60-
activeClass="is-active"
61-
onSelect={ setTab }
62-
initialTabName={ tab }
63-
className={ style.mainNav }
64-
tabs={ [
65-
{
66-
name: 'tab-1',
67-
title: __('Tab 1', 'wp-react-page-admin-example'),
68-
component: TabOne
69-
},
70-
{
71-
name: 'tab-2',
72-
title: __('Tab 2', 'wp-react-page-admin-example'),
73-
component: TabTwo
74-
},
75-
{
76-
name: 'tab-3',
77-
title: __('Tab 3', 'wp-react-page-admin-example'),
78-
component: TabThree
79-
},
80-
] }
81-
>
82-
{ (tab) => {
85+
{ (tab) => {
8386
const TabComponent = tab.component;
8487
return (
8588
<>
@@ -100,8 +103,10 @@ const App = ({ title }: { title: string }) => {
100103
</Grid>
101104
</>
102105
);
103-
}}
104-
</TabPanel>
106+
}}
107+
</TabPanel>
108+
<Spacer marginY={ 12 } />
109+
</Grid>
105110
{ success && (
106111
<Snackbar
107112
onRemove={ () => setSuccess(null) }
@@ -110,8 +115,7 @@ const App = ({ title }: { title: string }) => {
110115
{ success }
111116
</Snackbar>
112117
) }
113-
<Spacer marginY={ 12 } />
114-
</Grid>
118+
</>
115119
);
116120
}
117121

@@ -131,7 +135,7 @@ const TopBar = ({ title }: { title: string }) => {
131135
/>
132136
<h1>{ title }</h1>
133137
</Flex>
134-
<ExternalLink href="https://google.com">Help</ExternalLink>
138+
<ExternalLink href="https://google.com">{ __('Help', 'wp-react-admin-page-example') }</ExternalLink>
135139
</Flex>
136140
);
137141
};

‎assets/components/Box.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,36 @@
11
import { useState } from "@wordpress/element";
22
import { __ } from "@wordpress/i18n";
3-
import { Button, Card, CardBody, CardFooter, Spinner, TextControl } from "@wordpress/components";
3+
import { Button, Card, CardBody, CardFooter, DropdownMenu, Flex, Spinner, TextControl } from "@wordpress/components";
44

55
const Box = () => {
66
const [isProcessing, setIsProcessing] = useState(false);
77
const [inputValue, setInputValue] = useState('');
88

99
return (
1010
<div>
11-
<h2>{ __('Heading', 'wp-react-page-admin-example') }</h2>
11+
<Flex>
12+
<h2>{ __('Heading', 'wp-react-admin-page-example') }</h2>
13+
<DropdownMenu
14+
icon="ellipsis"
15+
label={ __('Options', 'wp-react-admin-page-example') }
16+
controls={[
17+
{
18+
title: __('First option', 'wp-react-admin-page-example'),
19+
icon: 'saved',
20+
onClick: () => alert(__('First option', 'wp-react-admin-page-example'))
21+
},
22+
{
23+
title: __('Second option', 'wp-react-admin-page-example'),
24+
onClick: () => alert(__('Second option', 'wp-react-admin-page-example'))
25+
}
26+
]}
27+
/>
28+
</Flex>
1229
<Card>
1330
<CardBody>
1431
<TextControl
15-
help={ __('Help text to explain the input.', 'wp-react-page-admin-example') }
16-
label={ __('Label Text', 'wp-react-page-admin-example') }
32+
help={ __('Help text to explain the input.', 'wp-react-admin-page-example') }
33+
label={ __('Label Text', 'wp-react-admin-page-example') }
1734
onChange={ setInputValue }
1835
value={ inputValue }
1936
/>
@@ -24,7 +41,7 @@ const Box = () => {
2441
variant="primary"
2542
onClick={ () => setIsProcessing(true) }
2643
>
27-
{ __('Save', 'wp-react-page-admin-example') }
44+
{ __('Save', 'wp-react-admin-page-example') }
2845
</Button>
2946
</CardFooter>
3047
</Card>

‎assets/components/FooterLeft.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useRef } from '@wordpress/element';
2+
import { ExternalLink } from '@wordpress/components';
3+
import { __ } from "@wordpress/i18n";
4+
5+
interface Props {
6+
targetElem: HTMLElement;
7+
}
8+
9+
const FooterLeft = ({ targetElem }: Props) => {
10+
const targetRef = useRef(targetElem);
11+
const isMounted = useRef(false);
12+
13+
if (!isMounted.current) {
14+
targetRef.current.innerHTML = '';
15+
isMounted.current = true;
16+
}
17+
18+
return (
19+
<span id="footer-thankyou">
20+
{ __('Created with <3 using', 'wp-react-admin-page-example') + ' ' }
21+
<ExternalLink href="https://wordpress.github.io/gutenberg/">@wordpress/components</ExternalLink>
22+
</span>
23+
);
24+
};
25+
26+
export default FooterLeft;

‎assets/components/FooterRight.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useRef } from '@wordpress/element';
2+
import { __ } from "@wordpress/i18n";
3+
4+
interface Props {
5+
targetElem: HTMLElement;
6+
}
7+
8+
declare var __BUILD_TIMESTAMP__: Date;
9+
10+
const FooterRight = ({ targetElem }: Props) => {
11+
const targetRef = useRef(targetElem);
12+
const isMounted = useRef(false);
13+
14+
if (!isMounted.current) {
15+
targetRef.current.innerHTML = '';
16+
isMounted.current = true;
17+
}
18+
19+
return (
20+
<>
21+
{ __('App version', 'wp-react-admin-page-example') + ': ' }
22+
{ __BUILD_TIMESTAMP__ }
23+
</>
24+
);
25+
};
26+
27+
export default FooterRight;

‎assets/components/Tab/TabOne.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { __ } from "@wordpress/i18n";
2-
import { __experimentalGrid as Grid, Card, CardBody } from "@wordpress/components";
2+
import { __experimentalGrid as Grid } from "@wordpress/components";
33
import Box from "../Box";
44

55
const TabOne = () => {
66
return (
77
<>
88
<div>
9-
<h2>{__('Heading', 'wp-react-page-admin-example')}</h2>
10-
<Card>
11-
<CardBody>
12-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
13-
</CardBody>
14-
</Card>
9+
<h2>{__('Heading', 'wp-react-admin-page-example')}</h2>
10+
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
11+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
12+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
13+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
14+
sed diam voluptua.</p>
1515
</div>
1616
<Grid
1717
columns={2}

‎assets/entry.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1-
import { createRoot } from '@wordpress/element';
1+
import { createPortal, createRoot } from '@wordpress/element';
22
import App from './components/App';
3+
import FooterLeft from "./components/FooterLeft";
4+
import FooterRight from "./components/FooterRight";
35

46
document.addEventListener('DOMContentLoaded', () => {
57
const appRoot = document.getElementById('root');
68
if (!appRoot) {
79
return;
810
}
911

12+
const footerLeft = document.getElementById('footer-left');
13+
const footerRight = document.getElementById('footer-upgrade');
14+
1015
const root = createRoot(appRoot);
11-
root.render(<App title={ appRoot?.dataset?.title || '' } />);
16+
root.render(
17+
<>
18+
<App title={ appRoot?.dataset?.title || '' } />
19+
{ footerLeft && createPortal(<FooterLeft targetElem={ footerLeft } />, footerLeft) }
20+
{ footerRight && createPortal(<FooterRight targetElem={ footerRight } />, footerRight) }
21+
</>
22+
);
1223
});

‎bin/build.mjs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,9 @@ const buildOptions = {
134134
bundle: true,
135135
minify: !isWatchMode,
136136
sourcemap: isWatchMode,
137+
define: {
138+
__BUILD_TIMESTAMP__: Date.now().toString(),
139+
},
137140
target: 'es6',
138141
logLevel: 'info',
139142
platform: 'browser',

‎bootstrap.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
* Author: Kevin Wellmann
1010
* License: GPL-3.0+
1111
* License URI: http://www.gnu.org/licenses/gpl-3.0.txt
12-
* Text Domain: wp-react-page-admin-example
12+
* Text Domain: wp-react-admin-page-example
1313
* Domain Path: /lang
1414
* GitHub Plugin URI: https://github.com/wellmann/wp-react-admin-page-example
1515
*/

0 commit comments

Comments
 (0)