Add configurable height option to read progress block

- Added height property to block.json with default value of 15 pixels
- Implemented height control in the editor UI with a range slider
- Updated both edit.js and save.js to dynamically set the progress bar height
- Added Tools Panel with reset functionality for height settings

docs/reference-guides/core-blocks.md

@@ -812,7 +812,7 @@ Display a read progress. Useful for tracking read progress. ([Source](https://gi
 -	**Name:** core/read-progress
 -	**Category:** theme
 -	**Supports:** interactivity, ~~html~~
--	**Attributes:** backgroundColor, progressColor
+-	**Attributes:** backgroundColor, height, progressColor
 
 ## RSS
 

packages/block-library/src/read-progress/block.json

@@ -14,6 +14,10 @@
 		"progressColor": {
 			"type": "string",
 			"default": "#1E1E1E"
+		},
+		"height": {
+			"type": "number",
+			"default": 15
 		}
 	},
 	"supports": {

packages/block-library/src/read-progress/edit.js

@@ -6,25 +6,67 @@ import {
 	PanelColorSettings,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import {
+	RangeControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function ReadMore( { attributes, setAttributes } ) {
-	const { backgroundColor, progressColor } = attributes;
+	const { backgroundColor, progressColor, height } = attributes;
 	const blockProps = useBlockProps();
 
 	const readProgressStyle = {
 		backgroundColor,
-		height: '20px',
+		height: height + 'px',
 	};
 
 	const progressStyle = {
 		backgroundColor: progressColor,
-		height: '20px',
+		height: height + 'px',
+		transform: 'scaleX(0.5)',
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Progress Bar Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							height: 11,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Bar height' ) }
+						isShownByDefault
+						hasValue={ () => height !== 11 }
+						onDeselect={ () => setAttributes( { height: 11 } ) }
+					>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Bar height' ) }
+							help={ __( 'Height in pixels' ) }
+							value={ height }
+							onChange={ ( heightValue ) =>
+								setAttributes( { height: heightValue } )
+							}
+							min={ 1 }
+							max={ 30 }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 				<PanelColorSettings
 					title={ __( 'Color Settings' ) }
 					colorSettings={ [

packages/block-library/src/read-progress/save.js

@@ -4,17 +4,17 @@
 import { useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { backgroundColor, progressColor } = attributes;
+	const { backgroundColor, progressColor, height } = attributes;
 	const blockProps = useBlockProps.save();
 
 	const readProgressStyle = {
 		backgroundColor,
-		height: '20px',
+		height: height + 'px',
 	};
 
 	const progressStyle = {
 		backgroundColor: progressColor,
-		height: '20px',
+		height: height + 'px',
 	};
 
 	return (