@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.2.0

package/src/image/image.js

@@ -69,7 +69,6 @@ import {
 	getStyleStateKey,
 } from '../utils/style-state';
 import { useOpenImageMediaEditorModal } from './use-open-image-media-editor-modal';
-import AnimatedGifConvertControl from './animated-gif-convert-control';
 import {
 	MIN_SIZE,
 	ALLOWED_MEDIA_TYPES,
@@ -854,21 +853,23 @@ export default function Image( {
 
 	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 
-	const mediaReplaceFlow = isSingleSelected && ! lockUrlControls && (
-		// For contentOnly mode, put this button in its own area so it has borders around it.
-		<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
-			<MediaReplaceFlow
-				mediaId={ id }
-				mediaURL={ url }
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				onSelect={ onSelectImage }
-				onSelectURL={ onSelectURL }
-				onError={ onUploadError }
-				name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
-				onReset={ () => onSelectImage( undefined ) }
-				variant="toolbar"
-			/>
-		</BlockControls>
+	const mediaControls = isSingleSelected && ! lockUrlControls && (
+		<>
+			{ /* For contentOnly mode, put this button in its own area so it has borders around it. */ }
+			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
+				<MediaReplaceFlow
+					mediaId={ id }
+					mediaURL={ url }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					onSelect={ onSelectImage }
+					onSelectURL={ onSelectURL }
+					onError={ onUploadError }
+					name={ ! url ? __( 'Add image' ) : __( 'Replace' ) }
+					onReset={ () => onSelectImage( undefined ) }
+					variant="toolbar"
+				/>
+			</BlockControls>
+		</>
 	);
 
 	const hasDataFormBlockFields =
@@ -1355,7 +1356,7 @@ export default function Image( {
 	if ( ! url && ! temporaryURL ) {
 		return (
 			<>
-				{ mediaReplaceFlow }
+				{ mediaControls }
 				{ controls }
 			</>
 		);
@@ -1390,13 +1391,7 @@ export default function Image( {
 
 	return (
 		<>
-			{ isSingleSelected && ! lockUrlControls && (
-				<AnimatedGifConvertControl
-					attributes={ attributes }
-					clientId={ clientId }
-				/>
-			) }
-			{ mediaReplaceFlow }
+			{ mediaControls }
 			{ controls }
 			{ featuredImageControl }
 			{ img }

package/src/image/transforms.js

@@ -3,6 +3,95 @@
  */
 import { createBlobURL, isBlobURL } from '@wordpress/blob';
 import { createBlock, getBlockAttributes } from '@wordpress/blocks';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Returns the subset of block attributes that should be carried over when
+ * converting an animated-GIF Image block into its converted Video block.
+ *
+ * The conversion swaps one block for another via `createBlock`, which would
+ * otherwise drop everything the author set on the original block. This carries
+ * the attributes both blocks support: block alignment, the HTML anchor, custom
+ * class names, and margin spacing.
+ *
+ * Image-only attributes such as links (`href`/`linkDestination`), sizing
+ * (`sizeSlug`/`scale`), and `border`/`shadow` styles are intentionally not
+ * carried: the Video block has no equivalent, so copying them would leave
+ * attributes the target block cannot represent.
+ *
+ * @param {Object} attributes Source block attributes.
+ * @return {Object} Attributes to spread into the converted block.
+ */
+function getCarriedGifConversionAttributes( attributes ) {
+	const { align, anchor, className, style } = attributes;
+	const margin = style?.spacing?.margin;
+
+	return {
+		...( align && { align } ),
+		...( anchor && { anchor } ),
+		...( className && { className } ),
+		...( margin && { style: { spacing: { margin } } } ),
+	};
+}
+
+/**
+ * Returns the sideloaded video companion of an animated GIF image attachment,
+ * or `null` when the media is not a converted animated GIF.
+ *
+ * An animated GIF uploaded through the editor gets a muted, looping video
+ * transcode sideloaded next to it and recorded (as basenames) in the
+ * attachment's `media_details.animated_video` / `animated_video_poster`.
+ *
+ * Block transforms match and run synchronously, so this reads the attachment
+ * record straight from the core-data store: it only returns the companion once
+ * the record is resolved. The Image block resolves the record while the block
+ * is selected, which is also when the block switcher can offer the transform.
+ *
+ * @param {number} id  Image attachment ID.
+ * @param {string} url Image block URL, used to cheaply skip non-GIF media.
+ * @return {Object|null} Companion details (absolute `src`/`poster` URLs and
+ *                       the GIF's intrinsic `width`/`height`), or `null`.
+ */
+function getAnimatedGifVideoCompanion( id, url ) {
+	if ( ! id ) {
+		return null;
+	}
+	/*
+	 * Only animated GIFs have a video companion. Gate on the `.gif` extension
+	 * so an ordinary image never reaches into the attachment record just to
+	 * discover it has no companion. Strip any query string or fragment first
+	 * so a URL like `cat.gif?ver=2` still matches.
+	 */
+	const urlPath = url?.split( /[?#]/ )[ 0 ];
+	if ( ! urlPath?.toLowerCase().endsWith( '.gif' ) ) {
+		return null;
+	}
+	const record = select( coreStore ).getEntityRecord(
+		'postType',
+		'attachment',
+		id,
+		{ context: 'view' }
+	);
+	const details = record?.media_details;
+	if ( ! details?.animated_video || ! record?.source_url ) {
+		return null;
+	}
+	// Companion files are sideloaded next to the GIF, so they share its
+	// directory; build their URLs from the GIF's own source URL.
+	const dir = record.source_url.slice(
+		0,
+		record.source_url.lastIndexOf( '/' ) + 1
+	);
+	return {
+		src: dir + details.animated_video,
+		poster: details.animated_video_poster
+			? dir + details.animated_video_poster
+			: undefined,
+		width: details.width,
+		height: details.height,
+	};
+}
 
 export function stripFirstImage( attributes, { shortcode } ) {
 	const { body } = document.implementation.createHTMLDocument( '' );
@@ -253,6 +342,45 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			// Offer converting an animated GIF into the Video block's "GIF"
+			// variation: a muted, looping, autoplaying video transcoded from
+			// the GIF and sideloaded next to it when it was uploaded. Only
+			// matches when that companion video exists, so ordinary images
+			// never see this transform.
+			type: 'block',
+			blocks: [ 'core/video' ],
+			isMatch: ( { id, url } ) =>
+				!! getAnimatedGifVideoCompanion( id, url ),
+			transform( attributes ) {
+				const { id, url, caption } = attributes;
+				const companion = getAnimatedGifVideoCompanion( id, url );
+
+				return createBlock( 'core/video', {
+					...getCarriedGifConversionAttributes( attributes ),
+					id,
+					src: companion.src,
+					poster: companion.poster,
+					caption,
+					controls: false,
+					loop: true,
+					autoplay: true,
+					muted: true,
+					playsInline: true,
+					/*
+					 * Carry the GIF's intrinsic dimensions so the <video>
+					 * keeps its aspect ratio from the first paint. Without
+					 * them the element collapses to the browser-default size
+					 * and then jumps once the poster/metadata load, which
+					 * shows up as a brief duplicated image during the swap.
+					 */
+					width: companion.width,
+					height: companion.height,
+				} );
+			},
+		},
+	],
 };
 
 export default transforms;

package/src/index.js

@@ -197,6 +197,8 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
+		playlist,
+		playlistTrack,
 		preformatted,
 		pullquote,
 		reusableBlock,
@@ -208,6 +210,10 @@ const getAllBlocks = () => {
 		socialLinks,
 		spacer,
 		table,
+		tabs,
+		tabList,
+		tabPanels,
+		tabPanel,
 		tagCloud,
 		textColumns,
 		verse,
@@ -281,12 +287,8 @@ const getAllBlocks = () => {
 	}
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
-		blocks.push( tabList );
-		blocks.push( tabs );
-		blocks.push( tabPanel );
-		blocks.push( tabPanels );
-		blocks.push( playlist );
-		blocks.push( playlistTrack );
+		// Blocks added here are only registered when the "Block experiments"
+		// option is enabled in the Gutenberg > Experiments settings page.
 	}
 
 	blocks.push( classic );
@@ -343,13 +345,23 @@ export const registerCoreBlocks = (
 				...( ( bootstrappedBlockType?.apiVersion ?? 0 ) < 3 && {
 					apiVersion: 3,
 				} ),
+				// Always pass the postId context so the server-side render can
+				// reproduce the same output as the front end, while preserving
+				// any context declared in the block's PHP registration.
+				usesContext: Array.from(
+					new Set( [
+						...( bootstrappedBlockType?.usesContext ?? [] ),
+						'postId',
+					] )
+				),
 				// Inspector controls are rendered by the auto-register hook in block-editor
-				edit: function Edit( { attributes } ) {
+				edit: function Edit( { attributes, context } ) {
 					const disabledRef = useDisabled();
 					const blockProps = useBlockProps( { ref: disabledRef } );
 					const { content, status, error } = useServerSideRender( {
 						block: blockName,
 						attributes,
+						urlQueryArgs: { post_id: context?.postId },
 					} );
 
 					if ( status === 'loading' ) {

package/src/latest-posts/edit.js

@@ -162,13 +162,10 @@ function Controls( { attributes, setAttributes } ) {
 			label: name,
 		} ) );
 	const categorySuggestions =
-		categoriesList?.reduce(
-			( accumulator, category ) => ( {
-				...accumulator,
-				[ category.name ]: category,
-			} ),
-			{}
-		) ?? {};
+		categoriesList?.reduce( ( accumulator, category ) => {
+			accumulator[ category.name ] = category;
+			return accumulator;
+		}, {} ) ?? {};
 	const selectCategories = ( tokens ) => {
 		const hasNoSuggestion = tokens.some(
 			( token ) =>
@@ -807,7 +804,7 @@ export default function LatestPostsEdit( {
 									<div
 										className="wp-block-latest-posts__post-full-content"
 										dangerouslySetInnerHTML={ {
-											__html: post.content.raw.trim(),
+											__html: post.content.rendered.trim(),
 										} }
 									/>
 								) }

package/src/latest-posts/index.php

@@ -44,6 +44,7 @@ function block_core_latest_posts_get_excerpt_length() {
  */
 function render_block_core_latest_posts( $attributes ) {
 	global $post, $block_core_latest_posts_excerpt_length;
+	static $rendering_stack = array();
 
 	$args = array(
 		'posts_per_page'      => $attributes['postsToShow'],
@@ -64,18 +65,23 @@ function render_block_core_latest_posts( $attributes ) {
 		$args['author'] = $attributes['selectedAuthor'];
 	}
 
-	$query        = new WP_Query();
-	$recent_posts = $query->query( $args );
+	$query = new WP_Query( $args );
 
 	if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {
 		update_post_thumbnail_cache( $query );
 	}
 
 	$list_items_markup = '';
+	// Snapshot the current global post so it can be restored after the loop.
+	// We use have_posts()/the_post() rather than foreach so that setup_postdata()
+	// is called for each post, establishing the correct global context for
+	// do_blocks() and other filters that run during full-content rendering.
+	$previous_post = $post ?? null;
 
-	foreach ( $recent_posts as $post ) {
-		$post_link = esc_url( get_permalink( $post ) );
-		$title     = get_the_title( $post );
+	while ( $query->have_posts() ) {
+		$query->the_post();
+		$post_link = esc_url( get_permalink() );
+		$title     = get_the_title();
 
 		if ( ! $title ) {
 			$title = __( '(no title)' );
@@ -83,7 +89,7 @@ function render_block_core_latest_posts( $attributes ) {
 
 		$list_items_markup .= '<li>';
 
-		if ( $attributes['displayFeaturedImage'] && has_post_thumbnail( $post ) ) {
+		if ( $attributes['displayFeaturedImage'] && has_post_thumbnail() ) {
 			$image_style = '';
 			if ( isset( $attributes['featuredImageSizeWidth'] ) ) {
 				$image_style .= sprintf( 'max-width:%spx;', $attributes['featuredImageSizeWidth'] );
@@ -98,7 +104,7 @@ function render_block_core_latest_posts( $attributes ) {
 			}
 
 			$featured_image = get_the_post_thumbnail(
-				$post,
+				null,
 				$attributes['featuredImageSizeSlug'],
 				array(
 					'style' => esc_attr( $image_style ),
@@ -126,7 +132,7 @@ function render_block_core_latest_posts( $attributes ) {
 		);
 
 		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
-			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
+			$author_display_name = get_the_author_meta( 'display_name' );
 
 			/* translators: byline. %s: author. */
 			$byline = sprintf( __( 'by %s' ), $author_display_name );
@@ -142,15 +148,15 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayPostDate'] ) && $attributes['displayPostDate'] ) {
 			$list_items_markup .= sprintf(
 				'<time datetime="%1$s" class="wp-block-latest-posts__post-date">%2$s</time>',
-				esc_attr( get_the_date( 'c', $post ) ),
-				get_the_date( '', $post )
+				esc_attr( get_the_date( 'c' ) ),
+				get_the_date( '' )
 			);
 		}
 
 		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
 			&& isset( $attributes['displayPostContentRadio'] ) && 'excerpt' === $attributes['displayPostContentRadio'] ) {
 
-			$trimmed_excerpt = get_the_excerpt( $post );
+			$trimmed_excerpt = get_the_excerpt();
 
 			/*
 			 * Adds a "Read more" link with screen reader text.
@@ -170,7 +176,7 @@ function render_block_core_latest_posts( $attributes ) {
 				}
 			}
 
-			if ( post_password_required( $post ) ) {
+			if ( post_password_required() ) {
 				$trimmed_excerpt = __( 'This content is password protected.' );
 			}
 
@@ -183,21 +189,45 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayPostContent'] ) && $attributes['displayPostContent']
 			&& isset( $attributes['displayPostContentRadio'] ) && 'full_post' === $attributes['displayPostContentRadio'] ) {
 
-			$post_content = html_entity_decode( $post->post_content, ENT_QUOTES, get_option( 'blog_charset' ) );
-
-			if ( post_password_required( $post ) ) {
+			if ( post_password_required() ) {
 				$post_content = __( 'This content is password protected.' );
+			} else {
+				$post_id      = get_the_ID();
+				$post_content = get_post_field( 'post_content', $post_id, 'raw' );
+				// Check if we're already rendering this post to prevent infinite recursion.
+				if ( in_array( $post_id, $rendering_stack, true ) ) {
+					$post_content = '';
+				} else {
+					$rendering_stack[] = $post_id;
+
+					try {
+						// Run through the actions that are typically taken on the_content.
+						$post_content = _wp_apply_block_content_filters( $post_content, 'latest-posts' );
+					} finally {
+						array_pop( $rendering_stack );
+					}
+				}
 			}
 
+			$post_content       = str_replace( ']]>', ']]&gt;', $post_content );
 			$list_items_markup .= sprintf(
 				'<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
-				wp_kses_post( $post_content )
+				$post_content
 			);
 		}
 
 		$list_items_markup .= "</li>\n";
 	}
 
+	// Restore the post context that was active before this secondary query.
+	// wp_reset_postdata() is intentionally not used here: when this block is
+	// rendered inside another post's content (e.g. via do_blocks()), it would
+	// restore to the main query post rather than the outer rendering post.
+	$post = $previous_post;
+	if ( $previous_post instanceof WP_Post ) {
+		setup_postdata( $previous_post );
+	}
+
 	remove_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
 	$layout             = $attributes['layout'] ?? array();

package/src/list-item/edit.js

@@ -83,7 +83,7 @@ export default function ListItemEdit( {
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 	} );
-	const useEnterRef = useEnter( { content, clientId } );
+	const useEnterRef = useEnter( clientId );
 	const useSpaceRef = useSpace( clientId );
 	const onMerge = useMerge( clientId, mergeBlocks );
 	return (

package/src/list-item/hooks/use-enter.js

@@ -6,11 +6,8 @@ import {
 	getDefaultBlockName,
 	cloneBlock,
 } from '@wordpress/blocks';
-import { useRef } from '@wordpress/element';
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -21,30 +18,31 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
-export default function useEnter( props ) {
+export default function useEnter( clientId ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
-		useSelect( blockEditorStore );
-	const propsRef = useRef( props );
-	propsRef.current = props;
+	const {
+		getBlock,
+		getBlockAttributes,
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockName,
+	} = useSelect( blockEditorStore );
 	const outdentListItem = useOutdentListItem();
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
 			if ( event.defaultPrevented || event.keyCode !== ENTER ) {
 				return;
 			}
-			const { content, clientId } = propsRef.current;
-			if ( content.length ) {
+			const { content } = getBlockAttributes( clientId ) ?? {};
+			if ( content?.length ) {
 				return;
 			}
 			event.preventDefault();
 			const canOutdent =
 				getBlockName(
-					getBlockRootClientId(
-						getBlockRootClientId( propsRef.current.clientId )
-					)
+					getBlockRootClientId( getBlockRootClientId( clientId ) )
 				) === 'core/list-item';
 			if ( canOutdent ) {
 				outdentListItem();
@@ -90,11 +88,6 @@ export default function useEnter( props ) {
 
 		// Capture phase so we run before writing-flow's ancestor-bubble
 		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeDelegatedListener(
-			element,
-			'keydown',
-			onKeyDown,
-			true
-		);
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 	}, [] );
 }

package/src/list-item/hooks/use-space.js

@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -16,7 +14,7 @@ import useIndentListItem from './use-indent-list-item';
 import useOutdentListItem from './use-outdent-list-item';
 import { unlock } from '../../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
@@ -63,7 +61,7 @@ export default function useSpace( clientId ) {
 
 			// Capture phase so we run before writing-flow's ancestor-bubble
 			// keydown handlers that gate on `event.defaultPrevented`.
-			return subscribeDelegatedListener(
+			return subscribeOwnedListener(
 				element,
 				'keydown',
 				onKeyDown,

package/src/media-text/editor.scss

@@ -15,6 +15,7 @@
 	}
 }
 
+// stylelint-disable-next-line selector-class-pattern -- re-resizable library class name.
 .wp-block-media-text .__resizable_base__ {
 	grid-column: 1 / span 2;
 	grid-row: 2;

package/src/more/editor.scss

@@ -18,7 +18,7 @@
 		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		display: inline-flex;

package/src/navigation/editor.scss

@@ -576,8 +576,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	grid-column: span 2;
 
 	&.open {
-		box-shadow: inset 0 0 0 $border-width $gray-200;
-		outline: 1px solid transparent; // Box shadow is removed in high contrast mode, a transparent outline is made opaque.
+		border-color: $gray-200;
 		background-color: $white;
 	}
 }

package/src/navigation-link/editor.scss

@@ -110,7 +110,7 @@
 .link-control-transform__subheading {
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: $font-weight-medium;
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	color: $gray-900;
 	margin-bottom: 1.5em;
 }

package/src/navigation-link/index.php

@@ -127,9 +127,12 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
 function render_block_core_navigation_link( $attributes, $content, $block ) {
 	// Check if this navigation item should render based on post status.
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
-			return '';
-		}
+		$should_render = gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block );
+	} else {
+		$should_render = block_core_shared_navigation_item_should_render( $attributes, $block );
+	}
+	if ( ! $should_render ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.

package/src/navigation-submenu/index.php

@@ -76,9 +76,12 @@ function block_core_navigation_submenu_get_submenu_visibility( $context ) {
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	// Check if this navigation item should render based on post status.
 	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		if ( ! gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block ) ) {
-			return '';
-		}
+		$should_render = gutenberg_block_core_shared_navigation_item_should_render( $attributes, $block );
+	} else {
+		$should_render = block_core_shared_navigation_item_should_render( $attributes, $block );
+	}
+	if ( ! $should_render ) {
+		return '';
 	}
 
 	// Don't render the block's subtree if it has no label.

package/src/nextpage/editor.scss

@@ -18,7 +18,7 @@
 		font-size: $default-font-size;
 		position: relative;
 		text-transform: uppercase;
-		font-weight: 600;
+		font-weight: var(--wpds-typography-font-weight-emphasis);
 		font-family: $default-font;
 		color: $gray-700;
 		border-radius: 4px;

package/src/paragraph/README.md

@@ -26,6 +26,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
+- [`editableRoot`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#editableroot): `true`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `false`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):

package/src/paragraph/block.json

@@ -29,6 +29,7 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"splitting": true,
+		"editableRoot": true,
 		"anchor": true,
 		"className": false,
 		"__experimentalBorder": {