feat: add an option in Stackable setting to use unrestricted link control

Author: Arukuen

src/components/link-control/editor.scss

@@ -1,6 +1,7 @@
 .stk-link-control__input {
 	// Adjust width to ensure reset button is visible.
 	width: calc(100% - 32px);
+	min-width: 0;
 
 	> .block-editor-link-control {
 		min-width: auto;
@@ -29,6 +30,20 @@
 
 	}
 
+	> .block-editor-url-input {
+		min-width: 0;
+		width: 100%;
+
+		.components-base-control {
+			min-width: 0;
+			width: 100%;
+		}
+
+		.components-base-control__field {
+			margin: 0;
+		}
+	}
+
 	.block-editor-url-input__input {
 		margin: 0 !important;
 		width: 100% !important;

src/components/link-control/index.js

@@ -1,12 +1,14 @@
 /**
  * External dependencies
  */
+import { settings } from 'stackable'
 import classnames from 'classnames'
 
 /**
  * WordPress dependencies
  */
 import {
+	URLInput,
 	__experimentalLinkControl as _LinkControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 } from '@wordpress/block-editor'
 import { BaseControl as _BaseControl } from '@wordpress/components'
@@ -25,6 +27,7 @@ const LinkControl = props => {
 	const [ propsToPass, controlProps ] = extractControlProps( props )
 	const {
 		isDynamic,
+		showSuggestions,
 		...inputProps
 	} = propsToPass
 
@@ -33,6 +36,8 @@ const LinkControl = props => {
 
 	const dynamicContentProps = useDynamicContentControlProps( { value, onChange } )
 
+	const useUnrestrictedURLInput = !! settings.stackable_enable_unrestricted_url_input
+
 	const classNames = classnames( [
 		'stk-link-control',
 		props.className,
@@ -48,13 +53,22 @@ const LinkControl = props => {
 				{ ...dynamicContentProps }
 			>
 				<div className="stk-link-control__input">
-					<_LinkControl
-						{ ...inputProps }
-						value={ { url: value } }
-						onChange={ ( { url } ) => onChange( url ) }
-						settings={ [] } // The Url only.
-						forceIsEditingLink={ ! value }
-					/>
+					{ useUnrestrictedURLInput ? (
+						<URLInput
+							{ ...inputProps }
+							value={ value }
+							onChange={ onChange }
+							disableSuggestions={ ! showSuggestions }
+						/>
+					) : (
+						<_LinkControl
+							{ ...inputProps }
+							value={ { url: value } }
+							onChange={ ( { url } ) => onChange( url ) }
+							settings={ [] } // The Url only.
+							forceIsEditingLink={ ! value }
+						/>
+					) }
 				</div>
 			</DynamicContentControl>
 			<ResetButton

src/editor-settings.php

@@ -159,6 +159,18 @@ public function register_settings() {
 				)
 			);
 
+			register_setting(
+				'stackable_editor_settings',
+				'stackable_enable_unrestricted_url_input',
+				array(
+					'type' => 'boolean',
+					'description' => __( 'Uses the legacy URL input in Stackable link controls, allowing shortcodes and other dynamic URL values.', STACKABLE_I18N ),
+					'sanitize_callback' => 'rest_sanitize_boolean',
+					'show_in_rest' => true,
+					'default' => false,
+				)
+			);
+
 			register_setting(
 				'stackable_editor_settings',
 				'stackable_help_tooltip_disabled',
@@ -311,6 +323,7 @@ public function add_settings( $settings ) {
 			$settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' );
 			$settings['stackable_enable_global_settings'] = get_option( 'stackable_enable_global_settings' );
 			$settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' );
+			$settings['stackable_enable_unrestricted_url_input'] = get_option( 'stackable_enable_unrestricted_url_input' );
 			$settings['stackable_enable_text_highlight'] = get_option( 'stackable_enable_text_highlight' );
 			$settings['stackable_enable_dynamic_content'] = get_option( 'stackable_enable_dynamic_content' );
 			$settings['stackable_enable_copy_paste_styles'] = get_option( 'stackable_enable_copy_paste_styles' );

src/welcome/admin.js

@@ -99,6 +99,7 @@ const SEARCH_TREE = [
 					__( 'Stackable Settings', i18n ),
 					__( 'Use Size Presets by Default', i18n ),
 					__( 'Block Linking (Beta)', i18n ),
+					__( 'Use Unrestricted URL Input', i18n ),
 				],
 			},
 			{
@@ -788,6 +789,17 @@ const EditorSettings = props => {
 									</>
 								}
 							/>
+							<AdminToggleSetting
+								label={ __( 'Use Unrestricted URL Input', i18n ) }
+								searchedSettings={ editor.children }
+								value={ settings.stackable_enable_unrestricted_url_input }
+								onChange={ value => {
+									handleSettingsChange( { stackable_enable_unrestricted_url_input: value } ) // eslint-disable-line camelcase
+								} }
+								help={ __( 'Uses the legacy URL field in all Stackable link controls. Enable this for shortcodes, template tokens, or other dynamic URL values. This disables Gutenberg URL validation.', i18n ) }
+								disabled={ __( 'Use Gutenberg URL input', i18n ) }
+								enabled={ __( 'Use unrestricted URL input', i18n ) }
+							/>
 						</div>
 					}
 					{ ( toolbar.children === null || toolbar.children.length > 0 ) &&