Map block: UI updates to inspector controls (#40837)

* Map block: Inspector controls UI improvements

* changelog entry

projects/plugins/jetpack/changelog/map-block-ui-updates

@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Map block: Inspector controls UI improvements

projects/plugins/jetpack/extensions/blocks/map/controls.js

@@ -9,11 +9,12 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 	RangeControl,
-	BaseControl,
 	SVG,
 	G,
 	Polygon,
 	Path,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import Locations from './locations';
@@ -44,7 +45,6 @@ export default ( {
 	onKeyChange,
 	context,
 	mapRef,
-	instanceId,
 	minHeight,
 	removeAPIKey,
 	updateAPIKey,
@@ -60,38 +60,6 @@ export default ( {
 		}
 	};
 
-	/**
-	 * Change event handler for the map height sidebar control. Ensures the height is valid,
-	 * and updates both the height attribute, and the map component's height in the DOM.
-	 *
-	 * @param {Event} event - The change event object.
-	 */
-	const onHeightChange = event => {
-		const { mapHeight } = attributes;
-
-		let height = parseInt( event.target.value, 10 );
-
-		if ( isNaN( height ) ) {
-			// Set map height to default size and input box to empty string
-			height = null;
-		} else if ( null == mapHeight ) {
-			// There was previously no height defined, so set the default.
-			const ref = mapRef?.current?.mapRef ?? mapRef;
-			height = ref?.current.offsetHeight;
-		} else if ( height < minHeight ) {
-			// Set map height to minimum size
-			height = minHeight;
-		}
-
-		setAttributes( {
-			mapHeight: height,
-		} );
-
-		if ( mapRef.current.sizeMap ) {
-			setTimeout( mapRef.current.sizeMap, 0 );
-		}
-	};
-
 	if ( context === 'toolbar' ) {
 		return (
 			<>
@@ -120,36 +88,21 @@ export default ( {
 					{
 						value: attributes.markerColor,
 						onChange: value => setAttributes( { markerColor: value } ),
-						label: __( 'Marker Color', 'jetpack' ),
+						label: __( 'Marker', 'jetpack' ),
 					},
 				] }
 			/>
-			<PanelBody title={ __( 'Map Settings', 'jetpack' ) }>
-				<BaseControl
-					__nextHasNoMarginBottom={ true }
+			<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+				<NumberControl
 					label={ __( 'Height in pixels', 'jetpack' ) }
-					id={ `block-jetpack-map-height-input-${ instanceId }` }
-				>
-					<input
-						type="number"
-						id={ `block-jetpack-map-height-input-${ instanceId }` }
-						className="wp-block-jetpack-map__height_input"
-						onChange={ event => {
-							setAttributes( { mapHeight: event.target.value } );
-							// If this input isn't focussed, the onBlur handler won't be triggered
-							// to commit the map size, so we need to check for that.
-							if ( event.target !== event.target.ownerDocument.activeElement ) {
-								if ( mapRef.current ) {
-									setTimeout( mapRef.current.sizeMap, 0 );
-								}
-							}
-						} }
-						onBlur={ onHeightChange }
-						value={ attributes.mapHeight || '' }
-						min={ minHeight }
-						step="10"
-					/>
-				</BaseControl>
+					value={ attributes.mapHeight || '' }
+					min={ minHeight }
+					onChange={ newValue => {
+						setAttributes( { mapHeight: newValue } );
+					} }
+					size="__unstable-large"
+					step={ 10 }
+				/>
 				<RangeControl
 					__nextHasNoMarginBottom={ true }
 					__next40pxDefaultSize
@@ -175,7 +128,7 @@ export default ( {
 				{ mapProvider === 'mapbox' ? (
 					<ToggleControl
 						__nextHasNoMarginBottom={ true }
-						label={ __( 'Show street names', 'jetpack' ) }
+						label={ __( 'Show labels', 'jetpack' ) }
 						checked={ attributes.mapDetails }
 						onChange={ value => setAttributes( { mapDetails: value } ) }
 					/>

projects/plugins/jetpack/extensions/blocks/map/edit.js

@@ -15,7 +15,7 @@ import {
 	ResizableBox,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
-import { withDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getActiveStyleName } from '../../shared/block-styles';
@@ -55,9 +55,6 @@ const MapEdit = ( {
 	noticeUI,
 	notices,
 	isSelected,
-	instanceId,
-	onResizeStart,
-	onResizeStop,
 	noticeOperations,
 } ) => {
 	const {
@@ -71,6 +68,8 @@ const MapEdit = ( {
 		showFullscreenButton,
 	} = attributes;
 
+	const { toggleSelection } = useDispatch( 'core/block-editor' );
+
 	const { isPreviewMode } = useSelect( select => {
 		const { getSettings } = select( blockEditorStore );
 		const settings = getSettings();
@@ -195,8 +194,7 @@ const MapEdit = ( {
 	 * @param {object}      delta     - Information about how far the element was resized.
 	 */
 	const onMapResize = ( event, direction, elt, delta ) => {
-		onResizeStop();
-
+		toggleSelection( true );
 		const ref = mapRef?.current?.mapRef ?? mapRef;
 
 		if ( ref ) {
@@ -322,7 +320,6 @@ const MapEdit = ( {
 						apiKeyControl={ apiKeyControl }
 						onKeyChange={ onKeyChange }
 						mapRef={ mapRef }
-						instanceId={ instanceId }
 						minHeight={ MIN_HEIGHT }
 						removeAPIKey={ removeAPIKey }
 						updateAPIKey={ updateAPIKey }
@@ -339,7 +336,7 @@ const MapEdit = ( {
 					showHandle={ isSelected }
 					minHeight={ MIN_HEIGHT }
 					enable={ RESIZABLE_BOX_ENABLE_OPTION }
-					onResizeStart={ onResizeStart }
+					onResizeStart={ () => toggleSelection( false ) }
 					onResizeStop={ onMapResize }
 				>
 					<div className="wp-block-jetpack-map__map_wrapper">
@@ -392,14 +389,4 @@ const MapEdit = ( {
 	);
 };
 
-export default compose( [
-	withNotices,
-	withDispatch( dispatch => {
-		const { toggleSelection } = dispatch( 'core/block-editor' );
-
-		return {
-			onResizeStart: () => toggleSelection( false ),
-			onResizeStop: () => toggleSelection( true ),
-		};
-	} ),
-] )( MapEdit );
+export default compose( withNotices )( MapEdit );

projects/plugins/jetpack/extensions/blocks/map/editor.scss

@@ -58,10 +58,6 @@
 	}
 }
 
-.wp-block-jetpack-map__height_input {
-	display: block;
-}
-
 .component__add-point__popover {
 	.components-popover__content {
 		width: 250px;

projects/plugins/jetpack/extensions/blocks/map/test/controls.js

@@ -63,11 +63,11 @@ describe( 'Inspector controls', () => {
 		test( 'displays marker colors correctly', () => {
 			render( <MapControls { ...defaultProps } /> );
 
-			expect( screen.getByText( 'Marker Color' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Marker' ) ).toBeInTheDocument();
 		} );
 	} );
 
-	describe( 'Map settings panel', () => {
+	describe( 'Settings panel', () => {
 		test( 'height input shows correctly', () => {
 			render( <MapControls { ...defaultProps } /> );
 
@@ -83,15 +83,15 @@ describe( 'Inspector controls', () => {
 		test( 'street names toggle shows correctly when mapProvider is mapbox', () => {
 			render( <MapControls { ...defaultProps } /> );
 
-			expect( screen.getByText( 'Show street names' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Show labels' ) ).toBeInTheDocument();
 		} );
 
 		test( "street names toggle shows doesn't show when mapProvider is mapkit", () => {
 			const props = { ...defaultProps, mapProvider: 'mapkit' };
 
 			render( <MapControls { ...props } /> );
 
-			expect( screen.queryByText( 'Show street names' ) ).not.toBeInTheDocument();
+			expect( screen.queryByText( 'Show labels' ) ).not.toBeInTheDocument();
 		} );
 
 		test( 'scroll to zoom toggle shows correctly when mapProvider is mapbox', () => {