@wordpress/block-library 8.11.0 → 8.12.0

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

@@ -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,

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)",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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/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",

package/src/details/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
-	"__experimental": true,
+	"apiVersion": 3,
 	"name": "core/details",
 	"title": "Details",
 	"category": "text",

package/src/embed/block.json

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

package/src/file/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/file",
 	"title": "File",
 	"category": "media",
@@ -67,7 +67,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": "file:./interactivity.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

package/src/file/index.php

@@ -8,15 +8,27 @@
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *
- * @param array  $attributes The block attributes.
- * @param string $content    The block content.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The block content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the block content.
  */
-function render_block_core_file( $attributes, $content ) {
-	$should_load_view_script = ! empty( $attributes['displayPreview'] ) && ! wp_script_is( 'wp-block-file-view' );
-	if ( $should_load_view_script ) {
-		wp_enqueue_script( 'wp-block-file-view' );
+function render_block_core_file( $attributes, $content, $block ) {
+	$should_load_view_script = ! empty( $attributes['displayPreview'] );
+	$view_js_file            = 'wp-block-file-view';
+	// If the script already exists, there is no point in removing it from viewScript.
+	if ( ! wp_script_is( $view_js_file ) ) {
+		$script_handles = $block->block_type->view_script_handles;
+
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+		}
 	}
 
 	// Update object's aria-label attribute if present in block HTML.
@@ -25,7 +37,7 @@ function render_block_core_file( $attributes, $content ) {
 	$pattern = '@<object.+(?<attribute>aria-label="(?<filename>[^"]+)?")@i';
 	$content = preg_replace_callback(
 		$pattern,
-		function ( $matches ) {
+		static function ( $matches ) {
 			$filename     = ! empty( $matches['filename'] ) ? $matches['filename'] : '';
 			$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
 			$label        = $has_filename ?
@@ -41,6 +53,17 @@ function render_block_core_file( $attributes, $content ) {
 		$content
 	);
 
+	// If it uses the Interactivity API, add the directives.
+	if ( $should_load_view_script ) {
+		$processor = new WP_HTML_Tag_Processor( $content );
+		$processor->next_tag();
+		$processor->set_attribute( 'data-wp-interactive', '' );
+		$processor->next_tag( 'object' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
+		return $processor->get_updated_html();
+	}
+
 	return $content;
 }
 

package/src/freeform/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/freeform",
 	"title": "Classic",
 	"category": "text",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/gallery/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",

package/src/gallery/v1/save.js

@@ -70,7 +70,7 @@ export default function saveV1( { attributes } ) {
 									<RichText.Content
 										tagName="figcaption"
 										className={ classnames(
-											'blocks-gallery-item',
+											'blocks-gallery-item__caption',
 											__experimentalGetElementClassName(
 												'caption'
 											)

package/src/group/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",

package/src/heading/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/heading",
 	"title": "Heading",
 	"category": "text",

package/src/home-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/home-link",
 	"category": "design",
 	"parent": [ "core/navigation" ],

package/src/html/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/html",
 	"title": "Custom HTML",
 	"category": "widgets",

package/src/image/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
@@ -80,13 +80,13 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
-		},
-		"behaviors": {
-			"type": "object"
 		}
 	},
 	"supports": {
 		"anchor": true,
+		"behaviors": {
+			"lightbox": true
+		},
 		"color": {
 			"text": false,
 			"background": false

package/src/image/index.php

@@ -30,78 +30,6 @@ function render_block_core_image( $attributes, $content ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
-	$link_destination = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
-
-	// Get the lightbox setting from the block attributes.
-	if ( isset( $attributes['behaviors']['lightbox'] ) ) {
-		$lightbox = $attributes['behaviors']['lightbox'];
-		// If the lightbox setting is not set in the block attributes, get it from the theme.json file.
-	} else {
-		$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();
-		if ( isset( $theme_data['behaviors']['blocks']['core/image']['lightbox'] ) ) {
-			$lightbox = $theme_data['behaviors']['blocks']['core/image']['lightbox'];
-		} else {
-			$lightbox = false;
-		}
-	}
-
-	$experiments = get_option( 'gutenberg-experiments' );
-
-	if ( ! empty( $experiments['gutenberg-interactivity-api-core-blocks'] ) && 'none' === $link_destination && $lightbox ) {
-
-		$aria_label = 'Open image lightbox';
-		if ( $processor->get_attribute( 'alt' ) ) {
-			$aria_label .= ' : ' . $processor->get_attribute( 'alt' );
-		}
-		$content = $processor->get_updated_html();
-
-		// Wrap the image in the body content with a button.
-		$img = null;
-		preg_match( '/<img[^>]+>/', $content, $img );
-		$button       = '<div class="img-container">
-			 					<button aria-haspopup="dialog" aria-label="' . $aria_label . '" data-wp-on.click="actions.core.image.showLightbox"></button>'
-									. $img[0] .
-								'</div>';
-		$body_content = preg_replace( '/<img[^>]+>/', $button, $content );
-
-		// For the modal, set an ID on the image to be used for an aria-labelledby attribute.
-		$modal_content = new WP_HTML_Tag_Processor( $content );
-		$modal_content->next_tag( 'img' );
-		$image_lightbox_id = $modal_content->get_attribute( 'class' ) . '-lightbox';
-		$modal_content->set_attribute( 'id', $image_lightbox_id );
-		$modal_content = $modal_content->get_updated_html();
-
-		$background_color  = wp_get_global_styles( array( 'color', 'background' ) );
-		$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
-
-		return
-			<<<HTML
-				<div class="wp-lightbox-container"
-					data-wp-island
-					data-wp-context='{ "core": { "image": { "initialized": false, "lightboxEnabled": false } } }'>
-						$body_content
-						<div data-wp-body="" class="wp-lightbox-overlay"
-							data-wp-bind.role="selectors.core.image.roleAttribute"
-							aria-labelledby="$image_lightbox_id"
-							data-wp-class.initialized="context.core.image.initialized"
-							data-wp-class.active="context.core.image.lightboxEnabled"
-							data-wp-bind.aria-hidden="!context.core.image.lightboxEnabled"
-							data-wp-bind.aria-modal="context.core.image.lightboxEnabled"
-							data-wp-effect="effects.core.image.initLightbox"
-							data-wp-on.keydown="actions.core.image.handleKeydown"
-							data-wp-on.mousewheel="actions.core.image.hideLightbox"
-							data-wp-on.click="actions.core.image.hideLightbox"
-							>
-								<button aria-label="Close lightbox" class="close-button" data-wp-on.click="actions.core.image.hideLightbox">
-									$close_button_icon
-								</button>
-								$modal_content
-								<div class="scrim" style="background-color: $background_color"></div>
-						</div>
-				</div>
-HTML;
-	}
-
 	return $processor->get_updated_html();
 }
 

package/src/image/interactivity.js

@@ -89,6 +89,11 @@ store( {
 				roleAttribute: ( { context } ) => {
 					return context.core.image.lightboxEnabled ? 'dialog' : '';
 				},
+				imageSrc: ( { context } ) => {
+					return context.core.image.initialized
+						? context.core.image.imageSrc
+						: '';
+				},
 			},
 		},
 	},

package/src/image/style.scss

@@ -186,23 +186,35 @@
 	visibility: hidden;
 
 	.close-button {
-		font-size: 40px;
 		position: absolute;
-		top: 20px;
-		right: 20px;
+		top: 12.5px;
+		right: 12.5px;
+		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
 	}
 
 	.wp-block-image {
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		width: 100%;
 		height: 100%;
-		z-index: 3000000;
 		position: absolute;
+		z-index: 3000000;
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		flex-direction: column;
+		padding: 30px;
+
+		figcaption {
+			display: none;
+		}
+
+		img {
+			max-width: 100%;
+			max-height: 100%;
+			width: auto;
+		}
 	}
 
 	button {

package/src/index.js

@@ -147,6 +147,7 @@ const getAllBlocks = () => {
 		columns,
 		commentAuthorAvatar,
 		cover,
+		details,
 		embed,
 		file,
 		group,
@@ -226,9 +227,6 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
-	if ( window?.__experimentalEnableDetailsBlocks ) {
-		blocks.push( details );
-	}
 	return blocks.filter( Boolean );
 };
 

package/src/latest-comments/block.json

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

package/src/latest-posts/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/latest-posts",
 	"title": "Latest Posts",
 	"category": "widgets",

package/src/list/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list",
 	"title": "List",
 	"category": "text",

package/src/list-item/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",

package/src/loginout/block.json

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

package/src/media-text/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/media-text",
 	"title": "Media & Text",
 	"category": "media",

package/src/missing/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/missing",
 	"title": "Unsupported",
 	"category": "text",

package/src/more/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/more",
 	"title": "More",
 	"category": "design",