@wordpress/block-library 7.3.11 → 7.3.12

package/src/comment-edit-link/block.json

@@ -15,10 +15,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-reply-link/block.json

@@ -11,10 +11,6 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

package/src/comments-query-loop/edit.js

@@ -37,7 +37,12 @@ const TEMPLATE = [
 						'core/column',
 						{},
 						[
-							[ 'core/comment-author-name' ],
+							[
+								'core/comment-author-name',
+								{
+									fontSize: 'small',
+								},
+							],
 							[
 								'core/group',
 								{
@@ -52,12 +57,27 @@ const TEMPLATE = [
 									},
 								},
 								[
-									[ 'core/comment-date' ],
-									[ 'core/comment-edit-link' ],
+									[
+										'core/comment-date',
+										{
+											fontSize: 'small',
+										},
+									],
+									[
+										'core/comment-edit-link',
+										{
+											fontSize: 'small',
+										},
+									],
 								],
 							],
 							[ 'core/comment-content' ],
-							[ 'core/comment-reply-link' ],
+							[
+								'core/comment-reply-link',
+								{
+									fontSize: 'small',
+								},
+							],
 						],
 					],
 				],

package/src/cover/index.php

@@ -32,12 +32,15 @@ function render_block_core_cover( $attributes, $content ) {
 
 		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
 
-		$content = str_replace(
-			'</span><div',
-			'</span>' . $image . '<div',
-			$content
-		);
-
+		/*
+		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+		 * and removes eventual withespace characters between the two (typically introduced at template level)
+		 */
+		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+			$offset  = $matches[0][1];
+			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
+		}
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();

package/src/gallery/index.php

@@ -86,7 +86,8 @@ function block_core_gallery_render( $attributes, $content ) {
 		'wp_footer',
 		function () use ( $style ) {
 			echo '<style> ' . $style . '</style>';
-		}
+		},
+		11
 	);
 	return $content;
 }

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/media-text/edit.js

@@ -46,7 +46,6 @@ const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			fontSize: 'large',
 			placeholder: _x( 'Content…', 'content placeholder' ),
 		},
 	],

package/src/navigation/style.scss

@@ -299,6 +299,9 @@ button.wp-block-navigation-item__content {
 	font-size: inherit;
 	font-family: inherit;
 	line-height: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	text-transform: inherit;
 
 	// Buttons default to center alignment. This becomes visible
 	// when a menu item label is long enough to wrap.

package/src/post-comments/edit.js

@@ -16,11 +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 { createInterpolateElement } from '@wordpress/element';
+import { __experimentalUseDisabled as useDisabled } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from '../post-comments-form/form';
 
 export default function PostCommentsEdit( {
 	attributes: { textAlign },
@@ -54,7 +57,7 @@ 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.'
 	);
-	let showPlacholder = true;
+	let showPlaceholder = true;
 
 	if ( ! isSiteEditor && 'open' !== commentStatus ) {
 		if ( 'closed' === commentStatus ) {
@@ -65,7 +68,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 +77,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 +92,6 @@ export default function PostCommentsEdit( {
 
 	const disabledRef = useDisabled();
 
-	const textareaId = useInstanceId( PostCommentsEdit );
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -105,7 +106,7 @@ export default function PostCommentsEdit( {
 			<div { ...blockProps }>
 				<Warning>{ warning }</Warning>
 
-				{ showPlacholder && (
+				{ showPlaceholder && (
 					<div
 						className="wp-block-post-comments__placeholder"
 						ref={ disabledRef }
@@ -238,37 +239,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-form/edit.js

@@ -11,13 +11,17 @@ import {
 	BlockControls,
 	Warning,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useEntityProp } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	__experimentalUseDisabled as useDisabled,
-	useInstanceId,
-} from '@wordpress/compose';
+import { Button } from '@wordpress/components';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { __, _x, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import CommentsForm from './form';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -26,7 +30,7 @@ export default function PostCommentsFormEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
-	const [ commentStatus ] = useEntityProp(
+	const [ commentStatus, setCommentStatus ] = useEntityProp(
 		'postType',
 		postType,
 		'comment_status',
@@ -38,11 +42,62 @@ export default function PostCommentsFormEdit( {
 		} ),
 	} );
 
-	const isInSiteEditor = postType === undefined || postId === undefined;
+	const isSiteEditor = postType === undefined || postId === undefined;
 
-	const disabledFormRef = useDisabled();
+	const { defaultCommentStatus } = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings()
+				.__experimentalDiscussionSettings
+	);
 
-	const instanceId = useInstanceId( PostCommentsFormEdit );
+	const postTypeSupportsComments = useSelect( ( select ) =>
+		postType
+			? !! select( coreStore ).getPostType( postType )?.supports.comments
+			: false
+	);
+
+	let warning = false;
+	let actions;
+	let showPlaceholder = true;
+
+	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
+			);
+			actions = [
+				<Button
+					key="enableComments"
+					onClick={ () => setCommentStatus( 'open' ) }
+					variant="primary"
+				>
+					{ _x(
+						'Enable comments',
+						'action that affects the current post'
+					) }
+				</Button>,
+			];
+			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 +110,11 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ ! commentStatus && ! isInSiteEditor && (
-					<Warning>
-						{ __(
-							'Post Comments Form block: comments are not enabled for this post type.'
-						) }
-					</Warning>
+				{ warning && (
+					<Warning actions={ actions }>{ warning }</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>
-				) }
-
-				{ ( '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/editor.scss

@@ -1,3 +1,7 @@
 .wp-block-post-comments-form * {
 	pointer-events: none;
+
+	&.block-editor-warning * {
+		pointer-events: auto;
+	}
 }

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

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalUseDisabled as 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-template/index.php

@@ -82,17 +82,29 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 	$content = '';
 	while ( $query->have_posts() ) {
 		$query->the_post();
+
+		// Get an instance of the current Post Template block.
+		$block_instance = $block->parsed_block;
+
+		// Set the block name to one that does not correspond to an existing registered block.
+		// This ensures that for the inner instances of the Post Template block, we do not render any block supports.
+		$block_instance['blockName'] = 'core/null';
+
+		// Render the inner blocks of the Post Template block with `dynamic` set to `false` to prevent calling
+		// `render_callback` and ensure that no wrapper markup is included.
 		$block_content = (
 			new WP_Block(
-				$block->parsed_block,
+				$block_instance,
 				array(
 					'postType' => get_post_type(),
 					'postId'   => get_the_ID(),
 				)
 			)
 		)->render( array( 'dynamic' => false ) );
-		$post_classes  = implode( ' ', get_post_class( 'wp-block-post' ) );
-		$content      .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
+
+		// Wrap the render inner blocks in a `li` element with the appropriate post classes.
+		$post_classes = implode( ' ', get_post_class( 'wp-block-post' ) );
+		$content     .= '<li class="' . esc_attr( $post_classes ) . '">' . $block_content . '</li>';
 	}
 
 	wp_reset_postdata();