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 ) &&