@wordpress/block-editor 12.6.0 → 12.7.0

package/src/components/font-sizes/fluid-utils.js

@@ -32,8 +32,8 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
  * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
  * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
  * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
@@ -46,8 +46,8 @@ export function getComputedFluidTypographyValue( {
 	minimumFontSize,
 	maximumFontSize,
 	fontSize,
-	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
-	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+	minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+	maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeLimit,
 } ) {
@@ -163,19 +163,19 @@ export function getComputedFluidTypographyValue( {
 	} );
 
 	// Viewport widths defined for fluid typography. Normalize units
-	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
-		maximumViewPortWidth,
+	const maximumViewportWidthParsed = getTypographyValueAndUnit(
+		maximumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
-	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
-		minimumViewPortWidth,
+	const minimumViewportWidthParsed = getTypographyValueAndUnit(
+		minimumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
 
 	// Protect against unsupported units.
 	if (
-		! maximumViewPortWidthParsed ||
-		! minumumViewPortWidthParsed ||
+		! maximumViewportWidthParsed ||
+		! minimumViewportWidthParsed ||
 		! minimumFontSizeRem
 	) {
 		return null;
@@ -183,23 +183,23 @@ export function getComputedFluidTypographyValue( {
 
 	// Build CSS rule.
 	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
-	const minViewPortWidthOffsetValue = roundToPrecision(
-		minumumViewPortWidthParsed.value / 100,
+	const minViewportWidthOffsetValue = roundToPrecision(
+		minimumViewportWidthParsed.value / 100,
 		3
 	);
 
-	const viewPortWidthOffset =
-		roundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit;
+	const viewportWidthOffset =
+		roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit;
 	const linearFactor =
 		100 *
 		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
-			( maximumViewPortWidthParsed.value -
-				minumumViewPortWidthParsed.value ) );
+			( maximumViewportWidthParsed.value -
+				minimumViewportWidthParsed.value ) );
 	const linearFactorScaled = roundToPrecision(
 		( linearFactor || 1 ) * scaleFactor,
 		3
 	);
-	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewportWidthOffset }) * ${ linearFactorScaled })`;
 
 	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
 }

package/src/components/font-sizes/test/fluid-utils.js

@@ -56,8 +56,8 @@ describe( 'getComputedFluidTypographyValue()', () => {
 	it( 'should return a fluid font size when given a min and max viewport width', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			minimumViewPortWidth: '500px',
-			maximumViewPortWidth: '1000px',
+			minimumViewportWidth: '500px',
+			maximumViewportWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
 			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
@@ -74,18 +74,18 @@ describe( 'getComputedFluidTypographyValue()', () => {
 		);
 	} );
 
-	it( 'should return null when maximumViewPortWidth is not a supported value or unit', () => {
+	it( 'should return null when maximumViewportWidth is not a supported value or unit', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			maximumViewPortWidth: 'min(calc(100% - 60px), 1200px)',
+			maximumViewportWidth: 'min(calc(100% - 60px), 1200px)',
 		} );
 		expect( fluidTypographyValues ).toBeNull();
 	} );
 
-	it( 'should return `null` font size when minimumViewPortWidth is not a supported value or unit', () => {
+	it( 'should return `null` font size when minimumViewportWidth is not a supported value or unit', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '33px',
-			minimumViewPortWidth: 'calc(100% - 60px)',
+			minimumViewportWidth: 'calc(100% - 60px)',
 		} );
 		expect( fluidTypographyValues ).toBeNull();
 	} );

package/src/components/global-styles/behaviors-panel.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function ( { onChange, value, behaviors } ) {
+	const defaultBehaviors = {
+		default: {
+			value: 'default',
+			label: __( 'Default' ),
+		},
+		noBehaviors: {
+			value: '',
+			label: __( 'No behaviors' ),
+		},
+	};
+
+	const behaviorsOptions = Object.entries( behaviors ).map(
+		( [ behaviorName ] ) => ( {
+			value: behaviorName,
+			// Capitalize the first letter of the behavior name.
+			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
+				.slice( 1 )
+				.toLowerCase() }`,
+		} )
+	);
+
+	const options = [
+		...Object.values( defaultBehaviors ),
+		...behaviorsOptions,
+	];
+
+	const animations = [
+		{
+			value: 'zoom',
+			label: __( 'Zoom' ),
+		},
+		{
+			value: 'fade',
+			label: __( 'Fade' ),
+		},
+	];
+	return (
+		<div style={ { marginTop: '2rem' } }>
+			<SelectControl
+				label={ __( 'Behaviors' ) }
+				// At the moment we are only supporting one behavior (Lightbox)
+				value={ value }
+				options={ options }
+				onChange={ onChange }
+				hideCancelButton={ true }
+				size="__unstable-large"
+			/>
+			{ value === 'lightbox' && (
+				<SelectControl
+					label={ __( 'Animation' ) }
+					value={
+						behaviors?.lightbox.animation
+							? behaviors?.lightbox.animation
+							: ''
+					}
+					options={ animations }
+					onChange={ onChange }
+					hideCancelButton={ false }
+					size="__unstable-large"
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/global-styles/hooks.js

@@ -8,7 +8,7 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  */
 import { useContext, useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore, hasBlockSupport } from '@wordpress/blocks';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -19,10 +19,11 @@ import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { GlobalStylesContext } from './context';
 import { unlock } from '../../lock-unlock';
 
-const EMPTY_CONFIG = { settings: {}, styles: {} };
+const EMPTY_CONFIG = { settings: {}, styles: {}, behaviors: {} };
 
 const VALID_SETTINGS = [
 	'appearanceTools',
+	'behaviors',
 	'useRootPaddingAwareAlignments',
 	'border.color',
 	'border.radius',
@@ -88,7 +89,6 @@ export const useGlobalStylesReset = () => {
 
 export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 	const { setUserConfig, ...configs } = useContext( GlobalStylesContext );
-
 	const appendedBlockPath = blockName ? '.blocks.' + blockName : '';
 	const appendedPropertyPath = propertyPath ? '.' + propertyPath : '';
 	const contextualPath = `settings${ appendedBlockPath }${ appendedPropertyPath }`;
@@ -135,7 +135,6 @@ export function useGlobalSetting( propertyPath, blockName, source = 'all' ) {
 			setImmutably( currentConfig, contextualPath.split( '.' ), newValue )
 		);
 	};
-
 	return [ settingValue, setSetting ];
 }
 
@@ -327,7 +326,8 @@ export function useSettingsForBlockElement(
 			const sides = Array.isArray( supports?.spacing?.[ key ] )
 				? supports?.spacing?.[ key ]
 				: supports?.spacing?.[ key ]?.sides;
-			if ( sides?.length ) {
+			// Check if spacing type is supported before adding sides.
+			if ( sides?.length && updatedSettings.spacing?.[ key ] ) {
 				updatedSettings.spacing = {
 					...updatedSettings.spacing,
 					[ key ]: {
@@ -461,3 +461,112 @@ export function useGradientsPerOrigin( settings ) {
 		shouldDisplayDefaultGradients,
 	] );
 }
+
+export function __experimentalUseGlobalBehaviors( blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+	const finalPath = ! blockName
+		? `behaviors`
+		: `behaviors.blocks.${ blockName }`;
+
+	let rawResult, result;
+	switch ( source ) {
+		case 'all':
+			rawResult = getValueFromObjectPath( mergedConfig, finalPath );
+			result = getValueFromVariable( mergedConfig, blockName, rawResult );
+			break;
+		case 'user':
+			rawResult = getValueFromObjectPath( userConfig, finalPath );
+			result = getValueFromVariable( mergedConfig, blockName, rawResult );
+			break;
+		case 'base':
+			rawResult = getValueFromObjectPath( baseConfig, finalPath );
+			result = getValueFromVariable( baseConfig, blockName, rawResult );
+			break;
+		default:
+			throw 'Unsupported source';
+	}
+
+	const animation = result?.lightbox?.animation || 'zoom';
+
+	const setBehavior = ( newValue ) => {
+		let newBehavior;
+		// The user saves with Apply Globally option.
+		if ( typeof newValue === 'object' ) {
+			newBehavior = newValue;
+		} else {
+			switch ( newValue ) {
+				case 'lightbox':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation,
+						},
+					};
+					break;
+				case 'fade':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation: 'fade',
+						},
+					};
+					break;
+				case 'zoom':
+					newBehavior = {
+						lightbox: {
+							enabled: true,
+							animation: 'zoom',
+						},
+					};
+					break;
+				case '':
+					newBehavior = {
+						lightbox: {
+							enabled: false,
+							animation,
+						},
+					};
+					break;
+				default:
+					break;
+			}
+		}
+		setUserConfig( ( currentConfig ) =>
+			setImmutably( currentConfig, finalPath.split( '.' ), newBehavior )
+		);
+	};
+	let behavior = '';
+	if ( result === undefined ) behavior = 'default';
+	if ( result?.lightbox.enabled ) behavior = 'lightbox';
+
+	return { behavior, inheritedBehaviors: result, setBehavior };
+}
+
+export function __experimentalUseHasBehaviorsPanel(
+	settings,
+	name,
+	{ blockSupportOnly = false } = {}
+) {
+	if ( ! settings?.behaviors ) {
+		return false;
+	}
+
+	// If every behavior is disabled on block supports, do not show the behaviors inspector control.
+	const hasSomeBlockSupport = Object.keys( settings?.behaviors ).some(
+		( key ) => hasBlockSupport( name, `behaviors.${ key }` )
+	);
+
+	if ( blockSupportOnly ) {
+		return hasSomeBlockSupport;
+	}
+
+	// If every behavior is disabled, do not show the behaviors inspector control.
+	return Object.values( settings?.behaviors ).some(
+		( value ) => value === true && hasSomeBlockSupport
+	);
+}

package/src/components/global-styles/index.js

@@ -1,4 +1,6 @@
 export {
+	__experimentalUseGlobalBehaviors,
+	__experimentalUseHasBehaviorsPanel,
 	useGlobalStylesReset,
 	useGlobalSetting,
 	useGlobalStyle,
@@ -23,5 +25,6 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export { default as __experimentalBehaviorsPanel } from './behaviors-panel';
 export { default as AdvancedPanel } from './advanced-panel';
 export { areGlobalStyleConfigsEqual } from './utils';

package/src/components/global-styles/test/typography-utils.js

@@ -192,7 +192,7 @@ describe( 'typography utils', () => {
 
 			{
 				message:
-					'should apply maxViewPortWidth as maximum viewport width',
+					'should apply maxViewportWidth as maximum viewport width',
 				preset: {
 					size: '80px',
 					fluid: {
@@ -202,7 +202,7 @@ describe( 'typography utils', () => {
 				},
 				typographySettings: {
 					fluid: {
-						maxViewPortWidth: '1100px',
+						maxViewportWidth: '1100px',
 					},
 				},
 				expected:
@@ -548,18 +548,18 @@ describe( 'typography utils', () => {
 					layout: { wideSize: '1000rem' },
 				},
 				expected: {
-					fluid: { maxViewPortWidth: '1000rem', minFontSize: '16px' },
+					fluid: { maxViewportWidth: '1000rem', minFontSize: '16px' },
 				},
 			},
 
 			{
 				message:
-					'should prioritize fluid `maxViewPortWidth` over `layout.wideSize`',
+					'should prioritize fluid `maxViewportWidth` over `layout.wideSize`',
 				settings: {
-					typography: { fluid: { maxViewPortWidth: '10px' } },
+					typography: { fluid: { maxViewportWidth: '10px' } },
 					layout: { wideSize: '1000rem' },
 				},
-				expected: { fluid: { maxViewPortWidth: '10px' } },
+				expected: { fluid: { maxViewportWidth: '10px' } },
 			},
 		].forEach( ( { message, settings, expected } ) => {
 			it( `${ message }`, () => {

package/src/components/global-styles/typography-utils.js

@@ -25,8 +25,8 @@ import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
 
 /**
  * @typedef {Object} TypographySettings
- * @property {?string} minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
- * @property {?string} maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?string} minViewportWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string} maxViewportWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
  * @property {?number} scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
  * @property {?number} minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
  * @property {?string} minFontSize       The smallest a calculated font size may be. Optional.
@@ -67,7 +67,7 @@ export function getTypographyFontSizeValue( preset, typographyOptions ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
-		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
+		maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -102,7 +102,7 @@ export function getFluidTypographyOptionsFromSettings( settings ) {
 		layoutSettings?.wideSize
 		? {
 				fluid: {
-					maxViewPortWidth: layoutSettings.wideSize,
+					maxViewportWidth: layoutSettings.wideSize,
 					...typographySettings.fluid,
 				},
 		  }

package/src/components/global-styles/utils.js

@@ -415,6 +415,7 @@ export function areGlobalStyleConfigsEqual( original, variation ) {
 	}
 	return (
 		fastDeepEqual( original?.styles, variation?.styles ) &&
-		fastDeepEqual( original?.settings, variation?.settings )
+		fastDeepEqual( original?.settings, variation?.settings ) &&
+		fastDeepEqual( original?.behaviors, variation?.behaviors )
 	);
 }

package/src/components/inserter/hooks/use-block-types-state.js

@@ -5,6 +5,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	store as blocksStore,
+	parse,
 } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
@@ -37,12 +38,20 @@ const useBlockTypesState = ( rootClientId, onInsert ) => {
 	);
 
 	const onSelectItem = useCallback(
-		( { name, initialAttributes, innerBlocks }, shouldFocusBlock ) => {
-			const insertedBlock = createBlock(
-				name,
-				initialAttributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			);
+		(
+			{ name, initialAttributes, innerBlocks, syncStatus, content },
+			shouldFocusBlock
+		) => {
+			const insertedBlock =
+				syncStatus === 'unsynced'
+					? parse( content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: createBlock(
+							name,
+							initialAttributes,
+							createBlocksFromInnerBlocksTemplate( innerBlocks )
+					  );
 
 			onInsert( insertedBlock, undefined, shouldFocusBlock );
 		},

package/src/components/inserter/hooks/use-debounced-input.js

@@ -6,12 +6,13 @@ import { useDebounce } from '@wordpress/compose';
 
 export default function useDebouncedInput( defaultValue = '' ) {
 	const [ input, setInput ] = useState( defaultValue );
-	const [ debounced, setter ] = useState( defaultValue );
-	const setDebounced = useDebounce( setter, 250 );
+	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
+
+	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
+
 	useEffect( () => {
-		if ( debounced !== input ) {
-			setDebounced( input );
-		}
-	}, [ debounced, input ] );
-	return [ input, setInput, debounced ];
+		setDebouncedInput( input );
+	}, [ input ] );
+
+	return [ input, setInput, debouncedInput ];
 }

package/src/components/inserter/hooks/use-patterns-state.js

@@ -15,7 +15,7 @@ import { store as blockEditorStore } from '../../../store';
 const CUSTOM_CATEGORY = {
 	name: 'custom',
 	label: __( 'My patterns' ),
-	description: __( 'Custom patterns add by site users' ),
+	description: __( 'Custom patterns added by site users' ),
 };
 
 /**
@@ -61,6 +61,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 				),
 				{
 					type: 'snackbar',
+					id: 'block-pattern-inserted-notice',
 				}
 			);
 		},

package/src/components/inserter/reusable-blocks-tab.js

@@ -22,7 +22,10 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 	);
 
 	const filteredItems = useMemo( () => {
-		return items.filter( ( { category } ) => category === 'reusable' );
+		return items.filter(
+			( { category, syncStatus } ) =>
+				category === 'reusable' && syncStatus !== 'unsynced'
+		);
 	}, [ items ] );
 
 	if ( filteredItems.length === 0 ) {

package/src/components/inserter-list-item/index.js

@@ -49,7 +49,9 @@ function InserterListItem( {
 		];
 	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
-	const isSynced = isReusableBlock( item ) || isTemplatePart( item );
+	const isSynced =
+		( isReusableBlock( item ) && item.syncStatus !== 'unsynced' ) ||
+		isTemplatePart( item );
 
 	return (
 		<InserterDraggableBlocks

package/src/components/link-control/README.md

@@ -15,6 +15,16 @@ The distinction between the two components is perhaps best summarized by the fol
 -   `<URLInput>` - an input for presenting and managing selection behaviors associated with choosing a URL, optionally from a pool of available candidates.
 -   `<LinkControl>` - includes the features of `<URLInput>`, plus additional UI and behaviors to control how this URL applies to the concept of a "link". This includes link "settings" (eg: "opens in new tab", etc) and dynamic, "on the fly" link creation capabilities.
 
+## Persistent "Advanced" (settings) toggle state
+
+By default the link "settings" are hidden and can be toggled open/closed by way of a button labelled `Advanced` in the UI.
+
+In some circumstances if may be desirable to persist the toggle state of this portion of the UI so that it remains in the last state triggered by user interaction.
+
+For example, once the user has toggled the UI to "open", then it may remain open across all links on the site until such time as the user toggles the UI back again.
+
+Consumers who which to take advantage of this functionality should ensure that their block editor environment utilizes the [`@wordpress/preferences`](packages/preferences/README.md) package. By default the `<LinkControl>` component will attempt to persist the state of UI to a setting named `linkControlSettingsDrawer` with a scope of `core/block-editor`. If the preferences package is not available then local state is used and the setting will not be persisted.
+
 ## Search Suggestions
 
 When creating links the `LinkControl` component will handle two kinds of input from users:
@@ -69,9 +79,7 @@ An array of settings objects associated with a link (for example: a setting to d
 To disable settings, pass in an empty array. for example:
 
 ```jsx
-<LinkControl
-	settings={ [] }
-/>
+<LinkControl settings={ [] } />
 ```
 
 ### onChange
@@ -192,6 +200,7 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+
 ### renderControlBottom
 
 -   Type: `Function`

package/src/components/link-control/index.js

@@ -12,6 +12,8 @@ import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -101,6 +103,9 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
 
 const noop = () => {};
 
+const PREFERENCE_SCOPE = 'core/block-editor';
+const PREFERENCE_KEY = 'linkControlSettingsDrawer';
+
 /**
  * Renders a link control. A link control is a controlled input which maintains
  * a value associated with a link (HTML anchor element) and relevant settings
@@ -133,6 +138,41 @@ function LinkControl( {
 		withCreateSuggestion = true;
 	}
 
+	const [ settingsOpen, setSettingsOpen ] = useState( false );
+
+	const { advancedSettingsPreference } = useSelect( ( select ) => {
+		const prefsStore = select( preferencesStore );
+
+		return {
+			advancedSettingsPreference:
+				prefsStore.get( PREFERENCE_SCOPE, PREFERENCE_KEY ) ?? false,
+		};
+	}, [] );
+
+	const { set: setPreference } = useDispatch( preferencesStore );
+
+	/**
+	 * Sets the open/closed state of the Advanced Settings Drawer,
+	 * optionlly persisting the state to the user's preferences.
+	 *
+	 * Note that Block Editor components can be consumed by non-WordPress
+	 * environments which may not have preferences setup.
+	 * Therefore a local state is also  used as a fallback.
+	 *
+	 * @param {boolean} prefVal the open/closed state of the Advanced Settings Drawer.
+	 */
+	const setSettingsOpenWithPreference = ( prefVal ) => {
+		if ( setPreference ) {
+			setPreference( PREFERENCE_SCOPE, PREFERENCE_KEY, prefVal );
+		}
+		setSettingsOpen( prefVal );
+	};
+
+	// Block Editor components can be consumed by non-WordPress environments
+	// which may not have these preferences setup.
+	// Therefore a local state is used as a fallback.
+	const isSettingsOpen = advancedSettingsPreference || settingsOpen;
+
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
@@ -140,8 +180,6 @@ function LinkControl( {
 
 	const settingsKeys = settings.map( ( { id } ) => id );
 
-	const [ settingsOpen, setSettingsOpen ] = useState( false );
-
 	const [
 		internalControlValue,
 		setInternalControlValue,
@@ -207,7 +245,6 @@ function LinkControl( {
 			wrapperNode.current.ownerDocument.activeElement
 		);
 
-		setSettingsOpen( false );
 		setIsEditingLink( false );
 	};
 
@@ -292,7 +329,6 @@ function LinkControl( {
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
-	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 	const showActions = isEditingLink && hasLinkValue;
 
 	// Only show text control once a URL value has been committed
@@ -302,6 +338,7 @@ function LinkControl( {
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
+	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
 	return (
 		<div
@@ -385,8 +422,8 @@ function LinkControl( {
 				<div className="block-editor-link-control__tools">
 					{ ! currentInputIsEmpty && (
 						<LinkControlSettingsDrawer
-							settingsOpen={ settingsOpen }
-							setSettingsOpen={ setSettingsOpen }
+							settingsOpen={ isSettingsOpen }
+							setSettingsOpen={ setSettingsOpenWithPreference }
 						>
 							<LinkSettings
 								value={ internalControlValue }