@wordpress/block-library 7.18.0 → 7.19.0

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

@@ -81,11 +81,11 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'Media File' ) );
 		fireEvent.press( screen.getByText( 'None' ) );
@@ -107,11 +107,11 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
@@ -133,11 +133,11 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
@@ -147,7 +147,7 @@ describe( 'Image Block', () => {
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
-		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 		await waitFor(
 			() => new Promise( ( resolve ) => setTimeout( resolve, 100 ) )
 		);
@@ -169,11 +169,11 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'None' ) );
 		fireEvent.press( screen.getByText( 'Media File' ) );
@@ -185,7 +185,7 @@ describe( 'Image Block', () => {
 			screen.getByPlaceholderText( 'Search or type URL' ),
 			'wordpress.org'
 		);
-		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		fireEvent.press( screen.getByLabelText( 'Apply' ) );
 		await waitFor( () => screen.getByText( 'Custom URL' ) );
 		fireEvent.press( screen.getByText( 'Custom URL' ) );
 		// Await asynchronous fetch of clipboard
@@ -211,15 +211,15 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		fireEvent.press( screen.getByLabelText( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
-			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+			fireEvent.press( screen.getByLabelText( 'Open Settings' ) )
 		);
 		fireEvent.press( screen.getByText( 'Media File' ) );
 
-		expect( screen.queryByA11yLabel( /https:\/\/cldup\.com/ ) ).toBeNull();
+		expect( screen.queryByLabelText( /https:\/\/cldup\.com/ ) ).toBeNull();
 	} );
 
 	it( 'sets link target', async () => {
@@ -235,10 +235,10 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		const imageBlock = screen.getByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
-		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		const settingsButton = screen.getByLabelText( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
@@ -266,10 +266,10 @@ describe( 'Image Block', () => {
 		// We must await the image fetch via `getMedia`
 		await act( () => apiFetchPromise );
 
-		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		const imageBlock = screen.getByLabelText( /Image Block/ );
 		fireEvent.press( imageBlock );
 
-		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		const settingsButton = screen.getByLabelText( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
 		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );

package/src/latest-comments/block.json

@@ -29,7 +29,11 @@
 	},
 	"supports": {
 		"align": true,
-		"html": false
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",
 	"style": "wp-block-latest-comments"

package/src/latest-comments/edit.js

@@ -71,6 +71,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 				<ServerSideRender
 					block="core/latest-comments"
 					attributes={ attributes }
+					skipBlockSupportAttributes
 					// The preview uses the site's locale to make it more true to how
 					// the block appears on the frontend. Setting the locale
 					// explicitly prevents any middleware from setting it to 'user'.

package/src/latest-comments/style.scss

@@ -4,6 +4,9 @@ ol.wp-block-latest-comments {
 	// Due to low specificity this will be safely overriden
 	// by default wp-block layout styles in the Post/Site editor
 	margin-left: 0;
+
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 }
 
 // Higher specificity - target list via wrapper.

package/src/latest-posts/block.json

@@ -85,6 +85,19 @@
 	"supports": {
 		"align": true,
 		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/latest-posts/style.scss

@@ -1,4 +1,7 @@
 .wp-block-latest-posts {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 2em;

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

@@ -63,16 +63,16 @@ describe( 'List block', () => {
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = getByA11yLabel( /List item Block\. Row 1/ );
+		const listItemBlock = getByLabelText( /List item Block\. Row 1/ );
 		fireEvent.press( listItemBlock );
 
 		const listItemField =
@@ -109,17 +109,17 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
@@ -127,7 +127,7 @@ describe( 'List block', () => {
 		// Select second level list
 		const secondNestedLevelBlock = within(
 			firstNestedLevelBlock
-		).getByA11yLabel( /List Block\. Row 1/ );
+		).getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -143,20 +143,20 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
-		const listItemBlock = getByA11yLabel( /List item Block\. Row 2/ );
+		const listItemBlock = getByLabelText( /List item Block\. Row 2/ );
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const indentButton = getByA11yLabel( 'Indent' );
+		const indentButton = getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -173,33 +173,33 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByA11yLabel(
+		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
-		const innerBlockList = within( firstNestedLevelBlock ).getByA11yLabel(
+		const innerBlockList = within( firstNestedLevelBlock ).getByLabelText(
 			/List Block\. Row 1/
 		);
 
 		// Select nested List Item block
-		const listItemBlock = within( innerBlockList ).getByA11yLabel(
+		const listItemBlock = within( innerBlockList ).getByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const outdentButton = getByA11yLabel( 'Outdent' );
+		const outdentButton = getByLabelText( 'Outdent' );
 		fireEvent.press( outdentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -218,16 +218,16 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -246,27 +246,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = getByA11yLabel( /Reverse list numbering\. Off/ );
+		const reverseButton = getByLabelText( /Reverse list numbering\. Off/ );
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -285,27 +285,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByA11yLabel( /List Block\. Row 1/ );
+		const listBlock = getByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByA11yLabel( 'Ordered' );
+		const orderedButton = getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const startValueButton = getByA11yLabel( /Start value\. Empty/ );
+		const startValueButton = getByLabelText( /Start value\. Empty/ );
 		fireEvent.press( startValueButton );
 		const startValueInput =
 			within( startValueButton ).getByDisplayValue( '' );
@@ -328,11 +328,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByA11yLabel(
+		const listItemBlock = within( listBlock ).getByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -340,7 +340,7 @@ describe( 'List block', () => {
 		// With cursor positioned at the beginning of the first List Item, press
 		// backward delete
 		const listItemField =
-			within( listItemBlock ).getByA11yLabel( /Text input. .*Two.*/ );
+			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
 		changeAndSelectTextOfRichText( listItemField, 'Two' );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
@@ -376,11 +376,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByA11yLabel( /List Block\. Row 2/ );
+		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByA11yLabel(
+		const listItemBlock = within( listBlock ).getByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -388,7 +388,7 @@ describe( 'List block', () => {
 		// With cursor positioned at the beginning of the first List Item, press
 		// backward delete
 		const listItemField =
-			within( listItemBlock ).getByA11yLabel( /Text input. .*One.*/ );
+			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
 		changeAndSelectTextOfRichText( listItemField, 'One' );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},

package/src/list-item/edit.js

@@ -67,6 +67,7 @@ export default function ListItemEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
+		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );

package/src/missing/test/edit-integration.native.js

@@ -40,12 +40,12 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 			 <!-- /wp:table -->`;
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+			getByLabelText( /Unsupported Block\. Row 1/ )
 		);
 
 		const translatedTableTitle =
@@ -58,18 +58,18 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 		 <!-- /wp:table -->`;
-		const { getByA11yLabel, getByText } = await initializeEditor( {
+		const { getByLabelText, getByText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+			getByLabelText( /Unsupported Block\. Row 1/ )
 		);
 
 		fireEvent.press( missingBlock );
 
 		const helpButton = await waitFor( () =>
-			getByA11yLabel( 'Help button' )
+			getByLabelText( 'Help button' )
 		);
 
 		fireEvent.press( helpButton );