@wordpress/block-library 8.18.0 → 8.19.0

package/src/image/index.php

@@ -11,7 +11,7 @@
  *
  * @param  array    $attributes The block attributes.
  * @param  string   $content    The block content.
- * @param  WP_Block $block    The block object.
+ * @param  WP_Block $block      The block object.
  * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content, $block ) {
@@ -31,54 +31,277 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
-	$should_load_view_script = false;
-	$link_destination        = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
-	// Get the lightbox setting from the block attributes.
-	if ( isset( $attributes['behaviors']['lightbox'] ) ) {
-		$lightbox_settings = $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'][ $block->name ]['lightbox'] ) ) {
-			$lightbox_settings = $theme_data['behaviors']['blocks'][ $block->name ]['lightbox'];
-		} else {
-			$lightbox_settings = null;
-		}
-	}
+	$lightbox_enabled  = false;
+	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
-	// If the lightbox is enabled, the image is not linked, and the Interactivity API is enabled, load the view script.
-	if ( isset( $lightbox_settings['enabled'] ) &&
-		true === $lightbox_settings['enabled'] &&
-		'none' === $link_destination
-	) {
-		$should_load_view_script = true;
+	// If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered.
+	if ( isset( $lightbox_settings ) && 'none' === $link_destination ) {
+
+		if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) {
+			$lightbox_enabled = true;
+		}
 	}
 
 	// If at least one block in the page has the lightbox, mark the block type as interactive.
-	if ( $should_load_view_script ) {
+	if ( $lightbox_enabled ) {
 		$block->block_type->supports['interactivity'] = true;
 	}
 
+	// Determine whether the view script should be enqueued or not.
 	$view_js_file = 'wp-block-image-view';
 	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 ) ) {
+		if ( ! $lightbox_enabled && 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 ) ) {
+		if ( $lightbox_enabled && ! in_array( $view_js_file, $script_handles, true ) ) {
 			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
 		}
 	}
 
+	if ( $lightbox_enabled ) {
+		return block_core_image_render_lightbox( $processor->get_updated_html(), $block->parsed_block );
+	}
+
 	return $processor->get_updated_html();
 }
 
