@wordpress/block-library 8.12.0 → 8.12.1

package/src/block/test/__snapshots__/transforms.native.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Reusable block block transforms to Columns block 1`] = `
+exports[`Pattern block transforms to Columns block 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
 <div class="wp-block-column" style="flex-basis:100%"><!-- wp:block {"ref":130} /--></div>
@@ -8,7 +8,7 @@ exports[`Reusable block block transforms to Columns block 1`] = `
 <!-- /wp:columns -->"
 `;
 
-exports[`Reusable block block transforms to Group block 1`] = `
+exports[`Pattern block transforms to Group block 1`] = `
 "<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:block {"ref":130} /--></div>
 <!-- /wp:group -->"

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

@@ -114,7 +114,7 @@ describe( 'Reusable block', () => {
 
 		// Get the reusable block.
 		const [ reusableBlock ] = await screen.findAllByLabelText(
-			/Reusable block Block\. Row 1/
+			/Pattern Block\. Row 1/
 		);
 
 		expect( reusableBlock ).toBeDefined();
@@ -131,7 +131,7 @@ describe( 'Reusable block', () => {
 		} );
 
 		const [ reusableBlock ] = await screen.findAllByLabelText(
-			/Reusable block Block\. Row 1/
+			/Pattern Block\. Row 1/
 		);
 
 		const blockDeleted = within( reusableBlock ).getByText(
@@ -142,9 +142,7 @@ describe( 'Reusable block', () => {
 		expect( blockDeleted ).toBeDefined();
 	} );
 
-	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
-	it.skip( 'renders block content', async () => {
+	it( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
@@ -163,8 +161,8 @@ describe( 'Reusable block', () => {
 			initialHtml,
 		} );
 
-		const [ reusableBlock ] = await screen.findByLabelText(
-			/Reusable block Block\. Row 1/
+		const reusableBlock = await screen.findByLabelText(
+			/Pattern Block\. Row 1/
 		);
 
 		const innerBlockListWrapper = await within(

package/src/block/test/transforms.native.js

@@ -9,7 +9,7 @@ import {
 	getBlockTransformOptions,
 } from 'test/helpers';
 
-const block = 'Reusable block';
+const block = 'Pattern';
 const initialHtml = `
 <!-- wp:block {"ref":130} /-->`;
 

package/src/buttons/block.json

@@ -32,7 +32,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {

package/src/buttons/edit.native.js

@@ -28,6 +28,10 @@ const ALLOWED_BLOCKS = [ buttonBlockName ];
 
 const layoutProp = { type: 'default', alignments: [] };
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 export default function ButtonsEdit( {
 	attributes: { layout, align },
 	clientId,
@@ -41,7 +45,7 @@ export default function ButtonsEdit( {
 	const { marginLeft: spacing } = styles.spacing;
 
 	// Extract attributes from block layout
-	const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' );
+	const layoutBlockSupport = getBlockSupport( name, 'layout' );
 	const defaultBlockLayout = layoutBlockSupport?.default;
 	const usedLayout = layout || defaultBlockLayout || {};
 	const { justifyContent } = usedLayout;
@@ -137,10 +141,7 @@ export default function ButtonsEdit( {
 								},
 							} )
 						}
-						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
-						} }
+						popoverProps={ POPOVER_PROPS }
 					/>
 				</BlockControls>
 			) }
@@ -167,7 +168,7 @@ export default function ButtonsEdit( {
 				parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to.
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
-				__experimentalLayout={ layoutProp }
+				layout={ layoutProp }
 				templateInsertUpdatesSelection
 				blockWidth={ blockWidth }
 			/>

package/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -71,3 +71,9 @@ exports[`Buttons block when a button is shown removing button along with buttons
 <p></p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the delete (backspace) key 1`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -18,6 +18,7 @@ import {
  */
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { BACKSPACE } from '@wordpress/keycodes';
 
 const BUTTONS_HTML = `<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>
@@ -80,7 +81,8 @@ describe( 'Buttons block', () => {
 			);
 
 			const incrementButton = await within( radiusStepper ).findByTestId(
-				'Increment'
+				'Increment',
+				{ hidden: true }
 			);
 			fireEvent( incrementButton, 'onPressIn' );
 
@@ -180,7 +182,7 @@ describe( 'Buttons block', () => {
 			expect( addBlockHerePlaceholders.length ).toBe( 0 );
 
 			// Add a new Button block
-			fireEvent.press( await screen.findByText( 'Button' ) );
+			fireEvent.press( within( blockList ).getByText( 'Button' ) );
 
 			// Get new button
 			const secondButtonBlock = await getBlock( screen, 'Button', {
@@ -232,6 +234,32 @@ describe( 'Buttons block', () => {
 
 				expect( getEditorHtml() ).toMatchSnapshot();
 			} );
+
+			it( 'removes the button and buttons block when deleting the block using the delete (backspace) key', async () => {
+				const screen = await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
+
+				// Get block
+				const buttonsBlock = await getBlock( screen, 'Buttons' );
+				triggerBlockListLayout( buttonsBlock );
+
+				// Get inner button block
+				const buttonBlock = await getBlock( screen, 'Button' );
+				fireEvent.press( buttonBlock );
+
+				const buttonInput =
+					within( buttonBlock ).getByLabelText( 'Text input. Empty' );
+
+				// Delete block
+				fireEvent( buttonInput, 'onKeyDown', {
+					nativeEvent: {},
+					preventDefault() {},
+					keyCode: BACKSPACE,
+				} );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} );
 		} );
 	} );
 

package/src/calendar/block.json

@@ -17,7 +17,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"color": {
 			"link": true,
 			"__experimentalSkipSerialization": [ "text", "background" ],

package/src/categories/block.json

@@ -30,7 +30,6 @@
 	},
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/column/block.json

@@ -65,6 +65,6 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": true
+		"layout": true
 	}
 }

