@wordpress/block-library 7.4.0 → 7.7.0

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';
@@ -23,6 +32,7 @@ import * as classic from './freeform';
 import * as code from './code';
 import * as column from './column';
 import * as columns from './columns';
+import * as comments from './comments';
 import * as commentAuthorAvatar from './comment-author-avatar';
 import * as commentAuthorName from './comment-author-name';
 import * as commentContent from './comment-content';
@@ -31,7 +41,6 @@ import * as commentEditLink from './comment-edit-link';
 import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
 import * as commentsPaginationPrevious from './comments-pagination-previous';
-import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
@@ -54,7 +63,6 @@ import * as mediaText from './media-text';
 import * as missing from './missing';
 import * as more from './more';
 import * as navigation from './navigation';
-import * as navigationArea from './navigation-area';
 import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
@@ -100,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';
@@ -107,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.
  *
@@ -122,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,
@@ -139,6 +143,7 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
+	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -152,6 +157,7 @@ export const __experimentalGetCoreBlocks = () => [
 	code,
 	column,
 	columns,
+	commentAuthorAvatar,
 	cover,
 	embed,
 	file,
@@ -176,7 +182,6 @@ export const __experimentalGetCoreBlocks = () => [
 	socialLinks,
 	spacer,
 	table,
-	// tableOfContents,
 	tagCloud,
 	textColumns,
 	verse,
@@ -197,6 +202,10 @@ export const __experimentalGetCoreBlocks = () => [
 	postFeaturedImage,
 	postContent,
 	postAuthor,
+	postAuthorName,
+	postComment,
+	postCommentsCount,
+	postCommentsLink,
 	postDate,
 	postTerms,
 	postNavigationLink,
@@ -207,6 +216,7 @@ export const __experimentalGetCoreBlocks = () => [
 	queryPaginationPrevious,
 	queryNoResults,
 	readMore,
+	comments,
 	commentAuthorName,
 	commentContent,
 	commentDate,
@@ -214,13 +224,13 @@ export const __experimentalGetCoreBlocks = () => [
 	commentReplyLink,
 	commentTemplate,
 	commentsTitle,
-	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
-
 	postComments,
+	postCommentsForm,
+	tableOfContents,
 	homeLink,
 	logInOut,
 	termDescription,
@@ -228,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.
  *
@@ -267,24 +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,
-							navigationArea,
-							postComment,
-							postCommentsCount,
-							postCommentsForm,
-							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/edit.native.js

@@ -12,7 +12,10 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockAlignmentControl,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
@@ -43,6 +46,15 @@ class LatestPostsEdit extends Component {
 		);
 		this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
 		this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
+		this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
+			this
+		);
+		this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
+			this
+		);
+		this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
+			this
+		);
 		this.onSetOrder = this.onSetOrder.bind( this );
 		this.onSetOrderBy = this.onSetOrderBy.bind( this );
 		this.onSetPostsToShow = this.onSetPostsToShow.bind( this );
@@ -95,6 +107,21 @@ class LatestPostsEdit extends Component {
 		setAttributes( { displayPostDate: value } );
 	}
 
+	onSetDisplayFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { displayFeaturedImage: value } );
+	}
+
+	onSetAddLinkToFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { addLinkToFeaturedImage: value } );
+	}
+
+	onSetFeaturedImageAlign( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { featuredImageAlign: value } );
+	}
+
 	onSetOrder( value ) {
 		const { setAttributes } = this.props;
 		setAttributes( { order: value } );
@@ -124,6 +151,9 @@ class LatestPostsEdit extends Component {
 			displayPostContentRadio,
 			excerptLength,
 			displayPostDate,
+			displayFeaturedImage,
+			featuredImageAlign,
+			addLinkToFeaturedImage,
 			order,
 			orderBy,
 			postsToShow,
@@ -166,6 +196,31 @@ class LatestPostsEdit extends Component {
 						onChange={ this.onSetDisplayPostDate }
 					/>
 				</PanelBody>
+
+				<PanelBody title={ __( 'Featured image settings' ) }>
+					<ToggleControl
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ this.onSetDisplayFeaturedImage }
+					/>
+					{ displayFeaturedImage && (
+						<>
+							<BlockAlignmentControl
+								value={ featuredImageAlign }
+								onChange={ this.onSetFeaturedImageAlign }
+								controls={ [ 'left', 'center', 'right' ] }
+								isBottomSheetControl={ true }
+							/>
+							<ToggleControl
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ this.onSetAddLinkToFeaturedImage }
+								separatorType={ 'topFullWidth' }
+							/>
+						</>
+					) }
+				</PanelBody>
+
 				<PanelBody title={ __( 'Sorting and filtering' ) }>
 					<QueryControls
 						{ ...{ order, orderBy } }

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/latest-posts/style.scss

@@ -63,10 +63,14 @@
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 1em;
+		/*rtl:ignore*/
+		float: left;
 	}
 	&.alignright {
 		/*rtl:ignore*/
 		margin-left: 1em;
+		/*rtl:ignore*/
+		float: right;
 	}
 	&.aligncenter {
 		margin-bottom: 1em;

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 ]
+	);
+}