Fix: sunset block defaults

e2e/tests/global-settings.spec.ts

@@ -116,71 +116,4 @@ test.describe( 'Global Settings', () => {
 		await deleteRequest
 		await expect( resetButton ).not.toBeVisible()
 	} )
-
-	test( 'When a default block is created, adding the block should have the default block\'s attributes', async ( {
-		page,
-		editor,
-	} ) => {
-		await page.getByLabel( 'Stackable Design System' ).click()
-		await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
-
-		// 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
-
-		// Set a color for the default Text Block
-		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
-		await defaultBlockPage.getByLabel( 'Hex color' ).fill( 'ff0000' )
-		await defaultBlockPage.locator( '.stk-color-palette-control .stk-control-content > .components-dropdown > .components-button' ).first().click()
-
-		// 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, disabled: false,
-		} ).isVisible() ) {
-			await defaultBlockPage.getByRole( 'button', { name: 'Save', exact: true } ).click()
-		} else if ( await defaultBlockPage.getByRole( 'button', { name: 'Update', disabled: false } ).isVisible() ) {
-			await defaultBlockPage.getByRole( 'button', { name: 'Update' } ).click()
-		}
-
-		// Make sure default block has been updated
-		await ( await updateRequest ).finished()
-
-		// Insert a Stackable Text Block, and check if the color is the same as the one set in the default block
-		const timeouts = [ 1_000, 5_000, 30_000 ]
-		for ( const timeout of timeouts ) {
-			try {
-				await page.reload()
-				await editor.insertBlock( {
-					name: 'stackable/text',
-					attributes: {
-						text: 'test',
-					},
-				} )
-
-				await expect( editor.canvas.locator( '[data-type="stackable/text"] > .stk-block-text > p[role="textbox"]' ) ).toHaveCSS( 'color', 'rgb(255, 0, 0)' )
-				break
-			} catch ( e ) {
-				// Ignore the error and try again because the default block might not be updated yet
-				await page.waitForTimeout( timeout )
-			}
-		}
-
-		// Reset Default Block
-		await page.getByLabel( 'Stackable Design System' ).click()
-		await page.getByRole( 'button', { name: 'Block Defaults' } ).click()
-		await page.locator( '.components-panel__body', { hasText: 'Block Defaults' } ).locator( '.stk-block-default-control', { hasText: /^Text$/ } ).first().getByLabel( 'Reset' ).click()
-	} )
 } )

plugin.php

@@ -239,7 +239,6 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/deprecated/index.php' );  // We need to add this so the filter for deprecation gets applied.
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
-require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );
 if ( ! is_admin() ) {
@@ -292,6 +291,7 @@ function is_frontend() {
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/navigation-panel-pre-enabled.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/font-awesome-version.php' );
 require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/global-color-schemes.php' );
+require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/block-defaults.php' );
 
 /**
  * V2 Deprecated

src/deprecated/block-defaults.php

@@ -0,0 +1,64 @@
+<?php
+/**
+ * Block Defaults are deprecated since v3.18.0
+ *
+ */
+
+// Exit if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! function_exists( 'stackable_deprecated_block_defaults_option' ) ) {
+
+	function stackable_deprecated_block_defaults_option() {
+		// If true, Block Defaults will be enabled in the editor
+		register_setting(
+			'stackable_editor_settings',
+			'stackable_enable_block_defaults',
+			array(
+				'type' => 'boolean',
+				'description' => __( 'Use Block Defaults in the editor', STACKABLE_I18N ),
+				'sanitize_callback' => 'sanitize_text_field',
+				'show_in_rest' => true,
+				'default' => false,
+			)
+		);
+	}
+
+	function stackable_add_deprecated_block_defaults_setting( $settings ) {
+		$settings['stackable_enable_block_defaults'] = boolval( get_option( 'stackable_enable_block_defaults', false ) );
+		return $settings;
+	}
+
+	// Make setting available in the editor.
+	add_filter( 'stackable_js_settings', 'stackable_add_deprecated_block_defaults_setting' );
+	add_action( 'init', 'stackable_deprecated_block_defaults_option' );
+}
+
+if ( ! function_exists( 'stackable_deprecated_block_defaults' ) ) {
+
+	/**
+	 * Upon upgrading to v3.18.0 or later, Block Defaults will be enabled only if existing Block Defaults are present;
+	 * otherwise, they will be disabled.
+	 * For new installations, Block Defaults will be disabled by default.
+	 */
+	function stackable_deprecated_block_defaults( $old_version, $new_version ) {
+		if ( ! empty( $old_version ) && version_compare( $old_version, "3.18.0", "<" ) ) {
+
+			// set option to true if there are saved block defaults
+			if ( ! empty( get_option( 'stackable_block_styles', [] ) ) ) {
+				update_option( 'stackable_enable_block_defaults', true, false );
+			}
+		}
+	}
+
+	function stackable_require_block_defaults_script() {
+		if ( get_option( 'stackable_enable_block_defaults', false ) ) {
+			require_once( plugin_dir_path( __FILE__ ) . 'block-defaults/custom-block-styles.php' );
+		}
+	}
+
+	add_action( 'stackable_early_version_upgraded', 'stackable_deprecated_block_defaults', 10, 2 );
+	add_action( 'init', 'stackable_require_block_defaults_script' );
+}

src/plugins/global-settings/block-defaults/index.js → src/deprecated/block-defaults/global-settings/index.js

@@ -50,8 +50,11 @@ addFilter( 'stackable.global-settings.inspector', 'stackable/default-blocks', ou
 				onToggle={ isOpen => setIsOpen( isOpen ) }
 			>
 				<p className="components-base-control__help">
+					<span style={ { marginBottom: '8px', display: 'block' } }>
+						{ __( 'Please use the Design System options instead of this. Block Defaults will be sunset and removed from a future version.', i18n ) }
+					</span>
 					{ __( 'Manage how Stackable blocks look when they\'re inserted.', i18n ) }
-					&nbsp;
+						&nbsp;
 					<a href="https://docs.wpstackable.com/article/480-how-to-use-block-defaults?utm_source=wp-global-settings&utm_campaign=learnmore&utm_medium=gutenberg" target="_docs">
 						{ __( 'Learn more about Block Defaults', i18n ) }
 					</a>

src/deprecated/block-defaults/index.js

@@ -0,0 +1,7 @@
+import { settings as stackableSettings } from 'stackable'
+
+// Conditionally import scripts
+if ( stackableSettings.stackable_enable_block_defaults ) {
+	import( './save-block' )
+	import( './global-settings' )
+}

src/plugins/save-block/index.js → src/deprecated/block-defaults/save-block/index.js

@@ -5,7 +5,7 @@ import './store'
 import './variation-picker'
 import './custom-block-styles-editor'
 import SaveMenu from './save-menu'
-import { useSavedDefaultBlockStyle } from '~stackable/hooks'
+import { useSavedDefaultBlockStyle } from './use-saved-default-block-style'
 import { settings } from 'stackable'
 
 /**

src/hooks/use-saved-default-block-style.js → src/deprecated/block-defaults/save-block/use-saved-default-block-style.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getDefinedBlockStyles } from './use-block-style'
+import { getDefinedBlockStyles } from '~stackable/hooks'
 import { CONTENT_ATTRIBUTES, recursivelyAddUniqueIdToInnerBlocks } from '~stackable/util'
 
 /**

src/hooks/index.js

@@ -5,7 +5,6 @@ export * from './use-block-attributes'
 export * from './use-block-attributes-context'
 export * from './use-block-style'
 export * from './use-context-selector'
-export * from './use-saved-default-block-style'
 export * from './use-font-loader'
 export * from './use-attribute-edit-handlers'
 export * from './use-attribute-name'

src/plugins/global-settings/editor-loader.js

@@ -11,7 +11,6 @@ import { GlobalTypographyStyles } from './typography'
 import { GlobalSpacingAndBordersStyles } from './spacing-and-borders'
 import { GlobalButtonsAndIconsStyles } from './buttons-and-icons'
 import { GlobalPresetControlsStyles } from './preset-controls'
-import './block-defaults'
 
 /**
  * External dependencies

src/plugins/global-settings/index.js

@@ -5,7 +5,6 @@ import './editor-loader'
 import './color-schemes'
 import './buttons-and-icons'
 import './spacing-and-borders'
-import './block-defaults'
 import './icon-library'
 import './preset-controls'
 

src/plugins/index.js

@@ -6,7 +6,6 @@ import './theme-block-size'
 import './design-library-button'
 import './layout-picker-reset'
 // import './v2-migration-popup' // Probably 1.5yrs of checking for backward compatibility is enough.
-import './save-block'
 import './editor-device-preview-class'
 import './theme-block-style-inheritance'
 import { BlockLinking } from './block-linking'
@@ -27,6 +26,7 @@ import { registerPlugin } from '@wordpress/plugins'
 import { ConvertToContainerButton, GetBlockAttributesButton } from '~stackable/components'
 import { devMode } from 'stackable'
 import { fetchSettings } from '~stackable/util'
+import '~stackable/deprecated/block-defaults'
 
 registerPlugin( 'stackable-convert-to-container-button', { render: ConvertToContainerButton } )
 registerPlugin( 'stackable-block-hover-state', { render: BlockHoverState } )

src/welcome/admin.js

@@ -219,6 +219,7 @@ const SEARCH_TREE = [
 					__( 'Generate Global Colors for native blocks', i18n ),
 					__( 'Inherit Block Styles from theme.json', i18n ),
 					__( 'Use v3.16.0 Color Scheme Inheritance', i18n ),
+					__( 'Block Defaults (Sunsetted)', i18n ),
 				],
 			},
 			{
@@ -775,15 +776,15 @@ const EditorSettings = props => {
 								} }
 								help={ __( 'Adds a toolbar button for resetting the layout of a stackble block back to the original', i18n ) }
 							/>
-							<AdminToggleSetting
+							{ settings.stackable_enable_block_defaults && <AdminToggleSetting
 								label={ __( 'Save as Default Block', i18n ) }
 								searchedSettings={ toolbar.children }
 								value={ settings.stackable_enable_save_as_default_block }
 								onChange={ value => {
 									handleSettingsChange( { stackable_enable_save_as_default_block: value } ) // eslint-disable-line
 								} }
 								help={ __( 'Adds a toolbar button for saving a block as the default block', i18n ) }
-							/>
+							/> }
 						</div>
 					}
 					{ inspector.children.length > 0 &&
@@ -1514,6 +1515,17 @@ const AdditionalOptions = props => {
 									 } )
 								} }
 							/>
+							<CheckboxControl
+								label={ __( 'Block Defaults (Deprecated)', i18n ) }
+								className={ searchClassname( __( 'Block Defaults (Sunsetted)', i18n ), miscellaneous ) }
+								help={ __( `Default state of blocks were previously allowed to be saved. This functionality has since been sunsetted in lieu of the Stackable Design System. Use at your own risk as this feature is slated to be removed in a future version.`, i18n ) }
+								checked={ settings.stackable_enable_block_defaults }
+								onChange={ checked => {
+									handleSettingsChange( {
+										stackable_enable_block_defaults: checked, // eslint-disable-line camelcase
+									 } )
+								} }
+							/>
 						</div>
 					}
 					{ migrationSettings.children.length > 0 &&