@wordpress/block-library 8.14.0 → 8.15.0

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

@@ -330,7 +330,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( await editor.findByText( 'ADD LINK' ) );
+			fireEvent.press( await editor.findByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -351,7 +351,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -392,7 +392,7 @@ describe( 'Embed block', () => {
 			const editor = await initializeWithEmbedBlock( EMPTY_EMBED_HTML );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			const embedEditURLModal = editor.getByTestId(
@@ -592,7 +592,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( editor.block );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );
@@ -602,7 +602,7 @@ describe( 'Embed block', () => {
 			fireEvent( embedEditURLModal, MODAL_DISMISS_EVENT );
 
 			// Edit URL.
-			fireEvent.press( editor.getByText( 'ADD LINK' ) );
+			fireEvent.press( editor.getByText( 'Add link' ) );
 
 			// Wait for edit URL modal to be visible.
 			await waitForModalVisible( embedEditURLModal );

package/src/file/block.json

@@ -65,8 +65,7 @@
 				"background": true,
 				"link": true
 			}
-		},
-		"interactivity": true
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/index.php

@@ -5,6 +5,24 @@
  * @package WordPress
  */
 
+if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) ) {
+	/**
+	 * Replaces view script for the File block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
+		if ( 'core/file' === $metadata['name'] ) {
+			$metadata['viewScript']                = array( 'file:./view-interactivity.min.js' );
+			$metadata['supports']['interactivity'] = true;
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_interactive_view_script', 10, 1 );
+}
+
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *
@@ -54,7 +72,7 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
+	if ( gutenberg_should_block_use_interactivity_api( 'core/file' ) && $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );

package/src/file/inspector.js

@@ -58,6 +58,7 @@ export default function FileBlockInspector( {
 						{ displayPreview && (
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Height in pixels' ) }
 								min={ MIN_PREVIEW_HEIGHT }
 								max={ Math.max(

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

@@ -94,6 +94,7 @@ exports[`File block renders file error state without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -322,6 +323,7 @@ exports[`File block renders file without crashing 1`] = `
           onStartShouldSetResponder={[Function]}
           placeholder="File name"
           placeholderTextColor="gray"
+          selectionColor="black"
           style={
             {
               "backgroundColor": undefined,
@@ -439,22 +441,13 @@ exports[`File block renders placeholder without crashing 1`] = `
   }
 >
   <View
-    accessibilityHint="Double tap to select"
-    accessibilityLabel="File block. Empty"
-    accessibilityRole="button"
-    accessible={true}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
     style={
       [
         [
-          undefined,
+          [
+            undefined,
+            false,
+          ],
           undefined,
           undefined,
         ],
@@ -462,33 +455,65 @@ exports[`File block renders placeholder without crashing 1`] = `
       ]
     }
   >
+    <View>
+      <View
+        style={
+          {
+            "fill": "black",
+          }
+        }
+      >
+        <View
+          style={{}}
+        >
+          <Svg
+            fill="black"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
+        </View>
+      </View>
+      <Text>
+        File
+      </Text>
+    </View>
     <View
+      accessibilityHint="Double tap to select"
+      accessibilityLabel="File block. Empty"
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        {
+          "bottom": 22,
+          "left": 22,
+          "right": 22,
+          "top": 22,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         {
-          "fill": "gray",
+          "opacity": 1,
         }
       }
     >
-      <View
-        style={{}}
-      >
-        <Svg
-          height={24}
-          style={{}}
-          viewBox="0 0 24 24"
-          width={24}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          Path
-        </Svg>
-      </View>
+      <Text>
+        Choose a file
+      </Text>
     </View>
-    <Text>
-      File
-    </Text>
-    <Text>
-      CHOOSE A FILE
-    </Text>
   </View>
 </View>
 `;

package/src/file/view-interactivity.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
+/**
+ * Internal dependencies
+ */
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
+
+store( {
+	selectors: {
+		core: {
+			file: {
+				hasPdfPreview,
+			},
+		},
+	},
+} );

package/src/file/view.js

@@ -1,18 +1,9 @@
-/**
- * WordPress dependencies
- */
-import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs as hasPdfPreview } from './utils';
+import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
 
-store( {
-	selectors: {
-		core: {
-			file: {
-				hasPdfPreview,
-			},
-		},
-	},
-} );
+document.addEventListener(
+	'DOMContentLoaded',
+	hidePdfEmbedsOnUnsupportedBrowsers
+);

package/src/footnotes/block.json

@@ -11,7 +11,6 @@
 	"supports": {
 		"html": false,
 		"multiple": false,
-		"inserter": false,
 		"reusable": false
 	},
 	"style": "wp-block-footnotes"

package/src/footnotes/edit.js

@@ -1,8 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { BlockIcon, RichText, useBlockProps } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { Placeholder } from '@wordpress/components';
+import { formatListNumbered as icon } from '@wordpress/icons';
 
 export default function FootnotesEdit( { context: { postType, postId } } ) {
 	const [ meta, updateMeta ] = useEntityProp(
@@ -12,8 +15,24 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 		postId
 	);
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+	const blockProps = useBlockProps();
+
+	if ( ! footnotes.length ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					instructions={ __(
+						'Footnotes found in blocks within this document will be displayed here.'
+					) }
+				/>
+			</div>
+		);
+	}
+
 	return (
-		<ol { ...useBlockProps() }>
+		<ol { ...blockProps }>
 			{ footnotes.map( ( { id, content } ) => (
 				<li key={ id }>
 					<RichText

package/src/footnotes/format.js

@@ -24,11 +24,9 @@ import { name } from './block.json';
 export const formatName = 'core/footnote';
 export const format = {
 	title: __( 'Footnote' ),
-	tagName: 'a',
+	tagName: 'sup',
 	className: 'fn',
 	attributes: {
-		id: 'id',
-		href: 'href',
 		'data-fn': 'data-fn',
 	},
 	contentEditable: false,
@@ -42,26 +40,30 @@ export const format = {
 		} = useSelect( blockEditorStore );
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
+
 		function onClick() {
 			registry.batch( () => {
-				const id = createId();
-				const newValue = insertObject(
-					value,
-					{
-						type: formatName,
-						attributes: {
-							href: '#' + id,
-							id: `${ id }-link`,
-							'data-fn': id,
+				let id;
+				if ( isObjectActive ) {
+					const object = value.replacements[ value.start ];
+					id = object?.attributes?.[ 'data-fn' ];
+				} else {
+					id = createId();
+					const newValue = insertObject(
+						value,
+						{
+							type: formatName,
+							attributes: {
+								'data-fn': id,
+							},
+							innerHTML: `<a href="#${ id }" id="${ id }-link">*</a>`,
 						},
-						innerHTML: '*',
-					},
-					value.end,
-					value.end
-				);
-				newValue.start = newValue.end - 1;
-
-				onChange( newValue );
+						value.end,
+						value.end
+					);
+					newValue.start = newValue.end - 1;
+					onChange( newValue );
+				}
 
 				// BFS search to find the first footnote block.
 				let fnBlock = null;

package/src/footnotes/style.scss

@@ -1,17 +1,20 @@
+// These styles are for backwards compatibility with the old footnotes anchors.
+// Can be removed in the future.
 .editor-styles-wrapper,
 .entry-content {
 	counter-reset: footnotes;
 }
 
-[data-fn].fn {
+a[data-fn].fn {
 	vertical-align: super;
 	font-size: smaller;
 	counter-increment: footnotes;
-	display: inline-block;
+	display: inline-flex;
+	text-decoration: none;
 	text-indent: -9999999px;
 }
 
-[data-fn].fn::after {
+a[data-fn].fn::after {
 	content: "[" counter(footnotes) "]";
 	text-indent: 0;
 	float: left;

package/src/gallery/edit.js

@@ -562,7 +562,7 @@ function GalleryEdit( props ) {
 							max={ Math.min( MAX_COLUMNS, images.length ) }
 							{ ...MOBILE_CONTROL_PROPS_RANGE_CONTROL }
 							required
-							size="__unstable-large"
+							__next40pxDefaultSize
 						/>
 					) }
 					<ToggleControl

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 */
@@ -161,7 +161,7 @@ describe( 'Gallery block', () => {
 
 	// 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.skip( 'block remains selected after dismissing the media options picker', async () => {
 		// Initialize with an empty gallery
 		const { getByLabelText, getByText, getByTestId } =
 			await initializeEditor( {
@@ -169,13 +169,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 +283,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 +321,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 +375,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 +429,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 +469,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 +511,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 +524,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 +533,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 +569,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 );
 

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/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,52 @@ function render_block_core_image( $attributes, $content ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
+	$should_load_view_script = false;
+	$experiments             = get_option( 'gutenberg-experiments' );
+	$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 &&
+		! empty( $experiments['gutenberg-interactivity-api-core-blocks'] )
+	) {
+		$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 +84,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

@@ -442,7 +442,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/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 ) =>