Show visual label for Categories block in dropdown mode

docs/reference-guides/core-blocks.md

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

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

@@ -26,6 +26,14 @@
 		"showEmpty": {
 			"type": "boolean",
 			"default": false
+		},
+		"label": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

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

@@ -12,21 +12,35 @@ import {
 	Spinner,
 	ToggleControl,
 	VisuallyHidden,
+	ToolbarGroup,
+	ToolbarButton,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { toggleLabel } from '../search/icons';
+
 export default function CategoriesEdit( {
 	attributes: {
 		displayAsDropdown,
 		showHierarchy,
 		showPostCounts,
 		showOnlyTopLevel,
 		showEmpty,
+		label,
+		showLabel,
 	},
 	setAttributes,
 	className,
@@ -92,9 +106,24 @@ export default function CategoriesEdit( {
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
-				</VisuallyHidden>
+				{ showLabel ? (
+					<RichText
+						className="wp-block-categories__label"
+						as="label"
+						htmlFor={ selectId }
+						aria-label={ __( 'Label text' ) }
+						placeholder={ __( 'Categories' ) }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+					/>
+				) : (
+					<VisuallyHidden as="label" htmlFor={ selectId }>
+						{ label ? label : __( 'Categories' ) }
+					</VisuallyHidden>
+				) }
 				<select id={ selectId }>
 					<option>{ __( 'Select Category' ) }</option>
 					{ categoriesList.map( ( category ) =>
@@ -140,6 +169,22 @@ export default function CategoriesEdit( {
 
 	return (
 		<TagName { ...blockProps }>
+			{ displayAsDropdown && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							title={ __( 'Toggle label' ) }
+							icon={ toggleLabel }
+							onClick={ () => {
+								setAttributes( {
+									showLabel: ! showLabel,
+								} );
+							} }
+							className={ showLabel ? 'is-pressed' : undefined }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl

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

@@ -32,7 +32,10 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
+		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label            = __( 'Categories' );
+		$label_text               = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 

packages/block-library/src/categories/style.scss

@@ -14,4 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
+	& .wp-block-categories__label {
+		width: 100%;
+		display: block;
+	}
 }

test/integration/fixtures/blocks/core__categories.json

@@ -7,7 +7,8 @@
 			"showHierarchy": false,
 			"showPostCounts": false,
 			"showOnlyTopLevel": false,
-			"showEmpty": false
+			"showEmpty": false,
+			"showLabel": true
 		},
 		"innerBlocks": []
 	}