@wordpress/block-library 7.8.0 → 7.11.0

package/src/search/style.scss

@@ -1,13 +1,6 @@
 .wp-block-search__button {
-	background: #f7f7f7;
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
-	color: #32373c;
 	margin-left: 0.625em;
 	word-break: normal;
-	font-size: inherit;
-	font-family: inherit;
-	line-height: inherit;
 
 	&.has-icon {
 		line-height: 0;
@@ -20,6 +13,13 @@
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for search buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-search__button) {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}
+
 .wp-block-search__inside-wrapper {
 	display: flex;
 	flex: auto;
@@ -62,7 +62,8 @@
 		}
 	}
 
-	.wp-block-search__button {
+	// For lower specificity.
+	:where(.wp-block-search__button) {
 		padding: 0.125em 0.5em;
 	}
 }

package/src/search/theme.scss

@@ -3,3 +3,8 @@
 		font-weight: bold;
 	}
 }
+
+.wp-block-search__button {
+	border: 1px solid #ccc;
+	padding: 0.375em 0.625em;
+}

package/src/site-logo/edit.js

@@ -358,7 +358,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
 	const {
@@ -420,13 +419,7 @@ export default function LogoEdit( {
 			site_icon: newValue ?? null,
 		} );
 
-	let alt = null;
-	if ( mediaItemData ) {
-		alt = mediaItemData.alt_text;
-		if ( logoUrl !== mediaItemData.source_url ) {
-			setLogoUrl( mediaItemData.source_url );
-		}
-	}
+	const { alt_text: alt, source_url: logoUrl } = mediaItemData ?? {};
 
 	const onInitialSelectLogo = ( media ) => {
 		// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no
@@ -452,7 +445,6 @@ export default function LogoEdit( {
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
 			setLogo( undefined );
-			setLogoUrl( media.url );
 			return;
 		}
 
@@ -461,7 +453,6 @@ export default function LogoEdit( {
 
 	const onRemoveLogo = () => {
 		setLogo( null );
-		setLogoUrl( undefined );
 		setAttributes( { width: undefined } );
 	};
 
@@ -542,7 +533,7 @@ export default function LogoEdit( {
 			{ !! logoUrl && logoImage }
 			{ ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
-					{ isLoading && (
+					{ !! isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>

package/src/site-title/edit/level-toolbar.js

@@ -21,6 +21,7 @@ export default function LevelControl( { level, onChange } ) {
 					  sprintf( __( 'Heading %d' ), currentLevel ),
 			isActive,
 			onClick: () => onChange( currentLevel ),
+			role: 'menuitemradio',
 		};
 	} );
 	return (

package/src/social-link/editor.scss

@@ -9,6 +9,9 @@
 		height: auto;
 		line-height: 0;
 
+		// This rule ensures social link buttons display correctly in template parts.
+		opacity: 1;
+
 		// This rule is duplicated from the style.scss and needs to be the same as there.
 		padding: 0.25em;
 	}

package/src/social-link/icons/index.js

@@ -37,6 +37,7 @@ export * from './twitch';
 export * from './twitter';
 export * from './vimeo';
 export * from './vk';
+export * from './whatsapp';
 export * from './wordpress';
 export * from './yelp';
 export * from './youtube';

package/src/social-link/icons/whatsapp.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const WhatsAppIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z" />
+	</SVG>
+);

package/src/social-link/index.php

@@ -27,6 +27,22 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		return '';
 	}
 
+	/**
+	 * Prepend emails with `mailto:` if not set.
+	 * The `is_email` returns false for emails with schema.
+	 */
+	if ( is_email( $url ) ) {
+		$url = 'mailto:' . $url;
+	}
+
+	/**
+	 * Prepend URL with https:// if it doesn't appear to contain a scheme
+	 * and it's not a relative link starting with //.
+	 */
+	if ( ! parse_url( $url, PHP_URL_SCHEME ) && ! str_starts_with( $url, '//' ) ) {
+		$url = 'https://' . $url;
+	}
+
 	$rel_target_attributes = '';
 	if ( $open_in_new_tab ) {
 		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
@@ -266,6 +282,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'WordPress',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>',
 		),
+		'whatsapp'      => array(
+			'name' => 'WhatsApp',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z"></path></svg>',
+		),
 		'yelp'          => array(
 			'name' => 'Yelp',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12.271,16.718v1.417q-.011,3.257-.067,3.4a.707.707,0,0,1-.569.446,4.637,4.637,0,0,1-2.024-.424A4.609,4.609,0,0,1,7.8,20.565a.844.844,0,0,1-.19-.4.692.692,0,0,1,.044-.29,3.181,3.181,0,0,1,.379-.524q.335-.412,2.019-2.409.011,0,.669-.781a.757.757,0,0,1,.44-.274.965.965,0,0,1,.552.039.945.945,0,0,1,.418.324.732.732,0,0,1,.139.468Zm-1.662-2.8a.783.783,0,0,1-.58.781l-1.339.435q-3.067.981-3.257.981a.711.711,0,0,1-.6-.4,2.636,2.636,0,0,1-.19-.836,9.134,9.134,0,0,1,.011-1.857,3.559,3.559,0,0,1,.335-1.389.659.659,0,0,1,.625-.357,22.629,22.629,0,0,1,2.253.859q.781.324,1.283.524l.937.379a.771.771,0,0,1,.4.34A.982.982,0,0,1,10.609,13.917Zm9.213,3.313a4.467,4.467,0,0,1-1.021,1.8,4.559,4.559,0,0,1-1.512,1.417.671.671,0,0,1-.7-.078q-.156-.112-2.052-3.2l-.524-.859a.761.761,0,0,1-.128-.513.957.957,0,0,1,.217-.513.774.774,0,0,1,.926-.29q.011.011,1.327.446,2.264.736,2.7.887a2.082,2.082,0,0,1,.524.229.673.673,0,0,1,.245.68Zm-7.5-7.049q.056,1.137-.6,1.361-.647.19-1.272-.792L6.237,4.08a.7.7,0,0,1,.212-.691,5.788,5.788,0,0,1,2.314-1,5.928,5.928,0,0,1,2.5-.352.681.681,0,0,1,.547.5q.034.2.245,3.407T12.327,10.181Zm7.384,1.2a.679.679,0,0,1-.29.658q-.167.112-3.67.959-.747.167-1.015.257l.011-.022a.769.769,0,0,1-.513-.044.914.914,0,0,1-.413-.357.786.786,0,0,1,0-.971q.011-.011.836-1.137,1.394-1.908,1.673-2.275a2.423,2.423,0,0,1,.379-.435A.7.7,0,0,1,17.435,8a4.482,4.482,0,0,1,1.372,1.489,4.81,4.81,0,0,1,.9,1.868v.034Z"></path></svg>',

package/src/social-link/socials-with-bg.scss

@@ -189,6 +189,11 @@
 	color: #fff;
 }
 
+.wp-social-link-whatsapp {
+	background-color: #25d366;
+	color: #fff;
+}
+
 .wp-social-link-yelp {
 	background-color: #d32422;
 	color: #fff;

package/src/social-link/socials-without-bg.scss

@@ -143,6 +143,11 @@
 	color: #4680c2;
 }
 
+.wp-social-link-whatsapp {
+	background-color: #25d366;
+	color: #fff;
+}
+
 .wp-social-link-wordpress {
 	color: #3499cd;
 }

package/src/social-link/variations.js

@@ -41,6 +41,7 @@ import {
 	TwitterIcon,
 	VimeoIcon,
 	VkIcon,
+	WhatsAppIcon,
 	WordPressIcon,
 	YelpIcon,
 	YouTubeIcon,
@@ -290,6 +291,12 @@ const variations = [
 		title: 'VK',
 		icon: VkIcon,
 	},
+	{
+		name: 'whatsapp',
+		attributes: { service: 'whatsapp' },
+		title: 'WhatsApp',
+		icon: WhatsAppIcon,
+	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },

package/src/style.scss

@@ -7,6 +7,7 @@
 @import "./categories/style.scss";
 @import "./code/style.scss";
 @import "./columns/style.scss";
+@import "./comments/style.scss";
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
@@ -25,7 +26,6 @@
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
-@import "./post-comments/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";

package/src/table/edit.js

@@ -16,6 +16,7 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 	__experimentalUseBorderProps as useBorderProps,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -509,6 +510,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<RichText
 					tagName="figcaption"
+					className={ __experimentalGetElementClassName( 'caption' ) }
 					aria-label={ __( 'Table caption text' ) }
 					placeholder={ __( 'Add caption' ) }
 					value={ caption }

package/src/table/save.js

@@ -11,6 +11,7 @@ import {
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -82,7 +83,11 @@ export default function save( { attributes } ) {
 				<Section type="foot" rows={ foot } />
 			</table>
 			{ hasCaption && (
-				<RichText.Content tagName="figcaption" value={ caption } />
+				<RichText.Content
+					tagName="figcaption"
+					value={ caption }
+					className={ __experimentalGetElementClassName( 'caption' ) }
+				/>
 			) }
 		</figure>
 	);

package/src/template-part/edit/index.js

@@ -8,22 +8,18 @@ import { isEmpty } from 'lodash';
  */
 import { useSelect } from '@wordpress/data';
 import {
-	BlockControls,
+	BlockSettingsMenuControls,
+	BlockTitle,
 	useBlockProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	Warning,
 	store as blockEditorStore,
+	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
-import {
-	ToolbarGroup,
-	ToolbarButton,
-	Spinner,
-	Modal,
-} from '@wordpress/components';
+import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -43,6 +39,7 @@ export default function TemplatePartEdit( {
 	attributes,
 	setAttributes,
 	clientId,
+	isSelected,
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
@@ -105,6 +102,14 @@ export default function TemplatePartEdit( {
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
 
+	// The `isSelected` check ensures the `BlockSettingsMenuControls` fill
+	// doesn't render multiple times. The block controls has similar internal check.
+	const canReplace =
+		isSelected &&
+		isEntityAvailable &&
+		hasReplacements &&
+		( area === 'header' || area === 'footer' );
+
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
 	if (
@@ -158,21 +163,29 @@ export default function TemplatePartEdit( {
 					/>
 				</TagName>
 			) }
-			{ isEntityAvailable &&
-				hasReplacements &&
-				( area === 'header' || area === 'footer' ) && (
-					<BlockControls>
-						<ToolbarGroup className="wp-block-template-part__block-control-group">
-							<ToolbarButton
-								onClick={ () =>
-									setIsTemplatePartSelectionOpen( true )
+			{ canReplace && (
+				<BlockSettingsMenuControls>
+					{ () => (
+						<MenuItem
+							onClick={ () => {
+								setIsTemplatePartSelectionOpen( true );
+							} }
+						>
+							{ createInterpolateElement(
+								__( 'Replace <BlockTitle />' ),
+								{
+									BlockTitle: (
+										<BlockTitle
+											clientId={ clientId }
+											maximumLength={ 25 }
+										/>
+									),
 								}
-							>
-								{ __( 'Replace' ) }
-							</ToolbarButton>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
+							) }
+						</MenuItem>
+					) }
+				</BlockSettingsMenuControls>
+			) }
 			{ isEntityAvailable && (
 				<TemplatePartInnerBlocks
 					tagName={ TagName }
@@ -189,7 +202,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isTemplatePartSelectionOpen && (
 				<Modal
-					className="block-editor-template-part__selection-modal"
+					overlayClassName="block-editor-template-part__selection-modal"
 					title={ sprintf(
 						// Translators: %s as template part area title ("Header", "Footer", etc.).
 						__( 'Choose a %s' ),

package/src/template-part/edit/selection-modal.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
@@ -11,6 +11,10 @@ import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import {
+	SearchControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -21,6 +25,7 @@ import {
 	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 import { createTemplatePartId } from './utils/create-template-part-id';
+import { searchPatterns } from './utils/search';
 
 export default function TemplatePartSelectionModal( {
 	setAttributes,
@@ -29,6 +34,8 @@ export default function TemplatePartSelectionModal( {
 	area,
 	clientId,
 } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+
 	// When the templatePartId is undefined,
 	// it means the user is creating a new one from the placeholder.
 	const isReplacingTemplatePartContent = !! templatePartId;
@@ -37,18 +44,24 @@ export default function TemplatePartSelectionModal( {
 		templatePartId
 	);
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
-	const templartPartsAsBlockPatterns = useMemo( () => {
-		return templateParts.map( ( templatePart ) => ( {
+	const filteredTemplateParts = useMemo( () => {
+		const partsAsPatterns = templateParts.map( ( templatePart ) => ( {
 			name: createTemplatePartId( templatePart.theme, templatePart.slug ),
 			title: templatePart.title.rendered,
 			blocks: parse( templatePart.content.raw ),
 			templatePart,
 		} ) );
-	}, [ templateParts ] );
-	const shownTemplateParts = useAsyncList( templartPartsAsBlockPatterns );
-	const { createSuccessNotice } = useDispatch( noticesStore );
+
+		return searchPatterns( partsAsPatterns, searchValue );
+	}, [ templateParts, searchValue ] );
+	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const filteredBlockPatterns = useMemo( () => {
+		return searchPatterns( blockPatterns, searchValue );
+	}, [ blockPatterns, searchValue ] );
+	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
+
+	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 
 	const onTemplatePartSelect = useCallback( ( templatePart ) => {
@@ -75,41 +88,56 @@ export default function TemplatePartSelectionModal( {
 		setAttributes
 	);
 
+	const hasTemplateParts = !! filteredTemplateParts.length;
+	const hasBlockPatterns = !! filteredBlockPatterns.length;
+
 	return (
-		<>
-			<div className="block-library-template-part__selection-content">
-				{ !! templartPartsAsBlockPatterns.length && (
-					<div>
-						<h2>{ __( 'Existing template parts' ) }</h2>
-						<BlockPatternsList
-							blockPatterns={ templartPartsAsBlockPatterns }
-							shownPatterns={ shownTemplateParts }
-							onClickPattern={ ( pattern ) => {
-								onTemplatePartSelect( pattern.templatePart );
-							} }
-						/>
-					</div>
-				) }
+		<div className="block-library-template-part__selection-content">
+			<div className="block-library-template-part__selection-search">
+				<SearchControl
+					onChange={ setSearchValue }
+					value={ searchValue }
+					label={ __( 'Search for replacements' ) }
+					placeholder={ __( 'Search' ) }
+				/>
+			</div>
+			{ hasTemplateParts && (
+				<div>
+					<h2>{ __( 'Existing template parts' ) }</h2>
+					<BlockPatternsList
+						blockPatterns={ filteredTemplateParts }
+						shownPatterns={ shownTemplateParts }
+						onClickPattern={ ( pattern ) => {
+							onTemplatePartSelect( pattern.templatePart );
+						} }
+					/>
+				</div>
+			) }
 
-				{ !! blockPatterns.length && (
-					<div>
-						<h2>{ __( 'Patterns' ) }</h2>
-						<BlockPatternsList
-							blockPatterns={ blockPatterns }
-							shownPatterns={ shownBlockPatterns }
-							onClickPattern={ ( pattern, blocks ) => {
-								if ( isReplacingTemplatePartContent ) {
-									replaceInnerBlocks( clientId, blocks );
-								} else {
-									createFromBlocks( blocks, pattern.title );
-								}
+			{ hasBlockPatterns && (
+				<div>
+					<h2>{ __( 'Patterns' ) }</h2>
+					<BlockPatternsList
+						blockPatterns={ filteredBlockPatterns }
+						shownPatterns={ shownBlockPatterns }
+						onClickPattern={ ( pattern, blocks ) => {
+							if ( isReplacingTemplatePartContent ) {
+								replaceInnerBlocks( clientId, blocks );
+							} else {
+								createFromBlocks( blocks, pattern.title );
+							}
 
-								onClose();
-							} }
-						/>
-					</div>
-				) }
-			</div>
-		</>
+							onClose();
+						} }
+					/>
+				</div>
+			) }
+
+			{ ! hasTemplateParts && ! hasBlockPatterns && (
+				<HStack alignment="center">
+					<p>{ __( 'No results found.' ) }</p>
+				</HStack>
+			) }
+		</div>
 	);
 }

package/src/template-part/edit/utils/search.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	input = removeAccents( input );
+
+	// Trim & Lowercase.
+	input = input.trim().toLowerCase();
+
+	return input;
+}
+
+/**
+ * Get the search rank for a given pattern and a specific search term.
+ *
+ * @param {Object} pattern     Pattern to rank
+ * @param {string} searchValue Search term
+ * @return {number} A pattern search rank
+ */
+function getPatternSearchRank( pattern, searchValue ) {
+	const normalizedSearchValue = normalizeSearchInput( searchValue );
+	const normalizedTitle = normalizeSearchInput( pattern.title );
+
+	let rank = 0;
+
+	if ( normalizedSearchValue === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchValue ) ) {
+		rank += 20;
+	} else {
+		const searchTerms = normalizedSearchValue.split( ' ' );
+		const hasMatchedTerms = searchTerms.every( ( searchTerm ) =>
+			normalizedTitle.includes( searchTerm )
+		);
+
+		// Prefer pattern with every search word in the title.
+		if ( hasMatchedTerms ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}
+
+/**
+ * Filters an pattern list given a search term.
+ *
+ * @param {Array}  patterns    Item list
+ * @param {string} searchValue Search input.
+ *
+ * @return {Array} Filtered pattern list.
+ */
+export function searchPatterns( patterns = [], searchValue = '' ) {
+	if ( ! searchValue ) {
+		return patterns;
+	}
+
+	const rankedPatterns = patterns
+		.map( ( pattern ) => {
+			return [ pattern, getPatternSearchRank( pattern, searchValue ) ];
+		} )
+		.filter( ( [ , rank ] ) => rank > 0 );
+
+	rankedPatterns.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedPatterns.map( ( [ pattern ] ) => pattern );
+}

package/src/template-part/editor.scss

@@ -1,14 +1,26 @@
 .block-editor-template-part__selection-modal {
+	z-index: z-index(".block-editor-template-part__selection-modal");
+
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
+	.components-modal__frame {
+		@include break-small() {
+			width: calc(100% - #{ $grid-unit-20 * 2 });
+			height: calc(100% - #{ $header-height * 2 });
+		}
+		@include break-medium() {
+			width: $break-medium - $grid-unit-20 * 2;
+		}
+		@include break-large() {
+			height: 70%;
+		}
 	}
 }
+
+.block-library-template-part__selection-search {
+	background: $white;
+	position: sticky;
+	top: 0;
+	padding: $grid-unit-20 0;
+	z-index: z-index(".block-library-template-part__selection-search");
+}

package/src/template-part/index.js

@@ -47,7 +47,7 @@ export const settings = {
 	edit,
 };
 
-// Importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects
+// Importing this file includes side effects. This is added in block-library/package.json under sideEffects
 addFilter(
 	'blocks.registerBlockType',
 	'core/template-part',