@wordpress/block-library 7.7.0 → 7.10.0

package/src/post-featured-image/edit.js

@@ -20,7 +20,6 @@ import {
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
-import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -28,24 +27,18 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import DimensionControls from './dimension-controls';
 
-const placeholderIllustration = (
-	<SVG
-		className="components-placeholder__illustration"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		viewBox="0 0 60 60"
-		preserveAspectRatio="none"
-	>
-		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
-	</SVG>
-);
-
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const placeholderChip = (
-	<div className="wp-block-post-featured-image__placeholder">
-		{ placeholderIllustration }
-	</div>
-);
+
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
 
 function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
@@ -101,15 +94,6 @@ function PostFeaturedImageDisplay( {
 		style: { width, height },
 	} );
 
-	const placeholder = ( content ) => {
-		return (
-			<Placeholder className="block-editor-media-placeholder">
-				{ placeholderIllustration }
-				{ content }
-			</Placeholder>
-		);
-	};
-
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -153,7 +137,7 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholderChip }</div>
+				<div { ...blockProps }>{ placeholder() }</div>
 			</>
 		);
 	}
@@ -187,7 +171,7 @@ function PostFeaturedImageDisplay( {
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
 		image = ! media ? (
-			placeholderChip
+			placeholder()
 		) : (
 			<img
 				src={ mediaUrl }
@@ -232,7 +216,7 @@ function PostFeaturedImageDisplay( {
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
-		return <div { ...blockProps }>{ placeholderChip }</div>;
+		return <div { ...blockProps }>{ placeholder() }</div>;
 	}
 	return <PostFeaturedImageDisplay { ...props } />;
 }

package/src/post-featured-image/editor.scss

@@ -39,21 +39,6 @@
 		// against any background color.
 		color: currentColor;
 		background: transparent;
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			border: $border-width dashed currentColor;
-			opacity: 0.4;
-			pointer-events: none;
-
-			// Inherit border radius from style variations.
-			border-radius: inherit;
-		}
 
 		// Style the upload button.
 		.components-placeholder__fieldset {
@@ -82,20 +67,6 @@
 			color: $white;
 		}
 
-		// Style the placeholder illustration.
-		.components-placeholder__illustration {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			stroke: currentColor;
-			stroke-dasharray: 3;
-			opacity: 0.4;
-		}
-
 		// Show default placeholder height when not resized.
 		min-height: 200px;
 	}

package/src/post-featured-image/index.php

@@ -19,14 +19,16 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
+	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
 	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
 	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, array( 'alt' => $post_title ) );
+	$attr           = $is_link ? array( 'alt' => $post_title ) : array();
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';
 	}
 	$wrapper_attributes = get_block_wrapper_attributes();
-	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
+	if ( $is_link ) {
 		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
 	}
 

package/src/post-navigation-link/block.json

@@ -29,9 +29,13 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"color": {
+			"link": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/post-template/index.php

@@ -44,24 +44,16 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
-	$query_args = build_query_vars_from_query_block( $block, $page );
-	// Override the custom query with the global query if needed.
+	// Use global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
 	if ( $use_global_query ) {
 		global $wp_query;
-		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
-			// Unset `offset` because if is set, $wp_query overrides/ignores the paged parameter and breaks pagination.
-			unset( $query_args['offset'] );
-			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
-
-			if ( empty( $query_args['post_type'] ) && is_singular() ) {
-				$query_args['post_type'] = get_post_type( get_the_ID() );
-			}
-		}
+		$query = $wp_query;
+	} else {
+		$query_args = build_query_vars_from_query_block( $block, $page );
+		$query      = new WP_Query( $query_args );
 	}
 
-	$query = new WP_Query( $query_args );
-
 	if ( ! $query->have_posts() ) {
 		return '';
 	}
