@wordpress/block-library 8.15.0 → 8.16.0

package/src/footnotes/format.js

@@ -12,16 +12,24 @@ import { insertObject } from '@wordpress/rich-text';
 import {
 	RichTextToolbarButton,
 	store as blockEditorStore,
+	privateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { name } from './block.json';
+import { unlock } from '../lock-unlock';
+
+const { usesContextKey } = unlock( privateApis );
 
 export const formatName = 'core/footnote';
+
+const POST_CONTENT_BLOCK_NAME = 'core/post-content';
+const SYNCED_PATTERN_BLOCK_NAME = 'core/block';
+
 export const format = {
 	title: __( 'Footnote' ),
 	tagName: 'sup',
@@ -30,17 +38,56 @@ export const format = {
 		'data-fn': 'data-fn',
 	},
 	contentEditable: false,
-	edit: function Edit( { value, onChange, isObjectActive } ) {
+	[ usesContextKey ]: [ 'postType' ],
+	edit: function Edit( {
+		value,
+		onChange,
+		isObjectActive,
+		context: { postType },
+	} ) {
 		const registry = useRegistry();
 		const {
 			getSelectedBlockClientId,
+			getBlocks,
 			getBlockRootClientId,
 			getBlockName,
-			getBlocks,
+			getBlockParentsByBlockName,
 		} = useSelect( blockEditorStore );
+		const footnotesBlockType = useSelect( ( select ) =>
+			select( blocksStore ).getBlockType( name )
+		);
+		/*
+		 * This useSelect exists because we need to use its return value
+		 * outside the event callback.
+		 */
+		const isBlockWithinPattern = useSelect( ( select ) => {
+			const {
+				getBlockParentsByBlockName: _getBlockParentsByBlockName,
+				getSelectedBlockClientId: _getSelectedBlockClientId,
+			} = select( blockEditorStore );
+			const parentCoreBlocks = _getBlockParentsByBlockName(
+				_getSelectedBlockClientId(),
+				SYNCED_PATTERN_BLOCK_NAME
+			);
+			return parentCoreBlocks && parentCoreBlocks.length > 0;
+		}, [] );
+
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
+		if ( ! footnotesBlockType ) {
+			return null;
+		}
+
+		if ( postType !== 'post' && postType !== 'page' ) {
+			return null;
+		}
+
+		// Checks if the selected block lives within a pattern.
+		if ( isBlockWithinPattern ) {
+			return null;
+		}
+
 		function onClick() {
 			registry.batch( () => {
 				let id;
@@ -65,10 +112,27 @@ export const format = {
 					onChange( newValue );
 				}
 
+				const selectedClientId = getSelectedBlockClientId();
+
+				/*
+				 * Attempts to find a common parent post content block.
+				 * This allows for locating blocks within a page edited in the site editor.
+				 */
+				const parentPostContent = getBlockParentsByBlockName(
+					selectedClientId,
+					POST_CONTENT_BLOCK_NAME
+				);
+
+				// When called with a post content block, getBlocks will return
+				// the block with controlled inner blocks included.
+				const blocks = parentPostContent.length
+					? getBlocks( parentPostContent[ 0 ] )
+					: getBlocks();
+
 				// BFS search to find the first footnote block.
 				let fnBlock = null;
 				{
-					const queue = [ ...getBlocks() ];
+					const queue = [ ...blocks ];
 					while ( queue.length ) {
 						const block = queue.shift();
 						if ( block.name === name ) {
@@ -83,12 +147,11 @@ export const format = {
 				// When there is no footnotes block in the post, create one and
 				// insert it at the bottom.
 				if ( ! fnBlock ) {
-					const clientId = getSelectedBlockClientId();
-					let rootClientId = getBlockRootClientId( clientId );
+					let rootClientId = getBlockRootClientId( selectedClientId );
 
 					while (
 						rootClientId &&
-						getBlockName( rootClientId ) !== 'core/post-content'
+						getBlockName( rootClientId ) !== POST_CONTENT_BLOCK_NAME
 					) {
 						rootClientId = getBlockRootClientId( rootClientId );
 					}

package/src/footnotes/index.js

@@ -21,7 +21,6 @@ export const settings = {
 	edit,
 };
 
-// Would be good to remove the format and HoR if the block is unregistered.
 registerFormatType( formatName, format );
 
 export const init = () => {

package/src/footnotes/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/footnotes` block on the server.
  *
+ * @since 6.3.0
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
@@ -57,6 +59,8 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
 
 /**
  * Registers the `core/footnotes` block on the server.
+ *
+ * @since 6.3.0
  */
 function register_block_core_footnotes() {
 	foreach ( array( 'post', 'page' ) as $post_type ) {
@@ -78,3 +82,206 @@ function register_block_core_footnotes() {
 	);
 }
 add_action( 'init', 'register_block_core_footnotes' );
+
+/**
+ * Saves the footnotes meta value to the revision.
+ *
+ * @since 6.3.0
+ *
+ * @param int $revision_id The revision ID.
+ */
+function wp_save_footnotes_meta( $revision_id ) {
+	$post_id = wp_is_post_revision( $revision_id );
+
+	if ( $post_id ) {
+		$footnotes = get_post_meta( $post_id, 'footnotes', true );
+
+		if ( $footnotes ) {
+			// Can't use update_post_meta() because it doesn't allow revisions.
+			update_metadata( 'post', $revision_id, 'footnotes', $footnotes );
+		}
+	}
+}
+add_action( 'wp_after_insert_post', 'wp_save_footnotes_meta' );
+
+/**
+ * Keeps track of the revision ID for "rest_after_insert_{$post_type}".
+ *
+ * @since 6.3.0
+ *
+ * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
+ *
+ * @param int $revision_id The revision ID.
+ */
+function wp_keep_footnotes_revision_id( $revision_id ) {
+	global $wp_temporary_footnote_revision_id;
+	$wp_temporary_footnote_revision_id = $revision_id;
+}
+add_action( '_wp_put_post_revision', 'wp_keep_footnotes_revision_id' );
+
+/**
+ * This is a specific fix for the REST API. The REST API doesn't update
+ * the post and post meta in one go (through `meta_input`). While it
+ * does fix the `wp_after_insert_post` hook to be called correctly after
+ * updating meta, it does NOT fix hooks such as post_updated and
+ * save_post, which are normally also fired after post meta is updated
+ * in `wp_insert_post()`. Unfortunately, `wp_save_post_revision` is
+ * added to the `post_updated` action, which means the meta is not
+ * available at the time, so we have to add it afterwards through the
+ * `"rest_after_insert_{$post_type}"` action.
+ *
+ * @since 6.3.0
+ *
+ * @global int $wp_temporary_footnote_revision_id The footnote revision ID.
+ *
+ * @param WP_Post $post The post object.
+ */
+function wp_add_footnotes_revisions_to_post_meta( $post ) {
+	global $wp_temporary_footnote_revision_id;
+
+	if ( $wp_temporary_footnote_revision_id ) {
+		$revision = get_post( $wp_temporary_footnote_revision_id );
+
+		if ( ! $revision ) {
+			return;
+		}
+
+		$post_id = $revision->post_parent;
+
+		// Just making sure we're updating the right revision.
+		if ( $post->ID === $post_id ) {
+			$footnotes = get_post_meta( $post_id, 'footnotes', true );
+
+			if ( $footnotes ) {
+				// Can't use update_post_meta() because it doesn't allow revisions.
+				update_metadata( 'post', $wp_temporary_footnote_revision_id, 'footnotes', $footnotes );
+			}
+		}
+	}
+}
+
+foreach ( array( 'post', 'page' ) as $post_type ) {
+	add_action( "rest_after_insert_{$post_type}", 'wp_add_footnotes_revisions_to_post_meta' );
+}
+
+/**
+ * Restores the footnotes meta value from the revision.
+ *
+ * @since 6.3.0
+ *
+ * @param int $post_id     The post ID.
+ * @param int $revision_id The revision ID.
+ */
+function wp_restore_footnotes_from_revision( $post_id, $revision_id ) {
+	$footnotes = get_post_meta( $revision_id, 'footnotes', true );
+
+	if ( $footnotes ) {
+		update_post_meta( $post_id, 'footnotes', $footnotes );
+	} else {
+		delete_post_meta( $post_id, 'footnotes' );
+	}
+}
+add_action( 'wp_restore_post_revision', 'wp_restore_footnotes_from_revision', 10, 2 );
+
+/**
+ * Adds the footnotes field to the revision.
+ *
+ * @since 6.3.0
+ *
+ * @param array $fields The revision fields.
+ * @return array The revision fields.
+ */
+function wp_add_footnotes_to_revision( $fields ) {
+	$fields['footnotes'] = __( 'Footnotes' );
+	return $fields;
+}
+add_filter( '_wp_post_revision_fields', 'wp_add_footnotes_to_revision' );
+
+/**
+ * Gets the footnotes field from the revision.
+ *
+ * @since 6.3.0
+ *
+ * @param string $revision_field The field value, but $revision->$field
+ *                               (footnotes) does not exist.
+ * @param string $field          The field name, in this case "footnotes".
+ * @param object $revision       The revision object to compare against.
+ * @return string The field value.
+ */
+function wp_get_footnotes_from_revision( $revision_field, $field, $revision ) {
+	return get_metadata( 'post', $revision->ID, $field, true );
+}
+add_filter( '_wp_post_revision_field_footnotes', 'wp_get_footnotes_from_revision', 10, 3 );
+
+/**
+ * The REST API autosave endpoint doesn't save meta, so we can use the
+ * `wp_creating_autosave` when it updates an exiting autosave, and
+ * `_wp_put_post_revision` when it creates a new autosave.
+ *
+ * @since 6.3.0
+ *
+ * @param int|array $autosave The autosave ID or array.
+ */
+function _wp_rest_api_autosave_meta( $autosave ) {
+	// Ensure it's a REST API request.
+	if ( ! defined( 'REST_REQUEST' ) || ! REST_REQUEST ) {
+		return;
+	}
+
+	$body = rest_get_server()->get_raw_data();
+	$body = json_decode( $body, true );
+
+	if ( ! isset( $body['meta']['footnotes'] ) ) {
+		return;
+	}
+
+	// `wp_creating_autosave` passes the array,
+	// `_wp_put_post_revision` passes the ID.
+	$id = is_int( $autosave ) ? $autosave : $autosave['ID'];
+
+	if ( ! $id ) {
+		return;
+	}
+
+	update_post_meta( $id, 'footnotes', $body['meta']['footnotes'] );
+}
+// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L391C1-L391C1.
+add_action( 'wp_creating_autosave', '_wp_rest_api_autosave_meta' );
+// See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L398.
+// Then https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/revision.php#L367.
+add_action( '_wp_put_post_revision', '_wp_rest_api_autosave_meta' );
+
+/**
+ * This is a workaround for the autosave endpoint returning early if the
+ * revision field are equal. The problem is that "footnotes" is not real
+ * revision post field, so there's nothing to compare against.
+ *
+ * This trick sets the "footnotes" field (value doesn't matter), which will
+ * cause the autosave endpoint to always update the latest revision. That should
+ * be fine, it should be ok to update the revision even if nothing changed. Of
+ * course, this is temporary fix.
+ *
+ * @since 6.3.0
+ *
+ * @param WP_Post         $prepared_post The prepared post object.
+ * @param WP_REST_Request $request       The request object.
+ *
+ * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L365-L384.
+ * See https://github.com/WordPress/wordpress-develop/blob/2103cb9966e57d452c94218bbc3171579b536a40/src/wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php#L219.
+ */
+function _wp_rest_api_force_autosave_difference( $prepared_post, $request ) {
+	// We only want to be altering POST requests.
+	if ( $request->get_method() !== 'POST' ) {
+		return $prepared_post;
+	}
+
+	// Only alter requests for the '/autosaves' route.
+	if ( substr( $request->get_route(), -strlen( '/autosaves' ) ) !== '/autosaves' ) {
+		return $prepared_post;
+	}
+
+	$prepared_post->footnotes = '[]';
+	return $prepared_post;
+}
+
+add_filter( 'rest_pre_insert_post', '_wp_rest_api_force_autosave_difference', 10, 2 );

package/src/gallery/edit.js

@@ -91,6 +91,7 @@ function GalleryEdit( props ) {
 		isSelected,
 		insertBlocksAfter,
 		isContentLocked,
+		onFocus,
 	} = props;
 
 	const { columns, imageCrop, linkTarget, linkTo, sizeSlug, caption } =
@@ -498,6 +499,7 @@ function GalleryEdit( props ) {
 			value: hasImageIds ? images : {},
 			autoOpenMediaUpload:
 				! hasImages && isSelected && wasBlockJustInserted,
+			onFocus,
 		},
 	} );
 	const mediaPlaceholder = (
@@ -616,44 +618,46 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls group="block">
-				{ ! isContentLocked && (
-					<ToolbarButton
-						onClick={ () => {
-							setShowCaption( ! showCaption );
-							if ( showCaption && caption ) {
-								setAttributes( { caption: undefined } );
-							}
-						} }
-						icon={ captionIcon }
-						isPressed={ showCaption }
-						label={
-							showCaption
-								? __( 'Remove caption' )
-								: __( 'Add caption' )
-						}
-					/>
-				) }
-			</BlockControls>
-			<BlockControls group="other">
-				<MediaReplaceFlow
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					accept="image/*"
-					handleUpload={ false }
-					onSelect={ updateImages }
-					name={ __( 'Add' ) }
-					multiple={ true }
-					mediaIds={ images
-						.filter( ( image ) => image.id )
-						.map( ( image ) => image.id ) }
-					addToGallery={ hasImageIds }
-				/>
-			</BlockControls>
 			{ Platform.isWeb && (
-				<GapStyles
-					blockGap={ attributes.style?.spacing?.blockGap }
-					clientId={ clientId }
-				/>
+				<>
+					<BlockControls group="block">
+						{ ! isContentLocked && (
+							<ToolbarButton
+								onClick={ () => {
+									setShowCaption( ! showCaption );
+									if ( showCaption && caption ) {
+										setAttributes( { caption: undefined } );
+									}
+								} }
+								icon={ captionIcon }
+								isPressed={ showCaption }
+								label={
+									showCaption
+										? __( 'Remove caption' )
+										: __( 'Add caption' )
+								}
+							/>
+						) }
+					</BlockControls>
+					<BlockControls group="other">
+						<MediaReplaceFlow
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
+							accept="image/*"
+							handleUpload={ false }
+							onSelect={ updateImages }
+							name={ __( 'Add' ) }
+							multiple={ true }
+							mediaIds={ images
+								.filter( ( image ) => image.id )
+								.map( ( image ) => image.id ) }
+							addToGallery={ hasImageIds }
+						/>
+					</BlockControls>
+					<GapStyles
+						blockGap={ attributes.style?.spacing?.blockGap }
+						clientId={ clientId }
+					/>
+				</>
 			) }
 			<Gallery
 				{ ...props }

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

@@ -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 dismissing 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( {
@@ -622,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/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

@@ -32,7 +32,6 @@ function render_block_core_image( $attributes, $content, $block ) {
 	}
 
 	$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'] ) ) {
@@ -50,8 +49,7 @@ function render_block_core_image( $attributes, $content, $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 &&
-		! empty( $experiments['gutenberg-interactivity-api-core-blocks'] )
+		'none' === $link_destination
 	) {
 		$should_load_view_script = true;
 	}

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