Make height an object

Author: psrpinto

block/block.json

@@ -17,12 +17,11 @@
       "default": ""
     },
     "height": {
-      "type": "string",
-      "default": "600"
-    },
-    "heightUnit": {
-      "type": "string",
-      "default": "px"
+      "type": "object",
+      "default": {
+        "value": 600,
+        "unit": "px"
+      }
     }
   },
   "supports": {

block/edit.tsx

@@ -5,16 +5,18 @@ import './editor.scss';
 import IFrame from "./iframe";
 import InspectorControls from "./inspector";
 
+type Height = {
+    value: number
+    unit: string
+}
+
 export default function Edit({ attributes, setAttributes }): WPElement {
-    const {
-        height,
-        heightUnit,
-    } = attributes;
+    const height: Height = attributes.height;
 
     const heightWithUnit =
-        height && heightUnit
-            ? `${height}${heightUnit}`
-            : height;
+        height.value && height.unit
+            ? `${height.value}${height.unit}`
+            : height.value;
 
     return (
         <>
@@ -23,7 +25,7 @@ export default function Edit({ attributes, setAttributes }): WPElement {
                 <ResizableBox
                     size={{
                         width: "100%",
-                        height: attributes.height,
+                        height: heightWithUnit,
                     }}
                     enable={{
                         top: false,
@@ -36,7 +38,7 @@ export default function Edit({ attributes, setAttributes }): WPElement {
                         topLeft: false,
                     }}
                     onResizeStop={(_event, _direction, elt) => {
-                        setAttributes({ height: elt.clientHeight, heightUnit: "px" });
+                        setAttributes({ height: { value: elt.clientHeight, unit: "px" }});
                     }}
                 >
                     <IFrame props={{ height: heightWithUnit }} attributes={attributes} focusable={true}/>

block/inspector.tsx

@@ -38,8 +38,10 @@ export default function InspectorControls({ attributes, setAttributes }): WPElem
                 <PanelRow>
                     <TextControl
                         label={__("height", "chatrix")}
-                        value={attributes.height}
-                        onChange={(value) => setAttributes({ height: value })}
+                        value={attributes.height.value}
+                        onChange={(value) => {
+                            setAttributes({ height: { value: value, unit: "px" } });
+                        }}
                         help={"In pixels"}
                     />
                 </PanelRow>

src/Block/block.php

@@ -34,7 +34,7 @@ function render( array $attributes ): string {
 	$container_id = 'wp-block-automattic-chatrix-container';
 
 	$style = array(
-		'height' => "{$attributes['height']}{$attributes['heightUnit']}",
+		'height' => "{$attributes['height']['value']}{$attributes['height']['unit']}",
 	);
 	$style_attr = '';
 	array_walk($style, function($value, $key) use(&$style_attr) {