diff --git a/src/components/link-control/editor.scss b/src/components/link-control/editor.scss
index 59267347ca..597d606a27 100644
--- a/src/components/link-control/editor.scss
+++ b/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;
diff --git a/src/components/link-control/index.js b/src/components/link-control/index.js
index 3f61d874e9..8baed532dd 100644
--- a/src/components/link-control/index.js
+++ b/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 }
>
- <_LinkControl
- { ...inputProps }
- value={ { url: value } }
- onChange={ ( { url } ) => onChange( url ) }
- settings={ [] } // The Url only.
- forceIsEditingLink={ ! value }
- />
+ { useUnrestrictedURLInput ? (
+
+ ) : (
+ <_LinkControl
+ { ...inputProps }
+ value={ { url: value } }
+ onChange={ ( { url } ) => onChange( url ) }
+ settings={ [] } // The Url only.
+ forceIsEditingLink={ ! value }
+ />
+ ) }
'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' );
diff --git a/src/welcome/admin.js b/src/welcome/admin.js
index b621d886b6..23aeed0d15 100644
--- a/src/welcome/admin.js
+++ b/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 => {
>
}
/>
+ {
+ 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 ) }
+ />
}
{ ( toolbar.children === null || toolbar.children.length > 0 ) &&