Merge branch 'trunk' into add/interactivity-api-wp-each

docs/README.md

@@ -1,6 +1,6 @@
 # Block Editor Handbook
 
-👋 Welcome to the Block Editor Handbook.
+Welcome to the Block Editor Handbook.
 
 The [**Block Editor**](https://wordpress.org/gutenberg/) is a modern and up-to-date paradigm for WordPress site building and publishing. It uses a modular system of **Blocks** to compose and format content and is designed to create rich and flexible layouts for websites and digital products.
 

docs/contributors/code/back-merging-to-wp-core.md

@@ -0,0 +1,31 @@
+# Back-merging code to WordPress Core
+
+For major releases of the WordPress software, Gutenberg features need to be merged into WordPress Core. Typically this involves taking changes made in `.php` files within the Gutenberg repository and making the equivalent updates in the WP Core codebase.
+
+## Files/Directories
+
+Changes to files within the following files/directories will typically require back-merging to WP Core:
+
+-   `lib/`
+-   `phpunit/`
+
+## Ignored directories/files
+
+The following directories/files do _not_ require back-merging to WP Core:
+
+-   `lib/load.php` - Plugin specific code.
+-   `lib/experiments-page.php` - experiments are Plugin specific.
+-   `packages/block-library` - this is handled automatically during the packages sync process.
+-   `packages/e2e-tests/plugins` - PHP files related to e2e tests only. Mostly fixture data generators.
+-   `phpunit/blocks` - the code is maintained in Gutenberg so the test should be as well.
+
+Please note this list is not exhaustive.
+
+## Pull Request Criteria
+
+In general, all PHP code committed to the Gutenberg repository since the date of the final Gutenberg release that was included in [the _last_ stable WP Core release](https://developer.wordpress.org/block-editor/contributors/versions-in-wordpress/) should be considered for back merging to WP Core.
+
+There are however certain exceptions to that rule. PRs with the following criteria do _not_ require back-merging to WP Core:
+
+-   Does not contain changes to PHP code.
+-   Has label `Backport from WordPress Core` - this code is already in WP Core.

packages/block-editor/src/components/block-list/block.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, RawHTML, useContext } from '@wordpress/element';
+import { memo, useCallback, RawHTML, useContext } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -21,7 +21,7 @@ import {
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
-import { compose, pure } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -739,4 +739,4 @@ function BlockListBlockProvider( props ) {
 	);
 }
 
-export default pure( BlockListBlockProvider );
+export default memo( BlockListBlockProvider );

packages/block-editor/src/components/block-list/block.native.js

@@ -7,7 +7,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo, useState, useRef } from '@wordpress/element';
+import {
+	useCallback,
+	useMemo,
+	useState,
+	useRef,
+	memo,
+} from '@wordpress/element';
 import {
 	GlobalStylesContext,
 	getMergedGlobalStyles,
@@ -29,7 +35,7 @@ import {
 	withDispatch,
 	withSelect,
 } from '@wordpress/data';
-import { compose, ifCondition, pure } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -682,7 +688,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 } );
 
 export default compose(
-	pure,
+	memo,
 	applyWithSelect,
 	applyWithDispatch,
 	// Block is sometimes not mounted at the right time, causing it be undefined

packages/block-editor/src/components/block-preview/auto.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
+import { useResizeObserver, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { memo, useMemo } from '@wordpress/element';
 import { Disabled } from '@wordpress/components';
 
 /**
@@ -55,7 +55,7 @@ function ScaledBlockPreview( {
 	}, [ styles, additionalStyles ] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
-	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
+	MemoizedBlockList = MemoizedBlockList || memo( BlockList );
 
 	const scale = containerWidth / viewportWidth;
 	const aspectRatio = contentHeight

packages/block-editor/src/components/provider/index.js

@@ -46,7 +46,9 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				<KeyboardShortcuts.Register />
+				{ ! settings.__unstableIsPreviewMode && (
+					<KeyboardShortcuts.Register />
+				) }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);

packages/block-editor/src/hooks/typography.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { pure } from '@wordpress/compose';
+import { memo } from '@wordpress/element';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -57,4 +57,4 @@ function TypographyPanelPure( { clientId, setAttributes, settings } ) {
 // We don't want block controls to re-render when typing inside a block. `pure`
 // will prevent re-renders unless props change, so only pass the needed props
 // and not the whole attributes object.
-export const TypographyPanel = pure( TypographyPanelPure );
+export const TypographyPanel = memo( TypographyPanelPure );

packages/block-editor/src/hooks/utils.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId, useState } from '@wordpress/element';
+import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -402,10 +402,10 @@ export function useBlockSettings( name, parentLayout ) {
 
 export function createBlockEditFilter( features ) {
 	// We don't want block controls to re-render when typing inside a block.
-	// `pure` will prevent re-renders unless props change, so only pass the
+	// `memo` will prevent re-renders unless props change, so only pass the
 	// needed props and not the whole attributes object.
 	features = features.map( ( settings ) => {
-		return { ...settings, Edit: pure( settings.edit ) };
+		return { ...settings, Edit: memo( settings.edit ) };
 	} );
 	const withBlockEditHooks = createHigherOrderComponent(
 		( OriginalBlockEdit ) => ( props ) => {
@@ -488,7 +488,7 @@ function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
 	return null;
 }
 
-const BlockPropsPure = pure( BlockProps );
+const BlockPropsPure = memo( BlockProps );
 
 export function createBlockListBlockFilter( features ) {
 	const withBlockListBlockHooks = createHigherOrderComponent(

packages/block-library/src/embed/edit.js

@@ -127,16 +127,17 @@ const EmbedEdit = ( props ) => {
 	};
 
 	useEffect( () => {
-		if ( ! preview?.html || ! cannotEmbed || fetching ) {
+		if ( preview?.html || ! cannotEmbed || fetching ) {
 			return;
 		}
+
 		// At this stage, we're not fetching the preview and know it can't be embedded,
 		// so try removing any trailing slash, and resubmit.
 		const newURL = attributesUrl.replace( /\/$/, '' );
 		setURL( newURL );
 		setIsEditingURL( false );
 		setAttributes( { url: newURL } );
-	}, [ preview?.html, attributesUrl, cannotEmbed, fetching ] );
+	}, [ preview?.html, attributesUrl, cannotEmbed, fetching, setAttributes ] );
 
 	// Try a different provider in case the embed url is not supported.
 	useEffect( () => {

packages/block-library/src/footnotes/edit.js

@@ -14,10 +14,11 @@ export default function FootnotesEdit( { context: { postType, postId } } ) {
 		'meta',
 		postId
 	);
+	const footnotesSupported = 'string' === typeof meta?.footnotes;
 	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
 	const blockProps = useBlockProps();
 
-	if ( postType !== 'post' && postType !== 'page' ) {
+	if ( ! footnotesSupported ) {
 		return (
 			<div { ...blockProps }>
 				<Placeholder

packages/block-library/src/footnotes/format.js

@@ -15,6 +15,7 @@ import {
 	privateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
 import { createBlock, store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -38,12 +39,12 @@ export const format = {
 	},
 	interactive: true,
 	contentEditable: false,
-	[ usesContextKey ]: [ 'postType' ],
+	[ usesContextKey ]: [ 'postType', 'postId' ],
 	edit: function Edit( {
 		value,
 		onChange,
 		isObjectActive,
-		context: { postType },
+		context: { postType, postId },
 	} ) {
 		const registry = useRegistry();
 		const {
@@ -74,14 +75,17 @@ export const format = {
 			return parentCoreBlocks && parentCoreBlocks.length > 0;
 		}, [] );
 
+		const [ meta ] = useEntityProp( 'postType', postType, 'meta', postId );
+		const footnotesSupported = 'string' === typeof meta?.footnotes;
+
 		const { selectionChange, insertBlock } =
 			useDispatch( blockEditorStore );
 
 		if ( ! hasFootnotesBlockType ) {
 			return null;
 		}
 
-		if ( postType !== 'post' && postType !== 'page' ) {
+		if ( ! footnotesSupported ) {
 			return null;
 		}
 

packages/block-library/src/footnotes/index.php

@@ -68,17 +68,26 @@ function render_block_core_footnotes( $attributes, $content, $block ) {
  * @since 6.3.0
  */
 function register_block_core_footnotes() {
-	foreach ( array( 'post', 'page' ) as $post_type ) {
-		register_post_meta(
-			$post_type,
-			'footnotes',
-			array(
-				'show_in_rest'      => true,
-				'single'            => true,
-				'type'              => 'string',
-				'revisions_enabled' => true,
-			)
-		);
+	$post_types = get_post_types(
+		array(
+			'show_in_rest' => true,
+			'public'       => true,
+		)
+	);
+	foreach ( $post_types as $post_type ) {
+		// Only register the meta field if the post type supports the editor, custom fields, and revisions.
+		if ( post_type_supports( $post_type, 'editor' ) && post_type_supports( $post_type, 'custom-fields' ) && post_type_supports( $post_type, 'revisions' ) ) {
+			register_post_meta(
+				$post_type,
+				'footnotes',
+				array(
+					'show_in_rest'      => true,
+					'single'            => true,
+					'type'              => 'string',
+					'revisions_enabled' => true,
+				)
+			);
+		}
 	}
 	register_block_type_from_metadata(
 		__DIR__ . '/footnotes',

packages/block-library/src/video/edit.native.js

@@ -212,7 +212,7 @@ class VideoEdit extends Component {
 	render() {
 		const { setAttributes, attributes, isSelected, wasBlockJustInserted } =
 			this.props;
-		const { id, src } = attributes;
+		const { id, src, guid } = attributes;
 		const { videoContainerHeight } = this.state;
 
 		const toolbarEditButton = (
@@ -236,7 +236,10 @@ class VideoEdit extends Component {
 			></MediaUpload>
 		);
 
-		if ( ! src ) {
+		// NOTE: `guid` is not part of the block's attribute definition. This case
+		// handled here is a temporary fix until a we find a better approach.
+		const isSourcePresent = src || ( guid && id );
+		if ( ! isSourcePresent ) {
 			return (
 				<View style={ { flex: 1 } }>
 					<MediaPlaceholder

packages/block-library/src/video/test/edit.native.js

@@ -26,4 +26,42 @@ describe( 'Video block', () => {
 
 		expect( screen.getByText( 'Invalid URL.' ) ).toBeVisible();
 	} );
+
+	it( 'should render empty state when source is not present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video -->
+<figure class="wp-block-video"></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeVisible();
+	} );
+
+	it( 'should not render empty state when video source is present', async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video {"id":1234} -->
+<figure class="wp-block-video"><video controls src="https://VIDEO_URL.mp4"></video></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeNull();
+	} );
+
+	it( `should not render empty state when 'guid' and 'id' attributes are present`, async () => {
+		await initializeEditor( {
+			initialHtml: `
+<!-- wp:video {"guid":"ABCD1234","id":1234 -->
+<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
+https://videopress.com/<VIDEO_ID>
+</div></figure>
+<!-- /wp:video -->
+		`,
+		} );
+		const addVideoButton = screen.queryByText( 'Add video' );
+		expect( addVideoButton ).toBeNull();
+	} );
 } );

packages/compose/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Deprecations
+
+-   The `pure` HoC has been deprecated. Use `memo` or `PureComponent` instead ([#57173](https://github.com/WordPress/gutenberg/pull/57173)).
+
 ## 6.26.0 (2024-01-10)
 
 ## 6.25.0 (2023-12-13)

packages/compose/README.md

@@ -141,6 +141,8 @@ _Related_
 
 ### pure
 
+> **Deprecated** Use `memo` or `PureComponent` instead.
+
 Given a component returns the enhanced component augmented with a component only re-rendering when its props/state change
 
 ### throttle

packages/compose/src/higher-order/pure/index.tsx

@@ -17,6 +17,8 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
 /**
  * Given a component returns the enhanced component augmented with a component
  * only re-rendering when its props/state change
+ *
+ * @deprecated Use `memo` or `PureComponent` instead.
  */
 const pure = createHigherOrderComponent( function < Props extends {} >(
 	WrappedComponent: ComponentType< Props >