@wordpress/block-library 8.14.0 → 8.16.0

package/src/footnotes/block.json

@@ -9,10 +9,52 @@
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": false,
+				"color": false,
+				"width": false,
+				"style": false
+			}
+		},
+		"color": {
+			"background": true,
+			"link": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"link": true,
+				"text": true
+			}
+		},
 		"html": false,
 		"multiple": false,
-		"inserter": false,
-		"reusable": false
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"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,36 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 		postId
 	);
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+	const blockProps = useBlockProps();
+
+	if ( postType !== 'post' && postType !== 'page' ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } /> }
+					label={ __( 'Footnotes' ) }
+					// To do: add instructions. We can't add new string in RC.
+				/>
+			</div>
+		);
+	}
+
+	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

@@ -12,61 +12,127 @@ 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: 'a',
+	tagName: 'sup',
 	className: 'fn',
 	attributes: {
-		id: 'id',
-		href: 'href',
 		'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( () => {
-				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
+						value.end,
+						value.end
+					);
+					newValue.start = newValue.end - 1;
+					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
 				);
-				newValue.start = newValue.end - 1;
 
-				onChange( newValue );
+				// 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 ) {
@@ -81,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/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

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