Merge pull request #143 from Automattic/components

React components

Author: psrpinto

Makefile

@@ -7,8 +7,7 @@ node_modules: package.json yarn.lock
 	yarn install
 
 build/frontend: frontend
-	yarn build:popup
-	yarn build:block
+	yarn build
 
-build/block: block
-	yarn build:block-internal
+build/block: frontend/block
+	yarn build:block

bin/prepare-release.sh

@@ -39,7 +39,7 @@ else
 fi
 
 # Substitute version in all relevant files.
-for file in package.json composer.json block/block.json
+for file in package.json composer.json frontend/block/block.json
 do
   jq ".version = \"$VERSION\"" $file > $file.tmp
   mv $file.tmp $file

block/iframe.tsx

@@ -0,0 +1,33 @@
+import { BlockProps } from "./components/block";
+
+import { render as renderBlockInternal } from "./components/block/render";
+import { PopupProps } from "./components/popup";
+import { render as renderPopupInternal } from "./components/popup/render";
+
+export function renderBlock(containerId: string, props: BlockProps) {
+    props.iframeUrl = getIframeUrl();
+    return renderBlockInternal(containerId, props);
+}
+
+export function renderPopup(containerId: string, props: PopupProps) {
+    props.iframeUrl = getIframeUrl();
+    return renderPopupInternal(containerId, props);
+}
+
+export function getIframeUrl(): URL {
+    let rootUrl = window.origin;
+    const config = window.ChatrixConfig ?? null;
+    if (config && config.rootUrl) {
+        rootUrl = config.rootUrl;
+    }
+
+    return new URL("iframe.html", rootUrl);
+}
+
+declare global {
+    interface Window {
+        ChatrixConfig: {
+            rootUrl: string;
+        };
+    }
+}

block/style.scss

@@ -1,9 +1,9 @@
 import { useBlockProps } from "@wordpress/block-editor";
 import { ResizableBox } from "@wordpress/components";
 import { WPElement } from '@wordpress/element';
-import { parseAttributes } from "./attributes";
+import { getIframeUrl } from "../app";
+import { Block, BlockProps, parseAttributes } from "../components/block";
 import './editor.scss';
-import IFrame, { IframeProps } from "./iframe";
 import InspectorControls from "./inspector/InspectorControls";
 
 interface Props {
@@ -12,12 +12,13 @@ interface Props {
 }
 
 export default function Edit(props: Props): WPElement {
-    const { setAttributes } = props;
-    const attributes = parseAttributes(props.attributes);
+    const { attributes, setAttributes } = props;
+    const parsedAttributes = parseAttributes(attributes);
 
-    const iframeProps: IframeProps = {
+    const blockProps: BlockProps = {
         focusable: true,
-        ...attributes
+        attributes,
+        iframeUrl: getIframeUrl(),
     };
 
     return (
@@ -27,7 +28,7 @@ export default function Edit(props: Props): WPElement {
                 <ResizableBox
                     size={{
                         width: "100%",
-                        height: attributes.height.toString(),
+                        height: parsedAttributes.height ? parsedAttributes.height.toString() : "600px",
                     }}
                     enable={{
                         top: false,
@@ -43,7 +44,7 @@ export default function Edit(props: Props): WPElement {
                         setAttributes({ height: { value: elt.clientHeight, unit: "px" } });
                     }}
                 >
-                    <IFrame {...iframeProps}/>
+                    <Block {...blockProps}/>
                 </ResizableBox>
             </div>
         </>