Add sorting by name or count in categories block

docs/reference-guides/core-blocks.md

@@ -79,7 +79,7 @@ Display a list of all terms of a given taxonomy. ([Source](https://github.com/Wo
 -	**Name:** core/categories
 -	**Category:** widgets
 -	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** displayAsDropdown, label, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
+-	**Attributes:** displayAsDropdown, label, order, orderBy, showEmpty, showHierarchy, showLabel, showOnlyTopLevel, showPostCounts, taxonomy
 
 ## Code
 

packages/block-library/src/categories/block.json

@@ -39,6 +39,14 @@
 		"showLabel": {
 			"type": "boolean",
 			"default": true
+		},
+		"order": {
+			"type": "string",
+			"default": "asc"
+		},
+		"orderBy": {
+			"type": "string",
+			"default": "name"
 		}
 	},
 	"usesContext": [ "enhancedPagination" ],

packages/block-library/src/categories/edit.js

@@ -35,6 +35,8 @@ export default function CategoriesEdit( {
 		label,
 		showLabel,
 		taxonomy: taxonomySlug,
+		order,
+		orderBy,
 	},
 	setAttributes,
 	className,
@@ -53,7 +55,13 @@ export default function CategoriesEdit( {
 	const isHierarchicalTaxonomy =
 		! isResolvingTaxonomies && taxonomy?.hierarchical;
 
-	const query = { per_page: -1, hide_empty: ! showEmpty, context: 'view' };
+	const query = {
+		per_page: -1,
+		hide_empty: ! showEmpty,
+		context: 'view',
+		order,
+		orderby: orderBy,
+	};
 	if ( isHierarchicalTaxonomy && showOnlyTopLevel ) {
 		query.parent = 0;
 	}
@@ -181,6 +189,29 @@ export default function CategoriesEdit( {
 		className: classes,
 	} );
 
+	const orderOptions = [
+		{
+			/* translators: label for ordering taxonomies by number of posts in descending order */
+			label: __( 'Highest #' ),
+			value: 'count/desc',
+		},
+		{
+			/* translators: label for ordering taxonomies by number of posts in ascending order */
+			label: __( 'Lowest #' ),
+			value: 'count/asc',
+		},
+		{
+			/* translators: label for ordering taxonomies by name in ascending order */
+			label: __( 'A → Z' ),
+			value: 'name/asc',
+		},
+		{
+			/* translators: label for ordering taxonomies by name in descending order */
+			label: __( 'Z → A' ),
+			value: 'name/desc',
+		},
+	];
+
 	return (
 		<TagName { ...blockProps }>
 			<InspectorControls>
@@ -202,6 +233,20 @@ export default function CategoriesEdit( {
 							}
 						/>
 					) }
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Order by' ) }
+						options={ orderOptions }
+						value={ `${ orderBy }/${ order }` }
+						onChange={ ( value ) => {
+							const [ newOrderBy, newOrder ] = value.split( '/' );
+							setAttributes( {
+								orderBy: newOrderBy,
+								order: newOrder,
+							} );
+						} }
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Display as dropdown' ) }

packages/block-library/src/categories/index.php

@@ -26,7 +26,8 @@ function render_block_core_categories( $attributes, $content, $block ) {
 	$args = array(
 		'echo'         => false,
 		'hierarchical' => ! empty( $attributes['showHierarchy'] ),
-		'orderby'      => 'name',
+		'orderby'      => $attributes['orderBy'],
+		'order'        => $attributes['order'],
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
 		'taxonomy'     => $attributes['taxonomy'],
 		'title_li'     => '',

test/integration/fixtures/blocks/core__categories.json

@@ -9,7 +9,9 @@
 			"showPostCounts": false,
 			"showOnlyTopLevel": false,
 			"showEmpty": false,
-			"showLabel": true
+			"showLabel": true,
+			"order": "asc",
+			"orderBy": "name"
 		},
 		"innerBlocks": []
 	}