@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/src/button/edit.native.js

@@ -17,7 +17,6 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-	useSetting,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -29,6 +28,7 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
+	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 import { store as editPostStore } from '@wordpress/edit-post';
@@ -59,7 +59,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 		if ( newWidth === 'auto' ) {
 			width = undefined;
 		}
-		// Update attributes
+		// Update attributes.
 		setAttributes( { width } );
 	}
 
@@ -118,8 +118,8 @@ function ButtonEdit( props ) {
 	const [ borderRadiusUnit, setBorderRadiusUnit ] = useState( valueUnit );
 
 	const richTextRef = useRef();
-	const colors = useSetting( 'color.palette' ) || [];
-	const gradients = useSetting( 'color.gradients' ) || [];
+	const colors = useMobileGlobalStylesColors();
+	const gradients = useMobileGlobalStylesColors( 'gradients' );
 
 	useEffect( () => {
 		if ( isSelected ) {
@@ -435,7 +435,7 @@ function ButtonEdit( props ) {
 	const buttonBorderRadiusValue =
 		borderRadiusUnit === 'px' || borderRadiusUnit === '%'
 			? borderRadiusValue
-			: Math.floor( 14 * borderRadiusValue ); // lets assume that the font size is set to 14px; TO get a nicer preview.
+			: Math.floor( 14 * borderRadiusValue ); // Lets assume that the font size is set to 14px; TO get a nicer preview.
 	const outlineBorderRadius =
 		buttonBorderRadiusValue > 0
 			? buttonBorderRadiusValue + spacing + borderWidth

package/src/button/editor.scss

@@ -13,11 +13,6 @@
 	position: relative;
 	cursor: text;
 
-	// Make placeholder text white unless custom colors or outline versions are chosen.
-	&:not(.has-text-color):not(.is-style-outline) [data-rich-text-placeholder]::after {
-		color: $white;
-	}
-
 	// Add outline to button on focus to indicate focus-state
 	&:focus {
 		box-shadow: 0 0 0 1px $white, 0 0 0 3px var(--wp-admin-theme-color);

package/src/buttons/test/edit.native.js

@@ -16,12 +16,12 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
 beforeAll( () => {
-	// Register all core blocks
+	// Register all core blocks.
 	registerCoreBlocks();
 } );
 
 afterAll( () => {
-	// Clean up registered blocks
+	// Clean up registered blocks.
 	getBlockTypes().forEach( ( block ) => {
 		unregisterBlockType( block.name );
 	} );
@@ -103,7 +103,7 @@ describe( 'Buttons block', () => {
 					getByA11yLabel( 'Change items justification' )
 				);
 
-				// Select alignment option
+				// Select alignment option.
 				fireEvent.press(
 					await waitFor( () => getByText( justificationOption ) )
 				);

package/src/buttons/transforms.js

@@ -16,13 +16,13 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/button' ],
 			transform: ( buttons ) =>
-				// Creates the buttons block
+				// Creates the buttons block.
 				createBlock(
 					name,
 					{},
-					// Loop the selected buttons
+					// Loop the selected buttons.
 					buttons.map( ( attributes ) =>
-						// Create singular button in the buttons block
+						// Create singular button in the buttons block.
 						createBlock( 'core/button', attributes )
 					)
 				),
@@ -32,22 +32,22 @@ const transforms = {
 			isMultiBlock: true,
 			blocks: [ 'core/paragraph' ],
 			transform: ( buttons ) =>
-				// Creates the buttons block
+				// Creates the buttons block.
 				createBlock(
 					name,
 					{},
-					// Loop the selected buttons
+					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
 						const element = createElement(
 							document,
 							attributes.content
 						);
-						// Remove any HTML tags
+						// Remove any HTML tags.
 						const text = element.innerText || '';
-						// Get first url
+						// Get first url.
 						const link = element.querySelector( 'a' );
 						const url = link?.getAttribute( 'href' );
-						// Create singular button in the buttons block
+						// Create singular button in the buttons block.
 						return createBlock( 'core/button', {
 							text,
 							url,

package/src/categories/edit.js

@@ -14,11 +14,10 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 
 export default function CategoriesEdit( {
 	attributes: {
@@ -30,23 +29,14 @@ export default function CategoriesEdit( {
 	setAttributes,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
-	const { categories, isRequesting } = useSelect(
-		( select ) => {
-			const { getEntityRecords, isResolving } = select( coreStore );
-			const query = { per_page: -1, hide_empty: true, context: 'view' };
-			if ( showOnlyTopLevel ) {
-				query.parent = 0;
-			}
-			return {
-				categories: getEntityRecords( 'taxonomy', 'category', query ),
-				isRequesting: isResolving( 'getEntityRecords', [
-					'taxonomy',
-					'category',
-					query,
-				] ),
-			};
-		},
-		[ showOnlyTopLevel ]
+	const query = { per_page: -1, hide_empty: true, context: 'view' };
+	if ( showOnlyTopLevel ) {
+		query.parent = 0;
+	}
+	const { records: categories, isResolving } = useEntityRecords(
+		'taxonomy',
+		'category',
+		query
 	);
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
@@ -163,19 +153,19 @@ export default function CategoriesEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			{ isRequesting && (
+			{ isResolving && (
 				<Placeholder icon={ pin } label={ __( 'Categories' ) }>
 					<Spinner />
 				</Placeholder>
 			) }
-			{ ! isRequesting && categories?.length === 0 && (
+			{ ! isResolving && categories?.length === 0 && (
 				<p>
 					{ __(
 						'Your site does not have any posts, so there is nothing to display here at the moment.'
 					) }
 				</p>
 			) }
-			{ ! isRequesting &&
+			{ ! isResolving &&
 				categories?.length > 0 &&
 				( displayAsDropdown
 					? renderCategoryDropdown()

package/src/code/block.json

@@ -15,7 +15,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSelector": ".wp-block-code > code",
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/code/style.scss

@@ -1,6 +1,8 @@
-// Provide a minimum of overflow handling.
+// Provide a minimum of overflow handling and ensure the code markup inherits
+// the font-family set on pre.
 .wp-block-code code {
 	display: block;
-	white-space: pre-wrap;
+	font-family: inherit;
 	overflow-wrap: break-word;
+	white-space: pre-wrap;
 }

package/src/code/theme.scss

@@ -1,9 +1,6 @@
 .wp-block-code {
 	border: 1px solid #ccc;
 	border-radius: 4px;
-}
-
-.wp-block-code > code {
 	font-family: Menlo, Consolas, monaco, monospace;
 	padding: 0.8em 1em;
 }

package/src/columns/block.json

@@ -43,6 +43,18 @@
 				"type": "flex",
 				"flexWrap": "nowrap"
 			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

package/src/columns/columnCalculations.native.js

@@ -45,7 +45,7 @@ export const getColumnsInRow = ( width, columnCount ) => {
 				MAX_COLUMNS_NUM_IN_ROW
 			);
 		}
-		// show all Column in one row
+		// Show all Column in one row.
 		return columnCount;
 	}
 };

package/src/columns/edit.js

@@ -141,7 +141,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Update own alignment.
 			setAttributes( { verticalAlignment } );
 
-			// Update all child Column Blocks to match
+			// Update all child Column Blocks to match.
 			const innerBlockClientIds = getBlockOrder( clientId );
 			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
 				updateBlockAttributes( innerBlockClientId, {

package/src/columns/edit.native.js

@@ -317,7 +317,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Update own alignment.
 			setAttributes( { verticalAlignment } );
 
-			// Update all child Column Blocks to match
+			// Update all child Column Blocks to match.
 			const innerBlockClientIds = getBlockOrder( clientId );
 			innerBlockClientIds.forEach( ( innerBlockClientId ) => {
 				updateBlockAttributes( innerBlockClientId, {
@@ -359,7 +359,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 			// Redistribute available width for existing inner blocks.
 			const isAddingColumn = newColumns > previousColumns;
 
-			// Get verticalAlignment from Columns block to set the same to new Column
+			// Get verticalAlignment from Columns block to set the same to new Column.
 			const { verticalAlignment } = getBlockAttributes( clientId ) || {};
 
 			if ( isAddingColumn && hasExplicitWidths ) {
@@ -421,7 +421,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 				blockEditorStore
 			);
 
-			// Get verticalAlignment from Columns block to set the same to new Column
+			// Get verticalAlignment from Columns block to set the same to new Column.
 			const { verticalAlignment } = getBlockAttributes( clientId );
 
 			const innerBlocks = getBlocks( clientId );

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

@@ -5,10 +5,12 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { __, _x, isRTL } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
 
 export default function Edit( {
 	attributes,
@@ -38,6 +40,11 @@ export default function Edit( {
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+	const { avatarURL } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
 
 	const inspectorControls = (
 		<InspectorControls>
@@ -59,7 +66,7 @@ export default function Edit( {
 		</InspectorControls>
 	);
 
-	const displayAvatar = avatarUrls ? (
+	const resizableAvatar = (
 		<ResizableBox
 			size={ {
 				width,
@@ -83,21 +90,19 @@ export default function Edit( {
 			maxWidth={ maxSizeBuffer }
 		>
 			<img
-				src={ avatarUrls[ avatarUrls.length - 1 ] }
+				src={
+					avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : avatarURL
+				}
 				alt={ `${ authorName } ${ __( 'Avatar' ) }` }
 				{ ...blockProps }
 			/>
 		</ResizableBox>
-	) : (
-		<p { ...blockProps }>
-			{ _x( 'Comment Author Avatar', 'block title' ) }
-		</p>
 	);
 
 	return (
 		<>
 			{ inspectorControls }
-			<div { ...spacingProps }>{ displayAvatar }</div>
+			<div { ...spacingProps }>{ resizableAvatar }</div>
 		</>
 	);
 }

package/src/comment-author-avatar/editor.scss

@@ -0,0 +1,7 @@
+.wp-block-comment-author-avatar__placeholder {
+	border: currentColor 1px dashed;
+	width: 100%;
+	height: 100%;
+	stroke: currentColor;
+	stroke-dasharray: 3;
+}

package/src/comment-template/block.json

@@ -7,7 +7,13 @@
 	"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", "comments/order" ],
+	"usesContext": [
+		"comments/defaultPage",
+		"comments/inherit",
+		"comments/order",
+		"comments/perPage",
+		"postId"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

package/src/comment-template/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, memo } from '@wordpress/element';
+import { useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -17,7 +17,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { convertToTree } from './util';
+import { useCommentQueryArgs, useCommentTree } from './hooks';
 
 const TEMPLATE = [
 	[ 'core/comment-author-avatar' ],
@@ -28,6 +28,56 @@ const TEMPLATE = [
 	[ 'core/comment-edit-link' ],
 ];
 
+/**
+ * Function that returns a comment structure that will be rendered with default placehoders.
+ *
+ * @param {Object}  settings                       Discussion Settings.
+ * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
+ * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
+ *
+ * @typedef {{id: null, children: EmptyComment[]}} EmptyComment
+ * @return {EmptyComment[]}                 		Inner blocks of the Comment Template
+ */
+const getCommentsPlaceholder = ( {
+	perPage,
+	threadComments,
+	threadCommentsDepth,
+} ) => {
+	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
+	// arbitrary value of 3.
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
+
+	// We set a limit in order not to overload the editor of empty comments.
+	const defaultCommentsToShow =
+		perPage <= commentsDepth ? perPage : commentsDepth;
+	if ( ! threadComments || defaultCommentsToShow === 1 ) {
+		// If displaying threaded comments is disabled, we only show one comment
+		return [ { commentId: null, children: [] } ];
+	} else if ( defaultCommentsToShow === 2 ) {
+		return [
+			{
+				commentId: null,
+				children: [ { commentId: null, children: [] } ],
+			},
+		];
+	}
+
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	return [
+		{
+			commentId: null,
+			children: [
+				{
+					commentId: null,
+					children: [ { commentId: null, children: [] } ],
+				},
+			],
+		},
+	];
+};
+
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
@@ -56,10 +106,10 @@ function CommentTemplateInnerBlocks( {
 			{ comment === ( activeComment || firstComment ) ? children : null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
-			is ALWAYS rendered and the preview for the active block is hidden. 
-			This ensures that when switching the active block, the component is not 
+			is ALWAYS rendered and the preview for the active block is hidden.
+			This ensures that when switching the active block, the component is not
 			mounted again but rather it only toggles the `isHidden` prop.
-			
+
 			The same strategy is used for preventing the flicker in the Post Template
 			block. */ }
 			<MemoizedCommentTemplatePreview
@@ -140,9 +190,9 @@ const CommentsList = ( {
 } ) => (
 	<ol { ...blockProps }>
 		{ comments &&
-			comments.map( ( comment ) => (
+			comments.map( ( comment, index ) => (
 				<BlockContextProvider
-					key={ comment.commentId }
+					key={ comment.commentId || index }
 					value={ comment }
 				>
 					<CommentTemplateInnerBlocks
@@ -159,54 +209,58 @@ const CommentsList = ( {
 
 export default function CommentTemplateEdit( {
 	clientId,
-	context: { postId, 'comments/perPage': perPage, 'comments/order': order },
+	context: {
+		postId,
+		'comments/perPage': perPage,
+		'comments/order': order,
+		'comments/defaultPage': defaultPage,
+		'comments/inherit': inherit,
+	},
 } ) {
 	const blockProps = useBlockProps();
 
 	const [ activeComment, setActiveComment ] = useState();
-	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalDiscussionSettings;
+	const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return getSettings().__experimentalDiscussionSettings;
+		}
+	);
+
+	const commentQuery = useCommentQueryArgs( {
+		postId,
+		perPage,
+		defaultPage,
+		inherit,
 	} );
-	const { rawComments, blocks } = useSelect(
+
+	const { topLevelComments, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
 
-			const commentQuery = {
-				post: postId,
-				status: 'approve',
-				context: 'embed',
-				order: order || commentOrder,
-			};
-
-			if ( order ) {
-				commentQuery.order = order;
-			}
 			return {
-				rawComments: getEntityRecords(
-					'root',
-					'comment',
-					commentQuery
-				),
+				// Request only top-level comments. Replies are embedded.
+				topLevelComments: commentQuery
+					? getEntityRecords( 'root', 'comment', commentQuery )
+					: null,
 				blocks: getBlocks( clientId ),
 			};
 		},
-		[ postId, clientId, order ]
+		[ clientId, commentQuery ]
 	);
 
-	// TODO: Replicate the logic used on the server.
-	perPage = perPage || commentsPerPage;
-	// 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 ]
+	order = inherit || ! order ? commentOrder : order;
+
+	// Generate a tree structure of comment IDs.
+	let commentTree = useCommentTree(
+		// Reverse the order of top comments if needed.
+		order === 'desc' && topLevelComments
+			? [ ...topLevelComments ].reverse()
+			: topLevelComments
 	);
 
-	if ( ! rawComments ) {
+	if ( ! topLevelComments ) {
 		return (
 			<p { ...blockProps }>
 				<Spinner />
@@ -214,13 +268,21 @@ export default function CommentTemplateEdit( {
 		);
 	}
 
-	if ( ! comments.length ) {
+	if ( ! postId ) {
+		commentTree = getCommentsPlaceholder( {
+			perPage,
+			threadComments,
+			threadCommentsDepth,
+		} );
+	}
+
+	if ( ! commentTree.length ) {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
 	return (
 		<CommentsList
-			comments={ comments }
+			comments={ commentTree }
 			blockProps={ blockProps }
 			blocks={ blocks }
 			activeComment={ activeComment }