Add link control initial implementation

packages/block-editor/src/components/content-only-controls/index.js

@@ -15,7 +15,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import useBlockDisplayInformation from '../use-block-display-information';
-import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
+import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
 
 // controls
 import RichText from './rich-text';
@@ -74,7 +74,7 @@ function BlockControls( { clientId } ) {
 		context: 'list-view',
 	} );
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const popoverPlacementProps = useInspectorPopoverPlacement();
 
 	if ( ! blockType?.controls?.length ) {
 		// TODO - we might still want to show a placeholder for blocks with no controls.
@@ -91,7 +91,7 @@ function BlockControls( { clientId } ) {
 				</HStack>
 			}
 			panelId={ clientId }
-			dropdownMenuProps={ dropdownMenuProps }
+			dropdownMenuProps={ popoverPlacementProps }
 		>
 			{ blockType?.controls?.map( ( control, index ) => (
 				<BlockAttributeToolsPanelItem

packages/block-editor/src/components/content-only-controls/link/index.js

@@ -1,7 +1,72 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import {
+	Button,
+	Icon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalGrid as Grid,
+	Popover,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { lineSolid, link } from '@wordpress/icons';
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../../link-control';
+import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
+
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}
 
 export default function Link( {
 	clientId,
@@ -10,17 +75,143 @@ export default function Link( {
 	attributeValues,
 	updateAttributes,
 } ) {
+	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const hrefKey = control.mapping.href;
+	const relKey = control.mapping.rel;
+	const targetKey = control.mapping.target;
+	const destinationKey = control.mapping.destination;
+
+	const href = attributeValues[ hrefKey ];
+	const rel = attributeValues[ relKey ];
+	const target = attributeValues[ targetKey ];
+	const destination = attributeValues[ destinationKey ];
+
+	const hrefDefaultValue =
+		blockType.attributes[ href ]?.defaultValue ?? undefined;
+	const relDefaultValue =
+		blockType.attributes[ rel ]?.defaultValue ?? undefined;
+	const targetDefaultValue =
+		blockType.attributes[ target ]?.defaultValue ?? undefined;
+	const destinationDefaultValue =
+		blockType.attributes[ destination ]?.defaultValue ?? undefined;
+
+	const opensInNewTab = target === NEW_TAB_TARGET;
+	const nofollow = rel === NOFOLLOW_REL;
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
+	const linkValue = useMemo(
+		() => ( { url: href, opensInNewTab, nofollow } ),
+		[ href, opensInNewTab, nofollow ]
+	);
+
 	return (
 		<ToolsPanelItem
 			panelId={ clientId }
 			label={ control.label }
-			hasValue={ () => false } // TODO.
+			hasValue={ () => !! href }
 			onDeselect={ () => {
-				// TODO.
+				updateAttributes( {
+					[ hrefKey ]: hrefDefaultValue,
+					[ relKey ]: relDefaultValue,
+					[ targetKey ]: targetDefaultValue,
+					[ destinationKey ]: destinationDefaultValue,
+				} );
 			} }
 			isShownByDefault={ control.shownByDefault }
 		>
-			Link
+			<div className="block-editor-content-only-controls__media">
+				<div
+					role="button"
+					tabIndex={ -1 }
+					onClick={ () => {
+						setIsLinkControlOpen( true );
+					} }
+					onKeyDown={ () => setIsLinkControlOpen( true ) }
+				>
+					<Grid
+						rowGap={ 0 }
+						columnGap={ 8 }
+						templateColumns="24px 1fr 24px"
+						className="block-editor-content-only-controls__media-row"
+					>
+						{ href && (
+							<>
+								<Icon icon={ link } size={ 24 } />
+								<span className="block-editor-content-only-controls__media-title">
+									{ href }
+								</span>
+							</>
+						) }
+						{ ! href && (
+							<>
+								<Icon
+									icon={ link }
+									size={ 24 }
+									style={ { opacity: 0.3 } }
+								/>
+								<span className="block-editor-content-only-controls__media-title">
+									{ __( 'Link' ) }
+								</span>
+							</>
+						) }
+						{ href && (
+							<>
+								<Button
+									size="small"
+									className="block-editor-content-only-controls__remove-button"
+									icon={ lineSolid }
+									onClick={ ( event ) => {
+										event.stopPropagation();
+										updateAttributes( {
+											[ hrefKey ]: hrefDefaultValue,
+											[ relKey ]: relDefaultValue,
+											[ targetKey ]: targetDefaultValue,
+											[ destinationKey ]:
+												destinationDefaultValue,
+										} );
+									} }
+								/>
+							</>
+						) }
+					</Grid>
+				</div>
+			</div>
+			{ isLinkControlOpen && (
+				<Popover
+					onClose={ () => {
+						setIsLinkControlOpen( false );
+					} }
+					{ ...( popoverProps ?? {} ) }
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( newValues ) => {
+							const updatedAttrs = getUpdatedLinkAttributes( {
+								rel,
+								...newValues,
+							} );
+
+							updateAttributes( {
+								[ hrefKey ]: updatedAttrs.url,
+								[ relKey ]: updatedAttrs.rel,
+								[ targetKey ]: updatedAttrs.linkTarget,
+							} );
+						} }
+						onRemove={ () => {
+							updateAttributes( {
+								[ hrefKey ]: hrefDefaultValue,
+								[ relKey ]: relDefaultValue,
+								[ targetKey ]: targetDefaultValue,
+								[ destinationKey ]: destinationDefaultValue,
+							} );
+						} }
+					/>
+				</Popover>
+			) }
 		</ToolsPanelItem>
 	);
 }

packages/block-editor/src/components/content-only-controls/use-inspector-popover-placement.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useViewportMatch } from '@wordpress/compose';
+
+export function useInspectorPopoverPlacement(
+	{ isControl } = { isControl: false }
+) {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: isControl ? 35 : 259,
+				},
+		  }
+		: {};
+}