remove parens inspector controls in favor of block controls, add icons

packages/block-library/src/term-count/edit.js

@@ -11,19 +11,14 @@ import {
 	useBlockProps,
 	BlockControls,
 	AlignmentControl,
-	InspectorControls,
 } from '@wordpress/block-editor';
-import {
-	ToggleControl,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { useTermCount } from './use-term-count';
+import { bareNumber, numberInParenthesis } from './icons';
 
 export default function TermCountEdit( {
 	attributes,
@@ -41,7 +36,35 @@ export default function TermCountEdit( {
 		} ),
 	} );
 
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const getDisplayTypeIcon = () => {
+		switch ( hasParenthesis ) {
+			case true:
+				return numberInParenthesis;
+			case false:
+				return bareNumber;
+		}
+	};
+
+	const displayTypeControls = [
+		{
+			role: 'menuitemradio',
+			title: __( 'In Parenthesis' ),
+			isActive: hasParenthesis === true,
+			icon: numberInParenthesis,
+			onClick: () => {
+				setAttributes( { hasParenthesis: true } );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Bare Number' ),
+			isActive: hasParenthesis === false,
+			icon: bareNumber,
+			onClick: () => {
+				setAttributes( { hasParenthesis: false } );
+			},
+		},
+	];
 
 	let termCountDisplay = termCount;
 	if ( hasParenthesis ) {
@@ -55,44 +78,20 @@ export default function TermCountEdit( {
 	return (
 		<>
 			<BlockControls group="block">
+				<ToolbarGroup>
+					<ToolbarDropdownMenu
+						icon={ getDisplayTypeIcon() }
+						label={ __( 'Change display type' ) }
+						controls={ displayTypeControls }
+					/>
+				</ToolbarGroup>
 				<AlignmentControl
 					value={ textAlign }
 					onChange={ ( nextAlign ) => {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
 			</BlockControls>
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						setAttributes( {
-							hasParenthesis: false,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						hasValue={ () => !! hasParenthesis }
-						label={ __( 'Make term count a link' ) }
-						onDeselect={ () =>
-							setAttributes( { hasParenthesis: false } )
-						}
-						isShownByDefault
-					>
-						<ToggleControl
-							__nextHasNoMarginBottom
-							label={ __( 'Show term count in parenthesis' ) }
-							onChange={ () =>
-								setAttributes( {
-									hasParenthesis: ! hasParenthesis,
-								} )
-							}
-							checked={ hasParenthesis }
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			</InspectorControls>
 			<div { ...blockProps }>{ termCountDisplay }</div>
 		</>
 	);

packages/block-library/src/term-count/icons.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export const bareNumber = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M 10 6 L 9.609375 9 L 7 9 L 7 10.5 L 9.4121094 10.5 L 9.0878906 13 L 7 13 L 7 14.5 L 8.890625 14.5 L 8.5 17.5 L 10 17.5 L 10.390625 14.5 L 12.890625 14.5 L 12.5 17.5 L 14 17.5 L 14.390625 14.5 L 17 14.5 L 17 13 L 14.587891 13 L 14.912109 10.5 L 17 10.5 L 17 9 L 15.109375 9 L 15.5 6 L 14 6 L 13.609375 9 L 11.109375 9 L 11.5 6 L 10 6 z M 10.912109 10.5 L 13.412109 10.5 L 13.087891 13 L 10.587891 13 L 10.912109 10.5 z" />
+	</SVG>
+);
+
+export const numberInParenthesis = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M 10,6 9.609375,9 H 7 v 1.5 H 9.4121094 L 9.0878906,13 H 7 v 1.5 H 8.890625 L 8.5,17.5 H 10 l 0.390625,-3 h 2.5 L 12.5,17.5 H 14 l 0.390625,-3 H 17 V 13 h -2.412109 l 0.324218,-2.5 H 17 V 9 H 15.109375 L 15.5,6 H 14 l -0.390625,3 h -2.5 L 11.5,6 Z m 0.912109,4.5 h 2.5 L 13.087891,13 h -2.5 z M 18.5,3 c 0,0 1.5,4.004036 1.5,9 0,4.995964 -1.5,9 -1.5,9 H 20 c 0,0 1.5,-4.004036 1.5,-9 C 21.5,7.004036 20,3 20,3 Z M 5.5,21 C 5.5,21 4,16.995964 4,12 4,7.0040356 5.5,3 5.5,3 H 4 c 0,0 -1.5,4.004036 -1.5,9 0,4.995964 1.5,9 1.5,9 z" />
+	</SVG>
+);