package/src/columns/block.json

@@ -43,7 +43,7 @@
 				"blockGap": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowEditing": false,

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

@@ -9,8 +9,8 @@ import {
 	openBlockSettings,
 	within,
 	getBlock,
-	waitFor,
 	dismissModal,
+	waitForModalVisible,
 } from 'test/helpers';
 
 /**
@@ -142,19 +142,17 @@ describe( 'Columns block', () => {
 
 		it( 'reaches the minimum limit of number of column blocks', async () => {
 			const screen = await initializeEditor();
-			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
 
 			// Wait for the variations modal to be visible
-			await waitFor(
-				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			const blockVariationModal = await screen.findByTestId(
+				'block-variation-modal'
 			);
+			await waitForModalVisible( blockVariationModal );
 
 			// Select a column variation
-			const blockVariationModal = getByTestId( 'block-variation-modal' );
-			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
 				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
@@ -169,7 +167,7 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Update the number of columns by adding one
-			const columnsControl = getByLabelText( /Number of columns/ );
+			const columnsControl = screen.getByLabelText( /Number of columns/ );
 			fireEvent( columnsControl, 'accessibilityAction', {
 				nativeEvent: { actionName: 'increment' },
 			} );
@@ -274,20 +272,19 @@ describe( 'Columns block', () => {
 		const screen = await initializeEditor( {
 			initialHtml: TWO_COLUMNS_BLOCK_HTML,
 		} );
-		const { getByLabelText } = screen;
 
 		// Get block
 		const columnsBlock = await getBlock( screen, 'Columns' );
 		fireEvent.press( columnsBlock );
 
 		// Open vertical alignment menu
-		const verticalAlignmentButton = getByLabelText(
+		const verticalAlignmentButton = screen.getByLabelText(
 			/Change vertical alignment/
 		);
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align top button
-		const verticalTopAlignmentButton = getByLabelText( /Align top/ );
+		const verticalTopAlignmentButton = screen.getByLabelText( /Align top/ );
 		fireEvent.press( verticalTopAlignmentButton );
 
 		// Get the first column
@@ -298,7 +295,8 @@ describe( 'Columns block', () => {
 		fireEvent.press( verticalAlignmentButton );
 
 		// Get Align bottom button
-		const verticalBottomAlignmentButton = getByLabelText( /Align bottom/ );
+		const verticalBottomAlignmentButton =
+			screen.getByLabelText( /Align bottom/ );
 		fireEvent.press( verticalBottomAlignmentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -335,19 +333,17 @@ describe( 'Columns block', () => {
 	describe( 'when using columns percentage mechanism', () => {
 		it( "updates the slider's input value", async () => {
 			const screen = await initializeEditor();
-			const { getByLabelText, getByTestId } = screen;
 
 			// Add block
 			await addBlock( screen, 'Columns' );
 
 			// Wait for the variations modal to be visible
-			await waitFor(
-				() => getByTestId( 'block-variation-modal' ).props.isVisible
+			const blockVariationModal = await screen.findByTestId(
+				'block-variation-modal'
 			);
+			await waitForModalVisible( blockVariationModal );
 
 			// Select a column variation
-			const blockVariationModal = getByTestId( 'block-variation-modal' );
-			await waitFor( () => blockVariationModal.props.isVisible );
 			const threeColumnLayout =
 				within( blockVariationModal ).getByLabelText(
 					/33 \/ 33 \/ 33 block/
@@ -362,10 +358,14 @@ describe( 'Columns block', () => {
 			await openBlockSettings( screen );
 
 			// Get width control
-			const widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '33.3' ) );
-			const widthTextInput =
-				within( widthControl ).getByDisplayValue( '33.3' );
+			const widthControl = screen.getByLabelText( /Width. Value is/ );
+			fireEvent.press(
+				within( widthControl ).getByText( '33.3', { hidden: true } )
+			);
+			const widthTextInput = within( widthControl ).getByDisplayValue(
+				'33.3',
+				{ hidden: true }
+			);
 			fireEvent.changeText( widthTextInput, '55.55555' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -390,9 +390,13 @@ describe( 'Columns block', () => {
 
 			// Set custom width value for the first column
 			let widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '50' ) );
-			let widthTextInput =
-				within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.press(
+				within( widthControl ).getByText( '50', { hidden: true } )
+			);
+			let widthTextInput = within( widthControl ).getByDisplayValue(
+				'50',
+				{ hidden: true }
+			);
 			fireEvent.changeText( widthTextInput, '90' );
 
 			// Dismiss settings
@@ -409,8 +413,12 @@ describe( 'Columns block', () => {
 
 			// Set custom width value for the second column
 			widthControl = getByLabelText( /Width. Value is/ );
-			fireEvent.press( within( widthControl ).getByText( '50' ) );
-			widthTextInput = within( widthControl ).getByDisplayValue( '50' );
+			fireEvent.press(
+				within( widthControl ).getByText( '50', { hidden: true } )
+			);
+			widthTextInput = within( widthControl ).getByDisplayValue( '50', {
+				hidden: true,
+			} );
 			fireEvent.changeText( widthTextInput, '55.5' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -431,21 +439,17 @@ describe( 'Columns block', () => {
 			'sets the predefined percentages for %s',
 			async ( layout ) => {
 				const screen = await initializeEditor();
-				const { getByTestId } = screen;
 
 				// Add block
 				await addBlock( screen, 'Columns' );
 
 				// Wait for the variations modal to be visible
-				await waitFor(
-					() => getByTestId( 'block-variation-modal' ).props.isVisible
+				const blockVariationModal = await screen.findByTestId(
+					'block-variation-modal'
 				);
+				await waitForModalVisible( blockVariationModal );
 
 				// Select a column variation
-				const blockVariationModal = getByTestId(
-					'block-variation-modal'
-				);
-				await waitFor( () => blockVariationModal.props.isVisible );
 				const columnLayout =
 					within( blockVariationModal ).getByLabelText( layout );
 				fireEvent.press( columnLayout );

package/src/comment-author-avatar/block.json

@@ -20,7 +20,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"inserter": false,
 		"__experimentalBorder": {

package/src/comment-author-name/block.json

@@ -22,7 +22,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/comment-content/block.json

@@ -14,7 +14,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-date/block.json

@@ -18,7 +18,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/comment-edit-link/block.json

@@ -18,7 +18,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

package/src/comment-reply-link/block.json

@@ -14,7 +14,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-template/block.json

@@ -10,7 +10,6 @@
 	"usesContext": [ "postId" ],
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"reusable": false,
 		"spacing": {

package/src/comments/block.json

@@ -18,7 +18,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/comments-pagination/block.json

@@ -17,7 +17,6 @@
 		"comments/paginationArrow": "paginationArrow"
 	},
 	"supports": {
-		"anchor": true,
 		"align": true,
 		"reusable": false,
 		"html": false,
@@ -30,7 +29,7 @@
 				"link": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {

package/src/comments-pagination-next/block.json

@@ -14,7 +14,6 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-numbers/block.json

@@ -9,7 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-previous/block.json

@@ -14,7 +14,6 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-title/edit.js

@@ -12,6 +12,7 @@ import {
 	useBlockProps,
 	InspectorControls,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useEntityProp } from '@wordpress/core-data';
@@ -21,11 +22,6 @@ import { useSelect } from '@wordpress/data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
-/**
- * Internal dependencies
- */
-import HeadingLevelDropdown from '../heading/heading-level-dropdown';
-
 export default function Edit( {
 	attributes: { textAlign, showPostTitle, showCommentsCount, level },
 	setAttributes,
@@ -98,7 +94,7 @@ export default function Edit( {
 				}
 			/>
 			<HeadingLevelDropdown
-				selectedLevel={ level }
+				value={ level }
 				onChange={ ( newLevel ) =>
 					setAttributes( { level: newLevel } )
 				}

package/src/cover/block.json

@@ -125,7 +125,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowJustification": false
 		}
 	},

package/src/cover/edit/resizable-cover-popover.js

@@ -12,7 +12,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../private-apis';
+import { unlock } from '../../lock-unlock';
 
 const RESIZABLE_BOX_ENABLE_OPTION = {
 	top: false,