Simplify CustomCSS UI (#49721)

WordPress · May 2, 2023 · 949ca32 · 949ca32
1 parent f9df0da
commit 949ca32
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 143 deletions.
diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextareaControl,
+	Tooltip,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { default as transformStyles } from '../../utils/transform-styles';
+
+export default function AdvancedPanel( {
+	value,
+	onChange,
+	inheritedValue = value,
+} ) {
+	// Custom CSS
+	const [ cssError, setCSSError ] = useState( null );
+	const customCSS = inheritedValue?.css;
+	function handleOnChange( newValue ) {
+		onChange( {
+			...value,
+			css: newValue,
+		} );
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.editor-styles-wrapper'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			<TextareaControl
+				label={ __( 'Additional CSS' ) }
+				__nextHasNoMarginBottom
+				value={ customCSS }
+				onChange={ ( newValue ) => handleOnChange( newValue ) }
+				onBlur={ handleOnBlur }
+				className="block-editor-global-styles-advanced-panel__custom-css-input"
+				spellCheck={ false }
+			/>
+			{ cssError && (
+				<Tooltip text={ cssError }>
+					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
+						<Icon
+							icon={ info }
+							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
+						/>
+					</div>
+				</Tooltip>
+			) }
+		</VStack>
+	);
+}
diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js
@@ -181,11 +181,7 @@ export function useGlobalStyle(
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult =
-				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
-				finalPath === 'styles.css'
-					? get( userConfig, finalPath )
-					: get( mergedConfig, finalPath );
+			rawResult = get( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;

diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js
@@ -19,3 +19,4 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export { default as AdvancedPanel } from './advanced-panel';
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -41,3 +41,17 @@
 	height: 24px;
 	width: 24px;
 }
+
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
+	position: absolute;
+	bottom: $grid-unit-20;
+	right: $grid-unit * 3;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
+	fill: $alert-red;
+}
diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
@@ -1,130 +1,31 @@
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import {
-	TextareaControl,
-	Panel,
-	PanelBody,
-	__experimentalVStack as VStack,
-	Tooltip,
-	Icon,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import {
-	privateApis as blockEditorPrivateApis,
-	transformStyles,
-} from '@wordpress/block-editor';
-import { info } from '@wordpress/icons';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
-import Subtitle from './subtitle';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-function CustomCSSControl( { blockName } ) {
-	// If blockName is defined, we are customizing CSS at the block level:
-	// styles.blocks.blockName.css
-	const block = !! blockName ? blockName : null;
-
-	const [ customCSS, setCustomCSS ] = useGlobalStyle( 'css', block );
-	const [ themeCSS ] = useGlobalStyle( 'css', block, 'base' );
-	const [ cssError, setCSSError ] = useState( null );
-	const ignoreThemeCustomCSS = '/* IgnoreThemeCustomCSS */';
-
-	// If there is custom css from theme.json show it in the edit box
-	// so the user can selectively overwrite it, rather than have the user CSS
-	// completely overwrite the theme CSS by default.
-	const themeCustomCSS =
-		! customCSS && themeCSS
-			? `/* ${ __(
-					'Theme Custom CSS start'
-			  ) } */\n${ themeCSS }\n/* ${ __( 'Theme Custom CSS end' ) } */`
-			: undefined;
-
-	function handleOnChange( value ) {
-		// If there is theme custom CSS, but the user clears the input box then save the
-		// ignoreThemeCustomCSS string so that the theme custom CSS is not re-applied.
-		if ( themeCSS && value === '' ) {
-			setCustomCSS( ignoreThemeCustomCSS );
-			return;
-		}
-		setCustomCSS( value );
-		if ( cssError ) {
-			const [ transformed ] = transformStyles(
-				[ { css: value } ],
-				'.editor-styles-wrapper'
-			);
-			if ( transformed ) {
-				setCSSError( null );
-			}
-		}
-	}
+const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
+	blockEditorPrivateApis
+);
 
-	function handleOnBlur( event ) {
-		if ( ! event?.target?.value ) {
-			setCSSError( null );
-			return;
-		}
-
-		const [ transformed ] = transformStyles(
-			[ { css: event.target.value } ],
-			'.editor-styles-wrapper'
-		);
-
-		setCSSError(
-			transformed === null
-				? __( 'There is an error with your CSS structure.' )
-				: null
-		);
-	}
-
-	const originalThemeCustomCSS =
-		themeCSS && customCSS && themeCustomCSS !== customCSS
-			? themeCSS
-			: undefined;
+function CustomCSSControl( { blockName } ) {
+	const [ style ] = useGlobalStyle( '', blockName, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', blockName, 'all', {
+		shouldDecodeEncode: false,
+	} );
 
 	return (
-		<>
-			{ originalThemeCustomCSS && (
-				<Panel>
-					<PanelBody
-						title={ __( 'Original Theme Custom CSS' ) }
-						initialOpen={ false }
-					>
-						<pre className="edit-site-global-styles__custom-css-theme-css">
-							{ originalThemeCustomCSS }
-						</pre>
-					</PanelBody>
-				</Panel>
-			) }
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Additional CSS' ) }</Subtitle>
-				<TextareaControl
-					__nextHasNoMarginBottom
-					value={
-						customCSS?.replace( ignoreThemeCustomCSS, '' ) ||
-						themeCustomCSS
-					}
-					onChange={ ( value ) => handleOnChange( value ) }
-					onBlur={ handleOnBlur }
-					className="edit-site-global-styles__custom-css-input"
-					spellCheck={ false }
-				/>
-				{ cssError && (
-					<Tooltip text={ cssError }>
-						<div className="edit-site-global-styles__custom-css-validation-wrapper">
-							<Icon
-								icon={ info }
-								className="edit-site-global-styles__custom-css-validation-icon"
-							/>
-						</div>
-					</Tooltip>
-				) }
-			</VStack>
-		</>
+		<StylesAdvancedPanel
+			value={ style }
+			onChange={ setStyle }
+			inheritedValue={ inheritedStyle }
+		/>
 	);
 }
 

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -131,7 +131,7 @@
 	.components-v-stack {
 		flex: 1 1 auto;
 
-		.edit-site-global-styles__custom-css-input {
+		.block-editor-global-styles-advanced-panel__custom-css-input {
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
@@ -149,28 +149,6 @@
 	}
 }
 
-.edit-site-global-styles__custom-css-input textarea {
-	font-family: $editor_html_font;
-}
-
-.edit-site-global-styles__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.edit-site-global-styles__custom-css-validation-icon {
-	fill: $alert-red;
-}
-
-.edit-site-global-styles__custom-css-theme-css {
-	width: 100%;
-	line-break: anywhere;
-	white-space: break-spaces;
-	max-height: 200px;
-	overflow-y: scroll;
-}
-
 .edit-site-global-styles-screen-css-help-link {
 	display: block;
 	margin-top: $grid-unit-10;