Skip to content

Commit 78052d1

Browse files
youknowriadyouknowriad
committed
Simplify CustomCSS UI
1 parent 9091d91 commit 78052d1

File tree

3 files changed

+99
-115
lines changed

3 files changed

+99
-115
lines changed

‎packages/block-editor/src/components/global-styles/advanced-panel.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import {
5+
TextareaControl,
6+
Tooltip,
7+
__experimentalVStack as VStack,
8+
} from '@wordpress/components';
9+
import { useState } from '@wordpress/element';
10+
import { __ } from '@wordpress/i18n';
11+
import { Icon, info } from '@wordpress/icons';
12+
13+
/**
14+
* Internal dependencies
15+
*/
16+
import { default as transformStyles } from '../../utils/transform-styles';
17+
18+
export default function AdvancedPanel( {
19+
value,
20+
onChange,
21+
inheritedValue = value,
22+
} ) {
23+
// Custom CSS
24+
const [ cssError, setCSSError ] = useState( null );
25+
const customCSS = inheritedValue?.css;
26+
function handleOnChange( newValue ) {
27+
onChange( {
28+
...value,
29+
css: newValue,
30+
} );
31+
if ( cssError ) {
32+
const [ transformed ] = transformStyles(
33+
[ { css: value } ],
34+
'.editor-styles-wrapper'
35+
);
36+
if ( transformed ) {
37+
setCSSError( null );
38+
}
39+
}
40+
}
41+
function handleOnBlur( event ) {
42+
if ( ! event?.target?.value ) {
43+
setCSSError( null );
44+
return;
45+
}
46+
47+
const [ transformed ] = transformStyles(
48+
[ { css: event.target.value } ],
49+
'.editor-styles-wrapper'
50+
);
51+
52+
setCSSError(
53+
transformed === null
54+
? __( 'There is an error with your CSS structure.' )
55+
: null
56+
);
57+
}
58+
59+
return (
60+
<VStack spacing={ 3 }>
61+
<TextareaControl
62+
label={ __( 'Additional CSS' ) }
63+
__nextHasNoMarginBottom
64+
value={ customCSS }
65+
onChange={ ( newValue ) => handleOnChange( newValue ) }
66+
onBlur={ handleOnBlur }
67+
className="edit-site-global-styles__custom-css-input"
68+
spellCheck={ false }
69+
/>
70+
{ cssError && (
71+
<Tooltip text={ cssError }>
72+
<div className="edit-site-global-styles__custom-css-validation-wrapper">
73+
<Icon
74+
icon={ info }
75+
className="edit-site-global-styles__custom-css-validation-icon"
76+
/>
77+
</div>
78+
</Tooltip>
79+
) }
80+
</VStack>
81+
);
82+
}

‎packages/block-editor/src/components/global-styles/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,4 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
1919
export { default as ColorPanel, useHasColorPanel } from './color-panel';
2020
export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
2121
export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
22+
export { default as AdvancedPanel } from './advanced-panel';

‎packages/edit-site/src/components/global-styles/custom-css.js‎

Lines changed: 16 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,31 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { useState } from '@wordpress/element';
5-
import {
6-
TextareaControl,
7-
Panel,
8-
PanelBody,
9-
__experimentalVStack as VStack,
10-
Tooltip,
11-
Icon,
12-
} from '@wordpress/components';
13-
import { __ } from '@wordpress/i18n';
14-
import {
15-
privateApis as blockEditorPrivateApis,
16-
transformStyles,
17-
} from '@wordpress/block-editor';
18-
import { info } from '@wordpress/icons';
4+
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
195

206
/**
217
* Internal dependencies
228
*/
239
import { unlock } from '../../private-apis';
24-
import Subtitle from './subtitle';
2510

26-
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
27-
function CustomCSSControl( { blockName } ) {
28-
// If blockName is defined, we are customizing CSS at the block level:
29-
// styles.blocks.blockName.css
30-
const block = !! blockName ? blockName : null;
31-
32-
const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );
33-
const [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );
34-
const [ cssError, setCSSError ] = useState( null );
35-
const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
36-
37-
// If there is custom css from theme.json show it in the edit box
38-
// so the user can selectively overwrite it, rather than have the user CSS
39-
// completely overwrite the theme CSS by default.
40-
const themeCustomCSS =
41-
! customCSS && themeCSS
42-
? `/* ${ __(
43-
'Theme Custom CSS start'
44-
) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
45-
: undefined;
46-
47-
function handleOnChange( value ) {
48-
// If there is theme custom CSS, but the user clears the input box then save the
49-
// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
50-
if ( themeCSS && value === '' ) {
51-
setCustomCSS( ignoreThemeCustomCSS );
52-
return;
53-
}
54-
setCustomCSS( value );
55-
if ( cssError ) {
56-
const [ transformed ] = transformStyles(
57-
[ { css: value } ],
58-
'.editor-styles-wrapper'
59-
);
60-
if ( transformed ) {
61-
setCSSError( null );
62-
}
63-
}
64-
}
11+
const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
12+
blockEditorPrivateApis
13+
);
6514

66-
function handleOnBlur( event ) {
67-
if ( ! event?.target?.value ) {
68-
setCSSError( null );
69-
return;
70-
}
71-
72-
const [ transformed ] = transformStyles(
73-
[ { css: event.target.value } ],
74-
'.editor-styles-wrapper'
75-
);
76-
77-
setCSSError(
78-
transformed === null
79-
? __( 'There is an error with your CSS structure.' )
80-
: null
81-
);
82-
}
83-
84-
const originalThemeCustomCSS =
85-
themeCSS && customCSS && themeCustomCSS !== customCSS
86-
? themeCSS
87-
: undefined;
15+
function CustomCSSControl( { blockName } ) {
16+
const [ style ] = useGlobalStyle( '', blockName, 'user', {
17+
shouldDecodeEncode: false,
18+
} );
19+
const [ inheritedStyle, setStyle ] = useGlobalStyle( '', blockName, 'all', {
20+
shouldDecodeEncode: false,
21+
} );
8822

8923
return (
90-
<>
91-
{ originalThemeCustomCSS && (
92-
<Panel>
93-
<PanelBody
94-
title={ __( 'Original Theme Custom CSS' ) }
95-
initialOpen={ false }
96-
>
97-
<pre className="edit-site-global-styles__custom-css-theme-css">
98-
{ originalThemeCustomCSS }
99-
</pre>
100-
</PanelBody>
101-
</Panel>
102-
) }
103-
<VStack spacing={ 3 }>
104-
<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>
105-
<TextareaControl
106-
__nextHasNoMarginBottom
107-
value={
108-
customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
109-
themeCustomCSS
110-
}
111-
onChange={ ( value ) => handleOnChange( value ) }
112-
onBlur={ handleOnBlur }
113-
className="edit-site-global-styles__custom-css-input"
114-
spellCheck={ false }
115-
/>
116-
{ cssError && (
117-
<Tooltip text={ cssError }>
118-
<div className="edit-site-global-styles__custom-css-validation-wrapper">
119-
<Icon
120-
icon={ info }
121-
className="edit-site-global-styles__custom-css-validation-icon"
122-
/>
123-
</div>
124-
</Tooltip>
125-
) }
126-
</VStack>
127-
</>
24+
<StylesAdvancedPanel
25+
value={ style }
26+
onChange={ setStyle }
27+
inheritedValue={ inheritedStyle }
28+
/>
12829
);
12930
}
13031

0 commit comments

Comments
 (0)