@wordpress/block-library 6.0.17-next.33ec3857e2.0 → 6.0.20

package/src/calendar/index.php

@@ -107,47 +107,51 @@ function block_core_calendar_update_has_published_posts() {
 	return $has_published_posts;
 }
 
-// We only want to register these functions and actions when
-// we are on single sites. On multi sites we use `post_count` option.
-if ( ! is_multisite() ) {
-	/**
-	 * Handler for updating the has published posts flag when a post is deleted.
-	 *
-	 * @param int $post_id Deleted post ID.
-	 */
-	function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
-		$post = get_post( $post_id );
-
-		if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
-			return;
-		}
+/**
+ * Handler for updating the has published posts flag when a post is deleted.
+ *
+ * @param int $post_id Deleted post ID.
+ */
+function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
+	if ( is_multisite() ) {
+		return;
+	}
+
+	$post = get_post( $post_id );
 
-		block_core_calendar_update_has_published_posts();
+	if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
+		return;
 	}
 
-	/**
-	 * Handler for updating the has published posts flag when a post status changes.
-	 *
-	 * @param string  $new_status The status the post is changing to.
-	 * @param string  $old_status The status the post is changing from.
-	 * @param WP_Post $post       Post object.
-	 */
-	function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
-		if ( $new_status === $old_status ) {
-			return;
-		}
+	block_core_calendar_update_has_published_posts();
+}
 
-		if ( 'post' !== get_post_type( $post ) ) {
-			return;
-		}
+/**
+ * Handler for updating the has published posts flag when a post status changes.
+ *
+ * @param string  $new_status The status the post is changing to.
+ * @param string  $old_status The status the post is changing from.
+ * @param WP_Post $post       Post object.
+ */
+function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
+	if ( is_multisite() ) {
+		return;
+	}
 
-		if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
-			return;
-		}
+	if ( $new_status === $old_status ) {
+		return;
+	}
 
-		block_core_calendar_update_has_published_posts();
+	if ( 'post' !== get_post_type( $post ) ) {
+		return;
 	}
 
-	add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
-	add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );
+	if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
+		return;
+	}
+
+	block_core_calendar_update_has_published_posts();
 }
+
+add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
+add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );

package/src/categories/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/categories",
 	"title": "Categories",

package/src/code/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/code",
 	"title": "Code",
@@ -35,11 +34,7 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true,
-			"__experimentalDefaultControls": {
-				"width": true,
-				"color": true
-			}
+			"style": true
 		},
 		"color": {
 			"text": true,

package/src/column/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/column",
 	"title": "Column",

package/src/columns/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/columns",
 	"title": "Columns",
@@ -24,11 +23,10 @@
 			"link": true
 		},
 		"spacing": {
-			"blockGap": true,
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"padding": true
 			}
 		}
 	},

package/src/columns/style.scss

@@ -10,6 +10,10 @@
 		flex-wrap: nowrap;
 	}
 
+	&:where(.has-background) {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
+
 	/**
 	* All Columns Alignment
 	*/
@@ -81,8 +85,8 @@
 		> .wp-block-column {
 			// Available space should be divided equally amongst columns.
 			flex-basis: 0;
-
 			flex-grow: 1;
+
 			// Columns with an explicitly-assigned width should maintain their
 			// `flex-basis` width and not grow.
 			&[style*="flex-basis"] {
@@ -97,13 +101,6 @@
 	}
 }
 
-// Add low specificity default padding to columns blocks with backgrounds.
-:where(.wp-block-columns.has-background) {
-	// Matches paragraph block padding.
-	padding: $block-bg-padding--v $block-bg-padding--h;
-}
-
-
 .wp-block-column {
 	flex-grow: 1;
 

package/src/comment-author-avatar/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-author-avatar",
 	"title": "Comment Author Avatar",
@@ -28,12 +27,8 @@
 		},
 		"color": {
 			"background": true,
-			"text": false
-		},
-		"spacing": {
-			"__experimentalSkipSerialization": true,
-			"margin": true,
-			"padding": true
+			"text": false,
+			"links": false
 		}
 	}
 }

