FIX: set default units for range field

assets/src/editor/blocks/range-field/edit.js

@@ -30,6 +30,7 @@ const {
 	      __experimentalInputControl,
       } = wp.components;
 const {
+	      useEffect,
 	      useState,
       } = wp.element;
 
@@ -59,6 +60,22 @@ export default function RangeEdit( props ) {
 		      editProps: { uniqKey, attrHelp },
 	      } = props;
 
+	useEffect( () => {
+		const styles = { ...attributes.crocoblock_styles };
+		let changed = false;
+
+		[ 'range_height', 'slider_size' ].forEach( key => {
+			if ( /^-?(?:\d+\.?\d*|\.\d+)$/.test( styles[ key ] ) ) {
+				styles[ key ] += 'px';
+				changed = true;
+			}
+		} );
+
+		if ( changed ) {
+			setAttributes( { crocoblock_styles: styles } );
+		}
+	}, [ attributes.crocoblock_styles, setAttributes ] );
+
 	if ( attributes.isPreview ) {
 		return <div style={ {
 			width: '100%',
@@ -189,4 +206,4 @@ export default function RangeEdit( props ) {
 			</FieldWrapper>
 		</div>,
 	];
-}
+}

includes/blocks/types/range-field.php

@@ -39,6 +39,45 @@ public function get_name() {
 		return 'range-field';
 	}
 
+	/**
+	 * Initialize style manager for the block.
+	 *
+	 * @param object $style_manager Style manager instance.
+	 */
+	public function maybe_init_style_manager( $style_manager ) {
+		parent::maybe_init_style_manager( $style_manager );
+
+		add_filter( 'render_block_data', array( $this, 'normalize_legacy_style_units' ) );
+	}
+
+	/**
+	 * Add pixels to unitless range styles saved by 3.6.0.
+	 *
+	 * @param array $parsed_block Parsed block data.
+	 * @return array
+	 */
+	public function normalize_legacy_style_units( $parsed_block ) {
+
+		if ( $this->block_name() !== ( $parsed_block['blockName'] ?? '' ) ) {
+			return $parsed_block;
+		}
+
+		$styles = $parsed_block['attrs']['crocoblock_styles'] ?? null;
+		if ( ! is_array( $styles ) ) {
+			return $parsed_block;
+		}
+
+		foreach ( array( 'range_height', 'slider_size' ) as $style_key ) {
+			if ( isset( $styles[ $style_key ] ) && is_numeric( $styles[ $style_key ] ) ) {
+				$styles[ $style_key ] .= 'px';
+			}
+		}
+
+		$parsed_block['attrs']['crocoblock_styles'] = $styles;
+
+		return $parsed_block;
+	}
+
 	public function style_slider( $style_line ) {
 		return array(
 			'{{WRAPPER}} ' . $this->css_scheme['front-field'] . '::-webkit-slider-thumb' => $style_line,
@@ -124,6 +163,7 @@ public function jsm_controls() {
 				'attributes'   => array(
 					'default' => array(
 						'value' => 5,
+						'unit'  => 'px',
 					),
 				),
 			)
@@ -176,6 +216,7 @@ public function jsm_controls() {
 				'attributes'   => array(
 					'default' => array(
 						'value' => 18,
+						'unit'  => 'px',
 					),
 				),
 			)