fix issues from user testing

kaeizen · kaeizen · commit 86c02b28ec03 · 2025-06-02T20:18:05.000+08:00
- modify disabled blocks tooltip
- fix block style inheritance not being applied
- change 'add color scheme' to 'manage color scheme'
- add style option tooltips
diff --git a/src/components/color-schemes-help/index.js b/src/components/color-schemes-help/index.js
@@ -6,7 +6,7 @@ import { dispatch } from '@wordpress/data'
 
 export const ColorSchemesHelp = props => {
 	const {
-		customText, callback, renderComponent,
+		customText, callback, className,
 	} = props
 	const onClick = () => {
 		if ( callback ) {
@@ -37,15 +37,11 @@ export const ColorSchemesHelp = props => {
 		}, 10 )
 	}
 
-	if ( renderComponent ) {
-		return renderComponent( onClick )
-	}
-
 	return <>
-		{ customText ? customText
+		{ customText || customText === '' ? customText
 			: <span>{ __( 'Change the color scheme.', i18n ) }</span> }
-		&nbsp;
-		<Link onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
+		{ customText !== '' && <>&nbsp;</> }
+		<Link className={ className } onClick={ onClick }> { __( 'Manage your color schemes.', i18n ) } </Link>
 	</>
 }
 
diff --git a/src/components/design-library-list/design-library-list-item.js b/src/components/design-library-list/design-library-list-item.js
@@ -279,7 +279,7 @@ const DesignLibraryListItem = forwardRef( ( props, ref ) => {
 				<div>
 					<h4> { label } </h4>
 					{ blocksForSubstitutionRef.current !== false && blocksForSubstitutionRef.current.size !== 0 &&
-						<Tooltip text={ __( 'This design contains disabled blocks.', i18n ) }>
+						<Tooltip text={ __( 'This design contains disabled blocks. You can still insert this design with blocks substituted with other enabled blocks.', i18n ) }>
 							<Dashicon icon="warning" size={ 16 } />
 						</Tooltip>
 					}
@@ -317,10 +317,12 @@ const DesignPreview = ( {
 		setTimeout( adjustScale, 50 )
 	}, [ blocks, enableBackground ] )
 
+	const shadowBodyClasses = classnames( applyFilters( 'stackable.global-styles.classnames', [ 'entry-content' ] ) )
+
 	return (
 		<body
 			dangerouslySetInnerHTML={ { __html: blocks } }
-			className="entry-content stk-has-color-schemes stk-has-block-style-inheritance stk-has-design-system-spacing-and-borders stk-has-design-system-buttons-and-icons"
+			className={ shadowBodyClasses }
 			style={ { pointerEvents: 'none' } }	// prevent blocks from being clicked
 		/>
 	)
diff --git a/src/components/modal-design-library/editor.scss b/src/components/modal-design-library/editor.scss
@@ -433,4 +433,9 @@ div.ugb-modal-design-library__enable-background {
 		list-style: circle;
     	margin-inline-start: 20px;
 	}
+}
+
+.ugb-design-library__manage-scheme {
+	display: block;
+	text-align: center;
 }
diff --git a/src/components/modal-design-library/modal.js b/src/components/modal-design-library/modal.js
@@ -32,6 +32,7 @@ import { sprintf, __ } from '@wordpress/i18n'
 import { useBlockColorSchemes } from '~stackable/hooks'
 import ColorSchemePreview from '../color-scheme-preview'
 import { ColorSchemesHelp } from '../color-schemes-help'
+import Tooltip from '../tooltip'
 
 const PLAN_OPTIONS = [ { key: '', label: __( 'All', i18n ) }, { key: 'free', label: __( 'Free', i18n ) }, { key: 'premium', label: __( 'Premium', i18n ) } ]
 const popoverProps = {
@@ -197,13 +198,22 @@ export const ModalDesignLibrary = props => {
 						<h4 style={ { margin: '0 0 1em ' } }>{ __( 'Style Options', i18n ) }</h4>
 						<ToggleControl
 							className="ugb-modal-design-library__enable-background"
-							label="Section Background"
+							label={ <Tooltip placement="top" text={ <a href="https://docs.wpstackable.com/article/343-using-the-design-library#Section-Background-KYOys" target="_docs">
+								{ __( 'Learn more about section background here.', i18n ) }
+							</a> }>
+								<span className="stk-control__label--has-tooltip"> { __( 'Section Background', i18n ) }</span>
+							</Tooltip> }
 							checked={ enableBackground }
 							onChange={ value => {
 								setEnableBackground( value )
 							} }
 						/>
-						<BaseControl label={ `${ __( 'Background Scheme', i18n ) }` }
+						<BaseControl
+							label={ <Tooltip placement="top" text={ <a href="https://docs.wpstackable.com/article/343-using-the-design-library#Background-Scheme-Wn_CV" target="_docs">
+								{ __( 'Learn more about background schemes here.', i18n ) }
+							</a> }>
+								<span className="stk-control__label--has-tooltip">{ __( 'Background Scheme', i18n ) }</span>
+							</Tooltip> }
 							className="ugb-modal-design-library__color-scheme-label"
 						>
 							<Dropdown
@@ -226,7 +236,6 @@ export const ModalDesignLibrary = props => {
 											? <ColorSchemePreview isCollapsed={ true } colors={ colorSchemesCollection[ selectedBackgroundScheme || backgroundModeColorScheme ].desktopColors } />
 											: <ColorSchemeTextItem label={ __( 'Default', i18n ) } />
 										}
-
 									</Button>
 								) }
 								renderContent={ ( { onClose } ) => (
@@ -264,27 +273,22 @@ export const ModalDesignLibrary = props => {
 												</Button>
 											} ) }
 											{ Object.keys( colorSchemesCollection ).length
-												? <ColorSchemesHelp renderComponent={ onClick => (
-													<Button
-														className="ugb-modal-design-library__stk-color-scheme"
-														onClick={ () => {
-															props.onClose()
-															onClick()
-														} }
-													>
-														<span className="stk-color-scheme-name stk-color-scheme__none"> { __( 'Add Color Scheme', i18n ) } </span>
-													</Button>
-												) } />
+												? <ColorSchemesHelp customText="" callback={ props.onClose } className="ugb-design-library__manage-scheme" />
 												: <ColorSchemesHelp customText={ __( 'You do not have any color schemes.', i18n ) } callback={ props.onClose } />
 											}
 										</div>
 									</div>
 								) }
 							/>
 						</BaseControl>
-						<BaseControl label={ `${ __( 'Container Scheme', i18n ) }` }
-
-							className="ugb-modal-design-library__color-scheme-label">
+						<BaseControl
+							label={ <Tooltip placement="top" text={ <a href="https://docs.wpstackable.com/article/343-using-the-design-library#Container-Scheme-HyK91" target="_docs">
+								{ __( 'Learn more about container schemes here.', i18n ) }
+							</a> }>
+								<span className="stk-control__label--has-tooltip">{ __( 'Container Scheme', i18n ) }</span>
+							</Tooltip> }
+							className="ugb-modal-design-library__color-scheme-label"
+						>
 							<Dropdown
 								popoverProps={ popoverProps }
 								focusOnMount={ false }
@@ -334,17 +338,7 @@ export const ModalDesignLibrary = props => {
 												</Button>
 											} ) }
 											{ Object.keys( colorSchemesCollection ).length
-												? <ColorSchemesHelp renderComponent={ onClick => (
-													<Button
-														className="ugb-modal-design-library__stk-color-scheme"
-														onClick={ () => {
-															props.onClose()
-															onClick()
-														} }
-													>
-														<span className="stk-color-scheme-name stk-color-scheme__none"> { __( 'Add Color Scheme', i18n ) } </span>
-													</Button>
-												) } />
+												? <ColorSchemesHelp customText="" callback={ props.onClose } className="ugb-design-library__manage-scheme" />
 												: <ColorSchemesHelp customText={ __( 'You do not have any color schemes.', i18n ) } callback={ props.onClose } />
 											}
 										</div>
diff --git a/src/plugins/editor-device-preview-class/index.js b/src/plugins/editor-device-preview-class/index.js
@@ -15,6 +15,7 @@ import { useDeviceType, useBlockHoverState } from '~stackable/hooks'
 import { useEffect } from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
 import { registerPlugin } from '@wordpress/plugins'