-	/**
-	 * Registers the `core/image` block on server.
-	 */
+/**
+ * Add the lightboxEnabled flag to the block data.
+ *
+ * This is used to determine whether the lightbox should be rendered or not.
+ *
+ * @param  array $block Block data.
+ * @return array        Filtered block data.
+ */
+function block_core_image_get_lightbox_settings( $block ) {
+	// Get the lightbox setting from the block attributes.
+	if ( isset( $block['attrs']['lightbox'] ) ) {
+		$lightbox_settings = $block['attrs']['lightbox'];
+		// If the lightbox setting is not set in the block attributes,
+		// check the legacy lightbox settings that are set using the
+		// `gutenberg_should_render_lightbox` filter.
+		// We can remove this elseif statement when the legacy lightbox settings are removed.
+	} elseif ( isset( $block['legacyLightboxSettings'] ) ) {
+		$lightbox_settings = $block['legacyLightboxSettings'];
+	}
+
+	if ( ! isset( $lightbox_settings ) ) {
+		$lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) );
+
+		// If not present in global settings, check the top-level global settings.
+		//
+		// NOTE: If no block-level settings are found, the previous call to
+		// `gutenberg_get_global_settings` will return the whole `theme.json`
+		// structure in which case we can check if the "lightbox" key is present at
+		// the top-level of the global settings and use its value.
+		if ( isset( $lightbox_settings['lightbox'] ) ) {
+			$lightbox_settings = gutenberg_get_global_settings( array( 'lightbox' ) );
+		}
+	}
+
+	return $lightbox_settings ?? null;
+}
+
+/**
+ * Add the directives and layout needed for the lightbox behavior.
+ *
+ * @param  string $block_content        Rendered block content.
+ * @param  array  $block                Block object.
+ * @return string                Filtered block content.
+ */
+function block_core_image_render_lightbox( $block_content, $block ) {
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+
+	$aria_label = __( 'Enlarge image', 'gutenberg' );
+
+	$alt_attribute = $processor->get_attribute( 'alt' );
+
+	if ( null !== $alt_attribute ) {
+		$alt_attribute = trim( $alt_attribute );
+	}
+
+	if ( $alt_attribute ) {
+		/* translators: %s: Image alt text. */
+		$aria_label = sprintf( __( 'Enlarge image: %s', 'gutenberg' ), $alt_attribute );
+	}
+	$content = $processor->get_updated_html();
+
+	// Currently, we are only enabling the zoom animation.
+	$lightbox_animation = 'zoom';
+
+	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
+	$z = new WP_HTML_Tag_Processor( $content );
+	$z->next_tag( 'img' );
+
+	if ( isset( $block['attrs']['id'] ) ) {
+		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
+		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
+		$img_width        = $img_metadata['width'];
+		$img_height       = $img_metadata['height'];
+	} else {
+		$img_uploaded_src = $z->get_attribute( 'src' );
+		$img_width        = 'none';
+		$img_height       = 'none';
+	}
+
+	if ( isset( $block['attrs']['scale'] ) ) {
+		$scale_attr = $block['attrs']['scale'];
+	} else {
+		$scale_attr = false;
+	}
+
+	$w = new WP_HTML_Tag_Processor( $content );
+	$w->next_tag( 'figure' );
+	$w->add_class( 'wp-lightbox-container' );
+	$w->set_attribute( 'data-wp-interactive', true );
+
+	$w->set_attribute(
+		'data-wp-context',
+		sprintf(
+			'{ "core":
+				{ "image":
+					{   "imageLoaded": false,
+						"initialized": false,
+						"lightboxEnabled": false,
+						"hideAnimationEnabled": false,
+						"preloadInitialized": false,
+						"lightboxAnimation": "%s",
+						"imageUploadedSrc": "%s",
+						"imageCurrentSrc": "",
+						"targetWidth": "%s",
+						"targetHeight": "%s",
+						"scaleAttr": "%s"
+					}
+				}
+			}',
+			$lightbox_animation,
+			$img_uploaded_src,
+			$img_width,
+			$img_height,
+			$scale_attr
+		)
+	);
+	$w->next_tag( 'img' );
+	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
+	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
+	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	$body_content = $w->get_updated_html();
+
+	// Wrap the image in the body content with a button.
+	$img = null;
+	preg_match( '/<img[^>]+>/', $body_content, $img );
+	$button       =
+				'<button
+					type="button"
+					aria-haspopup="dialog"
+					aria-label="' . esc_attr( $aria_label ) . '"
+					data-wp-on--click="actions.core.image.showLightbox"
+					data-wp-style--width="context.core.image.imageButtonWidth"
+					data-wp-style--height="context.core.image.imageButtonHeight"
+					data-wp-style--left="context.core.image.imageButtonLeft"
+					data-wp-style--top="context.core.image.imageButtonTop"
+				>
+				</button>'
+				. $img[0];
+	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
+
+	// We need both a responsive image and an enlarged image to animate
+	// the zoom seamlessly on slow internet connections; the responsive
+	// image is a copy of the one in the body, which animates immediately
+	// as the lightbox is opened, while the enlarged one is a full-sized
+	// version that will likely still be loading as the animation begins.
+	$m = new WP_HTML_Tag_Processor( $content );
+	$m->next_tag( 'figure' );
+	$m->add_class( 'responsive-image' );
+	$m->next_tag( 'img' );
+	// We want to set the 'src' attribute to an empty string in the responsive image
+	// because otherwise, as of this writing, the wp_filter_content_tags() function in
+	// WordPress will automatically add a 'srcset' attribute to the image, which will at
+	// times cause the incorrectly sized image to be loaded in the lightbox on Firefox.
+	// Because of this, we bind the 'src' attribute explicitly the current src to reliably
+	// use the exact same image as in the content when the lightbox is first opened while
+	// we wait for the larger image to load.
+	$m->set_attribute( 'src', '' );
+	$m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
+	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+	$initial_image_content = $m->get_updated_html();
+
+	$q = new WP_HTML_Tag_Processor( $content );
+	$q->next_tag( 'figure' );
+	$q->add_class( 'enlarged-image' );
+	$q->next_tag( 'img' );
+
+	// We set the 'src' attribute to an empty string to prevent the browser from loading the image
+	// on initial page load, then bind the attribute to a selector that returns the full-sized image src when
+	// the lightbox is opened. We could use 'loading=lazy' in combination with the 'hidden' attribute to
+	// accomplish the same behavior, but that approach breaks progressive loading of the image in Safari
+	// and Chrome (see https://github.com/WordPress/gutenberg/pull/52765#issuecomment-1674008151). Until that
+	// is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
+	$q->set_attribute( 'src', '' );
+	$q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
+	$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
+	$enlarged_image_content = $q->get_updated_html();
+
+	$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
+
+	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" 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>';
+	$close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) );
+	$dialog_label       = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image', 'gutenberg' );
+	$close_button_label = esc_attr__( 'Close', 'gutenberg' );
+
+	$lightbox_html = <<<HTML
+        <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
+            data-wp-bind--role="selectors.core.image.roleAttribute"
+            aria-label="$dialog_label"
+            data-wp-class--initialized="context.core.image.initialized"
+            data-wp-class--active="context.core.image.lightboxEnabled"
+            data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
+            data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
+            aria-hidden="true"
+            data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
+            aria-modal="false"
+            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 type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
+                    $close_button_icon
+                </button>
+                <div class="lightbox-image-container">$initial_image_content</div>
+				<div class="lightbox-image-container">$enlarged_image_content</div>
+                <div class="scrim" style="background-color: $background_color"></div>
+        </div>
+HTML;
+
+	return str_replace( '</figure>', $lightbox_html . '</figure>', $body_content );
+}
+
+/**
+ * Ensure that the view script has the `wp-interactivity` dependency.
+ *
+ * @since 6.4.0
+ */
+function block_core_image_ensure_interactivity_dependency() {
+	global $wp_scripts;
+	if (
+		isset( $wp_scripts->registered['wp-block-image-view'] ) &&
+		! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-image-view']->deps, true )
+	) {
+		$wp_scripts->registered['wp-block-image-view']->deps[] = 'wp-interactivity';
+	}
+}
+
+add_action( 'wp_print_scripts', 'block_core_image_ensure_interactivity_dependency' );
+
+/**
+ * Registers the `core/image` block on server.
+ */
 function register_block_core_image() {
 	register_block_type_from_metadata(
 		__DIR__ . '/image',
@@ -87,4 +310,4 @@ function register_block_core_image() {
 		)
 	);
 }
