@wordpress/block-library 7.18.0 → 7.19.0

package/src/navigation-link/editor.scss

@@ -1,3 +1,11 @@
+/**
+ * Appender
+ */
+
+.wp-block-navigation .block-list-appender {
+	position: relative;
+}
+
 /**
  * Submenus.
  */

package/src/post-author/edit.js

@@ -13,11 +13,23 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import {
+	ComboboxControl,
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
+const minimumUsersForCombobox = 25;
+
+const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: 100,
+};
+
 function PostAuthorEdit( {
 	isSelected,
 	context: { postType, postId, queryId },
@@ -38,7 +50,7 @@ function PostAuthorEdit( {
 			return {
 				authorId: _authorId,
 				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getUsers( { who: 'authors' } ),
+				authors: getUsers( AUTHORS_QUERY ),
 			};
 		},
 		[ postType, postId ]
@@ -65,34 +77,46 @@ function PostAuthorEdit( {
 		} ),
 	} );
 
+	const authorOptions = authors?.length
+		? authors.map( ( { id, name } ) => {
+				return {
+					value: id,
+					label: name,
+				};
+		  } )
+		: [];
+
+	const handleSelect = ( nextAuthorId ) => {
+		editEntityRecord( 'postType', postType, postId, {
+			author: nextAuthorId,
+		} );
+	};
+
+	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					{ !! postId &&
 						! isDescendentOfQueryLoop &&
-						!! authors?.length && (
+						authorOptions.length &&
+						( ( showCombobox && (
+							<ComboboxControl
+								label={ __( 'Author' ) }
+								options={ authorOptions }
+								value={ authorId }
+								onChange={ handleSelect }
+								allowReset={ false }
+							/>
+						) ) || (
 							<SelectControl
 								label={ __( 'Author' ) }
 								value={ authorId }
-								options={ authors.map( ( { id, name } ) => {
-									return {
-										value: id,
-										label: name,
-									};
-								} ) }
-								onChange={ ( nextAuthorId ) => {
-									editEntityRecord(
-										'postType',
-										postType,
-										postId,
-										{
-											author: nextAuthorId,
-										}
-									);
-								} }
+								options={ authorOptions }
+								onChange={ handleSelect }
 							/>
-						) }
+						) ) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }

package/src/post-content/block.json

