newspack-components 4.2.0 → 4.3.0

package/shared/hooks/use-custom-byline.test.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useCustomByline, extractAuthorIdsFromByline } from './use-custom-byline';
+
+jest.mock( '@wordpress/data', () => ( {
+	useSelect: jest.fn(),
+} ) );
+
+jest.mock( '@wordpress/core-data', () => ( {
+	store: 'core',
+} ) );
+
+describe( 'useCustomByline', () => {
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return inactive byline when meta is not set', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( '' );
+	} );
+
+	it( 'should return inactive byline when meta exists but byline is inactive', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {
+					meta: {
+						_newspack_byline_active: false,
+						_newspack_byline: 'Some content',
+					},
+				} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( 'Some content' );
+	} );
+
+	it( 'should return active byline with content', () => {
+		const bylineContent = 'By [Author id=5]Jane Doe[/Author]';
+
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => ( {
+					meta: {
+						_newspack_byline_active: true,
+						_newspack_byline: bylineContent,
+					},
+				} ),
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( true );
+		expect( result.current.bylineContent ).toBe( bylineContent );
+	} );
+
+	it( 'should handle null post record gracefully', () => {
+		useSelect.mockImplementation( callback =>
+			callback( () => ( {
+				getEditedEntityRecord: () => null,
+			} ) )
+		);
+
+		const { result } = renderHook( () => useCustomByline( 123, 'post' ) );
+
+		expect( result.current.bylineActive ).toBe( false );
+		expect( result.current.bylineContent ).toBe( '' );
+	} );
+} );
+
+describe( 'extractAuthorIdsFromByline', () => {
+	it( 'should return empty array for empty content', () => {
+		expect( extractAuthorIdsFromByline( '' ) ).toEqual( [] );
+		expect( extractAuthorIdsFromByline( null ) ).toEqual( [] );
+		expect( extractAuthorIdsFromByline( undefined ) ).toEqual( [] );
+	} );
+
+	it( 'should extract single author ID', () => {
+		const byline = 'By [Author id=5]Jane Doe[/Author]';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 5 ] );
+	} );
+
+	it( 'should extract multiple author IDs', () => {
+		const byline = 'By [Author id=5]Jane Doe[/Author] and [Author id=12]John Smith[/Author]';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 5, 12 ] );
+	} );
+
+	it( 'should handle content with no author shortcodes', () => {
+		const byline = 'By Some Random Text';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [] );
+	} );
+
+	it( 'should handle byline with HTML entities', () => {
+		const byline = 'By [Author id=17]Darth Vader[/Author] with love';
+		expect( extractAuthorIdsFromByline( byline ) ).toEqual( [ 17 ] );
+	} );
+
+	it( 'should return integers, not strings', () => {
+		const byline = '[Author id=123]Test[/Author]';
+		const result = extractAuthorIdsFromByline( byline );
+		expect( result ).toEqual( [ 123 ] );
+		expect( typeof result[ 0 ] ).toBe( 'number' );
+	} );
+
+	it( 'should tolerate whitespace and case variations in shortcode', () => {
+		expect( extractAuthorIdsFromByline( '[author id=7]Name[/Author]' ) ).toEqual( [ 7 ] );
+		expect( extractAuthorIdsFromByline( '[Author  id = 5]Name[/Author]' ) ).toEqual( [ 5 ] );
+		expect( extractAuthorIdsFromByline( '[AUTHOR ID=3]Name[/Author]' ) ).toEqual( [ 3 ] );
+	} );
+} );

package/shared/scss/_mixins.scss

@@ -10,3 +10,49 @@
 	position: absolute !important;
 	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
 }
