[Block Library - Categories]: Add support for showing only top level …

…categories (#35726)
WordPress · Oct 18, 2021 · 487fd90 · 487fd90
1 parent 4d76a79
commit 487fd90
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 19 deletions.
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
@@ -17,6 +17,10 @@
 		"showPostCounts": {
 			"type": "boolean",
 			"default": false
+		},
+		"showOnlyTopLevel": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js
@@ -21,22 +21,33 @@ import { pin } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 
 export default function CategoriesEdit( {
-	attributes: { displayAsDropdown, showHierarchy, showPostCounts },
+	attributes: {
+		displayAsDropdown,
+		showHierarchy,
+		showPostCounts,
+		showOnlyTopLevel,
+	},
 	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' };
-		return {
-			categories: getEntityRecords( 'taxonomy', 'category', query ),
-			isRequesting: isResolving( 'getEntityRecords', [
-				'taxonomy',
-				'category',
-				query,
-			] ),
-		};
-	}, [] );
+	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 getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
 			return [];
@@ -133,16 +144,23 @@ export default function CategoriesEdit( {
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
-					<ToggleControl
-						label={ __( 'Show hierarchy' ) }
-						checked={ showHierarchy }
-						onChange={ toggleAttribute( 'showHierarchy' ) }
-					/>
 					<ToggleControl
 						label={ __( 'Show post counts' ) }
 						checked={ showPostCounts }
 						onChange={ toggleAttribute( 'showPostCounts' ) }
 					/>
+					<ToggleControl
+						label={ __( 'Show only top level categories' ) }
+						checked={ showOnlyTopLevel }
+						onChange={ toggleAttribute( 'showOnlyTopLevel' ) }
+					/>
+					{ ! showOnlyTopLevel && (
+						<ToggleControl
+							label={ __( 'Show hierarchy' ) }
+							checked={ showHierarchy }
+							onChange={ toggleAttribute( 'showHierarchy' ) }
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			{ isRequesting && (

diff --git a/packages/block-library/src/categories/index.php b/packages/block-library/src/categories/index.php
@@ -23,6 +23,9 @@ function render_block_core_categories( $attributes ) {
 		'show_count'   => ! empty( $attributes['showPostCounts'] ),
 		'title_li'     => '',
 	);
+	if ( ! empty( $attributes['showOnlyTopLevel'] ) && $attributes['showOnlyTopLevel'] ) {
+		$args['parent'] = 0;
+	}
 
 	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
 		$id                       = 'wp-block-categories-' . $block_id;

diff --git a/test/integration/fixtures/blocks/core__categories.json b/test/integration/fixtures/blocks/core__categories.json
@@ -6,7 +6,8 @@
 		"attributes": {
 			"displayAsDropdown": false,
 			"showHierarchy": false,
-			"showPostCounts": false
+			"showPostCounts": false,
+			"showOnlyTopLevel": false
 		},
 		"innerBlocks": [],
 		"originalContent": ""