feat: add use size preset by default option

Author: Arukuen

src/components/advanced-range-control/index.js

@@ -6,6 +6,10 @@ import { useControlHandlers } from '../base-control2/hooks'
 import AdvancedControl, { extractControlProps } from '../base-control2'
 import DynamicContentControl, { useDynamicContentControlProps } from '../dynamic-content-control'
 import { ResetButton } from '../base-control2/reset-button'
+/**
+ * External dependencies
+ */
+import { isEqual } from 'lodash'
 import {
 	useAttributeName,
 	useBlockAttributesContext,
@@ -14,11 +18,7 @@ import {
 	useDeviceType,
 } from '~stackable/hooks'
 import { extractNumbersAndUnits, getCSSVarName } from '~stackable/util'
-
-/**
- * External dependencies
- */
-import { isEqual } from 'lodash'
+import { settings as stackableSettings } from 'stackable'
 
 /**
  * WordPress dependencies
@@ -57,6 +57,8 @@ const AdvancedRangeControl = props => {
 		? ( props.unit || props.units?.[ 0 ] || 'px' )
 		: ( unitAttribute || '' )
 
+	const isMarkModeDefault = !! ( stackableSettings?.stackable_use_size_presets_by_default ?? true )
+
 	// Change the min, max & step values depending on the unit used.
 	if ( hasUnits ) {
 		const i = props.units.indexOf( unit ) < 0 ? 0 : props.units.indexOf( unit )
@@ -109,7 +111,8 @@ const AdvancedRangeControl = props => {
 
 	// Is value at first render the same as a step value? If so, do mark mode
 	// at the start, or show custom
-	let isMarkValue = !! props.marks
+	// If no initial value, use the given default from the settings
+	let isMarkValue = !! props.marks && isMarkModeDefault
 	if ( props.marks && derivedValue ) {
 		// Check if the current value exists in the marks only by their CSS variable name
 		// to match in case the fallback size changes.
@@ -285,6 +288,7 @@ AdvancedRangeControl.defaultProps = {
 	marks: undefined, // [{ value: 'var(--stk-preset-font-size-small', name: 'S' }]
 	allowCustom: true,
 	isCustomPreset: false,
+	isMarkModeDefault: true,
 }
 
 export default memo( AdvancedRangeControl, isEqual )

src/components/four-range-control/index.js

@@ -35,7 +35,7 @@ import { dispatch } from '@wordpress/data'
  */
 import { isEqual } from 'lodash'
 import classnames from 'classnames'
-import { i18n } from 'stackable'
+import { i18n, settings as stackableSettings } from 'stackable'
 import { Button } from '~stackable/components'
 import {
 	useAttributeName,
@@ -122,6 +122,8 @@ const FourRangeControl = memo( props => {
 		}
 	} )
 
+	const isMarkModeDefault = !! ( stackableSettings?.stackable_use_size_presets_by_default ?? true )
+
 	// Change the min, max & step values depending on the unit used.
 	if ( hasUnits ) {
 		const i = props.units.indexOf( unit ) < 0 ? 0 : props.units.indexOf( unit )
@@ -187,12 +189,13 @@ const FourRangeControl = memo( props => {
 
 	// Is value at first render the same as a step value? If so, do mark mode
 	// at the start, or show custom
+	// If no initial value, use the given default from the settings
 	const isMarkValue = {
-		first: !! props.marks,
-		top: !! props.marks,
-		right: !! props.marks,
-		bottom: !! props.marks,
-		left: !! props.marks,
+		first: !! props.marks && isMarkModeDefault,
+		top: !! props.marks && isMarkModeDefault,
+		right: !! props.marks && isMarkModeDefault,
+		bottom: !! props.marks && isMarkModeDefault,
+		left: !! props.marks && isMarkModeDefault,
 	}
 	if ( props.marks && firstValue ) {
 		// Check if the current value exists in the marks only by their CSS variable name

src/plugins/global-settings/preset-controls/index.php

@@ -42,10 +42,54 @@ class Stackable_Size_And_Spacing_Preset_Controls {
 		 * Initialize
 		 */
   		function __construct() {
+			add_action( 'register_stackable_global_settings', array( $this, 'register_use_size_presets_by_default' ) );
+			add_action( 'stackable_early_version_upgraded',  array( $this, 'use_size_presets_by_default_set_default' ), 10, 2 );
+			add_filter( 'stackable_js_settings', array( $this, 'add_setting' ) );
+
 			add_filter( 'stackable_inline_styles_nodep', array( $this, 'add_preset_controls_styles' ) );
 			add_filter( 'stackable_inline_editor_styles', array( $this, 'add_preset_controls_styles' ) );
 		}
 
+		// Register the setting for using presets by default
+		function register_use_size_presets_by_default() {
+			register_setting(
+				'stackable_global_settings',
+				'stackable_use_size_presets_by_default',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'If enabled, range controls will be on preset mode by default', STACKABLE_I18N ),
+					'sanitize_callback' => 'sanitize_text_field',
+					'show_in_rest' => true,
+					'default' => true,
+				)
+			);
+		}
+
+		/**
+		 * When upgrading to v3.16.0 and above, set option to false.
+		 * If new installation, set option to true.
+		 *
+		 * @since 3.16.0
+		 */
+		public function use_size_presets_by_default_set_default( $old_version, $new_version ) {
+			if ( ! empty( $old_version ) && version_compare( $old_version, "3.16.0", "<" ) ) {
+				if ( ! get_option( 'stackable_use_size_presets_by_default' ) ) {
+					update_option( 'stackable_use_size_presets_by_default', '' );
+				}
+			}
+		}
+
+		// Make the setting available in the editor
+		public function add_setting( $settings ) {
+			$settings['stackable_use_size_presets_by_default'] = get_option( 'stackable_use_size_presets_by_default' );
+			return $settings;
+		}
+		
+		/**
+		 * Loads the different preset values.
+		 *
+		 * @return void
+		 */
 		public function load_presets() {
 			$this->custom_presets = get_option( 'stackable_global_custom_preset_controls' );
 			$this->theme_presets = WP_Theme_JSON_Resolver::get_theme_data()->get_settings();
@@ -57,6 +101,12 @@ public static function sanitize_array_setting( $input ) {
 			return ! is_array( $input ) ? array( array() ) : $input;
 		}
 
+		/**
+		 * Loads and decodes a JSON file, returning the settings array if available.
+		 *
+		 * @param string $json_path Absolute path to the JSON file.
+		 * @return array The settings array from the decoded JSON file, or an empty array.
+		 */
 		private function load_json_file( $json_path ) {
 			if ( file_exists( $json_path ) ) {
 				$decoded_data = wp_json_file_decode( $json_path, [

src/welcome/admin.js

@@ -77,12 +77,12 @@ const SEARCH_TREE = [
 				children: [
 					__( 'Nested Block Width', i18n ),
 					__( 'Nested Wide Block Width', i18n ),
-					__( 'Stackable Text as Default Block', i18n ),
 				],
 			},
 			{
 				id: 'editor',
 				children: [
+					__( 'Stackable Text as Default Block', i18n ),
 					__( 'Design Library', i18n ),
 					__( 'Stackable Settings', i18n ),
 					__( 'Block Linking (Beta)', i18n ),
@@ -155,6 +155,7 @@ const SEARCH_TREE = [
 				id: 'global-settings',
 				children: [
 					__( 'Force Typography Styles', i18n ),
+					__( 'Use Size Presets by Default', i18n ),
 				],
 			},
 		],
@@ -672,7 +673,7 @@ const EditorSettings = props => {
 							<p className="s-settings-subtitle">{ __( 'You can customize some of the features and behavior of Stackable in the editor here.' ) }	</p>
 							<AdminToggleSetting
 								label={ __( 'Stackable Text as Default Block', i18n ) }
-								searchedSettings={ blocks.children }
+								searchedSettings={ editor.children }
 								value={ settings.stackable_enable_text_default_block }
 								onChange={ value => {
 									handleSettingsChange( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
@@ -1162,6 +1163,15 @@ const GlobalSettings = props => {
 								disabled={ __( 'Not forced', i18n ) }
 								enabled={ __( 'Force styles', i18n ) }
 							/>
+							<AdminToggleSetting
+								label={ __( 'Use Size Presets by Default', i18n ) }
+								searchedSettings={ globalSettings.children }
+								value={ props.settings.stackable_use_size_presets_by_default }
+								onChange={ value => {
+									props.handleSettingsChange( { stackable_use_size_presets_by_default: value } ) // eslint-disable-line camelcase
+								} }
+								help={ __( 'If enabled, range controls will be on preset mode by default.', i18n ) }
+							/>
 						</div>
 					}
 				</>