@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/src/navigation-submenu/edit.js

@@ -38,9 +38,10 @@ import {
 	createInterpolateElement,
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
-import { link as linkIcon } from '@wordpress/icons';
+import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -294,9 +295,11 @@ export default function NavigationSubmenuEdit( {
 	};
 	const { showSubmenuIcon, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+
+	const {
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -312,6 +315,7 @@ export default function NavigationSubmenuEdit( {
 		selectedBlockHasDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -319,13 +323,31 @@ export default function NavigationSubmenuEdit( {
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
+				getBlock,
 			} = select( blockEditorStore );
 
+			let _onlyDescendantIsEmptyLink;
+
 			const selectedBlockId = getSelectedBlockClientId();
 
 			const descendants = getClientIdsOfDescendants( [ clientId ] )
 				.length;
 
+			const selectedBlockDescendants = getClientIdsOfDescendants( [
+				selectedBlockId,
+			] );
+
+			// Check for a single descendant in the submenu. If that block
+			// is a link block in a "placeholder" state with no label then
+			// we can consider as an "empty" link.
+			if ( selectedBlockDescendants?.length === 1 ) {
+				const singleBlock = getBlock( selectedBlockDescendants[ 0 ] );
+
+				_onlyDescendantIsEmptyLink =
+					singleBlock?.name === 'core/navigation-link' &&
+					! singleBlock?.attributes?.label;
+			}
+
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, name ).length >=
@@ -341,9 +363,7 @@ export default function NavigationSubmenuEdit( {
 					false
 				),
 				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				selectedBlockHasDescendants: !! selectedBlockDescendants?.length,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -352,6 +372,7 @@ export default function NavigationSubmenuEdit( {
 					'create',
 					'posts'
 				),
+				onlyDescendantIsEmptyLink: _onlyDescendantIsEmptyLink,
 			};
 		},
 		[ clientId ]
@@ -367,7 +388,7 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering
+	// Store the colors from context as attributes for rendering.
 	useEffect( () => {
 		// This side-effect should not create an undo level as those should
 		// only be created via user interactions. Mark this change as
@@ -479,7 +500,7 @@ export default function NavigationSubmenuEdit( {
 		onKeyDown,
 	} );
 
-	// Always use overlay colors for submenus
+	// Always use overlay colors for submenus.
 	const innerBlocksColors = getColors( context, true );
 
 	if ( isAtMaxNesting ) {
@@ -529,6 +550,14 @@ export default function NavigationSubmenuEdit( {
 
 	const ParentElement = openSubmenusOnClick ? 'button' : 'a';
 
+	function transformToLink() {
+		const newLinkBlock = createBlock( 'core/navigation-link', attributes );
+		replaceBlock( clientId, newLinkBlock );
+	}
+
+	const canConvertToLink =
+		! selectedBlockHasDescendants || onlyDescendantIsEmptyLink;
+
 	return (
 		<Fragment>
 			<BlockControls>
@@ -542,6 +571,15 @@ export default function NavigationSubmenuEdit( {
 							onClick={ () => setIsLinkOpen( true ) }
 						/>
 					) }
+
+					<ToolbarButton
+						name="revert"
+						icon={ removeSubmenu }
+						title={ __( 'Convert to Link' ) }
+						onClick={ transformToLink }
+						className="wp-block-navigation__submenu__revert"
+						isDisabled={ ! canConvertToLink }
+					/>
 				</ToolbarGroup>
 			</BlockControls>
 			<InspectorControls>
@@ -657,12 +695,12 @@ export default function NavigationSubmenuEdit( {
 							/>
 						</Popover>
 					) }
-					{ ( showSubmenuIcon || openSubmenusOnClick ) && (
-						<span className="wp-block-navigation__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					) }
 				</ParentElement>
+				{ ( showSubmenuIcon || openSubmenusOnClick ) && (
+					<span className="wp-block-navigation__submenu-icon">
+						<ItemSubmenuIcon />
+					</span>
+				) }
 				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>

package/src/navigation-submenu/index.php

@@ -167,25 +167,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$label = '';
 
 	if ( isset( $attributes['label'] ) ) {
-		$label .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$label .= wp_kses_post( $attributes['label'] );
 	}
 
 	$aria_label = sprintf(
@@ -245,10 +227,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
-
 		$html .= '</button>';
 
+		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
+
 	}
 
 	if ( $has_submenu ) {

package/src/page-list/convert-to-links-modal.js

@@ -3,8 +3,8 @@
  */
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -24,7 +24,7 @@ export const convertSelectedBlockToNavigationLinks = ( {
 	const linkMap = {};
 	const navigationLinks = [];
 	pages.forEach( ( { id, title, link: url, type, parent } ) => {
-		// See if a placeholder exists. This is created if children appear before parents in list
+		// See if a placeholder exists. This is created if children appear before parents in list.
 		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
 		linkMap[ id ] = createBlock(
 			'core/navigation-link',
@@ -42,7 +42,7 @@ export const convertSelectedBlockToNavigationLinks = ( {
 			navigationLinks.push( linkMap[ id ] );
 		} else {
 			if ( ! linkMap[ parent ] ) {
-				// Use a placeholder if the child appears before parent in list
+				// Use a placeholder if the child appears before parent in list.
 				linkMap[ parent ] = { innerBlocks: [] };
 			}
 			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
@@ -74,34 +74,20 @@ export const convertSelectedBlockToNavigationLinks = ( {
 };
 
 export default function ConvertToLinksModal( { onClose, clientId } ) {
-	const { pages, pagesFinished } = useSelect(
-		( select ) => {
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreDataStore
-			);
-			const query = [
-				'postType',
-				'page',
-				{
-					per_page: MAX_PAGE_COUNT,
-					_fields: PAGE_FIELDS,
-					// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
-					// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
-					// sort.
-					orderby: 'menu_order',
-					order: 'asc',
-				},
-			];
-			return {
-				pages: getEntityRecords( ...query ),
-				pagesFinished: hasFinishedResolution(
-					'getEntityRecords',
-					query
-				),
-			};
-		},
-		[ clientId ]
+	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			per_page: MAX_PAGE_COUNT,
+			_fields: PAGE_FIELDS,
+			// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+			// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+			// sort.
+			orderby: 'menu_order',
+			order: 'asc',
+		}
 	);
+
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	return (

package/src/page-list/edit.js

@@ -12,16 +12,14 @@ import {
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Placeholder,
-	Spinner,
-	Notice,
-} from '@wordpress/components';
+import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -77,9 +75,7 @@ export default function PageListEdit( { context, clientId } ) {
 			) }
 			{ ! hasResolvedPages && (
 				<div { ...blockProps }>
-					<Placeholder>
-						<Spinner />
-					</Placeholder>
+					<Spinner />
 				</div>
 			) }
 
@@ -120,28 +116,16 @@ function useFrontPageId() {
 }
 
 function usePageData() {
-	const { pages, hasResolvedPages } = useSelect( ( select ) => {
-		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
-
-		return {
-			pages: getEntityRecords( 'postType', 'page', {
-				orderby: 'menu_order',
-				order: 'asc',
-				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-				per_page: -1,
-			} ),
-			hasResolvedPages: hasFinishedResolution( 'getEntityRecords', [
-				'postType',
-				'page',
-				{
-					orderby: 'menu_order',
-					order: 'asc',
-					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-					per_page: -1,
-				},
-			] ),
-		};
-	}, [] );
+	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			orderby: 'menu_order',
+			order: 'asc',
+			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+			per_page: -1,
+		}
+	);
 
 	return useMemo( () => {
 		// TODO: Once the REST API supports passing multiple values to
@@ -196,7 +180,17 @@ const PageItems = memo( function PageItems( {
 				} ) }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (
-					<ItemSubmenuToggle title={ page.title?.rendered } />
+					<>
+						<button
+							className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+							aria-expanded="false"
+						>
+							{ page.title?.rendered }
+						</button>
+						<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+							<ItemSubmenuIcon />
+						</span>
+					</>
 				) : (
 					<a
 						className={ classnames(
@@ -213,7 +207,14 @@ const PageItems = memo( function PageItems( {
 				{ hasChildren && (
 					<>
 						{ ! context.openSubmenusOnClick &&
-							context.showSubmenuIcon && <ItemSubmenuToggle /> }
+							context.showSubmenuIcon && (
+								<button
+									className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
+									aria-expanded="false"
+								>
+									<ItemSubmenuIcon />
+								</button>
+							) }
 						<ul
 							className={ classnames( 'submenu-container', {
 								'wp-block-navigation__submenu-container': isNavigationChild,
@@ -232,17 +233,3 @@ const PageItems = memo( function PageItems( {
 		);
 	} );
 } );
-
-function ItemSubmenuToggle( { title } ) {
-	return (
-		<button
-			className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
-			aria-expanded="false"
-		>
-			{ title }
-			<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
-				<ItemSubmenuIcon />
-			</span>
-		</button>
-	);
-}

package/src/page-list/editor.scss

@@ -27,16 +27,6 @@
 	pointer-events: none;
 }
 
-.wp-block-page-list .components-placeholder {
-	min-height: 0;
-	padding: 0;
-	background-color: inherit;
-
-	.components-spinner {
-		margin: 0.5em;
-	}
-}
-
 // Modal that shows conversion option.
 .wp-block-page-list-modal {
 	@include break-small() {

package/src/page-list/index.php

@@ -178,7 +178,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			$css_class .= ' menu-item-home';
 		}
 
-		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$title      = wp_kses_post( $page['title'] );
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
 			__( '%s submenu' ),
@@ -188,8 +188,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
-			'</button>';
+			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
+			'</button>' . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
 		}
@@ -197,7 +197,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		if ( isset( $page['children'] ) ) {
 			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
 				$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
-				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 				$markup .= '</button>';
 			}
 			$markup .= '<ul class="submenu-container';

package/src/post-author-name/edit.js

@@ -50,6 +50,7 @@ function PostAuthorNameEdit( {
 		<a
 			href="#author-pseudo-link"
 			onClick={ ( event ) => event.preventDefault() }
+			className="wp-block-post-author-name__link"
 		>
 			{ displayName }
 		</a>

package/src/post-author-name/index.php

@@ -27,7 +27,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

package/src/post-comments-form/edit.js

@@ -13,7 +13,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -55,8 +55,12 @@ export default function PostCommentsFormEdit( {
 
 				{ 'open' !== commentStatus && (
 					<Warning>
-						{ __(
-							'Post Comments Form block: comments to this post are not allowed.'
+						{ sprintf(
+							/* translators: 1: Post type (i.e. "post", "page") */
+							__(
+								'Post Comments Form block: comments to this %s are not allowed.'
+							),
+							postType
 						) }
 					</Warning>
 				) }

package/src/post-excerpt/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { useMemo, RawHTML } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -16,7 +16,7 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -83,12 +83,12 @@ export default function PostExcerptEditor( {
 			withoutInteractiveFormatting={ true }
 		/>
 	);
+	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
+		'is-inline': ! showMoreOnNewLine,
+	} );
 	const excerptContent = isEditable ? (
 		<RichText
-			className={
-				! showMoreOnNewLine &&
-				'wp-block-post-excerpt__excerpt is-inline'
-			}
+			className={ excerptClassName }
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
 				rawExcerpt ||
@@ -99,12 +99,9 @@ export default function PostExcerptEditor( {
 			tagName="p"
 		/>
 	) : (
-		( renderedExcerpt && (
-			<Disabled>
-				<RawHTML key="html">{ renderedExcerpt }</RawHTML>
-			</Disabled>
-		) ) ||
-		__( 'No post excerpt found' )
+		<p className={ excerptClassName }>
+			{ strippedRenderedExcerpt || __( 'No post excerpt found' ) }
+		</p>
 	);
 	return (
 		<>

package/src/post-navigation-link/index.php

@@ -49,13 +49,13 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		 */
 		if ( ! $attributes['linkLabel'] ) {
 			if ( $label ) {
-				$format = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> %link';
+				$format = '<span class="post-navigation-link__label">' . wp_kses_post( $label ) . '</span> %link';
 			}
 			$link = '%title';
 		} elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) {
 			// If the label link option is enabled and there is a custom label, display it before the title.
 			if ( $label ) {
-				$link = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> <span class="post-navigation-link__title">%title</title>';
+				$link = '<span class="post-navigation-link__label">' . wp_kses_post( $label ) . '</span> <span class="post-navigation-link__title">%title</span>';
 			} else {
 				/*
 				 * If the label link option is enabled and there is no custom label,
@@ -64,7 +64,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
 				$link  = sprintf(
 					'<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>',
-					esc_html( $label ),
+					wp_kses_post( $label ),
 					'%title'
 				);
 			}

package/src/post-terms/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -88,7 +89,7 @@ export default function PostTermsEdit( {
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
 							>
-								{ postTerm.name }
+								{ unescape( postTerm.name ) }
 							</a>
 						) )
 						.reduce( ( prev, curr ) => (

package/src/query-title/edit.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-// import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,

package/src/search/edit.js

@@ -32,6 +32,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -257,6 +258,11 @@ export default function SearchEdit( {
 						type="button"
 						className={ buttonClasses }
 						style={ buttonStyles }
+						aria-label={
+							buttonText
+								? stripHTML( buttonText )
+								: __( 'Search' )
+						}
 					>
 						<Icon icon={ search } />
 					</button>

package/src/search/edit.native.js

@@ -307,7 +307,7 @@ export default function SearchEdit( {
 					className="wp-block-search__input"
 					style={ inputStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode="tail" // currently only works on ios
+					ellipsizeMode="tail" // Currently only works on ios.
 					label={ null }
 					value={ placeholder }
 					placeholder={

package/src/search/index.php

@@ -72,6 +72,7 @@ function render_block_core_search( $attributes ) {
 	if ( $show_button ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
+		$aria_label             = '';
 
 		if ( ! $is_button_inside ) {
 			$button_classes .= ' ' . $border_color_classes;
@@ -81,17 +82,20 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$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 id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-			        <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
-			    </svg>';
+					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+				</svg>';
 		}
 
 		$button_markup = sprintf(
-			'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
+			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( $button_classes ),
 			$inline_styles['button'],
+			$aria_label,
 			$button_internal_markup
 		);
 	}

package/src/search/test/edit.native.js

@@ -12,7 +12,6 @@ import { Icon } from '@wordpress/components';
  * Internal dependencies
  */
 import SearchEdit from '../edit.native.js';
-
 // react-native-aztec shouldn't be mocked because these tests are based on
 // snapshot testing where we want to keep the original component.
 jest.unmock( '@wordpress/react-native-aztec' );