@wordpress/block-editor 12.4.0 → 12.6.0

package/src/components/link-control/search-input.js

@@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
-			useLabel = false,
+			hideLabelFromVision = false,
 		},
 		ref
 	) => {
@@ -120,7 +120,7 @@ const LinkControlSearchInput = forwardRef(
 		};
 
 		const inputClasses = classnames( className, {
-			'has-no-label': ! useLabel,
+			// 'has-no-label': ! hideLabelFromVision,
 		} );
 
 		return (
@@ -128,7 +128,8 @@ const LinkControlSearchInput = forwardRef(
 				<URLInput
 					disableSuggestions={ currentLink?.url === value }
 					__nextHasNoMarginBottom
-					label={ useLabel ? 'URL' : undefined }
+					label={ __( 'Link' ) }
+					hideLabelFromVision={ hideLabelFromVision }
 					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }

package/src/components/link-control/search-item.js

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
-import { Button, TextHighlight } from '@wordpress/components';
+import { MenuItem, TextHighlight } from '@wordpress/components';
 import {
 	Icon,
 	globe,
@@ -19,6 +13,7 @@ import {
 	file,
 } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
 
 const ICONS_MAP = {
 	post: postList,
@@ -52,50 +47,33 @@ function SearchItemIcon( { isURL, suggestion } ) {
 export const LinkControlSearchItem = ( {
 	itemProps,
 	suggestion,
-	isSelected = false,
+	searchTerm,
 	onClick,
 	isURL = false,
-	searchTerm = '',
 	shouldShowType = false,
 } ) => {
+	const info = isURL
+		? __( 'Press ENTER to add this link' )
+		: filterURLForDisplay( safeDecodeURI( suggestion?.url ), 24 );
+
 	return (
-		<Button
+		<MenuItem
 			{ ...itemProps }
+			info={ info }
+			iconPosition="left"
+			icon={
+				<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
+			}
 			onClick={ onClick }
-			className={ classnames( 'block-editor-link-control__search-item', {
-				'is-selected': isSelected,
-				'is-url': isURL,
-				'is-entity': ! isURL,
-			} ) }
+			shortcut={ shouldShowType && getVisualTypeName( suggestion ) }
+			className="block-editor-link-control__search-item"
 		>
-			<SearchItemIcon suggestion={ suggestion } isURL={ isURL } />
-
-			<span className="block-editor-link-control__search-item-header">
-				<span className="block-editor-link-control__search-item-title">
-					<TextHighlight
-						// The component expects a plain text string.
-						text={ stripHTML( suggestion.title ) }
-						highlight={ searchTerm }
-					/>
-				</span>
-				<span
-					aria-hidden={ ! isURL }
-					className="block-editor-link-control__search-item-info"
-				>
-					{ ! isURL &&
-						( filterURLForDisplay(
-							safeDecodeURI( suggestion.url )
-						) ||
-							'' ) }
-					{ isURL && __( 'Press ENTER to add this link' ) }
-				</span>
-			</span>
-			{ shouldShowType && suggestion.type && (
-				<span className="block-editor-link-control__search-item-type">
-					{ getVisualTypeName( suggestion ) }
-				</span>
-			) }
-		</Button>
+			<TextHighlight
+				// The component expects a plain text string.
+				text={ stripHTML( suggestion.title ) }
+				highlight={ searchTerm }
+			/>
+		</MenuItem>
 	);
 };
 

package/src/components/link-control/search-results.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { VisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 
 /**
  * External dependencies
@@ -72,59 +72,61 @@ export default function LinkControlSearchResults( {
 				className={ resultsListClasses }
 				aria-labelledby={ searchResultsLabelId }
 			>
-				{ suggestions.map( ( suggestion, index ) => {
-					if (
-						shouldShowCreateSuggestion &&
-						CREATE_TYPE === suggestion.type
-					) {
+				<MenuGroup>
+					{ suggestions.map( ( suggestion, index ) => {
+						if (
+							shouldShowCreateSuggestion &&
+							CREATE_TYPE === suggestion.type
+						) {
+							return (
+								<LinkControlSearchCreate
+									searchTerm={ currentInputValue }
+									buttonText={ createSuggestionButtonText }
+									onClick={ () =>
+										handleSuggestionClick( suggestion )
+									}
+									// Intentionally only using `type` here as
+									// the constant is enough to uniquely
+									// identify the single "CREATE" suggestion.
+									key={ suggestion.type }
+									itemProps={ buildSuggestionItemProps(
+										suggestion,
+										index
+									) }
+									isSelected={ index === selectedSuggestion }
+								/>
+							);
+						}
+
+						// If we're not handling "Create" suggestions above then
+						// we don't want them in the main results so exit early.
+						if ( CREATE_TYPE === suggestion.type ) {
+							return null;
+						}
+
 						return (
-							<LinkControlSearchCreate
-								searchTerm={ currentInputValue }
-								buttonText={ createSuggestionButtonText }
-								onClick={ () =>
-									handleSuggestionClick( suggestion )
-								}
-								// Intentionally only using `type` here as
-								// the constant is enough to uniquely
-								// identify the single "CREATE" suggestion.
-								key={ suggestion.type }
+							<LinkControlSearchItem
+								key={ `${ suggestion.id }-${ suggestion.type }` }
 								itemProps={ buildSuggestionItemProps(
 									suggestion,
 									index
 								) }
+								suggestion={ suggestion }
+								index={ index }
+								onClick={ () => {
+									handleSuggestionClick( suggestion );
+								} }
 								isSelected={ index === selectedSuggestion }
+								isURL={ LINK_ENTRY_TYPES.includes(
+									suggestion.type
+								) }
+								searchTerm={ currentInputValue }
+								shouldShowType={ shouldShowSuggestionsTypes }
+								isFrontPage={ suggestion?.isFrontPage }
 							/>
 						);
-					}
-
-					// If we're not handling "Create" suggestions above then
-					// we don't want them in the main results so exit early.
-					if ( CREATE_TYPE === suggestion.type ) {
-						return null;
-					}
-
-					return (
-						<LinkControlSearchItem
-							key={ `${ suggestion.id }-${ suggestion.type }` }
-							itemProps={ buildSuggestionItemProps(
-								suggestion,
-								index
-							) }
-							suggestion={ suggestion }
-							index={ index }
-							onClick={ () => {
-								handleSuggestionClick( suggestion );
-							} }
-							isSelected={ index === selectedSuggestion }
-							isURL={ LINK_ENTRY_TYPES.includes(
-								suggestion.type
-							) }
-							searchTerm={ currentInputValue }
-							shouldShowType={ shouldShowSuggestionsTypes }
-							isFrontPage={ suggestion?.isFrontPage }
-						/>
-					);
-				} ) }
+					} ) }
+				</MenuGroup>
 			</div>
 		</div>
 	);

package/src/components/link-control/settings-drawer.js

@@ -6,9 +6,9 @@ import {
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
-import { settings as settingsIcon } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
 import { useReducedMotion, useInstanceId } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { _x, isRTL } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
 function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
@@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 				className="block-editor-link-control__drawer-toggle"
 				aria-expanded={ settingsOpen }
 				onClick={ () => setSettingsOpen( ! settingsOpen ) }
-				icon={ settingsIcon }
-				label={ __( 'Link Settings' ) }
+				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
 				aria-controls={ settingsDrawerId }
-			/>
+			>
+				{ _x( 'Advanced', 'Additional link settings' ) }
+			</Button>
 			<MaybeAnimatePresence>
 				{ settingsOpen && (
 					<MaybeMotionDiv

package/src/components/link-control/style.scss

@@ -41,6 +41,7 @@ $preview-image-height: 140px;
 // Provides positioning context for reset button. Without this then when an
 // error notice is displayed the input's reset button is incorrectly positioned.
 .block-editor-link-control__search-input-wrapper {
+	margin-bottom: $grid-unit-10;
 	position: relative;
 }
 
@@ -59,29 +60,18 @@ $preview-image-height: 140px;
 .block-editor-link-control__field {
 	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
 
-	// Element wrapping the label and input.
-	> .components-base-control__field {
-		display: flex;
-		align-items: center;
-	}
-
-	.components-base-control__label {
-		margin-right: $grid-unit-20;
-		margin-bottom: 0;
-		min-width: 29px; // align with search results.
-	}
-
 	input[type="text"],
 	// Specificity overide of URLInput defaults.
 	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
-		width: calc(100% - #{$grid-unit-20 * 2});
 		display: block;
-		padding: 11px $grid-unit-20;
+		border: 1px solid $gray-600;
+		border-radius: $radius-block-ui;
+		height: $button-size-next-default-40px; // components do not properly support unstable-large yet.
 		margin: 0;
+		padding: $grid-unit-10 $grid-unit-20;
 		position: relative;
-		border: 1px solid $gray-300;
-		border-radius: $radius-block-ui;
+		width: 100%;
 	}
 }
 
@@ -94,12 +84,12 @@ $preview-image-height: 140px;
 	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
 	justify-content: flex-start;
 	gap: $grid-unit-10;
+	padding: $grid-unit-10;
 	order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
 	position: relative;
-	margin-top: -$grid-unit-20 + 1px;
 
 	&::before,
 	&::after {
@@ -126,8 +116,8 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-results {
-	margin: 0;
-	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
+	margin-top: -$grid-unit-20;
+	padding: $grid-unit-10;
 	max-height: 200px;
 	overflow-y: auto; // allow results list to scroll
 
@@ -137,39 +127,35 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-item {
-	position: relative;
-	display: flex;
-	align-items: flex-start; // when link text is very long it is important this indicator remains visible and thus should be aligned top.
-	font-size: $default-font-size;
-	cursor: pointer;
-	background: $white;
-	width: 100%;
-	border: none;
-	text-align: left;
-	padding: $grid-unit-15 $grid-unit-20;
-	border-radius: 2px;
-	height: auto;
 
-	&:hover,
-	&:focus {
-		background-color: $gray-100;
+	&.components-button.components-menu-item__button {
+		height: auto;
+		text-align: left;
+	}
 
-		.block-editor-link-control__search-item-type {
-			background: $white;
+	.components-menu-item__item {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		// Inline block required to preserve white space
+		// between `<mark>` elements and text nodes.
+		display: inline-block;
+		width: 100%;
+
+		mark {
+			font-weight: 600;
+			color: inherit;
+			background-color: transparent;
 		}
 	}
 
-	// The added specificity is needed to override.
-	&:focus:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+	.components-menu-item__shortcut {
+		color: $gray-700;
+		text-transform: capitalize;
+		white-space: nowrap; // tags shouldn't go over two lines.
 	}
 
-	&.is-selected {
+	&[aria-selected] {
 		background: $gray-100;
-
-		.block-editor-link-control__search-item-type {
-			background: $white;
-		}
 	}
 
 	&.is-current {
@@ -209,7 +195,6 @@ $preview-image-height: 140px;
 
 	.block-editor-link-control__search-item-icon {
 		position: relative;
-		top: 0.2em;
 		margin-right: $grid-unit-10;
 		max-height: 24px;
 		flex-shrink: 0;
@@ -228,18 +213,6 @@ $preview-image-height: 140px;
 		max-height: 32px;
 	}
 
-	.block-editor-link-control__search-item-info,
-	.block-editor-link-control__search-item-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		.components-external-link__icon {
-			position: absolute;
-			right: 0;
-			margin-top: 0;
-		}
-	}
-
 	.block-editor-link-control__search-item-title {
 		display: block;
 		margin-bottom: 0.2em;
@@ -247,7 +220,7 @@ $preview-image-height: 140px;
 		position: relative;
 
 		mark {
-			font-weight: 700;
+			font-weight: 600;
 			color: inherit;
 			background-color: transparent;
 		}
@@ -261,28 +234,6 @@ $preview-image-height: 140px;
 		}
 	}
 
-	.block-editor-link-control__search-item-info {
-		display: block;
-		color: $gray-700;
-		font-size: 0.9em;
-		line-height: 1.3;
-	}
-
-	.block-editor-link-control__search-item-error-notice {
-		font-style: italic;
-		font-size: 1.1em;
-	}
-
-	.block-editor-link-control__search-item-type {
-		display: block;
-		padding: 3px 6px;
-		margin-left: auto;
-		font-size: 0.9em;
-		background-color: $gray-100;
-		border-radius: 2px;
-		white-space: nowrap; // tags shouldn't go over two lines.
-	}
-
 	.block-editor-link-control__search-item-description {
 		padding-top: 12px;
 		margin: 0;
@@ -422,11 +373,6 @@ $preview-image-height: 140px;
 	}
 }
 
-// Specificity override
-.block-editor-link-control__search-results div[role="menu"] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
-	padding: 10px;
-}
-
 .block-editor-link-control__drawer {
 	display: flex; // allow for ordering.
 	order: 30;
@@ -440,36 +386,7 @@ $preview-image-height: 140px;
 	display: flex; // allow for ordering.
 	flex-direction: column;
 	flex-basis: 100%; // occupy full width.
-	margin-top: $grid-unit-20;
-	padding-top: $grid-unit-20;
 	position: relative;
-
-	&::after {
-		content: "";
-		display: block;
-		height: 1px;
-		background-color: $gray-300;
-		position: absolute;
-		left: -$grid-unit-20;
-		right: -$grid-unit-20;
-		top: 0;
-	}
-}
-
-.block-editor-link-control__tools {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	margin: 0;
-	padding: $grid-unit-20;
-
-	// To hide the horizontal scrollbar on toggle.
-	// Margin and padding are needed to prevent cutoff of the toggle button focus outline.
-	// See: https://github.com/WordPress/gutenberg/pull/47986
-	margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-	padding-top: var(--wp-admin-border-width-focus);
-	overflow: hidden;
 }
 
 .block-editor-link-control__unlink {
@@ -477,17 +394,10 @@ $preview-image-height: 140px;
 	padding-right: $grid-unit-20;
 }
 
-.block-editor-link-control__settings {
-	flex: 1;
-	margin: 0;
-
-	.is-alternate & {
-		border-top: $border-width solid $gray-900;
-	}
-}
-
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
+	flex: 1;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
 
 	// Cancel left margin inherited from WP Admin Forms CSS.
 	input {
@@ -499,6 +409,31 @@ $preview-image-height: 140px;
 	}
 }
 
+.block-editor-link-control__tools {
+	padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10;
+	margin-top: #{$grid-unit-20 * -1};
+
+	.components-button.block-editor-link-control__drawer-toggle {
+		padding-left: 0;
+		gap: 0;
+
+		// Point downwards when open (same as list view expander)
+		&[aria-expanded="true"] svg {
+			visibility: visible;
+			transition: transform 0.1s ease;
+			transform: rotate(90deg);
+			@include reduce-motion("transition");
+		}
+		// Point rightwards when closed (same as list view expander)
+		&[aria-expanded="false"] svg {
+			visibility: visible;
+			transform: rotate(0deg);
+			transition: transform 0.1s ease;
+			@include reduce-motion("transition");
+		}
+	}
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
 	display: block;