Merge branch 'develop' into feat/global-color-schemes

kaeizen · kaeizen · commit a0df781a4fbf · 2025-03-17T22:48:50.000+08:00
diff --git a/.config/webpack.config.dev.js b/.config/webpack.config.dev.js
@@ -26,11 +26,6 @@ module.exports = [
 		},
 		// Admin settings script.
 		'admin_welcome': path.resolve( __dirname, '../src/welcome/admin.js' ),
-		// V2 deprecated scripts, we build this here since that's how we did it before.
-		'admin_welcome_v2': {
-			import: path.resolve( __dirname, '../src/deprecated/v2/welcome/admin.js' ),
-			filename: 'deprecated/[name].js'
-		},
 		'frontend_blocks_deprecated_v2': {
 			import: path.resolve( __dirname, '../src/deprecated/v2/block-frontend.js' ),
 			filename: 'deprecated/[name].js'
diff --git a/.config/webpack.config.prod.js b/.config/webpack.config.prod.js
@@ -26,11 +26,6 @@ module.exports = [
 		},
 		// Admin settings script.
 		'admin_welcome': path.resolve( __dirname, '../src/welcome/admin.js' ),
-		// V2 deprecated script, we build this here since that's how we did it before.
-		'admin_welcome_v2': {
-			import: path.resolve( __dirname, '../src/deprecated/v2/welcome/admin.js' ),
-			filename: 'deprecated/[name].js'
-		},
 		'frontend_blocks_deprecated_v2': {
 			import: path.resolve( __dirname, '../src/deprecated/v2/block-frontend.js' ),
 			filename: 'deprecated/[name].js'
diff --git a/e2e/test-utils/stackable.ts b/e2e/test-utils/stackable.ts
@@ -8,12 +8,9 @@ export class StackableFixture {
 	  this.page = page
 	}
 
-	// When loading the Stackable settings in the Admin, there are 4 requests to wp/v2/settings
-	// This function waits for all 4 requests to finish to ensure Stackable settings are loaded and reflected on the page
+	// Wait for Stackable Settings to be fetched
 	async waitForSettings(): Promise<void> {
 		return new Promise( ( resolve, reject ) => {
-			let responseCount = 0
-
 			const cleanup = () => {
 				this.page.off( 'requestfinished', finishedCallback )
 				this.page.off( 'requestfinished', failedCallback )
@@ -29,14 +26,10 @@ export class StackableFixture {
 						} )
 
 						if ( settings ) {
-							responseCount++
-						} else {
-							throw Error( 'Failed to get Stackable settings' )
-						}
-
-						if ( responseCount === 4 ) {
 							cleanup()
 							resolve()
+						} else {
+							throw Error( 'Failed to get Stackable settings' )
 						}
 					} catch ( error ) {
 						cleanup()
diff --git a/e2e/tests/admin.spec.ts b/e2e/tests/admin.spec.ts
@@ -40,6 +40,10 @@ test( 'Stackable settings should be saved', async ( {
 	// Make sure all Stackable settings are loaded
 	await settings
 
+	// There should be no PHP errors
+	const pageError = await admin.getPageError()
+	expect( pageError ).toBeNull()
+
 	// Retrieves the value of the first option, toggles it and check if the value changed
 	const option = page.locator( '.ugb-admin-toggle-setting' ).first().getByRole( 'switch' )
 	const val = await option.getAttribute( 'aria-checked' )
diff --git a/e2e/tests/block-editor.spec.ts b/e2e/tests/block-editor.spec.ts
@@ -92,7 +92,7 @@ test.describe( 'Block Editor', () => {
 	} )
 
 	test( 'The Stackable block added in the editor should be visible in the frontend', async ( {
-		page, editor,
+		page, editor, admin,
 	} ) => {
 		await editor.insertBlock( {
 			name: 'stackable/text',
@@ -124,5 +124,9 @@ test.describe( 'Block Editor', () => {
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toBeVisible()
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"]` ) ).toContainText( 'test' )
 		await expect( preview.locator( `[data-block-id="${ uniqueId }"] p` ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
+
+		// There should be no PHP errors on frontend
+		const pageError = await admin.getPageError()
+		expect( pageError ).toBeNull()
 	} )
 } )
diff --git a/e2e/tests/global-settings.spec.ts b/e2e/tests/global-settings.spec.ts
@@ -120,6 +120,14 @@ test.describe( 'Global Settings', () => {
 
 		// Open the Default Text Block Editor
 		const defaultBlockPagePromise = page.waitForEvent( 'popup' )
+
+		// Reset the block defaults first if it has been edited
+		const resetButton = page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Reset' )
+
+		if ( await resetButton.isVisible() ) {
+			await resetButton.click()
+		}
+
 		const textBlock = page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Edit' )
 		await textBlock.click()
 		const defaultBlockPage = await defaultBlockPagePromise
@@ -129,12 +137,15 @@ test.describe( 'Global Settings', () => {
 		await defaultBlockPage.getByLabel( 'Hex color' ).fill( 'ff0000' )
 		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
 
-		const updateRequest = defaultBlockPage.waitForResponse( response => response.url().includes( 'update_block_style' ) && response.request().method() === 'POST' )
+		// The default timeout is 30s, extend it to 90s
+		const updateRequest = defaultBlockPage.waitForResponse( response => response.url().includes( 'update_block_style' ) && response.request().method() === 'POST', { timeout: 90_000 } )
 
 		// In older WP versions, the button text is 'Update' instead of 'Save'
-		if ( await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).isVisible() ) {
+		if ( await defaultBlockPage.getByRole( 'button', {
+			name: 'Save', exact: true, disabled: false,
+		} ).isVisible() ) {
 			await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).click()
-		} else {
+		} else if ( await defaultBlockPage.getByRole( 'button', { name: 'Update', disabled: false } ).isVisible() ) {
 			await defaultBlockPage.getByRole( 'button', { name: 'Update' } ).click()
 		}
 
diff --git a/plugin.php b/plugin.php
@@ -294,6 +294,5 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/blocks.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/disabled-blocks.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/design-library/init.php' );
-require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/admin.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/optimization-settings.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/global-settings.php' );
diff --git a/src/block-components/typography/edit.js b/src/block-components/typography/edit.js
@@ -165,6 +165,7 @@ export const Controls = props => {
 					label={ __( 'Font Family', i18n ) }
 					onChange={ updateAttributeHandler( 'fontFamily' ) }
 					value={ getAttribute( 'fontFamily' ) }
+					placeholder={ __( 'Theme Default', i18n ) }
 					helpTooltip={ {
 						video: 'typography-family',
 						description: __( 'Sets the font set to be used for the element', i18n ),
diff --git a/src/block/icon-label/deprecated.js b/src/block/icon-label/deprecated.js
@@ -18,8 +18,8 @@ const deprecated = [
 
 			const iconBlockAttributes = innerBlocks[ 0 ].attributes
 			const hasIconSize = iconBlockAttributes.iconSize || iconBlockAttributes.iconSizeTablet || iconBlockAttributes.iconSizeMobile ? true : false
-			const hasIconGap = attributes.iconGap || attributes.iconGapTablet || attributes.iconGapMobile ? true : false
-			const hasIconGap2 = attributes.iconGap2 || attributes.iconGap2Tablet || attributes.iconGap2Mobile ? true : false
+			const hasIconGap = attributes.iconGap || attributes.iconGap === 0 || attributes.iconGapTablet || attributes.iconGapMobile ? true : false
+			const hasIconGap2 = attributes.iconGap2 || attributes.iconGap2 === 0 || attributes.iconGap2Tablet || attributes.iconGap2Mobile ? true : false
 			return hasIconGap || ( hasIconSize && ! hasIconGap2 )
 		},
 		migrate: ( attributes, innerBlocks ) => {
diff --git a/src/components/advanced-autosuggest-control/index.js b/src/components/advanced-autosuggest-control/index.js
@@ -223,9 +223,10 @@ class AdvancedAutosuggestControl extends Component {
 				label={ this.props.label }
 				screens={ this.props.screens }
 				value={ this.props.value }
+				defaultValue={ this.props?.defaultValue ?? '' }
 				onChange={ value => { // Will be used to reset.
-					if ( value === '' ) {
-						this.onChange( null, { newValue: '' } )
+					if ( value === '' || this.props?.defaultValue ) {
+						this.onChange( null, { newValue: value } )
 					}
 				} }
 				allowReset={ this.props.allowReset }
diff --git a/src/components/font-family-control/index.js b/src/components/font-family-control/index.js
@@ -7,7 +7,11 @@ import { i18n } from 'stackable'
  * Internal dependencies
  */
 import fonts from './google-fonts.json'
-import { loadGoogleFont } from '~stackable/util'
+import {
+	loadGoogleFont,
+	MODERN_FONT_STACKS,
+	SYSTEM_FONT_STACKS,
+} from '~stackable/util'
 
 /**
  * WordPress dependencies
@@ -33,12 +37,18 @@ const FontFamilyControl = props => {
 			{
 				id: 'system-fonts',
 				title: __( 'System Fonts', i18n ),
-				options: [
-					{ label: __( 'Sans-Serif', i18n ), value: 'Sans-Serif' },
-					{ label: __( 'Serif', i18n ), value: 'Serif' },
-					{ label: __( 'Serif Alternative', i18n ), value: 'Serif-Alt' },
-					{ label: __( 'Monospace', i18n ), value: 'Monospace' },
-				],
+				options: Object.keys( SYSTEM_FONT_STACKS ).map( key => {
+					const font = SYSTEM_FONT_STACKS[ key ]
+					return { label: font.label, value: key }
+				} ),
+			},
+			{
+				id: 'modern-font-stacks',
+				title: __( 'Modern Font Stacks', i18n ),
+				options: Object.keys( MODERN_FONT_STACKS ).map( key => {
+					const font = MODERN_FONT_STACKS[ key ]
+					return { label: font.label, value: key }
+				} ),
 			},
 			{
 				id: 'google-fonts',
diff --git a/src/components/typography-control/index.js b/src/components/typography-control/index.js
@@ -19,6 +19,10 @@ import { Fragment, useMemo } from '@wordpress/element'
 import { i18n } from 'stackable'
 
 const TypographyControl = props => {
+	const {
+		isAllowReset = undefined, // Optional prop
+	} = props
+
 	// Compute the font size placeholder value.
 	const placeholder = useMemo( () => {
 		if ( typeof props.placeholder === 'function' ) {
@@ -29,13 +33,23 @@ const TypographyControl = props => {
 		 return props.fontSize || props.placeholder || getDefaultFontSize( props.htmlTag, true )
 	}, [ props.htmlTag, props.fontSize ] )
 
+	// Allow overriding, or use our original condition
+	const _allowReset = typeof isAllowReset !== undefined ? isAllowReset : (
+		props.fontFamily ||
+		props.fontSize || props.tabletFontSize || props.mobileFontSize ||
+		props.fontWeight ||
+		props.textTransform ||
+		props.lineHeight || props.tabletLineHeight || props.mobileLineHeight ||
+		props.letterSpacing || props.tabletLetterSpacing || props.mobileLetterSpacing
+	)
+
 	return (
 		<Fragment>
 			<ButtonIconPopoverControl
 				label={ props.label }
 				popoverLabel={ props.popoverLabel }
 				onReset={ props.onReset }
-				allowReset={ props?.isAllowReset }
+				allowReset={ _allowReset }
 				resetPopoverTitle={ props.resetPopoverTitle }
 				resetPopoverDescription={ props.resetPopoverDescription }
 				className={ props.className }
@@ -46,6 +60,8 @@ const TypographyControl = props => {
 						label={ __( 'Font Family', i18n ) }
 						onChange={ props.onChangeFontFamily }
 						value={ props.fontFamily }
+						defaultValue={ props?.defaultFontFamily }
+						placeholder={ __( 'Default', i18n ) }
 						helpTooltip={ {
 							video: 'typography-family',
 							description: __( 'Sets the font set to be used for the element', i18n ),
diff --git a/src/deprecated/v2/admin.php b/src/deprecated/v2/admin.php
diff --git a/src/deprecated/v2/optimization-settings.php b/src/deprecated/v2/optimization-settings.php
@@ -33,9 +33,6 @@ function __construct() {
 					// Load the scripts only when Stackable blocks are detected.
 					add_filter( 'render_block', array( $this, 'load_frontend_scripts_conditionally' ), 10, 2 );
 				}
-
-				// Add the optimization setting.
-				// add_action( 'stackable_settings_page_mid', array( $this, 'add_optimization_settings' ) );
 			}
 		}
 
@@ -105,25 +102,6 @@ public function load_frontend_scripts_conditionally( $block_content, $block ) {
 
 			return $block_content;
 		}
-
-		/**
-		 * Add optimization setting if v2 is supported
-		 *
-		 * @return void
-		 */
-		public function add_optimization_settings() {
-			?>
-			<article class="s-box" id="optimization-settings">
-				<h2><?php _e( '🏃‍♂️ Optimization Settings', STACKABLE_I18N ) ?> (V2)</h2>
-				<p class="s-settings-subtitle">
-					<?php printf( __( 'Here are some settings that you can tweak to optimize Stackable. %sLearn more%s.' , STACKABLE_I18N ), '<a href="https://docs.wpstackable.com/article/460-how-to-use-optimization-settings?utm_source=wp-settings-global-settings&utm_campaign=learnmore&utm_medium=wp-dashboard" target="_docs">', '</a>' ) ?>
-					<br />
-					<strong><?php _e( 'This only works for version 2 blocks.' , STACKABLE_I18N ) ?></strong>
-				</p>
-				<div class="s-optimization-settings"></div>
-			</article>
-			<?php
-		}
 	}
 
 	new Stackable_Optimization_Settings_V2();
diff --git a/src/deprecated/v2/welcome/admin.js b/src/deprecated/v2/welcome/admin.js
@@ -7,7 +7,7 @@ import {
 } from '@wordpress/element'
 import { send as ajaxSend } from '@wordpress/ajax'
 import { Spinner } from '@wordpress/components'
-import { loadPromise, models } from '@wordpress/api'
+import { models } from '@wordpress/api'
 
 /**
  * External dependencies
@@ -16,6 +16,7 @@ import {
 	i18n,
 	v2nonce as nonce,
 } from 'stackable'
+import { fetchSettings } from '~stackable/util/admin'
 import AdminToggleSetting from '~stackable/components/admin-toggle-setting'
 
 export class BlockToggler extends Component {
@@ -116,11 +117,8 @@ export const OptimizationSettings = ( { searchSettings } ) => {
 	const [ optimizeScriptLoad, setOptimizeScriptLoad ] = useState( false )
 
 	useEffect( () => {
-		loadPromise.then( () => {
-			const settings = new models.Settings()
-			settings.fetch().then( response => {
-				setOptimizeScriptLoad( !! response.stackable_optimize_script_load )
-			} )
+		fetchSettings().then( response => {
+			setOptimizeScriptLoad( !! response.stackable_optimize_script_load )
 		} )
 	}, [] )
 
diff --git a/src/plugins/global-settings/editor-loader.js b/src/plugins/global-settings/editor-loader.js
@@ -75,6 +75,7 @@ domReady( () => {
 	document?.body?.appendChild( globalColorWrapper )
 	document?.body?.appendChild( globalSpacingAndBorderWrapper )
 	document?.body?.appendChild( globalButtonsAndIconsWrapper )
+	document?.body?.appendChild( globalColorSchemesWrapper )
 	createRoot( globalTypographyWrapper ).render( <GlobalTypographyStyles /> )
 	createRoot( globalColorWrapper ).render( <GlobalColorStyles /> )
 	createRoot( globalSpacingAndBorderWrapper ).render( <GlobalSpacingAndBordersStyles /> )
diff --git a/src/plugins/global-settings/typography/editor.scss b/src/plugins/global-settings/typography/editor.scss
@@ -41,7 +41,6 @@
 }
 .ugb-global-typography-preview {
 	position: relative;
-	padding-right: 32px;
 	.block-editor-block-list__layout,
 	.block-editor-block-list__block,
 	.editor-styles-wrapper {
diff --git a/src/plugins/global-settings/typography/index.js b/src/plugins/global-settings/typography/index.js
diff --git a/src/plugins/global-settings/typography/typography-picker.js b/src/plugins/global-settings/typography/typography-picker.js
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
diff --git a/src/util/font.js b/src/util/font.js
diff --git a/src/welcome/admin.js b/src/welcome/admin.js
