Merge branch '1.x'

.gitignore

@@ -0,0 +1,2 @@
+
+node_modules/

assets/dist/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('wp-blocks', 'wp-element'), 'version' => 'd021e6349edf2e477821');

assets/src/hooks.js

@@ -0,0 +1,62 @@
+const { useState, useEffect, useRef } = wp.element;
+
+const useFetch = function (url, options = {}) {
+  const [output, setOutput] = useState({
+    data: null,
+    isLoading: false,
+    error: null,
+  });
+  const abortControllerRef = useRef(null);
+
+  useEffect(() => {
+    setOutput({
+      data: null,
+      isLoading: true,
+      error: null,
+    });
+
+    abortControllerRef.current?.abort();
+
+    if (typeof AbortController !== "undefined") {
+      abortControllerRef.current = new AbortController();
+    }
+
+    options = { ...options, signal: abortControllerRef.current?.signal };
+
+    (async () => {
+      try {
+        console.log("Calling: " + url);
+        const response = await fetch(url, options);
+        const responseJson = await response.json();
+
+        if (response.ok) {
+          setOutput({
+            data: responseJson,
+            isLoading: false,
+            error: null,
+          });
+        } else {
+          setOutput({
+            data: null,
+            isLoading: false,
+            error: `${responseJson.code} | ${responseJson.message} ${response.status} (${response.statusText})`,
+          });
+        }
+      } catch (ex) {
+        setOutput({
+          data: null,
+          isLoading: false,
+          error: ex.message,
+        });
+      }
+    })();
+
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [url]);
+
+  return output;
+};
+
+export { useFetch };

assets/src/html-snippet/editor/_styles.scss

@@ -0,0 +1,66 @@
+$component-class-name: ".wp-block-wsuwp-html-snippet";
+
+.block-editor #{$component-class-name} {
+  box-shadow: inset 0 0 0 1px #1e1e1e;
+  padding: 1em;
+
+  &__header {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  &__label {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    font-size: 18pt;
+    font-weight: normal;
+    display: flex;
+    // margin-bottom: 16px;
+    align-items: center;
+    gap: 1ch;
+  }
+
+  &__preview-toggle {
+    gap: 0.5em;
+  }
+
+  &__select-control {
+    select {
+      padding: 1.25rem 1rem !important;
+      max-width: none;
+      height: auto !important;
+    }
+
+    .components-input-control__backdrop {
+      border-color: #b3b3b3 !important;
+      border-radius: 4px;
+    }
+  }
+
+  .components-spinner {
+    margin: 1em auto 0.25em;
+    display: block;
+  }
+
+  &__preview {
+    // pointer-events: none;
+    // opacity: 0.4;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+
+    > :first-child {
+      margin-bottom: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    &.loaded {
+      position: relative;
+      opacity: 1;
+      height: 500px;
+    }
+  }
+}

assets/src/html-snippet/editor/edit.js

@@ -0,0 +1,134 @@
+import { useFetch } from "../../hooks";
+
+const { useState, useRef, useEffect } = wp.element;
+const { SelectControl, Button, Spinner } = wp.components;
+
+const Edit = (props) => {
+  const { className, attributes, setAttributes } = props;
+  const [previewLoaded, setPreviewLoaded] = useState(false);
+  const previewRef = useRef(null);
+
+  const apiPath = "/wp-json/wp/v2/wsu_html_snippet";
+  const { data, isLoading } = useFetch(`${apiPath}`);
+
+  useEffect(() => {
+    let sizeRefresher;
+
+    if (attributes.show_preview) {
+      sizeRefresher = setInterval(() => {
+        const contentHeight =
+          previewRef?.current?.contentWindow.document.body?.querySelector(
+            "#wsu-gutenberg-snippet-preview"
+          )?.offsetHeight;
+
+        if (!isNaN(contentHeight)) {
+          previewRef.current.style.height = contentHeight + "px";
+        }
+      }, 1000);
+    }
+
+    if (sizeRefresher) {
+      return () => clearInterval(sizeRefresher);
+    }
+  }, [attributes.show_preview]);
+
+  function reset() {
+    setPreviewLoaded(false);
+    if (previewRef && previewRef.current) {
+      previewRef.current.style.height = null;
+    }
+  }
+
+  if (isLoading && !data) {
+    return <p>loading...</p>;
+  }
+
+  if (!isLoading && !data) {
+    return <></>;
+  }
+
+  const options = [{ label: "- Select HTML Snippet -", value: "" }].concat(
+    data.map((s) => {
+      return { label: s.title.rendered, value: s.id };
+    })
+  );
+
+  const selectedOption = data.find(
+    (o) => o.id.toString() === attributes.snippet_id
+  );
+
+  return (
+    <>
+      <div className={className}>
+        <div className={`${className}__header`}>
+          <div className={`${className}__label`}>
+            <span
+              className={`dashicon dashicons dashicons-embed-generic`}
+            ></span>
+            HTML Snippet
+          </div>
+          <div className={`${className}__controls`}>
+            <Button
+              className={`${className}__preview-toggle is-tertiary`}
+              icon={attributes.show_preview ? "hidden" : "visibility"}
+              onClick={() => {
+                reset();
+                setAttributes({ show_preview: !attributes.show_preview });
+              }}
+            >
+              {attributes.show_preview ? "Hide" : "Show"} Preview
+            </Button>
+          </div>
+        </div>
+        <div className="">
+          <SelectControl
+            className={`${className}__select-control`}
+            value={attributes.snippet_id}
+            options={options}
+            onChange={(id) => {
+              reset();
+              setAttributes({ snippet_id: id });
+            }}
+          />
+        </div>
+
+        {selectedOption && attributes.show_preview && !previewLoaded ? (
+          <Spinner className={`${className}__spinner`} />
+        ) : (
+          ""
+        )}
+
+        {selectedOption && attributes.show_preview ? (
+          // <div
+          //   className={`${className}__preview`}
+          //   dangerouslySetInnerHTML={{
+          //     __html: selectedOption.content.rendered,
+          //   }}
+          // ></div>
+
+          <iframe
+            ref={previewRef}
+            className={`${className}__preview ${previewLoaded ? "loaded" : ""}`}
+            src={`${selectedOption.link}&preview=true`}
+            onLoad={(e) => {
+              // const el = e.target;
+              // console.log(e.target);
+              setPreviewLoaded(true);
+
+              // setTimeout(() => {
+              //   el.style.height =
+              //     el.contentWindow.document.body.querySelector(
+              //       "#wsu-gutenberg-snippet-preview"
+              //     ).offsetHeight + "px";
+              // }, 200);
+            }}
+          ></iframe>
+        ) : (
+          ""
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Edit;

assets/src/html-snippet/editor/index.js

@@ -0,0 +1,23 @@
+import { registerBlockType } from "@wordpress/blocks";
+
+import Edit from "./edit";
+
+registerBlockType("wsuwp/html-snippet", {
+  title: "HTML Snippet",
+  icon: "embed-generic",
+  category: "advanced",
+  attributes: {
+    snippet_id: {
+      type: "string",
+      default: "",
+    },
+    show_preview: {
+      type: "boolean",
+      default: true,
+    },
+  },
+  edit: Edit,
+  save: function () {
+    return null;
+  },
+});

assets/src/index.js

@@ -0,0 +1,3 @@
+import "./html-snippet/editor";
+
+import "./styles.scss";

assets/src/styles.scss

@@ -0,0 +1 @@
+@import "./html-snippet/editor/styles";

includes/html-snippet-block.php

@@ -0,0 +1,56 @@
+<?php namespace WSUWP\Plugin\HTML_Snippets;
+
+class Block_WSUWP_HTML_Snippet
+{
+
+    protected static $block_name    = 'wsuwp/html-snippet';
+    protected static $default_attrs = array(
+        'className' => '',
+        'snippet_id' => '',
+    );
+
+
+    public static function render( $attrs, $content = '' )
+    {
+
+        if ('' === $attrs['snippet_id']) {
+            return;
+        }
+
+        $content = apply_filters('the_content', get_the_content(null, false, $attrs['snippet_id']));
+
+        ob_start();
+
+        include plugin_dir_path(__DIR__) . '/templates/default.php';
+
+        return ob_get_clean();
+
+    }
+
+
+    public static function register_block()
+    {
+
+        register_block_type(
+            self::$block_name,
+            array(
+            'render_callback' => array( __CLASS__, 'render' ),
+            'api_version'     => 2,
+            'editor_script'   => 'wsuwp-plugin-html-snippets-editor-scripts',
+            'editor_style'    => 'wsuwp-plugin-html-snippets-editor-styles',
+            )
+        );
+
+    }
+
+
+    public static function init()
+    {
+
+        add_action('init', __CLASS__ . '::register_block');
+
+    }
+
+}
+
+Block_WSUWP_HTML_Snippet::init();