From e82934ddc60d6b10ca5f446ac46da8cb431c8b49 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 3 Jan 2025 13:59:12 +0200 Subject: [PATCH] Map block: UI updates to inspector controls (#40837) * Map block: Inspector controls UI improvements * changelog entry --- .../jetpack/changelog/map-block-ui-updates | 4 + .../jetpack/extensions/blocks/map/controls.js | 75 ++++--------------- .../jetpack/extensions/blocks/map/edit.js | 25 ++----- .../jetpack/extensions/blocks/map/editor.scss | 4 - .../extensions/blocks/map/test/controls.js | 8 +- 5 files changed, 28 insertions(+), 88 deletions(-) create mode 100644 projects/plugins/jetpack/changelog/map-block-ui-updates diff --git a/projects/plugins/jetpack/changelog/map-block-ui-updates b/projects/plugins/jetpack/changelog/map-block-ui-updates new file mode 100644 index 0000000000000..4c7a935630494 --- /dev/null +++ b/projects/plugins/jetpack/changelog/map-block-ui-updates @@ -0,0 +1,4 @@ +Significance: minor +Type: other + +Map block: Inspector controls UI improvements diff --git a/projects/plugins/jetpack/extensions/blocks/map/controls.js b/projects/plugins/jetpack/extensions/blocks/map/controls.js index bf5b1a34e2171..f9c5181ce73f8 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/controls.js +++ b/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' ), }, ] } /> - - + - { - 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" - /> - + value={ attributes.mapHeight || '' } + min={ minHeight } + onChange={ newValue => { + setAttributes( { mapHeight: newValue } ); + } } + size="__unstable-large" + step={ 10 } + /> setAttributes( { mapDetails: value } ) } /> diff --git a/projects/plugins/jetpack/extensions/blocks/map/edit.js b/projects/plugins/jetpack/extensions/blocks/map/edit.js index 9d5891bb9e587..496aaff57ae74 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/edit.js +++ b/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 } >
@@ -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 ); diff --git a/projects/plugins/jetpack/extensions/blocks/map/editor.scss b/projects/plugins/jetpack/extensions/blocks/map/editor.scss index 91a5291613cef..eb1c5e0030f01 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/editor.scss +++ b/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; diff --git a/projects/plugins/jetpack/extensions/blocks/map/test/controls.js b/projects/plugins/jetpack/extensions/blocks/map/test/controls.js index b178c98a4f90f..83140e4e47e18 100644 --- a/projects/plugins/jetpack/extensions/blocks/map/test/controls.js +++ b/projects/plugins/jetpack/extensions/blocks/map/test/controls.js @@ -63,11 +63,11 @@ describe( 'Inspector controls', () => { test( 'displays marker colors correctly', () => { render( ); - expect( screen.getByText( 'Marker Color' ) ).toBeInTheDocument(); + expect( screen.getByText( 'Marker' ) ).toBeInTheDocument(); } ); } ); - describe( 'Map settings panel', () => { + describe( 'Settings panel', () => { test( 'height input shows correctly', () => { render( ); @@ -83,7 +83,7 @@ describe( 'Inspector controls', () => { test( 'street names toggle shows correctly when mapProvider is mapbox', () => { render( ); - 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", () => { @@ -91,7 +91,7 @@ describe( 'Inspector controls', () => { render( ); - 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', () => {