@@ -82,20 +74,34 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$content = '';
 	while ( $query->have_posts() ) {
 		$query->the_post();
+
+		// Get an instance of the current Post Template block.
+		$block_instance = $block->parsed_block;
+
+		// Set the block name to one that does not correspond to an existing registered block.
+		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
+		$block_instance['blockName'] = 'core/null';
+
+		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
+		// `render_callback` and ensure that no wrapper markup is included.
 		$block_content = (
 			new WP_Block(
-				$block->parsed_block,
+				$block_instance,
 				array(
 					'postType' => get_post_type(),
 					'postId'   => get_the_ID(),
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
-		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
+
+		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
+		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content     .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
-	wp_reset_postdata();
+	if ( ! $use_global_query ) {
+		wp_reset_postdata();
+	}
 
 	return sprintf(
 		'<ul %1$s>%2$s</ul>',

package/src/post-template/style.scss

@@ -1,10 +1,4 @@
-.wp-block-post-template,
-// We have kept `wp-block-query-loop` class as well for backwards
-// compatibility with existing `QueryLoop` blocks that haven't been
-// updated, after the renaming of the block to `Post Template`.
-// See: https://github.com/WordPress/gutenberg/pull/32514.
-// TODO: Remove this class when WordPress 5.9 is released.
-.wp-block-query-loop {
+.wp-block-post-template {
 	margin-top: 0;
 	margin-bottom: 0;
 	max-width: 100%;

package/src/post-terms/index.js

@@ -19,7 +19,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',

package/src/post-title/block.json

@@ -51,6 +51,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true,

package/src/pullquote/deprecated.js

@@ -397,7 +397,8 @@ const deprecated = [
 			const blockquoteClasses =
 				textColor || customTextColor
 					? classnames( 'has-text-color', {
-							[ blockquoteTextColorClass ]: blockquoteTextColorClass,
+							[ blockquoteTextColorClass ]:
+								blockquoteTextColorClass,
 					  } )
 					: undefined;
 			const blockquoteStyle = blockquoteTextColorClass

package/src/query/edit/index.js

@@ -37,6 +37,8 @@ export function QueryContent( {
 	attributes,
 	setAttributes,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
 	const {
 		queryId,
@@ -45,9 +47,8 @@ export function QueryContent( {
 		tagName: TagName = 'div',
 		layout = {},
 	} = attributes;
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -109,6 +110,8 @@ export function QueryContent( {
 			/>
 			<BlockControls>
 				<QueryToolbar
+					name={ name }
+					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
@@ -213,10 +216,8 @@ function QueryPatternSetup( {
 
 const QueryEdit = ( props ) => {
 	const { clientId, name } = props;
-	const [
-		isPatternSelectionModalOpen,
-		setIsPatternSelectionModalOpen,
-	] = useState( false );
+	const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
+		useState( false );
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
@@ -226,9 +227,8 @@ const QueryEdit = ( props ) => {
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
 	const onBlockPatternSelect = ( blocks ) => {
 		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
-		);
+		const firstQueryClientId =
+			getFirstQueryClientIdFromBlocks( clonedBlocks );
 		replaceBlock( clientId, clonedBlocks );
 		if ( firstQueryClientId ) {
 			selectBlock( firstQueryClientId );

package/src/query/edit/inspector-controls/index.js

@@ -147,7 +147,7 @@ export default function QueryInspectorControls( {
 						onChange={ setQuery }
 					/>
 				) }
-				{ showSticky && (
+				{ ! inherit && showSticky && (
 					<StickyControl
 						value={ sticky }
 						onChange={ ( value ) => setQuery( { sticky: value } ) }

package/src/query/edit/inspector-controls/parent-control.js

@@ -30,9 +30,8 @@ function ParentControl( { parents, postType, onChange } ) {
 			if ( ! search ) {
 				return { searchResults: EMPTY_ARRAY, searchHasResolved: true };
 			}
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreStore
-			);
+			const { getEntityRecords, hasFinishedResolution } =
+				select( coreStore );
 			const selectorArgs = [
 				'postType',
 				postType,

package/src/query/edit/query-toolbar.js

@@ -11,13 +11,31 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings, list, grid } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
 	openPatternSelectionModal,
+	name,
+	clientId,
 } ) {
+	const hasPatterns = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			return !! __experimentalGetPatternsByBlockTypes(
+				name,
+				rootClientId
+			).length;
+		},
+		[ name, clientId ]
+	);
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
@@ -129,11 +147,13 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup className="wp-block-template-part__block-control-group">
-				<ToolbarButton onClick={ openPatternSelectionModal }>
-					{ __( 'Replace' ) }
-				</ToolbarButton>
-			</ToolbarGroup>
+			{ hasPatterns && (
+				<ToolbarGroup className="wp-block-template-part__block-control-group">
+					<ToolbarButton onClick={ openPatternSelectionModal }>
+						{ __( 'Replace' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
+			) }
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

package/src/query/editor.scss

@@ -20,8 +20,8 @@
 }
 
 .block-editor-query-pattern__selection-modal .components-modal__content {
-	overflow: hidden;
 	padding: 0;
+	margin-bottom: $header-height; // $header-height to accommodate bottom toolbar
 	&::before {
 		margin-bottom: 0;
 	}

package/src/query/index.js

@@ -25,6 +25,6 @@ export const settings = {
 	deprecated,
 };
 
-// Importing this file includes side effects and is whitelisted
+// Importing this file includes side effects and is added
 // in block-library/package.json under `sideEffects`.
 addFilter( 'editor.BlockEdit', 'core/query', queryInspectorControls );

package/src/query-no-results/index.php

@@ -19,24 +19,26 @@ function render_block_core_query_no_results( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
-	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-	$query_args = build_query_vars_from_query_block( $block, $page );
+	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+
 	// Override the custom query with the global query if needed.
 	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
 	if ( $use_global_query ) {
 		global $wp_query;
-		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
-			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
-		}
+		$query = $wp_query;
+	} else {
+		$query_args = build_query_vars_from_query_block( $block, $page );
+		$query      = new WP_Query( $query_args );
 	}
-	$query = new WP_Query( $query_args );
 
 	if ( $query->have_posts() ) {
 		return '';
 	}
 
-	wp_reset_postdata();
+	if ( ! $use_global_query ) {
+		wp_reset_postdata();
+	}
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',

package/src/quote/v2/edit.js

@@ -39,9 +39,8 @@ const TEMPLATE = [ [ 'core/paragraph', {} ] ];
  */
 const useMigrateOnLoad = ( attributes, clientId ) => {
 	const registry = useRegistry();
-	const { updateBlockAttributes, replaceInnerBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { updateBlockAttributes, replaceInnerBlocks } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		// As soon as the block is loaded, migrate it to the new version.
 
@@ -50,9 +49,8 @@ const useMigrateOnLoad = ( attributes, clientId ) => {
 			return;
 		}
 
-		const [ newAttributes, newInnerBlocks ] = migrateToQuoteV2(
-			attributes
-		);
+		const [ newAttributes, newInnerBlocks ] =
+			migrateToQuoteV2( attributes );
 
 		deprecated( 'Value attribute on the quote block', {
 			since: '6.0',

package/src/quote/v2/test/migrate.js

@@ -68,8 +68,7 @@ describe( 'Migrate quote block', () => {
 
 	it( 'should keep the formats of the value', () => {
 		const [ attributes, innerBlocks ] = migrateToQuoteV2( {
-			value:
-				'<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
+			value: '<p><strong>Bold</strong></p><p> and </p><p><em>italic</em></p>',
 			citation: 'Author',
 		} );
 		expect( attributes ).toEqual( {

package/src/search/edit.js

@@ -14,7 +14,7 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -80,9 +80,8 @@ export default function SearchEdit( {
 
 	const insertedInNavigationBlock = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName, wasBlockJustInserted } = select(
-				blockEditorStore
-			);
+			const { getBlockParentsByBlockName, wasBlockJustInserted } =
+				select( blockEditorStore );
 			return (
 				!! getBlockParentsByBlockName( clientId, 'core/navigation' )
 					?.length && wasBlockJustInserted( clientId )
@@ -90,9 +89,8 @@ export default function SearchEdit( {
 		},
 		[ clientId ]
 	);
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	useEffect( () => {
 		if ( ! insertedInNavigationBlock ) return;
 		// This side-effect should not create an undo level.
@@ -243,7 +241,7 @@ export default function SearchEdit( {
 			colorProps.className,
 			isButtonPositionInside ? undefined : borderProps.className,
 			buttonUseIcon ? 'has-icon' : undefined,
-			__experimentalElementButtonClassName
+			__experimentalGetElementClassName( 'button' )
 		);
 		const buttonStyles = {
 			...colorProps.style,
@@ -418,12 +416,8 @@ export default function SearchEdit( {
 
 			if ( typeof borderRadius === 'object' ) {
 				// Individual corner border radii present.
-				const {
-					topLeft,
-					topRight,
-					bottomLeft,
-					bottomRight,
-				} = borderRadius;
+				const { topLeft, topRight, bottomLeft, bottomRight } =
+					borderRadius;
 
 				return {
 					...styles,

package/src/search/edit.native.js

@@ -53,14 +53,12 @@ export default function SearchEdit( {
 } ) {
 	const [ isButtonSelected, setIsButtonSelected ] = useState( false );
 	const [ isLabelSelected, setIsLabelSelected ] = useState( false );
-	const [ isPlaceholderSelected, setIsPlaceholderSelected ] = useState(
-		false
-	);
+	const [ isPlaceholderSelected, setIsPlaceholderSelected ] =
+		useState( false );
 	const [ isLongButton, setIsLongButton ] = useState( false );
 	const [ buttonWidth, setButtonWidth ] = useState( MIN_BUTTON_WIDTH );
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	const textInputRef = useRef( null );
 

package/src/search/index.php

@@ -80,20 +80,23 @@ function render_block_core_search( $attributes ) {
 	}
 
 	if ( $show_button ) {
+		$button_classes         = array();
 		$button_internal_markup = '';
-		$button_classes         = $color_classes;
-		$aria_label             = '';
+		if ( ! empty( $color_classes ) ) {
+			$button_classes[] = $color_classes;
+		}
+		$aria_label = '';
 
-		if ( ! $is_button_inside ) {
-			$button_classes .= ' ' . $border_color_classes;
+		if ( ! $is_button_inside && ! empty( $border_color_classes ) ) {
+			$button_classes[] = $border_color_classes;
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label      = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
-			$button_classes .= ' has-icon';
+			$aria_label       = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+			$button_classes[] = 'has-icon';
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
@@ -102,11 +105,10 @@ function render_block_core_search( $attributes ) {
 		}
 
 		// Include the button element class.
-		$button_classes .= ' ' . WP_Theme_JSON_GUTENBERG::__EXPERIMENTAL_ELEMENT_BUTTON_CLASS_NAME;
-
-		$button_markup = sprintf(
+		$button_classes[] = WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' );
+		$button_markup    = sprintf(
 			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
-			esc_attr( $button_classes ),
+			esc_attr( implode( ' ', $button_classes ) ),
 			$inline_styles['button'],
 			$aria_label,
 			$button_internal_markup

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;
@@ -47,7 +47,8 @@
 	}
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
+// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: 4px;
 	border: 1px solid #949494;
 
@@ -61,7 +62,8 @@
 		}
 	}
 
-	.wp-block-search__button {
+	// For lower specificity.
+	:where(.wp-block-search__button) {
 		padding: 0.125em 0.5em;
 	}
 }