@wordpress/block-library 8.13.0 → 8.15.0

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/{interactivity.js → view-interactivity.js}

@@ -1,7 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { store } from '../utils/interactivity';
 import { browserSupportsPdfs as hasPdfPreview } from './utils';
 
 store( {

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/index.php

@@ -59,15 +59,17 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
  * Registers the `core/footnotes` block on the server.
  */
 function register_block_core_footnotes() {
-	register_post_meta(
-		'post',
-		'footnotes',
-		array(
-			'show_in_rest' => true,
-			'single'       => true,
-			'type'         => 'string',
-		)
-	);
+	foreach ( array( 'post', 'page' ) as $post_type ) {
+		register_post_meta(
+			$post_type,
+			'footnotes',
+			array(
+				'show_in_rest' => true,
+				'single'       => true,
+				'type'         => 'string',
+			)
+		);
+	}
 	register_block_type_from_metadata(
 		__DIR__ . '/footnotes',
 		array(

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;
 }
 
-.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;
 }
 
-.fn::after {
+a[data-fn].fn::after {
 	content: "[" counter(footnotes) "]";
 	text-indent: 0;
 	float: left;

package/src/gallery/block.json

@@ -115,7 +115,9 @@
 			"blockGap": [ "horizontal", "vertical" ],
 			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"blockGap": true,
+				"margin": false,
+				"padding": false
 			}
 		},
 		"color": {

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/group/block.json

@@ -29,6 +29,7 @@
 		"html": false,
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,

package/src/heading/block.json

@@ -40,7 +40,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,

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

@@ -112,4 +112,22 @@ describe( 'Heading block', () => {
 		// Assert
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'change level dropdown displays active selection', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Heading' );
+		const headingBlock = await getBlock( screen, 'Heading' );
+
+		// Act
+		fireEvent.press( headingBlock );
+		fireEvent.press( screen.getByLabelText( 'Change level' ) );
+
+		// Assert
+		expect(
+			within( screen.getByLabelText( 'Heading 2' ) ).getByTestId(
+				'bottom-sheet-cell-selected-icon'
+			)
+		).toBeVisible();
+	} );
 } );

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

@@ -69,6 +69,12 @@
 		"height": {
 			"type": "number"
 		},
+		"aspectRatio": {
+			"type": "string"
+		},
+		"scale": {
+			"type": "string"
+		},
 		"sizeSlug": {
 			"type": "string"
 		},