@wordpress/block-library 8.11.0 → 8.12.1

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

@@ -202,6 +202,78 @@ exports[`Columns block when using the number of columns setting adds a column bl
 <!-- /wp:columns -->"
 `;
 
+exports[`Columns block when using the number of columns setting adds at least 15 Column blocks without limitation 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
 exports[`Columns block when using the number of columns setting reaches the minimum limit of number of column blocks 1`] = `
 "<!-- wp:columns -->
 <div class="wp-block-columns"><!-- wp:column -->

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

@@ -9,8 +9,8 @@ import {
 	openBlockSettings,
 	within,
 	getBlock,
-	waitFor,
 	dismissModal,
+	waitForModalVisible,
 } from 'test/helpers';
 
 /**
@@ -93,6 +93,31 @@ describe( 'Columns block', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
+		it( 'adds at least 15 Column blocks without limitation', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: TWO_COLUMNS_BLOCK_HTML,
+			} );
+			const { getByLabelText } = screen;
+
+			// Get block
+			const columnsBlock = await getBlock( screen, 'Columns' );
+			fireEvent.press( columnsBlock );
+
+			// Open block settings
+			await openBlockSettings( screen );
+
+			// Update the number of columns
+			const columnsControl = getByLabelText( /Number of columns/ );
+
+			for ( let x = 0; x < 15; x++ ) {
+				fireEvent( columnsControl, 'accessibilityAction', {
+					nativeEvent: { actionName: 'increment' },
+				} );
+			}
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
 		it( 'removes a column block when decrementing the value', async () => {
 			const screen = await initializeEditor( {
 				initialHtml: TWO_COLUMNS_BLOCK_HTML,
@@ -117,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/
@@ -144,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' },
 			} );
@@ -249,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
@@ -273,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();
@@ -310,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/
@@ -337,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();
@@ -365,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
@@ -384,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();
@@ -406,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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": "fse",
 	"name": "core/comment-author-avatar",
 	"title": "Comment Author Avatar (deprecated)",
@@ -20,7 +20,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"inserter": false,
 		"__experimentalBorder": {

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-author-name",
 	"title": "Comment Author Name",
 	"category": "theme",
@@ -22,7 +22,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/comment-content/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-content",
 	"title": "Comment Content",
 	"category": "theme",
@@ -14,7 +14,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-date/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-date",
 	"title": "Comment Date",
 	"category": "theme",
@@ -18,7 +18,6 @@
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-edit-link",
 	"title": "Comment Edit Link",
 	"category": "theme",
@@ -18,7 +18,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-reply-link",
 	"title": "Comment Reply Link",
 	"category": "theme",
@@ -14,7 +14,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/comment-template/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comment-template",
 	"title": "Comment Template",
 	"category": "design",
@@ -10,7 +10,6 @@
 	"usesContext": [ "postId" ],
 	"supports": {
 		"align": true,
-		"anchor": true,
 		"html": false,
 		"reusable": false,
 		"spacing": {

package/src/comment-template/index.php

@@ -30,8 +30,20 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 			$context['commentId'] = $comment_id;
 			return $context;
 		};
+
+		/*
+		 * We set commentId context through the `render_block_context` filter so
+		 * that dynamically inserted blocks (at `render_block` filter stage)
+		 * will also receive that context.
+		 */
 		add_filter( 'render_block_context', $filter_block_context );
-		$block_content = $block->render( array( 'dynamic' => false ) );
+
+		/*
+		 * We construct a new WP_Block instance from the parsed block so that
+		 * it'll receive any changes made by the `render_block_data` filter.
+		 */
+		$block_content = ( new WP_Block( $block->parsed_block ) )->render( array( 'dynamic' => false ) );
+
 		remove_filter( 'render_block_context', $filter_block_context );
 
 		$children = $comment->get_children();

package/src/comments/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments",
 	"title": "Comments",
 	"category": "theme",
@@ -18,7 +18,6 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
-		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/comments/deprecated.js

@@ -12,7 +12,7 @@ const v1 = {
 			default: 'div',
 		},
 	},
-	apiVersion: 2,
+	apiVersion: 3,
 	supports: {
 		align: [ 'wide', 'full' ],
 		html: false,

package/src/comments-pagination/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
 	"category": "theme",
@@ -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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-next",
 	"title": "Comments Next Page",
 	"category": "theme",
@@ -14,7 +14,6 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-next/index.php

@@ -26,7 +26,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );
 
-	$filter_link_attributes = function() {
+	$filter_link_attributes = static function() {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'next_comments_link_attributes', $filter_link_attributes );

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-numbers",
 	"title": "Comments Page Numbers",
 	"category": "theme",
@@ -9,7 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-pagination-previous",
 	"title": "Comments Previous Page",
 	"category": "theme",
@@ -14,7 +14,6 @@
 	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"color": {

package/src/comments-pagination-previous/index.php

@@ -22,7 +22,7 @@ function render_block_core_comments_pagination_previous( $attributes, $content,
 		$label = $pagination_arrow . $label;
 	}
 
-	$filter_link_attributes = function() {
+	$filter_link_attributes = static function() {
 		return get_block_wrapper_attributes();
 	};
 	add_filter( 'previous_comments_link_attributes', $filter_link_attributes );

package/src/comments-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/comments-title",
 	"title": "Comments Title",
 	"category": "theme",

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/cover",
 	"title": "Cover",
 	"category": "media",
@@ -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,