-	add_action( 'init', 'register_block_core_image' );
+add_action( 'init', 'register_block_core_image' );

package/src/latest-posts/index.php

@@ -48,7 +48,7 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	$filter_latest_posts_excerpt_more = static function( $more ) use ( $attributes ) {
+	$filter_latest_posts_excerpt_more = static function ( $more ) use ( $attributes ) {
 		$use_excerpt = 'excerpt' === $attributes['displayPostContentRadio'];
 		/* translators: %1$s is a URL to a post, excerpt truncation character, default … */
 		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>' ), esc_url( get_permalink() ) ) : $more;

package/src/list/deprecated.js

@@ -1,13 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
-import { migrateToListV2 } from './utils';
+import { migrateToListV2, migrateTypeToInlineStyle } from './utils';
 
 const v0 = {
 	attributes: {
@@ -138,6 +138,87 @@ const v1 = {
 	migrate: migrateToListV2,
 };
 
+// In #53301 changed to use the inline style instead of type attribute.
+const v2 = {
+	attributes: {
+		ordered: {
+			type: 'boolean',
+			default: false,
+			__experimentalRole: 'content',
+		},
+		values: {
+			type: 'string',
+			source: 'html',
+			selector: 'ol,ul',
+			multiline: 'li',
+			__unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+			default: '',
+			__experimentalRole: 'content',
+		},
+		type: {
+			type: 'string',
+		},
+		start: {
+			type: 'number',
+		},
+		reversed: {
+			type: 'boolean',
+		},
+		placeholder: {
+			type: 'string',
+		},
+	},
+	supports: {
+		anchor: true,
+		className: false,
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+			__experimentalDefaultControls: {
+				margin: false,
+				padding: false,
+			},
+		},
+		__unstablePasteTextInline: true,
+		__experimentalSelector: 'ol,ul',
+		__experimentalSlashInserter: true,
+	},
+	isEligible( { type } ) {
+		return !! type;
+	},
+	save( { attributes } ) {
+		const { ordered, type, reversed, start } = attributes;
+		const TagName = ordered ? 'ol' : 'ul';
+		return (
+			<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+				<InnerBlocks.Content />
+			</TagName>
+		);
+	},
+	migrate: migrateTypeToInlineStyle,
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -146,4 +227,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v1, v0 ];
+export default [ v2, v1, v0 ];

package/src/list/edit.js

@@ -124,9 +124,14 @@ function IndentUI( { clientId } ) {
 }
 
 export default function Edit( { attributes, setAttributes, clientId, style } ) {
+	const { ordered, type, reversed, start } = attributes;
 	const blockProps = useBlockProps( {
-		...( Platform.isNative && { style } ),
+		style: {
+			...( Platform.isNative && style ),
+			listStyleType: ordered && type !== 'decimal' ? type : undefined,
+		},
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
@@ -140,7 +145,6 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 		__experimentalCaptureToolbars: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );
-	const { ordered, type, reversed, start } = attributes;
 
 	const controls = (
 		<BlockControls group="block">
@@ -172,7 +176,6 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 				ordered={ ordered }
 				reversed={ reversed }
 				start={ start }
-				type={ type }
 				{ ...innerBlocksProps }
 			/>
 			{ controls }

package/src/list/ordered-list-settings.js

@@ -33,11 +33,26 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 				__nextHasNoMarginBottom
 				label={ __( 'Numbering style' ) }
 				options={ [
-					{ value: '1', label: __( 'Numbers' ) },
-					{ value: 'A', label: __( 'Uppercase letters' ) },
-					{ value: 'a', label: __( 'Lowercase letters' ) },
-					{ value: 'I', label: __( 'Uppercase Roman numerals' ) },
-					{ value: 'i', label: __( 'Lowercase Roman numerals' ) },
+					{
+						label: __( 'Numbers' ),
+						value: 'decimal',
+					},
+					{
+						label: __( 'Uppercase letters' ),
+						value: 'upper-alpha',
+					},
+					{
+						label: __( 'Lowercase letters' ),
+						value: 'lower-alpha',
+					},
+					{
+						label: __( 'Uppercase Roman numerals' ),
+						value: 'upper-roman',
+					},
+					{
+						label: __( 'Lowercase Roman numerals' ),
+						value: 'lower-roman',
+					},
 				] }
 				value={ type }
 				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }

package/src/list/save.js

@@ -7,7 +7,16 @@ export default function save( { attributes } ) {
 	const { ordered, type, reversed, start } = attributes;
 	const TagName = ordered ? 'ol' : 'ul';
 	return (
-		<TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+		<TagName
+			{ ...useBlockProps.save( {
+				reversed,
+				start,
+				style: {
+					listStyleType:
+						ordered && type !== 'decimal' ? type : undefined,
+				},
+			} ) }
+		>
 			<InnerBlocks.Content />
 		</TagName>
 	);

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

@@ -423,11 +423,9 @@ describe( 'List block', () => {
 
 		<!-- wp:list-item -->
 		<li>Two</li>
-		<!-- /wp:list-item --></ul>
-		<!-- /wp:list -->
+		<!-- /wp:list-item -->
 
-		<!-- wp:list -->
-		<ul><!-- wp:list-item -->
+		<!-- wp:list-item -->
 		<li>Three</li>
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->"

package/src/list/utils.js

@@ -3,7 +3,15 @@
  */
 import { createBlock, rawHandler } from '@wordpress/blocks';
 
+const LIST_STYLES = {
+	A: 'upper-alpha',
+	a: 'lower-alpha',
+	I: 'upper-roman',
+	i: 'lower-roman',
+};
+
 export function createListBlockFromDOMElement( listElement ) {
+	const type = listElement.getAttribute( 'type' );
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
 		anchor: listElement.id === '' ? undefined : listElement.id,
@@ -11,7 +19,7 @@ export function createListBlockFromDOMElement( listElement ) {
 			? parseInt( listElement.getAttribute( 'start' ), 10 )
 			: undefined,
 		reversed: listElement.hasAttribute( 'reversed' ) ? true : undefined,
-		type: listElement.getAttribute( 'type' ) ?? undefined,
+		type: type && LIST_STYLES[ type ] ? LIST_STYLES[ type ] : undefined,
 	};
 
 	const innerBlocks = Array.from( listElement.children ).map(
@@ -78,3 +86,16 @@ export function migrateToListV2( attributes ) {
 		listBlock.innerBlocks,
 	];
 }
+
+export function migrateTypeToInlineStyle( attributes ) {
+	const { type } = attributes;
+
+	if ( type && LIST_STYLES[ type ] ) {
+		return {
+			...attributes,
+			type: LIST_STYLES[ type ],
+		};
+	}
+
+	return attributes;
+}

package/src/navigation/block.json

@@ -91,6 +91,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"ariaLabel": true,
 		"html": false,
 		"inserter": true,
 		"typography": {
@@ -131,9 +132,10 @@
 					}
 				}
 			}
-		}
+		},
+		"interactivity": true
 	},
-	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/constants.js

@@ -13,6 +13,7 @@ export const ALLOWED_BLOCKS = [
 	'core/site-logo',
 	'core/navigation-submenu',
 	'core/loginout',
+	'core/buttons',
 ];
 
 export const PRIORITIZED_INSERTER_BLOCKS = [