Link Control: Add content and media filtering tabs

WordPress · Infinite-Null · Dec 31, 2024 · Jan 2, 2025 · Jan 2, 2025 · Dec 31, 2024
commit 775ac1342a44f6641f2f46b522705cf57a8dced9
@@ -142,6 +142,8 @@ function LinkControl( {
 	hasRichPreviews = false,
 	hasTextControl = false,
 	renderControlBottom = null,
+	tabs = [],
+	showTabs,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -422,6 +424,8 @@ function LinkControl( {
 									</InputControlSuffixWrapper>
 								)
 							}
+							tabs={ tabs }
+							showTabs={ showTabs }
 						/>
 					</div>
 					{ errorMessage && (

@@ -7,11 +7,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import deprecated from '@wordpress/deprecated';
 import { URLInput } from '../';
-import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
+import LinkControlSearchResults from './search-results';
 import useSearchHandler from './use-search-handler';
-import deprecated from '@wordpress/deprecated';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings
@@ -44,6 +44,8 @@ const LinkControlSearchInput = forwardRef(
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
 			suffix,
+			tabs = [],
+			showTabs = false,
 		},
 		ref
 	) => {
@@ -149,6 +151,9 @@ const LinkControlSearchInput = forwardRef(
 					} }
 					ref={ ref }
 					suffix={ suffix }
+					showTabs={ showTabs }
+					tabClassName="block-editor-tab-control__field"
+					tabs={ tabs }
 				/>
 				{ children }
 			</div>

@@ -66,7 +66,9 @@ $block-editor-link-control-number-of-actions: 1;
 }
 
 .block-editor-link-control__field {
-	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
+	margin-top: $grid-unit-20; // allow margin collapse for vertical spacing.
+	margin-left: $grid-unit-20;
+	margin-right: $grid-unit-20;
 
 	.components-base-control__label {
 		color: $gray-900;
@@ -120,6 +122,12 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 }
 
+.block-editor-tab-control__field {
+	margin-bottom: $grid-unit-20;
+	margin-left: $grid-unit-20;
+	margin-right: $grid-unit-20;
+}
+
 .block-editor-link-control__search-item {
 
 	&.components-button.components-menu-item__button {

@@ -127,12 +127,16 @@ export default function useSearchHandler(
 		: handleNoop;
 
 	return useCallback(
-		( val, { isInitialSuggestions } ) => {
+		( val, { isInitialSuggestions, type = 'post' } ) => {
 			return isURLLike( val )
 				? directEntryHandler( val, { isInitialSuggestions } )
 				: handleEntitySearch(
 						val,
-						{ ...suggestionsQuery, isInitialSuggestions },
+						{
+							...suggestionsQuery,
+							isInitialSuggestions,
+							type,
+						},
 						fetchSearchSuggestions,
 						withCreateSuggestion,
 						pageOnFront,

@@ -14,6 +14,7 @@ import {
 	Button,
 	__experimentalInputControl as InputControl,
 	Spinner,
+	TabPanel,
 	withSpokenMessages,
 	Popover,
 } from '@wordpress/components';
@@ -69,11 +70,12 @@ class URLInput extends Component {
 			selectedSuggestion: null,
 			suggestionsListboxId: '',
 			suggestionOptionIdPrefix: '',
+			selectedTab: 'post',
 		};
 	}
 
-	componentDidUpdate( prevProps ) {
-		const { showSuggestions, selectedSuggestion } = this.state;
+	componentDidUpdate( prevProps, prevState ) {
+		const { showSuggestions, selectedSuggestion, selectedTab } = this.state;
 		const { value, __experimentalShowInitialSuggestions = false } =
 			this.props;
 
@@ -91,11 +93,15 @@ class URLInput extends Component {
 			} );
 		}
 
+		if ( prevState.selectedTab !== selectedTab ) {
+			this.updateSuggestions( value, selectedTab );
+		}
+
 		// Update suggestions when the value changes.
 		if ( prevProps.value !== value && ! this.props.disableSuggestions ) {
 			if ( value?.length ) {
 				// If the new value is not empty we need to update with suggestions for it.
-				this.updateSuggestions( value );
+				this.updateSuggestions( value, selectedTab );
 			} else if ( __experimentalShowInitialSuggestions ) {
 				// If the new value is empty and we can show initial suggestions, then show initial suggestions.
 				this.updateSuggestions();
@@ -128,7 +134,7 @@ class URLInput extends Component {
 		);
 	}
 
-	updateSuggestions( value = '' ) {
+	updateSuggestions( value = '', selectedTab = null ) {
 		const {
 			__experimentalFetchLinkSuggestions: fetchLinkSuggestions,
 			__experimentalHandleURLSuggestions: handleURLSuggestions,
@@ -175,6 +181,7 @@ class URLInput extends Component {
 
 		const request = fetchLinkSuggestions( value, {
 			isInitialSuggestions,
+			type: selectedTab || 'post',
 		} );
 
 		request
@@ -409,11 +416,34 @@ class URLInput extends Component {
 		return (
 			<>
 				{ this.renderControl() }
+				{ this.renderTabPanel() }
 				{ this.renderSuggestions() }
 			</>
 		);
 	}
 
+	renderTabPanel() {
+		const { tabClassName, tabs = [], showTabs = false } = this.props;
+
+		if ( ! showTabs ) {
+			return null;
+		}
+
+		return (
+			<TabPanel
+				className={ tabClassName }
+				tabs={ tabs }
+				onSelect={ ( tabName ) => {
+					this.setState( {
+						selectedTab: tabName,
+					} );
+				} }
+			>
+				{ () => null }
+			</TabPanel>
+		);
+	}
+
 	renderControl() {
 		const {
 			label = null,

@@ -249,6 +249,17 @@ function InlineLinkUI( {
 		);
 	}
 
+	const tabs = [
+		{
+			name: 'post',
+			title: 'Content',
+		},
+		{
+			name: 'attachment',
+			title: 'Media',
+		},
+	];
+
 	return (
 		<Popover
 			anchor={ popoverAnchor }
@@ -262,6 +273,8 @@ function InlineLinkUI( {
 			constrainTabbing
 		>
 			<LinkControl
+				tabs={ tabs }
+				showTabs
 				value={ linkValue }
 				onChange={ onChangeLink }
 				onRemove={ removeLink }