@wordpress/block-library 7.3.1 → 7.3.4

package/src/navigation-link/edit.js

@@ -342,7 +342,35 @@ function navStripHTML( html ) {
  * Add transforms to Link Control
  */
 
-function LinkControlTransforms( { block, transforms, replace } ) {
+function LinkControlTransforms( { clientId, replace } ) {
+	const { getBlock, blockTransforms } = useSelect(
+		( select ) => {
+			const {
+				getBlock: _getBlock,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+
+			return {
+				getBlock: _getBlock,
+				blockTransforms: getBlockTransformItems(
+					[ _getBlock( clientId ) ],
+					getBlockRootClientId( clientId )
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const transforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	if ( ! transforms?.length ) {
 		return null;
 	}
@@ -359,8 +387,11 @@ function LinkControlTransforms( { block, transforms, replace } ) {
 							key={ `transform-${ index }` }
 							onClick={ () =>
 								replace(
-									block.clientId,
-									switchToBlockType( block, item.name )
+									clientId,
+									switchToBlockType(
+										getBlock( clientId ),
+										item.name
+									)
 								)
 							}
 							className="link-control-transform__item"
@@ -421,30 +452,20 @@ export default function NavigationLinkEdit( {
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
-		hasDescendants,
+		hasChildren,
 		userCanCreatePages,
 		userCanCreatePosts,
-		thisBlock,
-		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlock,
 				getBlocks,
+				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
-				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
-				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
-				getBlockTransformItems,
 			} = select( blockEditorStore );
 
-			const selectedBlockId = getSelectedBlockClientId();
-
-			const descendants = getClientIdsOfDescendants( [ clientId ] )
-				.length;
-
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
@@ -459,14 +480,7 @@ export default function NavigationLinkEdit( {
 					clientId,
 					true
 				),
-				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
-					clientId,
-					false
-				),
-				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				hasChildren: !! getBlockCount( clientId ),
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -475,11 +489,6 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
-				thisBlock: getBlock( clientId ),
-				blockTransforms: getBlockTransformItems(
-					[ getBlock( clientId ) ],
-					getBlockRootClientId( clientId )
-				),
 			};
 		},
 		[ clientId ]
@@ -506,15 +515,6 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
-	const featuredBlocks = [
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-	const featuredTransforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -524,7 +524,7 @@ export default function NavigationLinkEdit( {
 			setIsLinkOpen( true );
 		}
 		// If block has inner blocks, transform to Submenu.
-		if ( hasDescendants ) {
+		if ( hasChildren ) {
 			transformToSubmenu();
 		}
 	}, [] );
@@ -634,7 +634,7 @@ export default function NavigationLinkEdit( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
-			'has-child': hasDescendants,
+			'has-child': hasChildren,
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
@@ -860,10 +860,7 @@ export default function NavigationLinkEdit( {
 									! url
 										? () => (
 												<LinkControlTransforms
-													block={ thisBlock }
-													transforms={
-														featuredTransforms
-													}
+													clientId={ clientId }
 													replace={ replaceBlock }
 												/>
 										  )

package/src/navigation-submenu/edit.js

@@ -309,37 +309,33 @@ export default function NavigationSubmenuEdit( {
 		isTopLevelItem,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
-		hasDescendants,
-		selectedBlockHasDescendants,
+		hasChildren,
+		selectedBlockHasChildren,
 		userCanCreatePages,
 		userCanCreatePosts,
 		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
 			const {
-				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
 				getBlock,
+				getBlockCount,
+				getBlockOrder,
 			} = select( blockEditorStore );
 
 			let _onlyDescendantIsEmptyLink;
 
 			const selectedBlockId = getSelectedBlockClientId();
 
-			const descendants = getClientIdsOfDescendants( [ clientId ] )
-				.length;
-
-			const selectedBlockDescendants = getClientIdsOfDescendants( [
-				selectedBlockId,
-			] );
+			const selectedBlockChildren = getBlockOrder( selectedBlockId );
 
 			// Check for a single descendant in the submenu. If that block
 			// is a link block in a "placeholder" state with no label then
 			// we can consider as an "empty" link.
-			if ( selectedBlockDescendants?.length === 1 ) {
-				const singleBlock = getBlock( selectedBlockDescendants[ 0 ] );
+			if ( selectedBlockChildren?.length === 1 ) {
+				const singleBlock = getBlock( selectedBlockChildren[ 0 ] );
 
 				_onlyDescendantIsEmptyLink =
 					singleBlock?.name === 'core/navigation-link' &&
@@ -360,8 +356,8 @@ export default function NavigationSubmenuEdit( {
 					clientId,
 					false
 				),
-				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! selectedBlockDescendants?.length,
+				hasChildren: !! getBlockCount( clientId ),
+				selectedBlockHasChildren: !! selectedBlockChildren?.length,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -481,7 +477,7 @@ export default function NavigationSubmenuEdit( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
-			'has-child': hasDescendants,
+			'has-child': hasChildren,
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
@@ -538,9 +534,9 @@ export default function NavigationSubmenuEdit( {
 			renderAppender:
 				isSelected ||
 				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
+					! selectedBlockHasChildren ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasDescendants
+				hasChildren
 					? InnerBlocks.ButtonBlockAppender
 					: false,
 		}
@@ -554,7 +550,7 @@ export default function NavigationSubmenuEdit( {
 	}
 
 	const canConvertToLink =
-		! selectedBlockHasDescendants || onlyDescendantIsEmptyLink;
+		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
 		<Fragment>

package/src/post-comments/block.json

@@ -40,5 +40,6 @@
 		"wp-block-post-comments",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"editorStyle": "wp-block-post-comments-editor"
 }

package/src/post-comments/edit.js

@@ -6,65 +6,89 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { RawHTML } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-function PostCommentsDisplay( { postId } ) {
-	return useSelect(
-		( select ) => {
-			const comments = select( coreStore ).getEntityRecords(
-				'root',
-				'comment',
-				{
-					post: postId,
-				}
-			);
-			// TODO: "No Comments" placeholder should be editable.
-			return comments && comments.length
-				? comments.map( ( comment ) => (
-						<RawHTML
-							className="wp-block-post-comments__comment"
-							key={ comment.id }
-						>
-							{ comment.content.rendered }
-						</RawHTML>
-				  ) )
-				: __( 'No comments.' );
-		},
-		[ postId ]
-	);
-}
+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';
 
 export default function PostCommentsEdit( {
-	attributes,
+	attributes: { textAlign },
 	setAttributes,
-	context,
+	context: { postType, postId },
 } ) {
-	const { postType, postId } = context;
-	const { textAlign } = attributes;
+	let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	postTitle = postTitle || __( 'Post Title' );
+
+	const [ commentStatus ] = useEntityProp(
+		'postType',
+		postType,
+		'comment_status',
+		postId
+	);
+
+	const { avatarURL, defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
+
+	const isSiteEditor = postType === undefined || postId === undefined;
+
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	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.'
+	);
+	let showPlacholder = true;
+
+	if ( ! isSiteEditor && 'open' !== commentStatus ) {
+		if ( 'closed' === commentStatus ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments to this %s are not allowed.'
+				),
+				postType
+			);
+			showPlacholder = false;
+		} else if ( ! postTypeSupportsComments ) {
+			warning = sprintf(
+				/* translators: 1: Post type (i.e. "post", "page") */
+				__(
+					'Post Comments block: Comments for this post type (%s) are not enabled.'
+				),
+				postType
+			);
+			showPlacholder = false;
+		} else if ( 'open' !== defaultCommentStatus ) {
+			warning = __( 'Post Comments block: Comments are not enabled.' );
+			showPlacholder = false;
+		}
+	}
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	if ( ! postType || ! postId ) {
-		return (
-			<div { ...blockProps }>
-				<Warning>
-					{ __( 'Post comments block: no post found.' ) }
-				</Warning>
-			</div>
-		);
-	}
+	const disabledRef = useDisabled();
+
+	const textareaId = useInstanceId( PostCommentsEdit );
 
 	return (
 		<>
@@ -78,7 +102,143 @@ export default function PostCommentsEdit( {
 			</BlockControls>
 
 			<div { ...blockProps }>
-				<PostCommentsDisplay postId={ postId } />
+				<Warning>{ warning }</Warning>
+
+				{ showPlacholder && (
+					<div
+						className="wp-block-post-comments__placeholder"
+						ref={ disabledRef }
+					>
+						<h3>
+							{ __( 'One response to' ) } “{ postTitle }”
+						</h3>
+
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
+							</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</div>
+						</div>
+
+						<ol className="commentlist">
+							<li className="comment even thread-even depth-1">
+								<article className="comment-body">
+									<footer className="comment-meta">
+										<div className="comment-author vcard">
+											<img
+												alt="Commenter Avatar"
+												src={ avatarURL }
+												className="avatar avatar-32 photo"
+												height="32"
+												width="32"
+												loading="lazy"
+											/>
+											<b className="fn">
+												<a href="#top" className="url">
+													{ __(
+														'A WordPress Commenter'
+													) }
+												</a>
+											</b>{ ' ' }
+											<span className="says">
+												{ __( 'says' ) }:
+											</span>
+										</div>
+
+										<div className="comment-metadata">
+											<a href="#top">
+												<time dateTime="2000-01-01T00:00:00+00:00">
+													{ __(
+														'January 1, 2000 at 00:00 am'
+													) }
+												</time>
+											</a>{ ' ' }
+											<span className="edit-link">
+												<a
+													className="comment-edit-link"
+													href="#top"
+												>
+													{ __( 'Edit' ) }
+												</a>
+											</span>
+										</div>
+									</footer>
+
+									<div className="comment-content">
+										<p>
+											{ __( 'Hi, this is a comment.' ) }
+											<br />
+											{ __(
+												'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
+											) }
+											<br />
+											{ __(
+												'Commenter avatars come from'
+											) }{ ' ' }
+											<a href="https://gravatar.com/">
+												Gravatar
+											</a>
+											.
+										</p>
+									</div>
+
+									<div className="reply">
+										<a
+											className="comment-reply-link"
+											href="#top"
+											aria-label="Reply to A WordPress Commenter"
+										>
+											{ __( 'Reply' ) }
+										</a>
+									</div>
+								</article>
+							</li>
+						</ol>
+
+						<div className="navigation">
+							<div className="alignleft">
+								<a href="#top">« { __( 'Older Comments' ) }</a>
+							</div>
+							<div className="alignright">
+								<a href="#top">{ __( 'Newer Comments' ) } »</a>
+							</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>
+					</div>
+				) }
 			</div>
 		</>
 	);

package/src/post-comments/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-post-comments__placeholder * {
+	pointer-events: none;
+}

package/src/post-comments/style.scss

@@ -1,10 +1,6 @@
 .wp-block-post-comments {
-	// Remove extraneous top padding added to the first heading of the block.
-	> h3:first-of-type {
-		margin-top: 0;
-	}
-
 	.commentlist {
+		clear: both;
 		list-style: none;
 		margin: 0;
 		padding: 0;

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

@@ -34,6 +34,7 @@
 			}
 		}
 	},
+	"editorStyle": "wp-block-post-comments-form-editor",
 	"style": [
 		"wp-block-post-comments-form",
 		"wp-block-buttons",

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

@@ -14,6 +14,10 @@ import {
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalUseDisabled as useDisabled,
+	useInstanceId,
+} from '@wordpress/compose';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -36,6 +40,10 @@ export default function PostCommentsFormEdit( {
 
 	const isInSiteEditor = postType === undefined || postId === undefined;
 
+	const disabledFormRef = useDisabled();
+
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -67,8 +75,37 @@ export default function PostCommentsFormEdit( {
 					</Warning>
 				) }
 
-				{ ( 'open' === commentStatus || isInSiteEditor ) &&
-					__( 'Post Comments Form' ) }
+				{ ( '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>
+				) }
 			</div>
 		</>
 	);

package/src/post-comments-form/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-post-comments-form * {
+	pointer-events: none;
+}

package/src/post-comments-form/index.php

@@ -18,20 +18,32 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = '';
+	$classes = 'comment-respond'; // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
+	add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
+
 	ob_start();
 	comment_form( array(), $block->context['postId'] );
-	$form               = ob_get_clean();
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$form = ob_get_clean();
+
+	remove_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );
+
+	// We use the outermost wrapping `<div />` returned by `comment_form()`
+	// which is identified by its default classname `comment-respond` to inject
+	// our wrapper attributes. This way, it is guaranteed that all styling applied
+	// to the block is carried along when the comment form is moved to the location
+	// of the 'Reply' link that the user clicked by Core's `comment-reply.js` script.
+	$form = str_replace( 'class="comment-respond"', $wrapper_attributes, $form );
 
 	// Enqueue the comment-reply script.
 	wp_enqueue_script( 'comment-reply' );
 
-	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $form );
+	return $form;
 }
 
 /**
@@ -62,4 +74,3 @@ function post_comments_form_block_form_defaults( $fields ) {
 
 	return $fields;
 }
-add_filter( 'comment_form_defaults', 'post_comments_form_block_form_defaults' );

package/src/post-comments-form/style.scss

@@ -67,4 +67,15 @@
 			margin-top: 0.35em;
 		}
 	}
+
+	.comment-reply-title {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 0;
+
+		:where(small) {
+			font-size: var(--wp--preset--font-size--medium, smaller);
+		}
+	}
 }