+import { addFilter } from '@wordpress/hooks'
 
 const EditorPreviewClass = () => {
 	const deviceType = useDeviceType()
@@ -45,6 +46,10 @@ const EditorPreviewClass = () => {
 			if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
 				const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
 				editorEl.classList.add( theme )
+				addFilter( 'stackable.global-styles.classnames', 'stackable/theme-classname', styleIds => {
+					styleIds.push( theme )
+					return styleIds
+				} )
 			}
 
 			// At first load of the editor, the `stk-preview-device-*` and `stk--is-*-theme` are removed, so we have to re-add it.
@@ -60,6 +65,10 @@ const EditorPreviewClass = () => {
 				if ( document.querySelector( 'body' ).className.match( themeRegex ) && ! editorEl.className.match( themeRegex ) ) {
 					const theme = document.querySelector( 'body' ).className.match( themeRegex )[ 0 ]
 					editorEl.classList.add( theme )
+					addFilter( 'stackable.global-styles.classnames', 'stackable/theme-classname', styleIds => {
+						styleIds.push( theme )
+						return styleIds
+					} )
 				}
 			} )
 
diff --git a/src/plugins/global-settings/color-schemes/editor-loader.js b/src/plugins/global-settings/color-schemes/editor-loader.js
@@ -17,6 +17,7 @@ import { useBlockColorSchemes, useBlockHoverState } from '~stackable/hooks'
  */
 import { useEffect, useState } from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
+import { addFilter } from '@wordpress/hooks'
 const renderGlobalStyles = (
 	setStyles,
 	colorSchemesArray,
@@ -148,6 +149,10 @@ export const GlobalColorSchemeStyles = () => {
 			const mo = onClassChange( editorEl, () => {
 				if ( styles !== '' && editorEl?.classList.contains( 'stk-has-color-schemes' ) === false ) {
 					editorEl?.classList.add( 'stk-has-color-schemes' )
+					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
+						classnames.push( 'stk-has-color-schemes' )
+						return classnames
+					} )
 				}
 				if ( styles === '' ) {
 					editorEl?.classList.remove( 'stk-has-color-schemes' )
diff --git a/src/plugins/global-settings/utils/use-block-layout-editor-loader.js b/src/plugins/global-settings/utils/use-block-layout-editor-loader.js
@@ -8,6 +8,7 @@ import { getDefault, onClassChange } from './block-layout-utils'
  */
 import { useSelect } from '@wordpress/data'
 import { useEffect, useState } from '@wordpress/element'
+import { addFilter } from '@wordpress/hooks'
 
 /**
  * External dependencies
@@ -167,6 +168,10 @@ export const useBlockLayoutEditorLoader = ( storeName, classSuffix ) => {
 			const className = `stk-has-design-system-${ classSuffix }`
 			if ( styles !== '' && editorEl.classList.contains( className ) === false ) {
 				editorEl.classList.add( className )
+				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.${ classSuffix }`, classnames => {
+					classnames.push( className )
+					return classnames
+				} )
 			}
 			if ( styles === '' ) {
 				editorEl.classList.remove( className )
diff --git a/src/plugins/theme-block-style-inheritance/index.js b/src/plugins/theme-block-style-inheritance/index.js
@@ -9,6 +9,7 @@ import { fetchSettings } from '~stackable/util'
 import { useEffect, useState } from '@wordpress/element'
 import { useSelect } from '@wordpress/data'
 import { registerPlugin } from '@wordpress/plugins'
+import { addFilter } from '@wordpress/hooks'
 
 // Adds a body class for block style inheritance
 const ThemeBlockStyleInheritanceClass = () => {
@@ -19,7 +20,15 @@ const ThemeBlockStyleInheritanceClass = () => {
 
 	useEffect( () => {
 		fetchSettings().then( response => {
-			setDisableBlockStyleInheritance( response.stackable_disable_block_style_inheritance )
+			const isDisabled = response.stackable_disable_block_style_inheritance
+			setDisableBlockStyleInheritance( isDisabled )
+
+			if ( ! isDisabled ) {
+				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.block-style-inheritance`, classnames => {
+					classnames.push( 'stk-has-block-style-inheritance' )
+					return classnames
+				} )
+			}
 		} )
 	}, [] )
 

Original file line number	Diff line number	Diff line change
`@@ -433,4 +433,9 @@ div.ugb-modal-design-library__enable-background {`
`433`	`433`	`list-style: circle;`
`434`	`434`	`margin-inline-start: 20px;`
`435`	`435`	`}`
	`436`	`+}`
	`437`	`+`
	`438`	`+.ugb-design-library__manage-scheme {`
	`439`	`+ display: block;`
	`440`	`+ text-align: center;`
`436`	`441`	`}`