Merge pull request #135 from Automattic/configure-height

Set height of block

Author: psrpinto

block/block.json

@@ -15,6 +15,13 @@
     "roomId": {
       "type": "string",
       "default": ""
+    },
+    "height": {
+      "type": "object",
+      "default": {
+        "value": 600,
+        "unit": "px"
+      }
     }
   },
   "supports": {

block/edit.tsx

@@ -1,14 +1,49 @@
 import { useBlockProps } from "@wordpress/block-editor";
+import { ResizableBox } from "@wordpress/components";
 import { WPElement } from '@wordpress/element';
 import './editor.scss';
 import IFrame from "./iframe";
-import Inspector from "./inspector";
+import InspectorControls from "./inspector";
+
+type Height = {
+    value: number
+    unit: string
+}
 
 export default function Edit({ attributes, setAttributes }): WPElement {
+    const height: Height = attributes.height;
+
+    const heightWithUnit =
+        height.value && height.unit
+            ? `${height.value}${height.unit}`
+            : '';
+
     return (
-        <div {...useBlockProps()}>
-            <Inspector attributes={attributes} setAttributes={setAttributes}/>
-            <IFrame attributes={attributes} focusable={true}/>
-        </div>
+        <>
+            <InspectorControls attributes={attributes} setAttributes={setAttributes}/>
+            <div {...useBlockProps()}>
+                <ResizableBox
+                    size={{
+                        width: "100%",
+                        height: heightWithUnit,
+                    }}
+                    enable={{
+                        top: false,
+                        right: false,
+                        bottom: true,
+                        left: false,
+                        topRight: false,
+                        bottomRight: false,
+                        bottomLeft: false,
+                        topLeft: false,
+                    }}
+                    onResizeStop={(_event, _direction, elt) => {
+                        setAttributes({ height: { value: elt.clientHeight, unit: "px" } });
+                    }}
+                >
+                    <IFrame props={{ height: heightWithUnit }} attributes={attributes} focusable={true}/>
+                </ResizableBox>
+            </div>
+        </>
     );
 }

block/iframe.tsx

@@ -3,12 +3,12 @@ import { WPElement } from "@wordpress/element";
 import { IframeUrl } from "../frontend/parent/iframe";
 import { containerClass, iframeClass } from "../frontend/parent/util";
 
-export default function IFrame({ attributes, focusable = false }): WPElement {
+export default function IFrame({ props, attributes, focusable = false }): WPElement {
     const ref = focusable ? useFocusableIframe() : undefined;
     const url = iframeUrl(attributes);
 
     return (
-        <div className={containerClass()}>
+        <div className={containerClass()} style={{ height: props.height || undefined }}>
             <iframe className={iframeClass()}
                 // @ts-ignore
                 ref={ref}

block/inspector.tsx

@@ -1,11 +1,11 @@
-import { InspectorControls } from "@wordpress/block-editor";
+import { InspectorControls as BaseInspectorControls } from "@wordpress/block-editor";
 import { PanelBody, PanelRow, TextControl } from "@wordpress/components";
 import { WPElement } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 
-export default function Inspector({ attributes, setAttributes }): WPElement {
+export default function InspectorControls({ attributes, setAttributes }): WPElement {
     return (
-        <InspectorControls>
+        <BaseInspectorControls>
             <PanelBody
                 title={__("Homeserver", "chatrix")}
                 initialOpen={true}
@@ -31,7 +31,22 @@ export default function Inspector({ attributes, setAttributes }): WPElement {
                     />
                 </PanelRow>
             </PanelBody>
-        </InspectorControls>
+            <PanelBody
+                title={__("Layout", "chatrix")}
+                initialOpen={false}
+            >
+                <PanelRow>
+                    <TextControl
+                        label={__("height", "chatrix")}
+                        value={attributes.height.value}
+                        onChange={(value) => {
+                            setAttributes({ height: { value: value, unit: "px" } });
+                        }}
+                        help={"In pixels"}
+                    />
+                </PanelRow>
+            </PanelBody>
+        </BaseInspectorControls>
     );
 }
 

block/style.scss

@@ -9,8 +9,6 @@
   overflow: hidden;
 
   .automattic-chatrix-container {
-    height: 600px;
-
     iframe {
       width: 100%;
       height: 100%;

composer.lock

@@ -32,9 +32,21 @@ function () use ( $block_json_path ) {
 function render( array $attributes ): string {
 	ob_start();
 	$container_id = 'wp-block-automattic-chatrix-container';
+
+	$style      = array(
+		'height' => "{$attributes['height']['value']}{$attributes['height']['unit']}",
+	);
+	$style_attr = '';
+	array_walk(
+		$style,
+		function ( $value, $key ) use ( &$style_attr ) {
+			$style_attr .= "$key: $value;";
+		}
+	);
+
 	?>
 	<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
-		<div id="<?php echo esc_attr( $container_id ); ?>">
+		<div id="<?php echo esc_attr( $container_id ); ?>" style="<?php echo esc_attr( $style_attr ); ?>">
 			<?php // Iframe will be rendered here. ?>
 		</div>
 		<script>