@wordpress/block-library 8.33.0 → 8.34.0

package/src/embed/variations.js

@@ -368,7 +368,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.providerNameSlug ===
 		variationAttributes.providerNameSlug;

package/src/embed/wp-embed-preview.js

@@ -20,10 +20,14 @@ export default function WpEmbedPreview( { html } ) {
 		const iframe = doc.querySelector( 'iframe' );
 		const iframeProps = {};
 
-		if ( ! iframe ) return iframeProps;
+		if ( ! iframe ) {
+			return iframeProps;
+		}
 
 		Array.from( iframe.attributes ).forEach( ( { name, value } ) => {
-			if ( name === 'style' ) return;
+			if ( name === 'style' ) {
+				return;
+			}
 			iframeProps[ attributeMap[ name ] || name ] = value;
 		} );
 

package/src/gallery/test/helpers.native.js

@@ -65,9 +65,9 @@ export const initializeWithGalleryBlock = async ( {
 /**
  * Gets a gallery item within a Gallery block.
  *
- * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
- * @param {number}                                          rowIndex     Row position within the Gallery block.
- * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
+ * @param {HTMLElement} galleryBlock Gallery block instance.
+ * @param {number}      rowIndex     Row position within the Gallery block.
+ * @return {HTMLElement} Gallery item.
  */
 export const getGalleryItem = ( galleryBlock, rowIndex ) =>
 	getInnerBlock( galleryBlock, 'Image', { rowIndex } );

package/src/group/editor.scss

@@ -53,50 +53,3 @@
 	}
 }
 
-.wp-block-group__placeholder {
-	.wp-block-group-placeholder__variations {
-		list-style: none;
-		display: flex;
-		justify-content: center;
-		flex-direction: row;
-		flex-wrap: wrap;
-		width: 100%;
-		padding: 0;
-		margin: 0;
-	}
-	.components-placeholder__instructions {
-		margin-bottom: 18px;
-	}
-	.wp-block-group-placeholder__variations svg {
-		fill: $gray-400 !important;
-	}
-	.wp-block-group-placeholder__variations svg:hover {
-		fill: var(--wp-admin-theme-color) !important;
-	}
-	.wp-block-group-placeholder__variations > li {
-		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
-		width: auto;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	}
-	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
-		width: 44px;
-		height: 32px;
-		padding: 0;
-		&:hover {
-			box-shadow: none;
-		}
-	}
-	.components-placeholder {
-		min-height: auto;
-		padding: $grid-unit-30;
-		align-items: center;
-	}
-	.is-small,
-	.is-medium {
-		.wp-block-group-placeholder__variations > li {
-			margin: $grid-unit-15;
-		}
-	}
-}

package/src/group/index.js

