@wordpress/block-library 8.14.0 → 8.16.0

package/src/gallery/test/index.native.js

@@ -134,7 +134,7 @@ describe( 'Gallery block', () => {
 		// Tap on Gallery block
 		const block = await getBlock( screen, 'Gallery' );
 		fireEvent.press( block );
-		fireEvent.press( within( block ).getByText( 'ADD MEDIA' ) );
+		fireEvent.press( within( block ).getByText( 'Add media' ) );
 
 		// Observe that media options picker is displayed
 		/* eslint-disable jest/no-conditional-expect */
@@ -159,9 +159,7 @@ describe( 'Gallery block', () => {
 		/* eslint-enable jest/no-conditional-expect */
 	} );
 
-	// This case is disabled until the issue (https://github.com/WordPress/gutenberg/issues/38444)
-	// is addressed.
-	it.skip( 'block remains selected after dimissing the media options picker', async () => {
+	it( 'block remains selected after dismissing the media options picker', async () => {
 		// Initialize with an empty gallery
 		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
@@ -169,13 +167,13 @@ describe( 'Gallery block', () => {
 			} );
 
 		// Tap on Gallery block
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 
 		// Observe that media options picker is displayed
 		expect( getByText( 'Choose images' ) ).toBeVisible();
 		expect( getByText( 'WordPress Media Library' ) ).toBeVisible();
 
-		// Dimiss the picker
+		// Dismiss the picker
 		if ( Platform.isIOS ) {
 			fireEvent.press( getByText( 'Cancel' ) );
 		} else {
@@ -283,7 +281,7 @@ describe( 'Gallery block', () => {
 		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		selectOption( 'Choose from device' );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
@@ -321,7 +319,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Choose from device' ) );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
@@ -375,7 +373,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Take a photo
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Take a Photo' ) );
 		expectMediaPickerCall( 'DEVICE_CAMERA', [ 'image' ], true );
 
@@ -429,7 +427,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Upload images from free photo library
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Free Photo Library' ) );
 		expectMediaPickerCall( 'stock-photo-library', [ 'image' ], true );
 
@@ -469,7 +467,7 @@ describe( 'Gallery block', () => {
 		const { galleryBlock, getByText } = await initializeWithGalleryBlock();
 
 		// Upload images from device
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Choose from device' ) );
 		expectMediaPickerCall( 'DEVICE_MEDIA_LIBRARY', [ 'image' ], true );
 
@@ -511,10 +509,11 @@ describe( 'Gallery block', () => {
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc010
 	it( 'rearranges gallery items', async () => {
 		// Initialize with a gallery that contains three items
-		const { galleryBlock } = await initializeWithGalleryBlock( {
-			numberOfItems: 3,
-			media,
-		} );
+		const { getByLabelText, galleryBlock } =
+			await initializeWithGalleryBlock( {
+				numberOfItems: 3,
+				media,
+			} );
 
 		// Rearrange items (final disposition will be: Image 3 - Image 1 - Image 2)
 		const galleryItem1 = getGalleryItem( galleryBlock, 1 );
@@ -523,7 +522,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem3 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem3 ).getByLabelText(
+				getByLabelText(
 					/Move block left from position 3 to position 2/
 				)
 			)
@@ -532,7 +531,7 @@ describe( 'Gallery block', () => {
 		fireEvent.press( galleryItem1 );
 		await act( () =>
 			fireEvent.press(
-				within( galleryItem1 ).getByLabelText(
+				getByLabelText(
 					/Move block right from position 1 to position 2/
 				)
 			)
@@ -568,7 +567,7 @@ describe( 'Gallery block', () => {
 		);
 
 		// Upload images from other apps
-		fireEvent.press( getByText( 'ADD MEDIA' ) );
+		fireEvent.press( getByText( 'Add media' ) );
 		fireEvent.press( getByText( 'Other Apps' ) );
 		expectMediaPickerCall( 'other-files', [ 'image' ], true );
 
@@ -621,6 +620,20 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( 'does not display MediaReplaceFlow component within the block toolbar', async () => {
+		const screen = await initializeWithGalleryBlock( {
+			numberOfItems: 3,
+			media,
+		} );
+		const { queryByTestId } = screen;
+
+		fireEvent.press( getBlock( screen, 'Gallery' ) );
+
+		// Expect the native MediaReplaceFlow component to not be present in the block toolbar
+		const mediaReplaceFlow = queryByTestId( 'media-replace-flow' );
+		expect( mediaReplaceFlow ).toBeNull();
+	} );
+
 	// Test cases related to TC013 - Settings - Columns
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc013
 	describe( 'Columns setting', () => {

package/src/heading/test/index.native.js

@@ -71,6 +71,10 @@ describe( 'Heading block', () => {
 
 		// Tap one color
 		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\nColor > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		// Dismiss the Block Settings modal.
 		fireEvent( blockSettingsModal, 'backdropPress' );

package/src/home-link/index.php

@@ -98,8 +98,15 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$classes[]       = 'wp-block-navigation-item';
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$classes[]       = 'wp-block-navigation-item';
+
+	if ( is_front_page() ) {
+		$classes[] = 'current-menu-item';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$classes[] = 'current-menu-item';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -124,8 +131,14 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
 		return '';
 	}
+	$aria_current = '';
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+	if ( is_front_page() ) {
+		$aria_current = ' aria-current="page"';
+	} elseif ( is_home() && ( (int) get_option( 'page_for_posts' ) !== get_queried_object_id() ) ) {
+		// Edge case where the Reading settings has a posts page set but not a static homepage.
+		$aria_current = ' aria-current="page"';
+	}
 
 	return sprintf(
 		'<li %1$s><a class="wp-block-home-link__content wp-block-navigation-item__content" href="%2$s" rel="home"%3$s>%4$s</a></li>',

package/src/image/block.json

@@ -127,5 +127,6 @@
 		{ "name": "rounded", "label": "Rounded" }
 	],
 	"editorStyle": "wp-block-image-editor",
-	"style": "wp-block-image"
+	"style": "wp-block-image",
+	"viewScript": "file:./view-interactivity.min.js"
 }

package/src/image/deprecated.js

@@ -9,7 +9,8 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
-	__experimentalGetElementClassName as getBorderClassesAndStyles,
+	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -545,11 +546,114 @@ const v5 = {
 
 /**
  * Deprecation for adding width and height as style rules on the inner img.
- * It also updates the widht and height attributes to be strings instead of numbers.
  *
  * @see https://github.com/WordPress/gutenberg/pull/31366
  */
 const v6 = {
+	attributes: {
+		align: {
+			type: 'string',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'src',
+			__experimentalRole: 'content',
+		},
+		alt: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'alt',
+			default: '',
+			__experimentalRole: 'content',
+		},
+		caption: {
+			type: 'string',
+			source: 'html',
+			selector: 'figcaption',
+			__experimentalRole: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'img',
+			attribute: 'title',
+			__experimentalRole: 'content',
+		},
+		href: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'href',
+			__experimentalRole: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'rel',
+		},
+		linkClass: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'class',
+		},
+		id: {
+			type: 'number',
+			__experimentalRole: 'content',
+		},
+		width: {
+			type: 'number',
+		},
+		height: {
+			type: 'number',
+		},
+		aspectRatio: {
+			type: 'string',
+		},
+		scale: {
+			type: 'string',
+		},
+		sizeSlug: {
+			type: 'string',
+		},
+		linkDestination: {
+			type: 'string',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'figure > a',
+			attribute: 'target',
+		},
+	},
+	supports: {
+		anchor: true,
+		behaviors: {
+			lightbox: true,
+		},
+		color: {
+			text: false,
+			background: false,
+		},
+		filter: {
+			duotone: true,
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				width: true,
+			},
+		},
+	},
 	save( { attributes } ) {
 		const {
 			url,
@@ -618,7 +722,9 @@ const v6 = {
 				) }
 				{ ! RichText.isEmpty( caption ) && (
 					<RichText.Content
-						className={ getBorderClassesAndStyles( 'caption' ) }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						tagName="figcaption"
 						value={ caption }
 					/>

package/src/image/image.js

@@ -566,9 +566,9 @@ export default function Image( {
 				className={ borderProps.className }
 				style={ {
 					width:
-						( width && height ) || aspectRatio ? '100%' : 'inherit',
+						( width && height ) || aspectRatio ? '100%' : undefined,
 					height:
-						( width && height ) || aspectRatio ? '100%' : 'inherit',
+						( width && height ) || aspectRatio ? '100%' : undefined,
 					objectFit: scale,
 					...borderProps.style,
 				} }

package/src/image/index.php

@@ -9,11 +9,12 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @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 block object.
  * @return string Returns the block content with the data-id attribute added.
  */
-function render_block_core_image( $attributes, $content ) {
+function render_block_core_image( $attributes, $content, $block ) {
 
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$processor->next_tag( 'img' );
@@ -30,14 +31,50 @@ function render_block_core_image( $attributes, $content ) {
 		$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;
+		}
+	}
+
+	// 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;
+	}
+
+	$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 ) ) {
+			$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 ) );
+		}
+	}
+
 	return $processor->get_updated_html();
 }
 
-/**
- * Registers the `core/image` block on server.
- */
+	/**
+	 * Registers the `core/image` block on server.
+	 */
 function register_block_core_image() {
-
 	register_block_type_from_metadata(
 		__DIR__ . '/image',
 		array(
@@ -45,4 +82,4 @@ function register_block_core_image() {
 		)
 	);
 }
-add_action( 'init', 'register_block_core_image' );
+	add_action( 'init', 'register_block_core_image' );

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

@@ -26,7 +26,6 @@ import { select, dispatch } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
-import '@wordpress/jest-console';
 
 /**
  * Internal dependencies
@@ -442,7 +441,7 @@ describe( 'Image Block', () => {
 		<!-- /wp:image -->`;
 		const screen = await initializeEditor( { initialHtml } );
 
-		fireEvent.press( screen.getByText( 'ADD IMAGE' ) );
+		fireEvent.press( screen.getByText( 'Add image' ) );
 		fireEvent.press( screen.getByText( 'WordPress Media Library' ) );
 
 		const expectedHtml = `<!-- wp:image {"id":${ IMAGE.id },"sizeSlug":"large","linkDestination":"none"} -->

package/src/index.js

@@ -282,7 +282,11 @@ export const registerCoreBlocks = (
 	blocks.forEach( ( { init } ) => init() );
 
 	setDefaultBlockName( paragraph.name );
-	if ( window.wp && window.wp.oldEditor ) {
+	if (
+		window.wp &&
+		window.wp.oldEditor &&
+		blocks.some( ( { name } ) => name === classic.name )
+	) {
 		setFreeformContentHandlerName( classic.name );
 	}
 	setUnregisteredTypeHandlerName( missing.name );

package/src/latest-comments/edit.js

@@ -68,6 +68,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 					/>
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>

package/src/latest-posts/edit.js

@@ -230,6 +230,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							label={ __( 'Max number of words' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -359,6 +360,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ postLayout === 'grid' && (
 					<RangeControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

package/src/list/edit.js

@@ -177,10 +177,12 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			{ controls }
 			{ ordered && (
 				<OrderedListSettings
-					setAttributes={ setAttributes }
-					ordered={ ordered }
-					reversed={ reversed }
-					start={ start }
+					{ ...{
+						setAttributes,
+						reversed,
+						start,
+						type,
+					} }
 				/>
 			) }
 		</>