package/src/comment-author-avatar/edit.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	InspectorControls,
-	useBlockProps,
-	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
-} from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, _x, isRTL } from '@wordpress/i18n';
@@ -35,7 +31,6 @@ export default function Edit( {
 	const minSize = sizes ? sizes[ 0 ] : 24;
 	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
 	const blockProps = useBlockProps();
-	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
 
 	const inspectorControls = (
@@ -95,7 +90,7 @@ export default function Edit( {
 	return (
 		<>
 			{ inspectorControls }
-			<div { ...spacingProps }>{ displayAvatar }</div>
+			<div>{ displayAvatar }</div>
 		</>
 	);
 }

package/src/comment-author-avatar/index.php

@@ -25,31 +25,15 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 
 	// This is the only way to retreive style and classes on different instances.
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
-
-	/**
-	 * We get the spacing attributes and transform the array provided into a string formatted for being applied as a style html tag.
-	 * Good candidate to be moved to a separate function in core.
-	*/
-	$spacing_attributes = isset( $attributes['style']['spacing'] ) ? $attributes['style']['spacing'] : null;
-	if ( isset( $spacing_attributes ) && ! empty( $spacing_attributes ) ) {
-		$spacing_array = array();
-		foreach ( $spacing_attributes as $spacing_attribute_key => $spacing_attribute_value ) {
-			foreach ( $spacing_attribute_value as $position_key => $position_value ) {
-				$spacing_array[] = $spacing_attribute_key . '-' . $position_key . ': ' . $position_value;
-			}
-		}
-		$spacing_string = implode( ';', $spacing_array );
-	}
-
-	$width   = isset( $attributes['width'] ) ? $attributes['width'] : 96;
-	$height  = isset( $attributes['height'] ) ? $attributes['height'] : 96;
-	$styles  = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
-	$classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
+	$width              = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height             = isset( $attributes['height'] ) ? $attributes['height'] : 96;
+	$styles             = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
+	$classes            = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
 
 	/* translators: %s is the Comment Author name */
 	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 
-	$avatar_block = get_avatar(
+	$avatar_string = get_avatar(
 		$comment,
 		null,
 		'',
@@ -61,10 +45,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 			'class'      => $classes,
 		)
 	);
-	if ( isset( $spacing_attributes ) ) {
-		return sprintf( '<div style="%1s">%2s</div>', esc_attr( $spacing_string ), $avatar_block );
-	}
-	return sprintf( '<div>%1s</div>', $avatar_block );
+	return $avatar_string;
 }
 
 /**

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

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-author-name",
 	"title": "Comment Author Name",

package/src/comment-content/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-content",
 	"title": "Comment Content",

package/src/comment-date/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-date",
 	"title": "Comment Date",

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

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-edit-link",
 	"title": "Comment Edit Link",

package/src/comment-edit-link/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { commentEditLink as icon } from '@wordpress/icons';
+import { edit as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

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

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-reply-link",
 	"title": "Comment Reply Link",

package/src/comment-template/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-template",
 	"title": "Comment Template",
@@ -7,11 +6,10 @@
 	"parent": [ "core/comments-query-loop" ],
 	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [ "comments/perPage", "postId" ],
+	"usesContext": [ "queryId", "queryPerPage", "postId" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
 		"align": true
-	},
-	"style": "wp-block-comment-template"
+	}
 }

package/src/comment-template/edit.js

@@ -14,11 +14,6 @@ import {
 import { Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 
-/**
- * Internal dependencies
- */
-import { convertToTree } from './util';
-
 const TEMPLATE = [
 	[ 'core/comment-author-avatar' ],
 	[ 'core/comment-author-name' ],
@@ -28,129 +23,43 @@ const TEMPLATE = [
 	[ 'core/comment-edit-link' ],
 ];
 
-/**
- * Component which renders the inner blocks of the Comment Template.
- *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comment]          - A comment object.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.firstBlock]       - First comment in the array.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
- * @return {WPElement}                 		Inner blocks of the Comment Template
- */
-function CommentTemplateInnerBlocks( {
-	comment,
-	activeComment,
-	setActiveComment,
-	firstBlock,
-	blocks,
-} ) {
-	const { children, ...innerBlocksProps } = useInnerBlocksProps(
-		{},
-		{ template: TEMPLATE }
-	);
-	return (
-		<li { ...innerBlocksProps }>
-			{ comment === ( activeComment || firstBlock ) ? (
-				children
-			) : (
-				<BlockPreview
-					blocks={ blocks }
-					__experimentalLive
-					__experimentalOnClick={ () => setActiveComment( comment ) }
-				/>
-			) }
-			{ comment?.children?.length > 0 ? (
-				<CommentsList
-					comments={ comment.children }
-					activeComment={ activeComment }
-					setActiveComment={ setActiveComment }
-					blocks={ blocks }
-				/>
-			) : null }
-		</li>
-	);
+function CommentTemplateInnerBlocks() {
+	const innerBlocksProps = useInnerBlocksProps( {}, { template: TEMPLATE } );
+	return <li { ...innerBlocksProps } />;
 }
 
-/**
- * Component that renders a list of (nested) comments. It is called recursively.
- *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comments]         - Array of comment objects.
- * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
- * @return {WPElement}                 		List of comments.
- */
-const CommentsList = ( {
-	comments,
-	blockProps,
-	activeComment,
-	setActiveComment,
-	blocks,
-} ) => (
-	<ol { ...blockProps }>
-		{ comments &&
-			comments.map( ( comment ) => (
-				<BlockContextProvider
-					key={ comment.commentId }
-					value={ comment }
-				>
-					<CommentTemplateInnerBlocks
-						comment={ comment }
-						activeComment={ activeComment }
-						setActiveComment={ setActiveComment }
-						blocks={ blocks }
-						firstBlock={ comments[ 0 ] }
-					/>
-				</BlockContextProvider>
-			) ) }
-	</ol>
-);
-
 export default function CommentTemplateEdit( {
 	clientId,
-	context: { postId, 'comments/perPage': perPage },
+	context: { postId, queryPerPage },
 } ) {
 	const blockProps = useBlockProps();
 
-	const [ activeComment, setActiveComment ] = useState();
+	const [ activeBlockContext, setActiveBlockContext ] = useState();
 
-	const { rawComments, blocks } = useSelect(
+	const { comments, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
 
 			return {
-				rawComments: getEntityRecords( 'root', 'comment', {
+				comments: getEntityRecords( 'root', 'comment', {
 					post: postId,
 					status: 'approve',
+					per_page: queryPerPage,
 					order: 'asc',
-					context: 'embed',
 				} ),
 				blocks: getBlocks( clientId ),
 			};
 		},
-		[ postId, clientId ]
+		[ queryPerPage, postId, clientId ]
 	);
 
-	// TODO: Replicate the logic used on the server.
-	perPage = perPage || 50;
-
-	// We convert the flat list of comments to tree.
-	// Then, we show only a maximum of `perPage` number of comments.
-	// This is because passing `per_page` to `getEntityRecords()` does not
-	// take into account nested comments.
-	const comments = useMemo(
-		() => convertToTree( rawComments ).slice( 0, perPage ),
-		[ rawComments, perPage ]
+	const blockContexts = useMemo(
+		() => comments?.map( ( comment ) => ( { commentId: comment.id } ) ),
+		[ comments ]
 	);
 
-	if ( ! rawComments ) {
+	if ( ! comments ) {
 		return (
 			<p { ...blockProps }>
 				<Spinner />
@@ -163,12 +72,29 @@ export default function CommentTemplateEdit( {
 	}
 
 	return (
-		<CommentsList
-			comments={ comments }
-			blockProps={ blockProps }
-			blocks={ blocks }
-			activeComment={ activeComment }
-			setActiveComment={ setActiveComment }
-		/>
+		<ul { ...blockProps }>
+			{ blockContexts &&
+				blockContexts.map( ( blockContext ) => (
+					<BlockContextProvider
+						key={ blockContext.commentId }
+						value={ blockContext }
+					>
+						{ blockContext ===
+						( activeBlockContext || blockContexts[ 0 ] ) ? (
+							<CommentTemplateInnerBlocks />
+						) : (
+							<li>
+								<BlockPreview
+									blocks={ blocks }
+									__experimentalLive
+									__experimentalOnClick={ () =>
+										setActiveBlockContext( blockContext )
+									}
+								/>
+							</li>
+						) }
+					</BlockContextProvider>
+				) ) }
+		</ul>
 	);
 }

package/src/comment-template/index.php

@@ -5,43 +5,6 @@
  * @package WordPress
  */
 
-/**
- * Function that recursively renders a list of nested comments.
- *
- * @param WP_Comment[] $comments    The array of comments.
- * @param WP_Block     $block           Block instance.
- * @return string
- */
-function block_core_comment_template_render_comments( $comments, $block ) {
-	$content = '';
-	foreach ( $comments as $comment ) {
-
-		$block_content = ( new WP_Block(
-			$block->parsed_block,
-			array(
-				'commentId' => $comment->comment_ID,
-			)
-		) )->render( array( 'dynamic' => false ) );
-
-		$children = $comment->get_children();
-
-		// If the comment has children, recurse to create the HTML for the nested
-		// comments.
-		if ( ! empty( $children ) ) {
-			$inner_content  = block_core_comment_template_render_comments(
-				$children,
-				$block
-			);
-			$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
-		}
-
-		$content .= '<li>' . $block_content . '</li>';
-	}
-
-	return $content;
-
-}
-
 /**
  * Renders the `core/comment-template` block on the server.
  *
@@ -53,27 +16,37 @@ function block_core_comment_template_render_comments( $comments, $block ) {
  * defined by the block's inner blocks.
  */
 function render_block_core_comment_template( $attributes, $content, $block ) {
+
+	$post_id = $block->context['postId'];
+
 	// Bail out early if the post ID is not set for some reason.
-	if ( empty( $block->context['postId'] ) ) {
+	if ( ! isset( $post_id ) ) {
 		return '';
 	}
 
-	$comment_query = new WP_Comment_Query(
-		build_comment_query_vars_from_block( $block )
-	);
+	$number = $block->context['queryPerPage'];
 
 	// Get an array of comments for the current post.
-	$comments = $comment_query->get_comments();
+	$comments = get_approved_comments( $post_id, array( 'number' => $number ) );
+
 	if ( count( $comments ) === 0 ) {
 		return '';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$content = '';
+	foreach ( $comments as $comment ) {
+		$block_content = ( new WP_Block(
+			$block->parsed_block,
+			array(
+				'commentId' => $comment->comment_ID,
+			)
+		) )->render( array( 'dynamic' => false ) );
+		$content      .= '<li>' . $block_content . '</li>';
+	}
 
 	return sprintf(
-		'<ol %1$s>%2$s</ol>',
-		$wrapper_attributes,
-		block_core_comment_template_render_comments( $comments, $block )
+		'<ul>%1$s</ul>',
+		$content
 	);
 }
 

package/src/comments-query-loop/block.json

@@ -1,5 +1,4 @@
 {
-	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-query-loop",
 	"title": "Comments Query Loop",
@@ -7,9 +6,12 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"perPage": {
+		"queryId": {
+			"type": "number"
+		},
+		"queryPerPage": {
 			"type": "number",
-			"default": null
+			"default": 4
 		},
 		"tagName": {
 			"type": "string",
@@ -17,7 +19,8 @@
 		}
 	},
 	"providesContext": {
-		"comments/perPage": "perPage"
+		"queryId": "queryId",
+		"queryPerPage": "queryPerPage"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

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

@@ -18,7 +18,7 @@ import QueryToolbar from './toolbar';
 const TEMPLATE = [ [ 'core/comment-template' ] ];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { perPage, tagName: TagName } = attributes;
+	const { queryPerPage, tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -28,7 +28,10 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<BlockControls>
-				<QueryToolbar perPage={ perPage } setQuery={ setAttributes } />
+				<QueryToolbar
+					queryPerPage={ queryPerPage }
+					setQuery={ setAttributes }
+				/>
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl