@wordpress/block-editor 12.6.0 → 12.8.0

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

@@ -95,6 +95,36 @@ describe( 'typography utils', () => {
 					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
 			},
 
+			{
+				message:
+					'should override default max viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				typographySettings: {
+					fluid: {
+						maxViewportWidth: '1200px',
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 1.147), 1.75rem)',
+			},
+
+			{
+				message:
+					'should override default min viewport width fluid typography settings',
+				preset: {
+					size: '1.75rem',
+				},
+				typographySettings: {
+					fluid: {
+						minViewportWidth: '800px',
+					},
+				},
+				expected:
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.5rem) * 1.262), 1.75rem)',
+			},
+
 			{
 				message: 'should return clamp value with em min and max units',
 				preset: {
@@ -192,7 +222,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 +232,7 @@ describe( 'typography utils', () => {
 				},
 				typographySettings: {
 					fluid: {
-						maxViewPortWidth: '1100px',
+						maxViewportWidth: '1100px',
 					},
 				},
 				expected:
@@ -478,6 +508,21 @@ describe( 'typography utils', () => {
 				expected:
 					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
 			},
+
+			{
+				message: 'should apply all custom fluid typography settings',
+				preset: {
+					size: '17px',
+				},
+				typographySettings: {
+					fluid: {
+						minFontSize: '16px',
+						maxViewportWidth: '1200px',
+						minViewportWidth: '640px',
+					},
+				},
+				expected: 'clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px)',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(
@@ -548,18 +593,28 @@ 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' } },
+			},
+			{
+				message: 'should not merge `layout.wideSize` if it is fluid',
+				settings: {
+					typography: { fluid: { minFontSize: '16px' } },
+					layout: { wideSize: 'clamp(1000px, 85vw, 2000px)' },
+				},
+				expected: {
+					fluid: { minFontSize: '16px' },
+				},
 			},
 		].forEach( ( { message, settings, expected } ) => {
 			it( `${ message }`, () => {

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

@@ -7,7 +7,10 @@
 /**
  * Internal dependencies
  */
-import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
+import {
+	getComputedFluidTypographyValue,
+	getTypographyValueAndUnit,
+} from '../font-sizes/fluid-utils';
 
 /**
  * @typedef {Object} FluidPreset
@@ -25,8 +28,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 +70,8 @@ export function getTypographyFontSizeValue( preset, typographyOptions ) {
 		maximumFontSize: preset?.fluid?.max,
 		fontSize: defaultSize,
 		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
-		maximumViewPortWidth: fluidTypographySettings?.maxViewPortWidth,
+		maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
+		minimumViewportWidth: fluidTypographySettings?.minViewportWidth,
 	} );
 
 	if ( !! fluidFontSizeValue ) {
@@ -98,11 +102,16 @@ function isFluidTypographyEnabled( typographySettings ) {
 export function getFluidTypographyOptionsFromSettings( settings ) {
 	const typographySettings = settings?.typography;
 	const layoutSettings = settings?.layout;
-	return isFluidTypographyEnabled( typographySettings ) &&
+	const defaultMaxViewportWidth = getTypographyValueAndUnit(
 		layoutSettings?.wideSize
+	)
+		? layoutSettings?.wideSize
+		: null;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		defaultMaxViewportWidth
 		? {
 				fluid: {
-					maxViewPortWidth: layoutSettings.wideSize,
+					maxViewportWidth: defaultMaxViewportWidth,
 					...typographySettings.fluid,
 				},
 		  }

package/src/components/global-styles/use-global-styles-output.js

@@ -198,7 +198,6 @@ function flattenTree( input = {}, prefix, token ) {
  *
  * @param {string} styleVariationSelector The style variation selector.
  * @return {string} Combined selector string.
- *
  */
 function concatFeatureVariationSelectorString(
 	featureSelector,
@@ -793,7 +792,7 @@ export const toStyles = (
 			.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }
 			.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
 			.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }
-			.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
+			.has-global-padding > .alignfull:where(:not(.has-global-padding):not(.is-layout-flex):not(.is-layout-grid)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
 			.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where(.wp-block:not(.alignfull),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0;`;
 	}
 

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/iframe/index.js

@@ -167,6 +167,7 @@ function Iframe( {
 		node.addEventListener( 'load', onLoad );
 
 		return () => {
+			delete node._load;
 			node.removeEventListener( 'load', onLoad );
 			iFrameDocument?.removeEventListener(
 				'dragover',

package/src/components/index.js

@@ -158,6 +158,7 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
+export { useBlockEditingMode } from './block-editing-mode';
 
 /*
  * State Related Components
@@ -165,3 +166,9 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+export { useBlockCommands } from './use-block-commands';
+
+/*
+ * The following rename hint component can be removed in 6.4.
+ */
+export { default as ReusableBlocksRenameHint } from './inserter/reusable-block-rename-hint';

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/menu.js

@@ -260,6 +260,7 @@ function InserterMenu(
 							filterValue={ delayedFilterValue }
 							onSelect={ onSelect }
 							onHover={ onHover }
+							onHoverPattern={ onHoverPattern }
 							rootClientId={ rootClientId }
 							clientId={ clientId }
 							isAppender={ isAppender }

package/src/components/inserter/preview-panel.js

@@ -6,6 +6,7 @@ import {
 	createBlock,
 	getBlockFromExample,
 } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,23 +18,26 @@ import BlockPreview from '../block-preview';
 function InserterPreviewPanel( { item } ) {
 	const { name, title, icon, description, initialAttributes, example } = item;
 	const isReusable = isReusableBlock( item );
+	const blocks = useMemo( () => {
+		if ( ! example ) {
+			return createBlock( name, initialAttributes );
+		}
+		return getBlockFromExample( name, {
+			attributes: {
+				...example.attributes,
+				...initialAttributes,
+			},
+			innerBlocks: example.innerBlocks,
+		} );
+	}, [ name, example, initialAttributes ] );
+
 	return (
 		<div className="block-editor-inserter__preview-container">
 			<div className="block-editor-inserter__preview">
 				{ isReusable || example ? (
 					<div className="block-editor-inserter__preview-content">
 						<BlockPreview
-							blocks={
-								example
-									? getBlockFromExample( name, {
-											attributes: {
-												...example.attributes,
-												...initialAttributes,
-											},
-											innerBlocks: example.innerBlocks,
-									  } )
-									: createBlock( name, initialAttributes )
-							}
+							blocks={ blocks }
 							viewportWidth={ example?.viewportWidth ?? 500 }
 							additionalStyles={ [
 								{ css: 'body { padding: 16px; }' },

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/search-results.js

@@ -38,6 +38,7 @@ function InserterSearchResults( {
 	filterValue,
 	onSelect,
 	onHover,
+	onHoverPattern,
 	rootClientId,
 	clientId,
 	isAppender,
@@ -189,7 +190,7 @@ function InserterSearchResults( {
 					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onSelectBlockPattern }
-					onHover={ onHover }
+					onHover={ onHoverPattern }
 					isDraggable={ isDraggable }
 				/>
 			</div>

package/src/components/inserter/stories/{index.js → index.story.js}

@@ -8,7 +8,7 @@ import Inserter from '../';
 
 export default { title: 'BlockEditor/Inserter' };
 
-export const libraryWithoutPatterns = () => {
+export const LibraryWithoutPatterns = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -24,7 +24,7 @@ export const libraryWithoutPatterns = () => {
 	);
 };
 
-export const libraryWithPatterns = () => {
+export const LibraryWithPatterns = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -45,7 +45,7 @@ export const libraryWithPatterns = () => {
 	);
 };
 
-export const libraryWithPatternsAndReusableBlocks = () => {
+export const LibraryWithPatternsAndReusableBlocks = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,
@@ -67,7 +67,7 @@ export const libraryWithPatternsAndReusableBlocks = () => {
 	);
 };
 
-export const quickInserter = () => {
+export const QuickInserter = () => {
 	const wrapperStyle = {
 		margin: '24px',
 		height: 400,

package/src/components/inserter/test/search-items.js

@@ -50,7 +50,10 @@ describe( 'getNormalizedSearchTerms', () => {
 		).toEqual( [ '师父领进门', '修行在个人' ] );
 		expect(
 			getNormalizedSearchTerms( 'Бързата работа – срам за майстора.' )
-		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'майстора' ] );
+		).toEqual( [ 'бързата', 'работа', 'срам', 'за', 'маистора' ] );
+		expect(
+			getNormalizedSearchTerms( 'Cảm ơn sự giúp đỡ của bạn.' )
+		).toEqual( [ 'cam', 'on', 'su', 'giup', 'do', 'cua', 'ban' ] );
 	} );
 } );
 

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/keyboard-shortcuts/index.js

@@ -93,6 +93,16 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/multi-text-selection',
+			category: 'selection',
+			description: __( 'Select text across multiple blocks.' ),
+			keyCombination: {
+				modifier: 'shift',
+				character: 'arrow',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/focus-toolbar',
 			category: 'global',

package/src/components/line-height-control/index.js

@@ -12,6 +12,7 @@ import {
 	BASE_DEFAULT_VALUE,
 	RESET_VALUE,
 	STEP,
+	SPIN_FACTOR,
 	isLineHeightDefined,
 } from './utils';
 
@@ -30,24 +31,25 @@ const LineHeightControl = ( {
 		if ( isDefined ) return nextValue;
 
 		/**
-		 * The following logic handles the initial step up/down action
+		 * The following logic handles the initial spin up/down action
 		 * (from an undefined value state) so that the next values are better suited for
-		 * line-height rendering. For example, the first step up should immediately
+		 * line-height rendering. For example, the first spin up should immediately
 		 * go to 1.6, rather than the normally expected 0.1.
 		 *
-		 * Step up/down actions can be triggered by keydowns of the up/down arrow keys,
-		 * or by clicking the spin buttons.
+		 * Spin up/down actions can be triggered by keydowns of the up/down arrow keys,
+		 * dragging the input or by clicking the spin buttons.
 		 */
+		const spin = STEP * SPIN_FACTOR;
 		switch ( `${ nextValue }` ) {
-			case `${ STEP }`:
-				// Increment by step value.
-				return BASE_DEFAULT_VALUE + STEP;
+			case `${ spin }`:
+				// Increment by spin value.
+				return BASE_DEFAULT_VALUE + spin;
 			case '0': {
-				// This means the user explicitly input '0', rather than stepped down
-				// from an undefined value state.
+				// This means the user explicitly input '0', rather than using the
+				// spin down action from an undefined value state.
 				if ( wasTypedOrPasted ) return nextValue;
-				// Decrement by step value.
-				return BASE_DEFAULT_VALUE - STEP;
+				// Decrement by spin value.
+				return BASE_DEFAULT_VALUE - spin;
 			}
 			case '':
 				return BASE_DEFAULT_VALUE;
@@ -111,6 +113,7 @@ const LineHeightControl = ( {
 				label={ __( 'Line height' ) }
 				placeholder={ BASE_DEFAULT_VALUE }
 				step={ STEP }
+				spinFactor={ SPIN_FACTOR }
 				value={ value }
 				min={ 0 }
 				spinControls="custom"

package/src/components/line-height-control/test/index.js

@@ -13,7 +13,9 @@ import { UP, DOWN } from '@wordpress/keycodes';
  * Internal dependencies
  */
 import LineHeightControl from '../';
-import { BASE_DEFAULT_VALUE, STEP } from '../utils';
+import { BASE_DEFAULT_VALUE, SPIN_FACTOR, STEP } from '../utils';
+
+const SPIN = STEP * SPIN_FACTOR;
 
 const ControlledLineHeightControl = () => {
 	const [ value, setValue ] = useState();
@@ -32,7 +34,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: UP } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
 	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
@@ -40,7 +42,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.keyDown( input, { keyCode: DOWN } );
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
 	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
@@ -48,7 +50,7 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
 	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
@@ -56,6 +58,6 @@ describe( 'LineHeightControl', () => {
 		const input = screen.getByRole( 'spinbutton' );
 		act( () => input.focus() );
 		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
-		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - STEP );
+		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );

package/src/components/line-height-control/utils.js

@@ -1,5 +1,10 @@
 export const BASE_DEFAULT_VALUE = 1.5;
-export const STEP = 0.1;
+export const STEP = 0.01;
+/**
+ * A spin factor of 10 allows the spin controls to increment/decrement by 0.1.
+ * e.g. A line-height value of 1.55 will increment to 1.65.
+ */
+export const SPIN_FACTOR = 10;
 /**
  * There are varying value types within LineHeightControl:
  *

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`