@wordpress/block-library 7.5.0 → 7.6.0

package/src/heading/edit.js

@@ -42,10 +42,13 @@ function HeadingEdit( {
 	} );
 
 	const { canGenerateAnchors } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
+		const { getGlobalBlockCount, getSettings } = select( blockEditorStore );
+		const settings = getSettings();
 
 		return {
-			canGenerateAnchors: !! settings.generateAnchors,
+			canGenerateAnchors:
+				!! settings.generateAnchors ||
+				getGlobalBlockCount( 'core/table-of-contents' ) > 0,
 		};
 	}, [] );
 

package/src/image/edit.js

@@ -19,7 +19,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
 /**
@@ -156,6 +156,14 @@ export function ImageEdit( {
 		 has been deleted.
 	*/
 	function onImageError( isReplaced = false ) {
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice(
+			sprintf(
+				/* translators: %s url or missing image */
+				__( 'Error loading image: %s' ),
+				url
+			)
+		);
 		// If the image block was not replaced with an embed,
 		// clear the attributes and trigger the placeholder.
 		if ( ! isReplaced ) {

package/src/image/edit.native.js

@@ -757,7 +757,6 @@ export class ImageEdit extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onImagePressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View style={ styles.content }>

package/src/image/editor.scss

@@ -110,8 +110,8 @@ figure.wp-block-image:not(.wp-block) {
 
 .wp-block-image__zoom {
 	.components-popover__content {
-		overflow: visible;
 		min-width: 260px;
+		overflow: visible !important;
 	}
 
 	.components-range-control {

package/src/image/image.js

@@ -33,7 +33,11 @@ import {
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getFilename } from '@wordpress/url';
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	createBlock,
+	getDefaultBlockName,
+	switchToBlockType,
+} from '@wordpress/blocks';
 import { crop, overlayText, upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -598,7 +602,9 @@ export default function Image( {
 					}
 					inlineToolbar
 					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter( createBlock( 'core/paragraph' ) )
+						insertBlocksAfter(
+							createBlock( getDefaultBlockName() )
+						)
 					}
 				/>
 			) }

package/src/image/test/edit.native.js

@@ -87,7 +87,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -113,7 +113,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -139,7 +139,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -172,7 +172,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -212,7 +212,7 @@ describe( 'Image Block', () => {
 
 		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () =>
 			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
@@ -239,7 +239,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );
@@ -270,7 +270,7 @@ describe( 'Image Block', () => {
 
 		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
 		// Awaiting navigation event seemingly required due to React Navigation bug
-		// https://git.io/Ju35Z
+		// https://github.com/react-navigation/react-navigation/issues/9701
 		await act( () => fireEvent.press( settingsButton ) );
 
 		const linkTargetButton = screen.getByText( 'Open in new tab' );

package/src/index.js

@@ -12,6 +12,15 @@ import {
 /**
  * Internal dependencies
  */
+// When IS_GUTENBERG_PLUGIN is set to false, imports of experimental blocks
+// are transformed by packages/block-library/src/index.js as follows:
+//    import * as experimentalBlock from './experimental-block'
+// becomes
+//    const experimentalBlock = null;
+// This enables webpack to eliminate the experimental blocks code from the
+// production build to make the final bundle smaller.
+//
+// See https://github.com/WordPress/gutenberg/pull/40655 for more context.
 import * as archives from './archives';
 import * as avatar from './avatar';
 import * as audio from './audio';
@@ -99,6 +108,7 @@ import * as socialLink from './social-link';
 import * as socialLinks from './social-links';
 import * as spacer from './spacer';
 import * as table from './table';
+import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
@@ -106,6 +116,8 @@ import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
 
+import isBlockMetadataExperimental from './is-block-metadata-experimental';
+
 /**
  * Function to register an individual block.
  *
@@ -121,16 +133,9 @@ const registerBlock = ( block ) => {
 };
 
 /**
- * Function to get all the core blocks in an array.
- *
- * @example
- * ```js
- * import { __experimentalGetCoreBlocks } from '@wordpress/block-library';
- *
- * const coreBlocks = __experimentalGetCoreBlocks();
- * ```
+ * Function to get all the block-library blocks in an array
  */
-export const __experimentalGetCoreBlocks = () => [
+const getAllBlocks = () => [
 	// Common blocks are grouped at the top to prioritize their display
 	// in various contexts — like the inserter and auto-complete components.
 	paragraph,
@@ -138,6 +143,7 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -151,6 +157,7 @@ export const __experimentalGetCoreBlocks = () => [
 	code,
 	column,
 	columns,
+	commentAuthorAvatar,
 	cover,
 	embed,
 	file,
@@ -175,7 +182,6 @@ export const __experimentalGetCoreBlocks = () => [
 	socialLinks,
 	spacer,
 	table,
-	// tableOfContents,
 	tagCloud,
 	textColumns,
 	verse,
@@ -196,6 +202,10 @@ export const __experimentalGetCoreBlocks = () => [
 	postFeaturedImage,
 	postContent,
 	postAuthor,
+	postAuthorName,
+	postComment,
+	postCommentsCount,
+	postCommentsLink,
 	postDate,
 	postTerms,
 	postNavigationLink,
@@ -220,6 +230,7 @@ export const __experimentalGetCoreBlocks = () => [
 	commentsPaginationPrevious,
 	postComments,
 	postCommentsForm,
+	tableOfContents,
 	homeLink,
 	logInOut,
 	termDescription,
@@ -227,6 +238,21 @@ export const __experimentalGetCoreBlocks = () => [
 	postAuthorBiography,
 ];
 
+/**
+ * Function to get all the core blocks in an array.
+ *
+ * @example
+ * ```js
+ * import { __experimentalGetCoreBlocks } from '@wordpress/block-library';
+ *
+ * const coreBlocks = __experimentalGetCoreBlocks();
+ * ```
+ */
+export const __experimentalGetCoreBlocks = () =>
+	getAllBlocks().filter(
+		( { metadata } ) => ! isBlockMetadataExperimental( metadata )
+	);
+
 /**
  * Function to register core blocks provided by the block editor.
  *
@@ -266,22 +292,19 @@ export const registerCoreBlocks = (
 export const __experimentalRegisterExperimentalCoreBlocks = process.env
 	.IS_GUTENBERG_PLUGIN
 	? ( { enableFSEBlocks } = {} ) => {
-			[
-				// Experimental blocks.
-				postAuthorName,
-				...( window.__experimentalEnableListBlockV2
-					? [ listItem ]
-					: [] ),
-
-				// Full Site Editing blocks.
-				...( enableFSEBlocks
-					? [
-							commentAuthorAvatar,
-							postComment,
-							postCommentsCount,
-							postCommentsLink,
-					  ]
-					: [] ),
-			].forEach( registerBlock );
+			const enabledExperiments = [
+				window.__experimentalEnableListBlockV2 ? 'list-v2' : null,
+				enableFSEBlocks ? 'fse' : null,
+			];
+			getAllBlocks()
+				.filter( ( { metadata } ) =>
+					isBlockMetadataExperimental( metadata )
+				)
+				.filter(
+					( { metadata: { __experimental } } ) =>
+						__experimental === true ||
+						enabledExperiments.includes( __experimental )
+				)
+				.forEach( registerBlock );
 	  }
 	: undefined;

package/src/is-block-metadata-experimental.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if the block is experimental based on the metadata loaded
+ * from block.json.
+ *
+ * This function is in a separate file and uses the older JS syntax so
+ * that it can be imported in both:
+ * – block-library/src/index.js
+ * – block-library/src/babel-plugin.js
+ *
+ * @param {Object} metadata Parsed block.json metadata.
+ * @return {boolean} Is the block experimental?
+ */
+module.exports = function isBlockMetadataExperimental( metadata ) {
+	return (
+		metadata &&
+		'__experimental' in metadata &&
+		metadata.__experimental !== false
+	);
+};

package/src/latest-posts/edit.js

@@ -28,9 +28,11 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { pin, list, grid } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { store as noticeStore } from '@wordpress/notices';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,6 +68,7 @@ function getFeaturedImageDetails( post, size ) {
 }
 
 export default function LatestPostsEdit( { attributes, setAttributes } ) {
+	const instanceId = useInstanceId( LatestPostsEdit );
 	const {
 		postsToShow,
 		order,
@@ -148,6 +151,20 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		]
 	);
 
+	// If a user clicks to a link prevent redirection and show a warning.
+	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
+	let noticeId;
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		// Remove previous warning if any, to show one at a time per block.
+		removeNotice( noticeId );
+		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: noticeId,
+			type: 'snackbar',
+		} );
+	};
+
 	const imageSizeOptions = imageSizes
 		.filter( ( { slug } ) => slug !== 'full' )
 		.map( ( { name, slug } ) => ( {
@@ -466,7 +483,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.join( ' ' ) }
 							{ /* translators: excerpt truncation character, default …  */ }
 							{ __( ' … ' ) }
-							<a href={ post.link } rel="noopener noreferrer">
+							<a
+								href={ post.link }
+								rel="noopener noreferrer"
+								onClick={ showRedirectionPreventedNotice }
+							>
 								{ __( 'Read more' ) }
 							</a>
 						</>
@@ -483,6 +504,9 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
+											onClick={
+												showRedirectionPreventedNotice
+											}
 										>
 											{ featuredImage }
 										</a>
@@ -501,6 +525,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 										  }
 										: undefined
 								}
+								onClick={ showRedirectionPreventedNotice }
 							>
 								{ ! titleTrimmed ? __( '(no title)' ) : null }
 							</a>

package/src/latest-posts/index.php

@@ -37,11 +37,12 @@ function render_block_core_latest_posts( $attributes ) {
 	global $post, $block_core_latest_posts_excerpt_length;
 
 	$args = array(
-		'posts_per_page'   => $attributes['postsToShow'],
-		'post_status'      => 'publish',
-		'order'            => $attributes['order'],
-		'orderby'          => $attributes['orderBy'],
-		'suppress_filters' => false,
+		'posts_per_page'      => $attributes['postsToShow'],
+		'post_status'         => 'publish',
+		'order'               => $attributes['order'],
+		'orderby'             => $attributes['orderBy'],
+		'ignore_sticky_posts' => true,
+		'no_found_rows'       => true,
 	);
 
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
@@ -54,7 +55,12 @@ function render_block_core_latest_posts( $attributes ) {
 		$args['author'] = $attributes['selectedAuthor'];
 	}
 
-	$recent_posts = get_posts( $args );
+	$query        = new WP_Query;
+	$recent_posts = $query->query( $args );
+
+	if ( isset( $attributes['displayFeaturedImage'] ) && $attributes['displayFeaturedImage'] ) {
+		update_post_thumbnail_cache( $query );
+	}
 
 	$list_items_markup = '';
 

package/src/list/transforms.js

@@ -208,6 +208,13 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/table-of-contents' ],
+			transform: () => {
+				return createBlock( 'core/table-of-contents' );
+			},
+		},
 	],
 };
 

package/src/list/v2/edit.js

@@ -134,6 +134,7 @@ function Edit( { attributes, setAttributes, clientId } ) {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
+		templateInsertUpdatesSelection: true,
 	} );
 	useMigrateOnLoad( attributes, clientId );
 	const { ordered, reversed, start } = attributes;

package/src/list/v2/migrate.js

@@ -8,7 +8,7 @@ import { omit } from 'lodash';
  */
 import { createBlock } from '@wordpress/blocks';
 
-function createListBlockFromDOMElement( listElement ) {
+export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
 		ordered: 'OL' === listElement.tagName,
 		start: listElement.getAttribute( 'start' )

package/src/list/v2/transforms.js

@@ -9,6 +9,32 @@ import {
 	toHTMLString,
 } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { createListBlockFromDOMElement } from './migrate';
+
+function getListContentSchema( { phrasingContentSchema } ) {
+	const listContentSchema = {
+		...phrasingContentSchema,
+		ul: {},
+		ol: { attributes: [ 'type', 'start', 'reversed' ] },
+	};
+
+	// Recursion is needed.
+	// Possible: ul > li > ul.
+	// Impossible: ul > ul.
+	[ 'ul', 'ol' ].forEach( ( tag ) => {
+		listContentSchema[ tag ].children = {
+			li: {
+				children: listContentSchema,
+			},
+		};
+	} );
+
+	return listContentSchema;
+}
+
 const transforms = {
 	from: [
 		{
@@ -82,6 +108,15 @@ const transforms = {
 				);
 			},
 		} ) ),
+		{
+			type: 'raw',
+			selector: 'ol,ul',
+			schema: ( args ) => ( {
+				ol: getListContentSchema( args ).ol,
+				ul: getListContentSchema( args ).ul,
+			} ),
+			transform: createListBlockFromDOMElement,
+		},
 	],
 	to: [
 		...[ 'core/paragraph', 'core/heading' ].map( ( block ) => ( {

package/src/list-item/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "list-v2",
 	"name": "core/list-item",
 	"title": "List item",
 	"category": "text",
@@ -14,7 +15,7 @@
 		"content": {
 			"type": "string",
 			"source": "html",
-    		"selector": "li",
+			"selector": "li",
 			"default": "",
 			"__experimentalRole": "content"
 		}

package/src/list-item/edit.js

@@ -8,7 +8,6 @@ import {
 	BlockControls,
 } from '@wordpress/block-editor';
 import { isRTL, __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
 import { ToolbarButton } from '@wordpress/components';
 import {
 	formatOutdent,
@@ -21,7 +20,14 @@ import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { useEnter, useIndentListItem, useOutdentListItem } from './hooks';
+import {
+	useEnter,
+	useBackspace,
+	useSpace,
+	useIndentListItem,
+	useOutdentListItem,
+	useSplit,
+} from './hooks';
 
 function IndentUI( { clientId } ) {
 	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
@@ -48,7 +54,6 @@ function IndentUI( { clientId } ) {
 }
 
 export default function ListItemEdit( {
-	name,
 	attributes,
 	setAttributes,
 	mergeBlocks,
@@ -61,11 +66,18 @@ export default function ListItemEdit( {
 		allowedBlocks: [ 'core/list' ],
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
+	const useBackspaceRef = useBackspace( { clientId } );
+	const useSpaceRef = useSpace( clientId );
+	const onSplit = useSplit( clientId );
 	return (
 		<>
 			<li { ...innerBlocksProps }>
 				<RichText
-					ref={ useMergeRefs( [ useEnterRef ] ) }
+					ref={ useMergeRefs( [
+						useEnterRef,
+						useBackspaceRef,
+						useSpaceRef,
+					] ) }
 					identifier="content"
 					tagName="div"
 					onChange={ ( nextContent ) =>
@@ -74,12 +86,7 @@ export default function ListItemEdit( {
 					value={ content }
 					aria-label={ __( 'List text' ) }
 					placeholder={ placeholder || __( 'List' ) }
-					onSplit={ ( value ) => {
-						return createBlock( name, {
-							...attributes,
-							content: value,
-						} );
-					} }
+					onSplit={ onSplit }
 					onMerge={ mergeBlocks }
 					onReplace={ onReplace }
 				/>

package/src/list-item/hooks/index.js

@@ -1,3 +1,6 @@
 export { default as useOutdentListItem } from './use-outdent-list-item';
 export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
+export { default as useBackspace } from './use-backspace';
+export { default as useSpace } from './use-space';
+export { default as useSplit } from './use-split';

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { BACKSPACE } from '@wordpress/keycodes';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+export default function useBackspace( props ) {
+	const { getSelectionStart, getSelectionEnd } = useSelect(
+		blockEditorStore
+	);
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
+		propsRef.current.clientId
+	);
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if ( event.defaultPrevented || event.keyCode !== BACKSPACE ) {
+					return;
+				}
+				// Handle only if we have a collapsed selection at the
+				// start of a list item and we can outdent.
+				if (
+					! canOutdent ||
+					[
+						getSelectionStart().offset,
+						getSelectionEnd().offset,
+					].some( ( offset ) => offset !== 0 )
+				) {
+					return;
+				}
+				event.preventDefault();
+				outdentListItem();
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canOutdent ]
+	);
+}