@wordpress/block-library 7.3.10 → 7.6.0

package/src/paragraph/edit.native.js

@@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
 
+const allowedParentBlockAlignments = [ 'left', 'center', 'right' ];
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -21,6 +23,7 @@ function ParagraphBlock( {
 	setAttributes,
 	style,
 	clientId,
+	parentBlockAlignment,
 } ) {
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
@@ -40,6 +43,15 @@ function ParagraphBlock( {
 	const onAlignmentChange = useCallback( ( nextAlign ) => {
 		setAttributes( { align: nextAlign } );
 	}, [] );
+
+	const parentTextAlignment = allowedParentBlockAlignments.includes(
+		parentBlockAlignment
+	)
+		? parentBlockAlignment
+		: undefined;
+
+	const textAlignment = align || parentTextAlignment;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -82,7 +94,7 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
-				textAlign={ align }
+				textAlign={ textAlignment }
 				__unstableEmbedURLOnPaste
 			/>
 		</>

package/src/paragraph/use-enter.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER } from '@wordpress/keycodes';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { hasBlockSupport, createBlock } from '@wordpress/blocks';
+
+export function useOnEnter( props ) {
+	const { batch } = useRegistry();
+	const {
+		moveBlocksToPosition,
+		replaceInnerBlocks,
+		duplicateBlocks,
+		insertBlock,
+	} = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockOrder,
+		getBlockName,
+		getBlock,
+		getNextBlockClientId,
+	} = useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
+			const { content, clientId } = propsRef.current;
+
+			// The paragraph should be empty.
+			if ( content.length ) {
+				return;
+			}
+
+			const wrapperClientId = getBlockRootClientId( clientId );
+
+			if (
+				! hasBlockSupport(
+					getBlockName( wrapperClientId ),
+					'__experimentalOnEnter',
+					false
+				)
+			) {
+				return;
+			}
+
+			const order = getBlockOrder( wrapperClientId );
+
+			event.preventDefault();
+
+			const position = order.indexOf( clientId );
+
+			// If it is the last block, exit.
+			if ( position === order.length - 1 ) {
+				moveBlocksToPosition(
+					[ clientId ],
+					wrapperClientId,
+					getBlockRootClientId( wrapperClientId ),
+					getBlockIndex( wrapperClientId ) + 1
+				);
+				return;
+			}
+
+			// If it is in the middle, split the block in two.
+			const wrapperBlock = getBlock( wrapperClientId );
+			batch( () => {
+				duplicateBlocks( [ wrapperClientId ] );
+				const blockIndex = getBlockIndex( wrapperClientId );
+
+				replaceInnerBlocks(
+					wrapperClientId,
+					wrapperBlock.innerBlocks.slice( 0, position )
+				);
+				replaceInnerBlocks(
+					getNextBlockClientId( wrapperClientId ),
+					wrapperBlock.innerBlocks.slice( position + 1 )
+				);
+				insertBlock(
+					createBlock( 'core/paragraph' ),
+					blockIndex + 1,
+					getBlockRootClientId( wrapperClientId ),
+					true
+				);
+			} );
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

package/src/post-author/edit.js

@@ -69,29 +69,31 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Author Settings' ) }>
-					{ ! isDescendentOfQueryLoop && !! authors?.length && (
-						<SelectControl
-							label={ __( 'Author' ) }
-							value={ authorId }
-							options={ authors.map( ( { id, name } ) => {
-								return {
-									value: id,
-									label: name,
-								};
-							} ) }
-							onChange={ ( nextAuthorId ) => {
-								editEntityRecord(
-									'postType',
-									postType,
-									postId,
-									{
-										author: nextAuthorId,
-									}
-								);
-							} }
-						/>
-					) }
+				<PanelBody title={ __( 'Settings' ) }>
+					{ !! postId &&
+						! isDescendentOfQueryLoop &&
+						!! authors?.length && (
+							<SelectControl
+								label={ __( 'Author' ) }
+								value={ authorId }
+								options={ authors.map( ( { id, name } ) => {
+									return {
+										value: id,
+										label: name,
+									};
+								} ) }
+								onChange={ ( nextAuthorId ) => {
+									editEntityRecord(
+										'postType',
+										postType,
+										postId,
+										{
+											author: nextAuthorId,
+										}
+									);
+								} }
+							/>
+						) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }

package/src/post-author-name/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": true,
 	"name": "core/post-author-name",
 	"title": "Post Author Name",
 	"category": "theme",

package/src/post-comment/block.json

@@ -1,10 +1,11 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"commentId": {

package/src/post-comments/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-comments",
 	"title": "Post Comments (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {

package/src/post-comments/edit.js

@@ -16,12 +16,14 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { useDisabled } from '@wordpress/compose';
 import { createInterpolateElement } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
+
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
 	setAttributes,
@@ -52,9 +54,9 @@ export default function PostCommentsEdit( {
 	);
 
 	let warning = __(
-		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
+		'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments" block.'
 	);
-	let showPlacholder = true;
+	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
 		if ( 'closed' === commentStatus ) {
@@ -65,7 +67,7 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( ! postTypeSupportsComments ) {
 			warning = sprintf(
 				/* translators: 1: Post type (i.e. "post", "page") */
@@ -74,10 +76,10 @@ export default function PostCommentsEdit( {
 				),
 				postType
 			);
-			showPlacholder = false;
+			showPlaceholder = false;
 		} else if ( 'open' !== defaultCommentStatus ) {
 			warning = __( 'Post Comments block: Comments are not enabled.' );
-			showPlacholder = false;
+			showPlaceholder = false;
 		}
 	}
 
@@ -89,8 +91,6 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
-	const textareaId = useInstanceId( PostCommentsEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -105,7 +105,7 @@ export default function PostCommentsEdit( {
 			<div { ...blockProps }>
 				<Warning>{ warning }</Warning>
 
-				{ showPlacholder && (
+				{ showPlaceholder && (
 					<div
 						className="wp-block-post-comments__placeholder"
 						ref={ disabledRef }
@@ -238,37 +238,7 @@ export default function PostCommentsEdit( {
 							</div>
 						</div>
 
-						<div className="comment-respond">
-							<h3 className="comment-reply-title">
-								{ __( 'Leave a Reply' ) }
-							</h3>
-
-							<form className="comment-form" noValidate>
-								<p className="comment-form-comment">
-									<label
-										htmlFor={ `comment-${ textareaId }` }
-									>
-										{ __( 'Comment' ) }{ ' ' }
-										<span className="required">*</span>
-									</label>
-									<textarea
-										id={ `comment-${ textareaId }` }
-										name="comment"
-										cols="45"
-										rows="8"
-										required
-									/>
-								</p>
-								<p className="form-submit wp-block-button">
-									<input
-										name="submit"
-										type="submit"
-										className="submit wp-block-button__link"
-										value={ __( 'Post Comment' ) }
-									/>
-								</p>
-							</form>
-						</div>
+						<CommentsForm />
 					</div>
 				) }
 			</div>

package/src/post-comments/index.php

@@ -51,6 +51,8 @@ function render_block_core_post_comments( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$output             = ob_get_clean();
 
+	wp_enqueue_script( 'comment-reply' );
+
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $output );
 }
 

package/src/post-comments-count/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comments-count",
 	"title": "Post Comments Count",
 	"category": "theme",

package/src/post-comments-form/edit.js

@@ -11,13 +11,15 @@ import {
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import CommentsForm from './form';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -38,11 +40,49 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
-	const isInSiteEditor = postType === undefined || postId === undefined;
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
 
-	const disabledFormRef = useDisabled();
+	let warning = false;
+	let showPlaceholder = true;
 
-	const instanceId = useInstanceId( PostCommentsFormEdit );
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments on this %s are not allowed.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments Form block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlaceholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __(
+				'Post Comments Form block: Comments are not enabled.'
+			);
+			showPlaceholder = false;
+		}
+	}
 
 	return (
 		<>
@@ -55,57 +95,9 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ __(
-							'Post Comments Form block: comments are not enabled for this post type.'
-						) }
-					</Warning>
-				) }
-
-				{ 'open' !== commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ sprintf(
-							/* translators: 1: Post type (i.e. "post", "page") */
-							__(
-								'Post Comments Form block: comments to this %s are not allowed.'
-							),
-							postType
-						) }
-					</Warning>
-				) }
+				{ warning && <Warning>{ warning }</Warning> }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) && (
-					<div>
-						<h3>{ __( 'Leave a Reply' ) }</h3>
-						<form
-							noValidate
-							className="comment-form"
-							ref={ disabledFormRef }
-						>
-							<p>
-								<label htmlFor={ `comment-${ instanceId }` }>
-									{ __( 'Comment' ) }
-								</label>
-								<textarea
-									id={ `comment-${ instanceId }` }
-									name="comment"
-									cols="45"
-									rows="8"
-								/>
-							</p>
-							<p>
-								<input
-									name="submit"
-									className="submit wp-block-button__link"
-									label={ __( 'Post Comment' ) }
-									value={ __( 'Post Comment' ) }
-									readOnly
-								/>
-							</p>
-						</form>
-					</div>
-				) }
+				{ showPlaceholder ? <CommentsForm /> : null }
 			</div>
 		</>
 	);

package/src/post-comments-form/form.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDisabled, useInstanceId } from '@wordpress/compose';
+
+const CommentsForm = () => {
+	const disabledFormRef = useDisabled();
+	const instanceId = useInstanceId( CommentsForm );
+
+	return (
+		<div className="comment-respond">
+			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
+			<form noValidate className="comment-form" ref={ disabledFormRef }>
+				<p>
+					<label htmlFor={ `comment-${ instanceId }` }>
+						{ __( 'Comment' ) }
+					</label>
+					<textarea
+						id={ `comment-${ instanceId }` }
+						name="comment"
+						cols="45"
+						rows="8"
+					/>
+				</p>
+				<p className="form-submit wp-block-button">
+					<input
+						name="submit"
+						type="submit"
+						className="submit wp-block-button__link"
+						label={ __( 'Post Comment' ) }
+						value={ __( 'Post Comment' ) }
+					/>
+				</p>
+			</form>
+		</div>
+	);
+};
+
+export default CommentsForm;

package/src/post-comments-link/block.json

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": "fse",
 	"name": "core/post-comments-link",
 	"title": "Post Comments Link",
 	"category": "theme",

package/src/post-excerpt/edit.js

@@ -127,7 +127,7 @@ export default function PostExcerptEditor( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }

package/src/post-featured-image/edit.js

@@ -118,7 +118,7 @@ function PostFeaturedImageDisplay( {
 
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
-		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
 	const controls = (

package/src/post-template/edit.js

@@ -84,6 +84,7 @@ export default function PostTemplateEdit( {
 			sticky,
 			inherit,
 			taxQuery,
+			parents,
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
@@ -138,6 +139,9 @@ export default function PostTemplateEdit( {
 			if ( exclude?.length ) {
 				query.exclude = exclude;
 			}
+			if ( parents?.length ) {
+				query.parent = parents;
+			}
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -172,6 +176,7 @@ export default function PostTemplateEdit( {
 			inherit,
 			templateSlug,
 			taxQuery,
+			parents,
 		]
 	);
 	const blockContexts = useMemo(

package/src/post-terms/block.json

@@ -16,6 +16,14 @@
 		"separator": {
 			"type": "string",
 			"default": ", "
+		},
+		"prefix": {
+			"type": "string",
+			"default": ""
+		},
+		"suffix": {
+			"type": "string",
+			"default": ""
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,7 +13,9 @@ import {
 	BlockControls,
 	useBlockProps,
 	useBlockDisplayInformation,
+	RichText,
 } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -24,13 +26,24 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import usePostTerms from './use-post-terms';
 
+// Allowed formats for the prefix and suffix fields.
+const ALLOWED_FORMATS = [
+	'core/bold',
+	'core/image',
+	'core/italic',
+	'core/link',
+	'core/strikethrough',
+	'core/text-color',
+];
+
 export default function PostTermsEdit( {
 	attributes,
 	clientId,
 	context,
 	setAttributes,
+	insertBlocksAfter,
 } ) {
-	const { term, textAlign, separator } = attributes;
+	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
 
 	const selectedTerm = useSelect(
@@ -83,6 +96,20 @@ export default function PostTermsEdit( {
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
+						className="wp-block-post-terms__prefix"
+						multiline={ false }
+						aria-label={ __( 'Prefix' ) }
+						placeholder={ __( 'Prefix' ) + ' ' }
+						value={ prefix }
+						onChange={ ( value ) =>
+							setAttributes( { prefix: value } )
+						}
+						tagName="span"
+					/>
+				) }
 				{ ! isLoading &&
 					hasPostTerms &&
 					postTerms
@@ -108,6 +135,25 @@ export default function PostTermsEdit( {
 					! hasPostTerms &&
 					( selectedTerm?.labels?.no_terms ||
 						__( 'Term items not found.' ) ) }
+				{ ! isLoading && hasPostTerms && (
+					<RichText
+						allowedFormats={ ALLOWED_FORMATS }
+						className="wp-block-post-terms__suffix"
+						multiline={ false }
+						aria-label={ __( 'Suffix' ) }
+						placeholder={ ' ' + __( 'Suffix' ) }
+						value={ suffix }
+						onChange={ ( value ) =>
+							setAttributes( { suffix: value } )
+						}
+						tagName="span"
+						__unstableOnSplitAtEnd={ () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+						}
+					/>
+				) }
 			</div>
 		</>
 	);