+
+// Circular social button style
+// Used by: author-profile-social, author-social-link blocks
+// Hex fallbacks from newspack-block-theme theme.json defaults.
+@mixin socialButton {
+	background: var(--wp--preset--color--base-2, #f0f0f0);
+	border-radius: 50%; // Circular
+	color: var(--wp--preset--color--contrast, #1e1e1e);
+	display: grid;
+	place-items: center;
+	text-decoration: none;
+	transition: background 125ms ease-in-out, color 125ms ease-in-out;
+
+	// Sizing - makes circular by using equal width/height
+	// --icon-size controls the circle diameter (e.g., 36px)
+	// Icon inside is 2/3 of circle size (e.g., 24px icon in 36px circle)
+	aspect-ratio: 1;
+	width: calc(var(--icon-size, 24px) * 1.5);
+	height: calc(var(--icon-size, 24px) * 1.5);
+	padding: 0;
+
+	&:hover {
+		background: var(--wp--preset--color--base-3, #ddd);
+		color: var(--wp--preset--color--contrast, #1e1e1e);
+		text-decoration: none;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: 2px solid;
+		outline-offset: 1px;
+	}
+
+	// SVG icon sizing - icon is 2/3 of button size
+	// If button is 36px, icon is 24px (24/36 = 2/3)
+	svg,
+	span {
+		display: block;
+		fill: currentcolor;
+		width: var(--icon-size, 24px);
+		height: var(--icon-size, 24px);
+	}
+}

package/src/action-card/action-card.d.ts

@@ -6,6 +6,7 @@ export interface ActionCardProps {
 	description?: string | React.ReactNode;
 	actionText?: React.ReactNode | string | null;
 	badge?: string;
+	badgeLevel?: 'success' | 'info' | 'warning' | 'error';
 	className?: string;
 	indent?: string;
 	notification?: string | Error | null;
@@ -13,8 +14,10 @@ export interface ActionCardProps {
 	isMedium?: boolean;
 	disabled?: boolean | string;
 	hasGreyHeader?: boolean;
+	heading?: number;
 	toggleChecked?: boolean;
-	toggleOnChange?: ( a: boolean ) => void;
+	toggleOnChange?: (a: boolean) => void;
+	togglePosition?: 'leading' | 'trailing';
 	actionContent?: boolean | React.ReactNode | null;
 	error?: Error | string | null;
 	handoff?: string | null;
@@ -33,8 +36,9 @@ export interface ActionCardProps {
 	noMargin?: boolean;
 	collapse?: boolean;
 	expandable?: boolean;
+	isExpanded?: boolean;
 	draggable?: boolean;
 	dragIndex?: number;
-	onDragCallback?: ( index: number ) => void;
-	dragWrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+	onDragCallback?: (index: number) => void;
+	dragWrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
 }

package/src/action-card/index.js

@@ -29,13 +29,14 @@ import classnames from 'classnames';
  */
 const ActionCard = ( {
 	badge,
-	badgeLevel = 'info',
+	badgeLevel,
 	className,
 	checkbox,
 	children,
 	collapse,
 	disabled,
 	title,
+	heading = 2,
 	description,
 	handoff,
 	editLink,
@@ -60,11 +61,13 @@ const ActionCard = ( {
 	titleLink,
 	toggleChecked = false,
 	toggleOnChange,
+	togglePosition = 'leading',
 	hasGreyHeader,
 	hasWhiteHeader,
 	noBorder,
 	isPending,
 	expandable = false,
+	isExpanded,
 	isButtonEnabled = false,
 	// Draggable props. All are required to enable drag sorting.
 	draggable = false,
@@ -72,11 +75,17 @@ const ActionCard = ( {
 	dragWrapperRef,
 	onDragCallback,
 } ) => {
-	const [ expanded, setExpanded ] = useState( false );
+	const [ expanded, setExpanded ] = useState( Boolean( isExpanded ) );
 	const [ dragging, setDragging ] = useState( false );
 	const [ targetIndex, setTargetIndex ] = useState( null );
 	const [ dragRef, setDragRef ] = useState( null );
 
+	useEffect( () => {
+		if ( typeof isExpanded === 'boolean' ) {
+			setExpanded( isExpanded );
+		}
+	}, [ isExpanded ] );
+
 	useEffect( () => {
 		if ( dragWrapperRef && ! dragRef ) {
 			setDragRef( dragWrapperRef );
@@ -109,14 +118,18 @@ const ActionCard = ( {
 		return url ? { backgroundImage: `url(${ url })` } : {};
 	};
 	const titleProps = toggleOnChange && ! titleLink && ! disabled ? { onClick: () => toggleOnChange( ! toggleChecked ), tabIndex: '0' } : {};
+	const togglePositionClass = togglePosition === 'trailing' ? 'is-toggle-trailing' : 'is-toggle-leading';
 	const hasInternalLink = href && href.indexOf( 'http' ) !== 0;
 	const isDisplayingSecondaryAction = secondaryActionText && onSecondaryActionClick;
 	const badges = ! Array.isArray( badge ) && badge ? [ badge ] : badge;
+	const HeadingTag = `h${ heading }`;
 
-	const Component = () => (
+	const cardContent = (
 		<>
 			<div className="newspack-action-card__region newspack-action-card__region-top">
-				{ toggleOnChange && <ToggleControl checked={ toggleChecked } onChange={ toggleOnChange } disabled={ disabled } /> }
+				{ toggleOnChange && (
+					<ToggleControl checked={ toggleChecked } onChange={ toggleOnChange } disabled={ disabled } className={ togglePositionClass } />
+				) }
 				{ image && ! toggleOnChange && (
 					<div className="newspack-action-card__region newspack-action-card__region-left">
 						<a href={ imageLink }>
@@ -140,7 +153,7 @@ const ActionCard = ( {
 				) }
 				<div className="newspack-action-card__region newspack-action-card__region-center">
 					<Grid columns={ 1 } gutter={ 8 } noMargin>
-						<h2>
+						<HeadingTag>
 							<span className="newspack-action-card__title" { ...titleProps }>
 								{ titleLink && <a href={ titleLink }>{ title }</a> }
 								{ ! titleLink && expandable && (
@@ -159,7 +172,7 @@ const ActionCard = ( {
 										{ badgeText }
 									</span>
 								) ) }
-						</h2>
+						</HeadingTag>
 						{ description && (
 							<p>
 								{ typeof description === 'string' && description }
@@ -224,9 +237,9 @@ const ActionCard = ( {
 					{ 'warning' === notificationLevel && <Notice noticeText={ notification } isWarning rawHTML={ notificationHTML } /> }
 				</div>
 			) }
-			{ children && ( ( expandable && expanded ) || ! expandable ) && (
+			{ children && ( ( expandable && expanded ) || ! expandable ) ? (
 				<div className="newspack-action-card__region-children">{ children }</div>
-			) }
+			) : null }
 		</>
 	);
 
@@ -289,7 +302,7 @@ const ActionCard = ( {
 						<Card className={ classes } onClick={ simple && onClick } id={ id ?? null } noBorder={ noBorder }>
 							<div className="newspack-action-card__draggable-controls">
 								<div className="drag-handle" draggable onDragStart={ onDraggableStart } onDragEnd={ onDraggableEnd }>
-									<Icon icon={ dragHandle } height={ 18 } width={ 18 } />
+									<Icon icon={ dragHandle } />
 								</div>
 								<div className="movers">
 									<Button
@@ -306,7 +319,7 @@ const ActionCard = ( {
 									/>
 								</div>
 							</div>
-							<Component />
+							{ cardContent }
 						</Card>
 					) }
 				</Draggable>
@@ -316,7 +329,7 @@ const ActionCard = ( {
 
 	return (
 		<Card className={ classes } onClick={ simple && onClick } id={ id ?? null } noBorder={ noBorder }>
-			<Component />
+			{ cardContent }
 		</Card>
 	);
 };

package/src/action-card/style.scss

@@ -260,6 +260,16 @@
 			@media screen and (min-width: 744px) {
 				margin-bottom: 0;
 				margin-right: 24px;
+
+				&.is-toggle-trailing {
+					margin-left: 24px;
+					margin-right: 0;
+					order: 999;
+				}
+			}
+
+			label {
+				display: none;
 			}
 
 			.components-base-control__field {
@@ -433,13 +443,21 @@
 			text-decoration: inherit;
 		}
 
-		.newspack-action-card__region-children {
-			border-top: 1px solid wp-colors.$gray-100;
+		> .newspack-action-card__region-children {
+			border-top: 1px solid wp-colors.$gray-300;
 			padding-top: 24px;
 
 			+ .newspack-action-card__region-children {
 				border-top: none;
 			}
+
+			> * + * {
+				margin-top: 24px !important;
+			}
+
+			.newspack-action-card__region-children:has(> div:not(:empty)) {
+				margin-top: 16px;
+			}
 		}
 
 		&.is-medium .newspack-action-card__region-children {
@@ -469,6 +487,11 @@
 			margin-left: 8px;
 		}
 	}
+
+	hr:not(.newspack-divider) {
+		background: wp-colors.$gray-100;
+		margin: 0;
+	}
 }
 
 .newspack-card {

package/src/autocomplete-tokenfield/index.js

@@ -120,7 +120,7 @@ class AutocompleteTokenField extends Component {
 				Object.keys( validValues ).forEach( key => {
 					if ( validValues[ key ] === label ) {
 						// Preserve numeric or string type of values. Object.keys will convert numbers to strings.
-						const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+						const value = /^\d+$/.test( key.toString() ) ? parseInt( key ) : key.toString();
 						acc.push( { value, label } );
 					}
 				} );
@@ -131,7 +131,7 @@ class AutocompleteTokenField extends Component {
 
 		return labels.map( label =>
 			Object.keys( validValues )
-				.map( key => ( isNaN( parseInt( key ) ) ? key.toString() : parseInt( key ) ) )
+				.map( key => ( /^\d+$/.test( key.toString() ) ? parseInt( key ) : key.toString() ) )
 				.find( key => validValues[ key ] === label )
 		);
 	}

package/src/autocomplete-with-latest-posts/index.js

@@ -0,0 +1,290 @@
+/**
+ * External dependencies
+ */
+import debounce from 'lodash/debounce';
+
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { Button, CheckboxControl, FormTokenField, Spinner } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+import './style.scss';
+
+const AutocompleteWithLatestPosts = ( {
+	fetchSuggestions = false, // If passed, will use this function to fetch suggestions data.
+	help = __( 'Begin typing search term, click autocomplete result to select.', 'newspack-plugin' ),
+	hideHelp = true, // If true, all help text will be hidden.
+	hideFormTokenHelp = true, // If true, hides FormTokenField's built-in help text.
+	label = __( 'Search', 'newspack-plugin' ),
+	maxItemsToSuggest = 0, // If passed, will be used to determine "load more" state. Necessary if you want "load more" functionality when using a custom `fetchSuggestions` function.
+	multiSelect = false, // If true, component can select multiple values at once.
+	onChange = false, // Function to call when selections change.
+	selectedItems = [], // Array of saved items.
+	suggestionsToFetch = 20, // Number of suggestions to fetch per query.
+} ) => {
+	const [ isLoading, setIsLoading ] = useState( true );
+	const [ isLoadingMore, setIsLoadingMore ] = useState( false );
+	const [ suggestions, setSuggestions ] = useState( [] );
+	const [ maxSuggestions, setMaxSuggestions ] = useState( 0 );
+	const [ searchSuggestions, setSearchSuggestions ] = useState( [] );
+	const [ validValues, setValidValues ] = useState( {} );
+	const [ isSearching, setIsSearching ] = useState( false );
+	// Leaving this in here so we can expand to use different post types in the future; right now it defaults to 'post'.
+	const postTypeToSearch = 'post';
+	const classNames = [ 'newspack-autocomplete-with-latest-posts' ];
+
+	if ( hideFormTokenHelp ) {
+		classNames.push( 'hide-form-token-help' );
+	}
+
+	if ( hideHelp ) {
+		classNames.push( 'hide-help' );
+	}
+
+	/**
+	 * Debounced function to update search suggestions.
+	 */
+	const debouncedUpdateSuggestions = debounce( input => {
+		if ( ! input || input.length < 2 ) {
+			setSearchSuggestions( [] );
+			setIsSearching( false );
+			return;
+		}
+
+		setIsSearching( true );
+		handleFetchSuggestions( input, 0, postTypeToSearch )
+			.then( _suggestions => {
+				setSearchSuggestions( _suggestions );
+				// Update valid values for token conversion
+				const newValidValues = { ...validValues };
+				_suggestions.forEach( suggestion => {
+					newValidValues[ suggestion.value ] = suggestion.label;
+				} );
+				setValidValues( newValidValues );
+			} )
+			.finally( () => setIsSearching( false ) );
+	}, 500 );
+
+	/**
+	 * Fetch recent posts to show as suggestions.
+	 */
+	useEffect( () => {
+		setIsLoading( true );
+		handleFetchSuggestions( null, 0, postTypeToSearch )
+			.then( _suggestions => {
+				if ( 0 < _suggestions.length ) {
+					setSuggestions( _suggestions );
+					// Update valid values for token conversion
+					const newValidValues = { ...validValues };
+					_suggestions.forEach( suggestion => {
+						newValidValues[ suggestion.value ] = suggestion.label;
+					} );
+					setValidValues( newValidValues );
+				}
+			} )
+			.finally( () => setIsLoading( false ) );
+	}, [] );
+
+	/**
+	 * Fetch more suggestions.
+	 */
+	useEffect( () => {
+		if ( isLoadingMore ) {
+			handleFetchSuggestions( null, suggestions.length, postTypeToSearch )
+				.then( _suggestions => {
+					if ( 0 < _suggestions.length ) {
+						setSuggestions( suggestions.concat( _suggestions ) );
+					}
+				} )
+				.finally( () => setIsLoadingMore( false ) );
+		}
+	}, [ isLoadingMore ] );
+
+	/**
+	 * If passed a `fetchSuggestions` prop, use that, otherwise, build it based on the selected post type.
+	 */
+	const handleFetchSuggestions = fetchSuggestions
+		? fetchSuggestions
+		: async ( search = null, offset = 0, searchSlug = null ) => {
+				const postTypeSlug = searchSlug || postTypeToSearch;
+				const endpoint =
+					'post' === postTypeSlug || 'page' === postTypeSlug
+						? postTypeSlug + 's' // Default post type endpoints are plural.
+						: postTypeSlug; // Custom post type endpoints are singular.
+				const response = await apiFetch( {
+					parse: false,
+					path: addQueryArgs( '/wp/v2/' + endpoint, {
+						search,
+						offset,
+						per_page: suggestionsToFetch,
+						_fields: 'id,title',
+					} ),
+				} );
+
+				const total = parseInt( response.headers.get( 'x-wp-total' ) || 0 );
+				const posts = await response.json();
+
+				setMaxSuggestions( total );
+
+				// Format suggestions for FormTokenField display.
+				return posts.reduce( ( acc, post ) => {
+					acc.push( {
+						value: parseInt( post.id ),
+						label: decodeEntities( post?.title.rendered ) || __( '(no title)', 'newspack-plugin' ),
+					} );
+
+					return acc;
+				}, [] );
+		  };
+
+	/**
+	 * Get labels for token values.
+	 */
+	const getLabelsForValues = values => {
+		return values.reduce( ( accumulator, value ) => {
+			if ( ! value ) {
+				return accumulator;
+			}
+			if ( value.label ) {
+				return [ ...accumulator, value.label ];
+			}
+			return validValues[ value ] ? [ ...accumulator, validValues[ value ] ] : accumulator;
+		}, [] );
+	};
+
+	/**
+	 * Get values for token labels.
+	 */
+	const getValuesForLabels = labels => {
+		// eslint-disable-next-line @typescript-eslint/no-shadow
+		return labels.reduce( ( acc, label ) => {
+			Object.keys( validValues ).forEach( key => {
+				if ( validValues[ key ] === label ) {
+					const value = isNaN( parseInt( key ) ) ? key.toString() : parseInt( key );
+					acc.push( { value, label } );
+				}
+			} );
+			return acc;
+		}, [] );
+	};
+
+	/**
+	 * Handle FormTokenField onChange.
+	 */
+	const handleTokenChange = tokenStrings => {
+		const newSelections = getValuesForLabels( tokenStrings );
+
+		// If only allowing one selection, just return the one selected item.
+		if ( ! multiSelect ) {
+			const newSelection = newSelections[ newSelections.length - 1 ]; // Get the last selected item
+			if ( newSelection ) {
+				return onChange( [ { ...newSelection, postType: postTypeToSearch } ] );
+			}
+			return onChange( [] );
+		}
+
+		// For multi-select, include currently selected post type in selection results.
+		onChange( newSelections.map( selection => ( { ...selection, postType: postTypeToSearch } ) ) );
+	};
+
+	/**
+	 * Get tokens for FormTokenField.
+	 */
+	const getTokens = () => {
+		return getLabelsForValues( selectedItems );
+	};
+
+	/**
+	 * Render a single suggestion object that can be clicked to select it immediately.
+	 *
+	 * @param {Object} suggestion Suggestion object with value and label keys.
+	 */
+	const renderSuggestion = suggestion => {
+		if ( multiSelect ) {
+			const isSelected = !! selectedItems.find(
+				_selection => parseInt( _selection.value ) === parseInt( suggestion.value ) && _selection.label === suggestion.label
+			);
+			return (
+				<CheckboxControl
+					key={ suggestion.value }
+					checked={ isSelected }
+					onChange={ () => {
+						// For multi-select, we need to toggle the selection
+						const currentTokens = getTokens();
+						const suggestionLabel = suggestion.label;
+
+						if ( isSelected ) {
+							// Remove the suggestion
+							const newTokens = currentTokens.filter( token => token !== suggestionLabel );
+							handleTokenChange( newTokens );
+						} else {
+							// Add the suggestion
+							handleTokenChange( [ ...currentTokens, suggestionLabel ] );
+						}
+					} }
+					label={ suggestion.label }
+				/>
+			);
+		}
+		return (
+			<Button isLink key={ suggestion.value } onClick={ () => handleTokenChange( [ ...getTokens(), suggestion.label ] ) }>
+				{ suggestion.label }
+			</Button>
+		);
+	};
+
+	/**
+	 * Render a list of suggestions that can be clicked to select instead of searching by title.
+	 */
+	const renderSuggestions = () => {
+		if ( 0 === suggestions.length ) {
+			return null;
+		}
+
+		const className = multiSelect
+			? 'newspack-autocomplete-with-latest-posts__search-suggestions-multiselect'
+			: 'newspack-autocomplete-with-latest-posts__search-suggestions';
+
+		return (
+			<>
+				<div className="newspack-autocomplete-with-latest-posts__search-suggestions-container">
+					<p className="newspack-autocomplete-with-suggestions__label">{ __( 'Latest Posts', 'newspack-plugin' ) }</p>
+					<div className={ className }>
+						{ suggestions.map( renderSuggestion ) }
+						{ suggestions.length < ( maxItemsToSuggest || maxSuggestions ) && (
+							<Button disabled={ isLoadingMore } isSecondary onClick={ () => setIsLoadingMore( true ) }>
+								{ isLoadingMore ? __( 'Loading…', 'newspack-plugin' ) : __( 'Load more', 'newspack-plugin' ) }
+							</Button>
+						) }
+					</div>
+				</div>
+			</>
+		);
+	};
+
+	return (
+		<div className={ classNames.join( ' ' ) }>
+			<div className="newspack-autocomplete-with-latest-posts__input-container">
+				<FormTokenField
+					value={ getTokens() }
+					suggestions={ searchSuggestions.map( suggestion => suggestion.label ) }
+					onChange={ handleTokenChange }
+					onInputChange={ debouncedUpdateSuggestions }
+					label={ label }
+					help={ ! hideHelp && help }
+					__next40pxDefaultSize={ true }
+					__nextHasNoMarginBottom={ true }
+				/>
+				{ ( isLoading || isSearching ) && <Spinner /> }
+			</div>
+			{ renderSuggestions() }
+		</div>
+	);
+};
+
+export default AutocompleteWithLatestPosts;