Skip to content

Commit abf1b0c

Browse files
t-hamanot-hamano
committed
Polish plugin sidebar buttons
1 parent 1dbb668 commit abf1b0c

File tree

2 files changed

+73
-119
lines changed

2 files changed

+73
-119
lines changed

‎src/plugin-sidebar.js

Lines changed: 73 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@
44
import { useState } from '@wordpress/element';
55
import { registerPlugin } from '@wordpress/plugins';
66
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
7-
import { __, _x } from '@wordpress/i18n';
7+
import { __, _x, isRTL } from '@wordpress/i18n';
88
import { useDispatch } from '@wordpress/data';
99
import { store as noticesStore } from '@wordpress/notices';
1010
import {
1111
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
1212
__experimentalVStack as VStack,
1313
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
14-
__experimentalSpacer as Spacer,
15-
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
1614
__experimentalNavigatorProvider as NavigatorProvider,
1715
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
1816
__experimentalNavigatorScreen as NavigatorScreen,
@@ -24,6 +22,7 @@ import {
2422
__experimentalText as Text,
2523
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
2624
__experimentalDivider as Divider,
25+
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
2726
Button,
2827
Icon,
2928
FlexItem,
@@ -35,6 +34,7 @@ import {
3534
download,
3635
edit,
3736
code,
37+
chevronLeft,
3838
chevronRight,
3939
addCard,
4040
blockMeta,
@@ -58,6 +58,23 @@ import AboutPlugin from './editor-sidebar/about';
5858
import ResetTheme from './editor-sidebar/reset-theme';
5959
import './plugin-styles.scss';
6060

61+
function PluginSidebarItem( { icon, path, children, ...props } ) {
62+
const ItemWrapper = path ? NavigatorButton : Button;
63+
return (
64+
<ItemWrapper { ...props } path={ path }>
65+
<HStack justify="flex-start">
66+
<HStack justify="flex-start">
67+
<Icon icon={ icon } />
68+
<FlexItem>{ children }</FlexItem>
69+
</HStack>
70+
{ path && (
71+
<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
72+
) }
73+
</HStack>
74+
</ItemWrapper>
75+
);
76+
}
77+
6178
const CreateBlockThemePlugin = () => {
6279
const [ isEditorOpen, setIsEditorOpen ] = useState( false );
6380
const [ isGlobalStylesEditorOpen, setIsGlobalStylesEditorOpen ] =
@@ -111,34 +128,22 @@ const CreateBlockThemePlugin = () => {
111128
<NavigatorScreen path="/">
112129
<PanelBody>
113130
<VStack spacing={ 0 }>
114-
<NavigatorButton path="/save" icon={ copy }>
115-
<Spacer />
116-
<HStack>
117-
<FlexItem>
118-
{ __(
119-
'Save Changes to Theme',
120-
'create-block-theme'
121-
) }
122-
</FlexItem>
123-
<Icon icon={ chevronRight } />
124-
</HStack>
125-
</NavigatorButton>
126-
<NavigatorButton
131+
<PluginSidebarItem path="/save" icon={ copy }>
132+
{ __(
133+
'Save Changes to Theme',
134+
'create-block-theme'
135+
) }
136+
</PluginSidebarItem>
137+
<PluginSidebarItem
127138
path="/create/variation"
128139
icon={ blockMeta }
129140
>
130-
<Spacer />
131-
<HStack>
132-
<FlexItem>
133-
{ __(
134-
'Create Theme Variation',
135-
'create-block-theme'
136-
) }
137-
</FlexItem>
138-
<Icon icon={ chevronRight } />
139-
</HStack>
140-
</NavigatorButton>
141-
<Button
141+
{ __(
142+
'Create Theme Variation',
143+
'create-block-theme'
144+
) }
145+
</PluginSidebarItem>
146+
<PluginSidebarItem
142147
icon={ edit }
143148
onClick={ () =>
144149
setIsMetadataEditorOpen( true )
@@ -148,17 +153,17 @@ const CreateBlockThemePlugin = () => {
148153
'Edit Theme Metadata',
149154
'create-block-theme'
150155
) }
151-
</Button>
152-
<Button
156+
</PluginSidebarItem>
157+
<PluginSidebarItem
153158
icon={ code }
154159
onClick={ () => setIsEditorOpen( true ) }
155160
>
156161
{ __(
157162
'View theme.json',
158163
'create-block-theme'
159164
) }
160-
</Button>
161-
<Button
165+
</PluginSidebarItem>
166+
<PluginSidebarItem
162167
icon={ code }
163168
onClick={ () =>
164169
setIsGlobalStylesEditorOpen( true )
@@ -168,76 +173,44 @@ const CreateBlockThemePlugin = () => {
168173
'View Custom Styles',
169174
'create-block-theme'
170175
) }
171-
</Button>
172-
<Button
176+
</PluginSidebarItem>
177+
<PluginSidebarItem
173178
icon={ download }
174179
onClick={ () => handleExportClick() }
175180
>
176181
{ __( 'Export Zip', 'create-block-theme' ) }
177-
</Button>
182+
</PluginSidebarItem>
178183
<Divider />
179-
<NavigatorButton
184+
<PluginSidebarItem
180185
path="/create/blank"
181186
icon={ addCard }
182187
>
183-
<Spacer />
184-
<HStack>
185-
<FlexItem>
186-
{ __(
187-
'Create Blank Theme',
188-
'create-block-theme'
189-
) }
190-
</FlexItem>
191-
<Icon icon={ chevronRight } />
192-
</HStack>
193-
</NavigatorButton>
194-
<NavigatorButton path="/clone" icon={ copy }>
195-
<Spacer />
196-
<HStack>
197-
<FlexItem>
198-
{ __(
199-
'Create Theme',
200-
'create-block-theme'
201-
) }
202-
</FlexItem>
203-
<Icon icon={ chevronRight } />
204-
</HStack>
205-
</NavigatorButton>
188+
{ __(
189+
'Create Blank Theme',
190+
'create-block-theme'
191+
) }
192+
</PluginSidebarItem>
193+
<PluginSidebarItem path="/clone" icon={ copy }>
194+
{ __(
195+
'Create Theme',
196+
'create-block-theme'
197+
) }
198+
</PluginSidebarItem>
206199

207200
<Divider />
208201

209-
<NavigatorButton path="/reset" icon={ trash }>
210-
<Spacer />
211-
<HStack>
212-
<FlexItem>
213-
{ __(
214-
'Reset Theme',
215-
'create-block-theme'
216-
) }
217-
</FlexItem>
218-
<Icon icon={ chevronRight } />
219-
</HStack>
220-
</NavigatorButton>
202+
<PluginSidebarItem path="/reset" icon={ trash }>
203+
{ __(
204+
'Reset Theme',
205+
'create-block-theme'
206+
) }
207+
</PluginSidebarItem>
221208

222209
<Divider />
223210

224-
<NavigatorButton
225-
path="/about"
226-
icon={ help }
227-
className={
228-
'create-block-theme__plugin-sidebar__about-button'
229-
}
230-
>
231-
<Spacer />
232-
<HStack>
233-
<FlexItem>
234-
{ __(
235-
'Help',
236-
'create-block-theme'
237-
) }
238-
</FlexItem>
239-
</HStack>
240-
</NavigatorButton>
211+
<PluginSidebarItem path="/about" icon={ help }>
212+
{ __( 'Help', 'create-block-theme' ) }
213+
</PluginSidebarItem>
241214
</VStack>
242215
</PanelBody>
243216
</NavigatorScreen>
@@ -258,49 +231,37 @@ const CreateBlockThemePlugin = () => {
258231
) }
259232
</Text>
260233
<Divider />
261-
<NavigatorButton
234+
<PluginSidebarItem
262235
path="/clone/create"
263236
icon={ copy }
264237
onClick={ () => {
265238
setCloneCreateType( 'createClone' );
266239
} }
267240
>
268-
<Spacer />
269-
<HStack>
270-
<FlexItem>
271-
{ __(
272-
'Clone Theme',
273-
'create-block-theme'
274-
) }
275-
</FlexItem>
276-
<Icon icon={ chevronRight } />
277-
</HStack>
278-
</NavigatorButton>
241+
{ __(
242+
'Clone Theme',
243+
'create-block-theme'
244+
) }
245+
</PluginSidebarItem>
279246
<Text variant="muted">
280247
{ __(
281248
'Create a clone of this theme with a new name. The user changes will be preserved in the new theme.',
282249
'create-block-theme'
283250
) }
284251
</Text>
285252
<Divider />
286-
<NavigatorButton
253+
<PluginSidebarItem
287254
path="/clone/create"
288255
icon={ copy }
289256
onClick={ () => {
290257
setCloneCreateType( 'createChild' );
291258
} }
292259
>
293-
<Spacer />
294-
<HStack>
295-
<FlexItem>
296-
{ __(
297-
'Create Child Theme',
298-
'create-block-theme'
299-
) }
300-
</FlexItem>
301-
<Icon icon={ chevronRight } />
302-
</HStack>
303-
</NavigatorButton>
260+
{ __(
261+
'Create Child Theme',
262+
'create-block-theme'
263+
) }
264+
</PluginSidebarItem>
304265
<Text variant="muted">
305266
{ __(
306267
'Create a child theme that uses this theme as a parent. This theme will remain unchanged and the user changes will be preserved in the new child theme.',

‎src/plugin-styles.scss

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,4 @@ $modal-footer-height: 70px;
2424
object-fit: cover;
2525
}
2626
}
27-
28-
&__plugin-sidebar {
29-
&__about-button {
30-
color: $gray-700;
31-
margin-top: 3rem;
32-
}
33-
}
3427
}

0 commit comments

Comments
 (0)