Skip to content

Commit 98b5c5c

Browse files
t-hamanoyouknowriadMamadukajasmussen
authored
Restore correct additional CSS screen layout (#73192)
* Restore correct additional CSS screen layout * Change the overlooked component to GlobalStylesNavigationScreen Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
1 parent 3e6b3d4 commit 98b5c5c

File tree

3 files changed

+86
-108
lines changed

3 files changed

+86
-108
lines changed

‎packages/global-styles-ui/src/global-styles-ui.tsx‎

Lines changed: 63 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ interface ContextScreensProps {
6767
parentMenu?: string;
6868
}
6969

70+
interface GlobalStylesNavigationScreenProps {
71+
path: string;
72+
children: React.ReactNode;
73+
}
74+
7075
function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
7176
const blockStyleVariations = useSelect(
7277
( select ) => {
@@ -81,9 +86,11 @@ function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
8186

8287
return (
8388
<>
84-
<Navigator.Screen path={ parentMenu + '/colors/palette' }>
89+
<GlobalStylesNavigationScreen
90+
path={ parentMenu + '/colors/palette' }
91+
>
8592
<ScreenColorPalette name={ name } />
86-
</Navigator.Screen>
93+
</GlobalStylesNavigationScreen>
8794

8895
{ !! blockStyleVariations?.length && (
8996
<BlockStylesNavigationScreens
@@ -165,72 +172,72 @@ export function GlobalStylesUI( {
165172
onPathChange={ onPathChange }
166173
/>
167174
) }
168-
<Navigator.Screen path="/">
175+
<GlobalStylesNavigationScreen path="/">
169176
<ScreenRoot />
170-
</Navigator.Screen>
171-
<Navigator.Screen path="/colors">
177+
</GlobalStylesNavigationScreen>
178+
<GlobalStylesNavigationScreen path="/colors">
172179
<ScreenColors />
173-
</Navigator.Screen>
174-
<Navigator.Screen path="/typography">
180+
</GlobalStylesNavigationScreen>
181+
<GlobalStylesNavigationScreen path="/typography">
175182
<ScreenTypography />
176-
</Navigator.Screen>
177-
<Navigator.Screen path="/typography/font-sizes">
183+
</GlobalStylesNavigationScreen>
184+
<GlobalStylesNavigationScreen path="/typography/font-sizes">
178185
<FontSizes />
179-
</Navigator.Screen>
180-
<Navigator.Screen path="/typography/font-sizes/:origin/:slug">
186+
</GlobalStylesNavigationScreen>
187+
<GlobalStylesNavigationScreen path="/typography/font-sizes/:origin/:slug">
181188
<FontSize />
182-
</Navigator.Screen>
183-
<Navigator.Screen path="/layout">
189+
</GlobalStylesNavigationScreen>
190+
<GlobalStylesNavigationScreen path="/layout">
184191
<ScreenLayout />
185-
</Navigator.Screen>
186-
<Navigator.Screen path="/colors/palette">
192+
</GlobalStylesNavigationScreen>
193+
<GlobalStylesNavigationScreen path="/colors/palette">
187194
<ScreenColorPalette />
188-
</Navigator.Screen>
189-
<Navigator.Screen path="/variations">
195+
</GlobalStylesNavigationScreen>
196+
<GlobalStylesNavigationScreen path="/variations">
190197
<ScreenStyleVariations />
191-
</Navigator.Screen>
192-
<Navigator.Screen path="/css">
198+
</GlobalStylesNavigationScreen>
199+
<GlobalStylesNavigationScreen path="/css">
193200
<ScreenCSS />
194-
</Navigator.Screen>
195-
<Navigator.Screen path="/revisions/:revisionId?">
201+
</GlobalStylesNavigationScreen>
202+
<GlobalStylesNavigationScreen path="/revisions/:revisionId?">
196203
<ScreenRevisions />
197-
</Navigator.Screen>
198-
<Navigator.Screen path="/shadows">
204+
</GlobalStylesNavigationScreen>
205+
<GlobalStylesNavigationScreen path="/shadows">
199206
<ScreenShadows />
200-
</Navigator.Screen>
201-
<Navigator.Screen path="/shadows/edit/:category/:slug">
207+
</GlobalStylesNavigationScreen>
208+
<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
202209
<ScreenShadowsEdit />
203-
</Navigator.Screen>
204-
<Navigator.Screen path="/background">
210+
</GlobalStylesNavigationScreen>
211+
<GlobalStylesNavigationScreen path="/background">
205212
<ScreenBackground />
206-
</Navigator.Screen>
207-
<Navigator.Screen path="/typography/text">
213+
</GlobalStylesNavigationScreen>
214+
<GlobalStylesNavigationScreen path="/typography/text">
208215
<ScreenTypographyElement element="text" />
209-
</Navigator.Screen>
210-
<Navigator.Screen path="/typography/link">
216+
</GlobalStylesNavigationScreen>
217+
<GlobalStylesNavigationScreen path="/typography/link">
211218
<ScreenTypographyElement element="link" />
212-
</Navigator.Screen>
213-
<Navigator.Screen path="/typography/heading">
219+
</GlobalStylesNavigationScreen>
220+
<GlobalStylesNavigationScreen path="/typography/heading">
214221
<ScreenTypographyElement element="heading" />
215-
</Navigator.Screen>
216-
<Navigator.Screen path="/typography/caption">
222+
</GlobalStylesNavigationScreen>
223+
<GlobalStylesNavigationScreen path="/typography/caption">
217224
<ScreenTypographyElement element="caption" />
218-
</Navigator.Screen>
219-
<Navigator.Screen path="/typography/button">
225+
</GlobalStylesNavigationScreen>
226+
<GlobalStylesNavigationScreen path="/typography/button">
220227
<ScreenTypographyElement element="button" />
221-
</Navigator.Screen>
222-
<Navigator.Screen path="/blocks">
228+
</GlobalStylesNavigationScreen>
229+
<GlobalStylesNavigationScreen path="/blocks">
223230
<ScreenBlockList />
224-
</Navigator.Screen>
231+
</GlobalStylesNavigationScreen>
225232
{ blocks.map( ( block: BlockType ) => (
226-
<Navigator.Screen
233+
<GlobalStylesNavigationScreen
227234
key={ 'menu-block-' + block.name }
228235
path={
229236
'/blocks/' + encodeURIComponent( block.name )
230237
}
231238
>
232239
<ScreenBlock name={ block.name } />
233-
</Navigator.Screen>
240+
</GlobalStylesNavigationScreen>
234241
) ) }
235242

236243
<ContextScreens />
@@ -250,6 +257,20 @@ export function GlobalStylesUI( {
250257
);
251258
}
252259

260+
function GlobalStylesNavigationScreen( {
261+
path,
262+
children,
263+
}: GlobalStylesNavigationScreenProps ) {
264+
return (
265+
<Navigator.Screen
266+
className="global-styles-ui-sidebar__navigator-screen"
267+
path={ path }
268+
>
269+
{ children }
270+
</Navigator.Screen>
271+
);
272+
}
273+
253274
/*
254275
* Component that handles path synchronization between external path prop and Navigator's internal path.
255276
*/

‎packages/global-styles-ui/src/screen-css.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ import { unlock } from './lock-unlock';
1717
const { AdvancedPanel: StylesAdvancedPanel } = unlock( blockEditorPrivateApis );
1818

1919
function ScreenCSS() {
20-
const description = __(
21-
'Add your own CSS to customize the appearance and layout of your site.'
22-
);
23-
2420
// Get user-only styles (should not decode/encode to preserve raw CSS)
2521
const [ style ] = useStyle( '', undefined, 'user', false );
2622
// Get all styles (inherited + user) for context
@@ -33,16 +29,26 @@ function ScreenCSS() {
3329

3430
return (
3531
<>
36-
<ScreenHeader title={ __( 'CSS' ) } description={ description } />
32+
<ScreenHeader
33+
title={ __( 'Additional CSS' ) }
34+
description={
35+
<>
36+
{ __(
37+
'You can add custom CSS to further customize the appearance and layout of your site.'
38+
) }
39+
<br />
40+
<ExternalLink
41+
href={ __(
42+
'https://developer.wordpress.org/advanced-administration/wordpress/css/'
43+
) }
44+
className="global-styles-ui-screen-css-help-link"
45+
>
46+
{ __( 'Learn more about CSS' ) }
47+
</ExternalLink>
48+
</>
49+
}
50+
/>
3751
<div className="global-styles-ui-screen-css">
38-
<ExternalLink
39-
href={ __(
40-
'https://developer.wordpress.org/advanced-administration/wordpress/css/'
41-
) }
42-
className="global-styles-ui-screen-css-help-link"
43-
>
44-
{ __( 'Learn more about CSS' ) }
45-
</ExternalLink>
4652
<StylesAdvancedPanel
4753
value={ style }
4854
onChange={ setStyle }

‎packages/global-styles-ui/src/screen-root.tsx‎

Lines changed: 4 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import { isRTL, __ } from '@wordpress/i18n';
1616
import { chevronLeft, chevronRight } from '@wordpress/icons';
1717
import { useSelect } from '@wordpress/data';
1818
import { store as coreStore } from '@wordpress/core-data';
19-
import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
2019

2120
/**
2221
* Internal dependencies
@@ -27,26 +26,10 @@ import RootMenu from './root-menu';
2726
import PreviewStyles from './preview-styles';
2827

2928
function ScreenRoot() {
30-
const { hasVariations, canEditCSS } = useSelect( ( select ) => {
31-
const {
32-
__experimentalGetCurrentThemeGlobalStylesVariations,
33-
__experimentalGetCurrentGlobalStylesId,
34-
getEntityRecord,
35-
} = select( coreStore );
36-
37-
const globalStylesId = __experimentalGetCurrentGlobalStylesId();
38-
const globalStyles = globalStylesId
39-
? getEntityRecord( 'root', 'globalStyles', globalStylesId )
40-
: undefined;
41-
42-
return {
43-
hasVariations:
44-
!! __experimentalGetCurrentThemeGlobalStylesVariations()
45-
?.length,
46-
canEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[
47-
'wp:action-edit-css'
48-
],
49-
};
29+
const hasVariations = useSelect( ( select ) => {
30+
const { __experimentalGetCurrentThemeGlobalStylesVariations } =
31+
select( coreStore );
32+
return !! __experimentalGetCurrentThemeGlobalStylesVariations()?.length;
5033
}, [] );
5134

5235
return (
@@ -107,38 +90,6 @@ function ScreenRoot() {
10790
</NavigationButtonAsItem>
10891
</ItemGroup>
10992
</CardBody>
110-
111-
{ canEditCSS && (
112-
<>
113-
<CardDivider />
114-
<CardBody>
115-
<Spacer
116-
as="p"
117-
paddingTop={ 2 }
118-
paddingX="13px"
119-
marginBottom={ 4 }
120-
>
121-
{ __(
122-
'Add your own CSS to customize the appearance and layout of your site.'
123-
) }
124-
</Spacer>
125-
<ItemGroup>
126-
<NavigationButtonAsItem path="/css">
127-
<HStack justify="space-between">
128-
<FlexItem>
129-
{ __( 'Additional CSS' ) }
130-
</FlexItem>
131-
<IconWithCurrentColor
132-
icon={
133-
isRTL() ? chevronLeft : chevronRight
134-
}
135-
/>
136-
</HStack>
137-
</NavigationButtonAsItem>
138-
</ItemGroup>
139-
</CardBody>
140-
</>
141-
) }
14293
</Card>
14394
);
14495
}

0 commit comments

Comments
 (0)