From 9a696b9dc028b955887a791d6263bf6d728b19b4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 11 Apr 2023 13:58:46 +0100 Subject: [PATCH 1/3] Simplify CustomCSS UI --- .../global-styles/advanced-panel.js | 82 +++++++++++ .../src/components/global-styles/index.js | 1 + .../components/global-styles/custom-css.js | 131 +++--------------- 3 files changed, 99 insertions(+), 115 deletions(-) create mode 100644 packages/block-editor/src/components/global-styles/advanced-panel.js diff --git a/packages/block-editor/src/components/global-styles/advanced-panel.js b/packages/block-editor/src/components/global-styles/advanced-panel.js new file mode 100644 index 00000000000000..69930152d92042 --- /dev/null +++ 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 ( + + handleOnChange( newValue ) } + onBlur={ handleOnBlur } + className="edit-site-global-styles__custom-css-input" + spellCheck={ false } + /> + { cssError && ( + +
+ +
+ + ) } + + ); +} diff --git a/packages/block-editor/src/components/global-styles/index.js b/packages/block-editor/src/components/global-styles/index.js index c738b861884d50..7e41c11c507e78 100644 --- 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/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js index afc721b81d5e02..897c17633700e4 100644 --- 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 && ( - - - 
-							{ originalThemeCustomCSS }
-
- - - ) } - - { __( 'Additional CSS' ) } - handleOnChange( value ) } - onBlur={ handleOnBlur } - className="edit-site-global-styles__custom-css-input" - spellCheck={ false } - /> - { cssError && ( - -
- -
- - ) } - - + ); } From e8205ba6dda3789c229450448fa8e934ea14cceb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 12 Apr 2023 12:15:04 +0100 Subject: [PATCH 2/3] Remove style.css special case --- packages/block-editor/src/components/global-styles/hooks.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index 17e4cec9369f45..d5ad1375031698 100644 --- 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; From 1d08f899e4714e6b44255e04a871fb6873eec9dc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 1 May 2023 06:10:56 +0100 Subject: [PATCH 3/3] Fix classnames --- .../global-styles/advanced-panel.js | 6 ++--- .../src/components/global-styles/style.scss | 14 +++++++++++ .../src/components/global-styles/style.scss | 24 +------------------ 3 files changed, 18 insertions(+), 26 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 index 69930152d92042..4460de03513180 100644 --- a/packages/block-editor/src/components/global-styles/advanced-panel.js +++ b/packages/block-editor/src/components/global-styles/advanced-panel.js @@ -64,15 +64,15 @@ export default function AdvancedPanel( { value={ customCSS } onChange={ ( newValue ) => handleOnChange( newValue ) } onBlur={ handleOnBlur } - className="edit-site-global-styles__custom-css-input" + className="block-editor-global-styles-advanced-panel__custom-css-input" spellCheck={ false } /> { cssError && ( -
+
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss index 7e0cb4d8f68ff6..31d22afec37764 100644 --- 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/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 1f6e76a311c8c1..87f0cfdac44d19 100644 --- 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;