@@ -11,6 +11,9 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalLayout": true,
+		"dimensions": {
+			"minHeight": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/query/editor.scss

@@ -3,7 +3,7 @@
 }
 
 .wp-block-query__create-new-link {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 }
 
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {

package/src/query-pagination/style.scss

@@ -18,7 +18,7 @@ $pagination-margin: 0.5em;
 	// which is important when it's the only block displayed
 	// and the block has a "space-between" justification.
 	&.is-content-justification-space-between {
-		> .wp-block-query-pagination-next:last-child {
+		> .wp-block-query-pagination-next:last-of-type {
 			margin-inline-start: auto;
 		}
 		> .wp-block-query-pagination-previous:first-child {

package/src/read-more/index.php

@@ -19,15 +19,22 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 	}
 
 	$post_ID            = $block->context['postId'];
+	$post_title         = get_the_title( $post_ID );
+	$screen_reader_text = sprintf(
+		/* translators: %s is either the post title or post ID to describe the link for screen readers. */
+		__( ': %s' ),
+		'' !== $post_title ? $post_title : __( 'untitled post ' ) . $post_ID
+	);
 	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
 	$more_text          = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
 	return sprintf(
-		'<a %1s href="%2s" target="%3s">%4s</a>',
+		'<a %1s href="%2s" target="%3s">%4s<span class="screen-reader-text">%5s</span></a>',
 		$wrapper_attributes,
 		get_the_permalink( $post_ID ),
 		esc_attr( $attributes['linkTarget'] ),
-		$more_text
+		$more_text,
+		$screen_reader_text
 	);
 }
 

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

@@ -28,10 +28,10 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( getByLabelText( 'Add block' ) );
 
 		const blockList = getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
@@ -45,17 +45,17 @@ describe( 'Shortcode block', () => {
 
 		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
 
-		expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		expect( getByLabelText( /Shortcode Block\. Row 1/ ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'edits content', async () => {
-		const { getByA11yLabel, getByPlaceholderText } = await initializeEditor(
+		const { getByLabelText, getByPlaceholderText } = await initializeEditor(
 			{
 				initialHtml: '<!-- wp:shortcode /-->',
 			}
 		);
-		const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ );
+		const shortcodeBlock = getByLabelText( /Shortcode Block\. Row 1/ );
 		fireEvent.press( shortcodeBlock );
 
 		const textField = getByPlaceholderText( 'Add a shortcode…' );

package/src/site-logo/edit.js

@@ -394,7 +394,7 @@ export default function LogoEdit( {
 		return {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
-			url: siteData?.url,
+			url: siteData?.home,
 			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,

package/src/social-link/test/index.native.js

@@ -33,7 +33,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -43,13 +43,13 @@ describe( '<SocialLinkEdit/>', () => {
 		);
 		fireEvent.press(
 			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
+				subject.getByLabelText( 'Social Icons block' )
 			)
 		);
 		fireEvent(
 			await waitFor( () =>
 				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+					subject.getByLabelText( /Social Icons Block. Row 1/ )
 				).getByTestId( 'block-list-wrapper' )
 			),
 			'layout',
@@ -59,22 +59,22 @@ describe( '<SocialLinkEdit/>', () => {
 		// Assert
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /WordPress social icon/ )
+				subject.getByLabelText( /WordPress social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Facebook social icon/ )
+				subject.getByLabelText( /Facebook social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Twitter social icon/ )
+				subject.getByLabelText( /Twitter social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Instagram social icon/ )
+				subject.getByLabelText( /Instagram social icon/ )
 			)
 		).toBeDefined();
 	} );
@@ -90,7 +90,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -100,13 +100,13 @@ describe( '<SocialLinkEdit/>', () => {
 		);
 		fireEvent.press(
 			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
+				subject.getByLabelText( 'Social Icons block' )
 			)
 		);
 		fireEvent(
 			await waitFor( () =>
 				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+					subject.getByLabelText( /Social Icons Block. Row 1/ )
 				).getByTestId( 'block-list-wrapper' )
 			),
 			'layout',

package/src/social-links/test/edit.native.js

@@ -88,7 +88,7 @@ describe( 'Social links block', () => {
 
 		// Check there's only one active social link
 		const socialLinks =
-			within( socialLinksBlock ).getAllByA11yLabel( / social icon/ );
+			within( socialLinksBlock ).getAllByLabelText( / social icon/ );
 		expect( socialLinks.length ).toBe( 1 );
 
 		// Check the WordPress link is shown when unselected
@@ -153,7 +153,7 @@ describe( 'Social links block', () => {
 
 	it( 'shows the ghost placeholder when no icon is active', async () => {
 		const screen = await initializeEditor();
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -178,11 +178,11 @@ describe( 'Social links block', () => {
 		fireEvent.press( firstLinkBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete the social link
-		const deleteButton = getByA11yLabel( /Remove block/ );
+		const deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		// Add Paragraph block

package/src/spacer/test/index.native.js

@@ -28,10 +28,10 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( getByLabelText( 'Add block' ) );
 
 		const blockList = getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
@@ -45,7 +45,7 @@ describe( 'Spacer block', () => {
 
 		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
 
-		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		expect( getByLabelText( /Spacer Block\. Row 1/ ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -53,17 +53,17 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml,
 			} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
@@ -80,17 +80,17 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml,
 			} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
@@ -111,23 +111,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'increment' },
@@ -141,23 +141,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'decrement' },

package/src/table/editor.scss

@@ -31,6 +31,7 @@
 	td,
 	th {
 		border: $border-width solid;
+		padding: 0.5em;
 	}
 
 	td.is-selected,

package/src/table/style.scss

@@ -11,6 +11,13 @@
 		width: 100%;
 	}
 
+	// Match default border style to default style in editor
+	td,
+	th {
+		border: $border-width solid;
+		padding: 0.5em;
+	}
+
 	// Fixed layout toggle
 	.has-fixed-layout {
 		table-layout: fixed;

package/src/table/theme.scss

@@ -1,5 +1,5 @@
 .wp-block-table {
-	margin: "0 0 1em 0";
+	margin: 0 0 1em 0;
 
 	thead {
 		border-bottom: 3px solid;
@@ -11,8 +11,6 @@
 
 	td,
 	th {
-		padding: 0.5em;
-		border: 1px solid;
 		word-break: normal;
 	}
 

package/src/template-part/index.php

@@ -193,6 +193,11 @@ function build_template_part_block_instance_variations() {
 	if ( wp_installing() ) {
 		return array();
 	}
+
+	if ( ! current_theme_supports( 'block-templates' ) && ! current_theme_supports( 'block-template-parts' ) ) {
+		return array();
+	}
+
 	$variations     = array();
 	$template_parts = get_block_templates(
 		array(

package/src/template-part/variations.js

@@ -40,6 +40,10 @@ export function enhanceTemplatePartVariations( settings, name ) {
 				'wp_template_part',
 				`${ theme }//${ slug }`
 			);
+
+			if ( entity?.slug ) {
+				return entity.slug === variationAttributes.slug;
+			}
 			return entity?.area === variationAttributes.area;
 		};