@@ -22,14 +22,6 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		attributes: {
-			style: {
-				color: {
-					text: '#000000',
-					background: '#ffffff',
-				},
-			},
-		},
 		innerBlocks: [
 			{
 				name: 'core/paragraph',

package/src/group/placeholder.js

@@ -20,42 +20,41 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 		group: (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-row': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		'group-stack': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 		'group-grid': (
 			<SVG
 				xmlns="http://www.w3.org/2000/svg"
-				width="44"
-				height="32"
-				viewBox="0 0 44 32"
+				width="48"
+				height="48"
+				viewBox="0 0 48 48"
 			>
-				<Path d="m20.30137,-0.00025l-18.9728,0c-0.86524,0.07234 -1.41711,0.79149 -1.41711,1.89149l0,12.64468c0,0.6 0.73401,0.96383 1.0304,0.96383l19.67469,0.03617c0.29639,0 1.0304,-0.4 1.0304,-1l-0.03576,-12.7532c0,-1.1 -0.76644,-1.78297 -1.30983,-1.78297zm0.52975,16.60851l-19.99654,-0.03617c-0.29639,0 -0.92312,0.36383 -0.92312,0.96383l-0.03576,12.68085c0,1.1 0.8022,1.81915 1.34559,1.81915l19.00857,0c0.54339,0 1.45287,-0.71915 1.45287,-1.81915l0,-12.53617c0,-0.6 -0.5552,-1.07234 -0.8516,-1.07234z" />
-				<Path d="m42.73056,-0.03617l-18.59217,0c-0.84788,0.07234 -1.38868,0.79149 -1.38868,1.89149l0,12.64468c0,0.6 0.71928,0.96383 1.00973,0.96383l19.27997,0.03617c0.29045,0 1.00973,-0.4 1.00973,-1l-0.03504,-12.7532c0,-1.1 -0.75106,-1.78297 -1.28355,-1.78297zm0.51912,16.60851l-19.59537,-0.03617c-0.29045,0 -0.9046,0.36383 -0.9046,0.96383l-0.03504,12.68085c0,1.1 0.78611,1.81915 1.31859,1.81915l18.62721,0c0.53249,0 1.42372,-0.71915 1.42372,-1.81915l0,-12.53617c0,-0.6 -0.54407,-1.07234 -0.83451,-1.07234z" />
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z" />
 			</SVG>
 		),
 	};
@@ -159,11 +158,12 @@ function GroupPlaceHolder( { name, onSelect } ) {
 					{ variations.map( ( variation ) => (
 						<li key={ variation.name }>
 							<Button
+								__next40pxDefaultSize
 								variant="tertiary"
 								icon={ getGroupPlaceholderIcons(
 									variation.name
 								) }
-								iconSize={ 44 }
+								iconSize={ 48 }
 								onClick={ () => onSelect( variation ) }
 								className="wp-block-group-placeholder__variation-button"
 								label={ `${ variation.title }: ${ variation.description }` }

package/src/group/style.scss

@@ -2,3 +2,8 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 }
+
+// We need this so groups with negative margins overlap as expected.
+:where(.wp-block-group.wp-block-group-is-layout-constrained) {
+	position: relative;
+}

package/src/image/image.js

@@ -200,7 +200,9 @@ export default function Image( {
 			return;
 		}
 
-		if ( externalBlob ) return;
+		if ( externalBlob ) {
+			return;
+		}
 
 		window
 			// Avoid cache, which seems to help avoid CORS problems.

package/src/image/view.js

@@ -174,7 +174,9 @@ const { state, actions, callbacks } = store(
 		},
 		callbacks: {
 			setOverlayStyles() {
-				if ( ! imageRef ) return;
+				if ( ! imageRef ) {
+					return;
+				}
 
 				let {
 					naturalWidth,

package/src/index.js

@@ -330,3 +330,5 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 				.forEach( ( { init } ) => init() );
 	  }
 	: undefined;
+
+export { privateApis } from './private-apis';

package/src/list-item/hooks/use-merge.js

@@ -35,8 +35,12 @@ export default function useMerge( clientId, onMerge ) {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
@@ -49,9 +53,13 @@ export default function useMerge( clientId, onMerge ) {
 	 */
 	function _getNextId( id ) {
 		const next = getNextBlockClientId( id );
-		if ( next ) return next;
+		if ( next ) {
+			return next;
+		}
 		const parentListItemId = getParentListItemId( id );
-		if ( ! parentListItemId ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
 		return _getNextId( parentListItemId );
 	}
 

package/src/list-item/hooks/use-outdent-list-item.js

@@ -27,8 +27,12 @@ export default function useOutdentListItem() {
 	function getParentListItemId( id ) {
 		const listId = getBlockRootClientId( id );
 		const parentListItemId = getBlockRootClientId( listId );
-		if ( ! parentListItemId ) return;
-		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
+		if ( getBlockName( parentListItemId ) !== 'core/list-item' ) {
+			return;
+		}
 		return parentListItemId;
 	}
 
@@ -37,17 +41,23 @@ export default function useOutdentListItem() {
 			clientIds = [ clientIds ];
 		}
 
-		if ( ! clientIds.length ) return;
+		if ( ! clientIds.length ) {
+			return;
+		}
 
 		const firstClientId = clientIds[ 0 ];
 
 		// Can't outdent if it's not a list item.
-		if ( getBlockName( firstClientId ) !== 'core/list-item' ) return;
+		if ( getBlockName( firstClientId ) !== 'core/list-item' ) {
+			return;
+		}
 
 		const parentListItemId = getParentListItemId( firstClientId );
 
 		// Can't outdent if it's at the top level.
-		if ( ! parentListItemId ) return;
+		if ( ! parentListItemId ) {
+			return;
+		}
 
 		const parentListId = getBlockRootClientId( firstClientId );
 		const lastClientId = clientIds[ clientIds.length - 1 ];

package/src/navigation/block.json

@@ -137,15 +137,6 @@
 				"type": "flex"
 			}
 		},
-		"__experimentalStyle": {
-			"elements": {
-				"link": {
-					"color": {
-						"text": "inherit"
-					}
-				}
-			}
-		},
 		"interactivity": true,
 		"renaming": false
 	},

package/src/navigation/edit/are-blocks-dirty.js

@@ -30,7 +30,9 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 		y !== null &&
 		y !== undefined
 	) {
-		if ( Object.keys( x ).length !== Object.keys( y ).length ) return false;
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) {
+			return false;
+		}
 
 		for ( const prop in x ) {
 			if ( y.hasOwnProperty( prop ) ) {
@@ -39,9 +41,12 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 					return true;
 				}
 
-				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) )
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) ) {
 					return false;
-			} else return false;
+				}
+			} else {
+				return false;
+			}
 		}
 
 		return true;

package/src/navigation/edit/deleted-navigation-warning.js

@@ -11,7 +11,7 @@ function DeletedNavigationWarning( { onCreateNew } ) {
 		<Warning>
 			{ createInterpolateElement(
 				__(
-					'Navigation Menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
 				),
 				{
 					button: <Button onClick={ onCreateNew } variant="link" />,

package/src/navigation/edit/menu-inspector-controls.js

@@ -49,7 +49,9 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 
 	const setInsertedBlockAttributes =
 		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) return;
+			if ( ! _insertedBlockClientId ) {
+				return;
+			}
 			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 

package/src/navigation/edit/navigation-menu-selector.js

@@ -202,7 +202,7 @@ function NavigationMenuSelector( {
 									! hasResolvedNavigationMenus
 								}
 							>
-								{ __( 'Create new menu' ) }
+								{ __( 'Create new Menu' ) }
 							</MenuItem>
 						</MenuGroup>
 					) }

package/src/navigation/edit/test/navigation-menu-selector.js

@@ -191,7 +191,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( toolsGroup ).toBeInTheDocument();
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				expect( createMenuButton ).toBeInTheDocument();
@@ -236,7 +236,7 @@ describe( 'NavigationMenuSelector', () => {
 				await user.click( toggleButton );
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				await user.click( createMenuButton );
@@ -268,7 +268,7 @@ describe( 'NavigationMenuSelector', () => {
 
 				await user.click(
 					screen.getByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				);
 
@@ -293,7 +293,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the "Create menu" button is disabled.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeDisabled();
 
@@ -318,7 +318,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the button is enabled again.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeEnabled();
 			} );

package/src/navigation/view.js

@@ -94,7 +94,9 @@ const { state, actions } = store(
 				const ctx = getContext();
 				const { ref } = getElement();
 				// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
-				if ( window.document.activeElement !== ref ) ref.focus();
+				if ( window.document.activeElement !== ref ) {
+					ref.focus();
+				}
 				const { menuOpenedBy } = state;
 				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );

package/src/navigation-link/edit.js

@@ -153,6 +153,82 @@ function getMissingText( type ) {
 	return missingText;
 }
 
+/*
+ * Warning, this duplicated in
+ * packages/block-library/src/navigation-submenu/edit.js
+ * Consider reuseing this components for both blocks.
+ */
+function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
+	const { label, url, description, title, rel } = attributes;
+	return (
+		<PanelBody title={ __( 'Settings' ) }>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ label ? stripHTML( label ) : '' }
+				onChange={ ( labelValue ) => {
+					setAttributes( { label: labelValue } );
+				} }
+				label={ __( 'Text' ) }
+				autoComplete="off"
+				onFocus={ () => setIsLabelFieldFocused( true ) }
+				onBlur={ () => setIsLabelFieldFocused( false ) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ url ? safeDecodeURI( url ) : '' }
+				onChange={ ( urlValue ) => {
+					updateAttributes(
+						{ url: urlValue },
+						setAttributes,
+						attributes
+					);
+				} }
+				label={ __( 'Link' ) }
+				autoComplete="off"
+			/>
+			<TextareaControl
+				__nextHasNoMarginBottom
+				value={ description || '' }
+				onChange={ ( descriptionValue ) => {
+					setAttributes( { description: descriptionValue } );
+				} }
+				label={ __( 'Description' ) }
+				help={ __(
+					'The description will be displayed in the menu if the current theme supports it.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ title || '' }
+				onChange={ ( titleValue ) => {
+					setAttributes( { title: titleValue } );
+				} }
+				label={ __( 'Title attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'Additional information to help clarify the purpose of the link.'
+				) }
+			/>
+			<TextControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				value={ rel || '' }
+				onChange={ ( relValue ) => {
+					setAttributes( { rel: relValue } );
+				} }
+				label={ __( 'Rel attribute' ) }
+				autoComplete="off"
+				help={ __(
+					'The relationship of the linked URL as space-separated link types.'
+				) }
+			/>
+		</PanelBody>
+	);
+}
+
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -163,7 +239,7 @@ export default function NavigationLinkEdit( {
 	context,
 	clientId,
 } ) {
-	const { id, label, type, url, description, rel, title, kind } = attributes;
+	const { id, label, type, url, description, kind } = attributes;
 
 	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
@@ -171,9 +247,11 @@ export default function NavigationLinkEdit( {
 	const {
 		replaceBlock,
 		__unstableMarkNextChangeAsNotPersistent,
+		selectBlock,
 		selectPreviousBlock,
 	} = useDispatch( blockEditorStore );
-	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Have the link editing ui open on mount when lacking a url and selected.
+	const [ isLinkOpen, setIsLinkOpen ] = useState( isSelected && ! url );
 	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
 	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
@@ -228,27 +306,19 @@ export default function NavigationLinkEdit( {
 	 * Transform to submenu block.
 	 */
 	const transformToSubmenu = () => {
-		const innerBlocks = getBlocks( clientId );
+		let innerBlocks = getBlocks( clientId );
+		if ( innerBlocks.length === 0 ) {
+			innerBlocks = [ createBlock( 'core/navigation-link' ) ];
+			selectBlock( innerBlocks[ 0 ].clientId );
+		}
 		const newSubmenu = createBlock(
 			'core/navigation-submenu',
 			attributes,
-			innerBlocks.length > 0
-				? innerBlocks
-				: [ createBlock( 'core/navigation-link' ) ]
+			innerBlocks
 		);
 		replaceBlock( clientId, newSubmenu );
 	};
 
-	useEffect( () => {
-		// Show the LinkControl on mount if the URL is empty
-		// ( When adding a new menu item)
-		// This can't be done in the useState call because it conflicts
-		// with the autofocus behavior of the BlockListBlock component.
-		if ( ! url ) {
-			setIsLinkOpen( true );
-		}
-	}, [ url ] );
-
 	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
 		if ( hasChildren ) {
@@ -259,16 +329,6 @@ export default function NavigationLinkEdit( {
 		}
 	}, [ hasChildren ] );
 
-	/**
-	 * The hook shouldn't be necessary but due to a focus loss happening
-	 * when selecting a suggestion in the link popover, we force close on block unselection.
-	 */
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setIsLinkOpen( false );
-		}
-	}, [ isSelected ] );
-
 	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
 	useEffect( () => {
 		// We only want to do this when the URL has gone from nothing to a new URL AND the label looks like a URL
@@ -420,71 +480,11 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ label ? stripHTML( label ) : '' }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						label={ __( 'Text' ) }
-						autoComplete="off"
-						onFocus={ () => setIsLabelFieldFocused( true ) }
-						onBlur={ () => setIsLabelFieldFocused( false ) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ url ? safeDecodeURI( url ) : '' }
-						onChange={ ( urlValue ) => {
-							updateAttributes(
-								{ url: urlValue },
-								setAttributes,
-								attributes
-							);
-						} }
-						label={ __( 'Link' ) }
-						autoComplete="off"
-					/>
-					<TextareaControl
-						__nextHasNoMarginBottom
-						value={ description || '' }
-						onChange={ ( descriptionValue ) => {
-							setAttributes( { description: descriptionValue } );
-						} }
-						label={ __( 'Description' ) }
-						help={ __(
-							'The description will be displayed in the menu if the current theme supports it.'
-						) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ title || '' }
-						onChange={ ( titleValue ) => {
-							setAttributes( { title: titleValue } );
-						} }
-						label={ __( 'Title attribute' ) }
-						autoComplete="off"
-						help={ __(
-							'Additional information to help clarify the purpose of the link.'
-						) }
-					/>
-					<TextControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
-						value={ rel || '' }
-						onChange={ ( relValue ) => {
-							setAttributes( { rel: relValue } );
-						} }
-						label={ __( 'Rel attribute' ) }
-						autoComplete="off"
-						help={ __(
-							'The relationship of the linked URL as space-separated link types.'
-						) }
-					/>
-				</PanelBody>
+				<Controls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					setIsLabelFieldFocused={ setIsLabelFieldFocused }
+				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }