@wordpress/block-library 8.12.0 → 8.12.2

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,

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

@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	render,
 	fireEvent,
-	waitFor,
+	waitForModalVisible,
 	within,
 	getBlock,
 	openBlockSettings,
@@ -185,14 +185,14 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'toggles a fixed background', async () => {
-		const { getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const fixedBackgroundButton = await waitFor( () =>
-			getByText( 'Fixed background' )
+		const fixedBackgroundButton = await screen.findByText(
+			'Fixed background'
 		);
 		fireEvent.press( fixedBackgroundButton );
 
@@ -215,7 +215,7 @@ describe( 'when an image is attached', () => {
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent(
-			screen.getByTestId( 'Slider Y-Axis Position' ),
+			screen.getByTestId( 'Slider Y-Axis Position', { hidden: true } ),
 			'valueChange',
 			'52'
 		);
@@ -240,10 +240,12 @@ describe( 'when an image is attached', () => {
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			screen.getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
 		);
 		fireEvent.changeText(
-			screen.getByLabelText( 'X-Axis Position' ),
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
 			'99'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
@@ -256,21 +258,26 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'discards canceled focal point changes', async () => {
-		const { getByText, getByLabelText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
+		const editFocalPointButton = await screen.findByText(
+			'Edit focal point'
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
 		);
-		fireEvent.changeText( getByLabelText( 'X-Axis Position' ), '80' );
-		fireEvent.press( getByLabelText( 'Go back' ) );
+		fireEvent.changeText(
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
+			'80'
+		);
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
 
 		expect( setAttributes ).not.toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -314,9 +321,13 @@ describe( 'when an image is attached', () => {
 
 		// Update Opacity attribute
 		const opacityControl = getByLabelText( /Opacity/ );
-		fireEvent.press( within( opacityControl ).getByText( '50' ) );
-		const heightTextInput =
-			within( opacityControl ).getByDisplayValue( '50' );
+		fireEvent.press(
+			within( opacityControl ).getByText( '50', { hidden: true } )
+		);
+		const heightTextInput = within( opacityControl ).getByDisplayValue(
+			'50',
+			{ hidden: true }
+		);
 		fireEvent.changeText( heightTextInput, '20' );
 
 		// The decreasing button should be disabled
@@ -356,7 +367,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -391,7 +402,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -447,7 +458,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -503,7 +514,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -536,12 +547,12 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set vw unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport width (vw)' ) );
+		fireEvent.press( getByText( 'px', { hidden: true } ) );
+		fireEvent.press( getByText( 'Viewport width (vw)', { hidden: true } ) );
 
 		// Update height attribute
-		fireEvent.press( getByText( '300' ) );
-		const heightTextInput = getByDisplayValue( '300' );
+		fireEvent.press( getByText( '300', { hidden: true } ) );
+		const heightTextInput = getByDisplayValue( '300', { hidden: true } );
 		fireEvent.changeText( heightTextInput, '20' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -561,8 +572,8 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set the pixel unit
-		fireEvent.press( getByText( 'vw' ) );
-		fireEvent.press( getByText( 'Pixels (px)' ) );
+		fireEvent.press( getByText( 'vw', { hidden: true } ) );
+		fireEvent.press( getByText( 'Pixels (px)', { hidden: true } ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
@@ -592,14 +603,17 @@ describe( 'minimum height settings', () => {
 				await openBlockSettings( screen );
 
 				// Set the unit name
-				fireEvent.press( getByText( 'vw' ) );
-				fireEvent.press( getByText( unitName ) );
+				fireEvent.press( getByText( 'vw', { hidden: true } ) );
+				fireEvent.press( getByText( unitName, { hidden: true } ) );
 
 				// Update height attribute
 				const heightControl = getByLabelText( /Minimum height/ );
-				fireEvent.press( within( heightControl ).getByText( value ) );
-				const heightTextInput =
-					within( heightControl ).getByDisplayValue( value );
+				fireEvent.press(
+					within( heightControl ).getByText( value, { hidden: true } )
+				);
+				const heightTextInput = within(
+					heightControl
+				).getByDisplayValue( value, { hidden: true } );
 				fireEvent.changeText( heightTextInput, minValue );
 
 				// The decreasing button should be disabled

package/src/cover/transforms.js

@@ -8,7 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 

package/src/details/block.json

@@ -5,7 +5,7 @@
 	"title": "Details",
 	"category": "text",
 	"description": "Hide and show additional content.",
-	"keywords": [ "disclosure", "summary", "hide", "accordion" ],
+	"keywords": [ "disclosure", "summary", "hide" ],
 	"textdomain": "default",
 	"attributes": {
 		"showContent": {

package/src/details/edit.js

@@ -30,15 +30,18 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	} );
 
 	// Check if either the block or the inner blocks are selected.
-	const hasSelection = useSelect( ( select ) => {
-		const { isBlockSelected, hasSelectedInnerBlock } =
-			select( blockEditorStore );
-		/* Sets deep to true to also find blocks inside the details content block. */
-		return (
-			hasSelectedInnerBlock( clientId, true ) ||
-			isBlockSelected( clientId )
-		);
-	}, [] );
+	const hasSelection = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			/* Sets deep to true to also find blocks inside the details content block. */
+			return (
+				hasSelectedInnerBlock( clientId, true ) ||
+				isBlockSelected( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	return (
 		<>

package/src/details/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();