v3.0 - blocks-manifest.php, v3.1 - ranking card

build/ranking-card/block.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "unityblocks/ranking-card",
+  "version": "1.0.0",
+  "title": "Ranking Card",
+  "category": "unityblocks",
+  "keywords": [
+    "unityblocks",
+    "ranking",
+    "card"
+  ],
+  "icon": "index-card",
+  "description": "A UDS default design - ranking card with an interactive show more.",
+  "supports": {
+    "html": false,
+    "align": [
+      "wide",
+      "full"
+    ]
+  },
+  "textdomain": "unityblocks",
+  "viewScript": [
+    "file:./frontend.js",
+    "unityblocks-ranking-card-view-script"
+  ],
+  "editorScript": "file:./index.js",
+  "attributes": {
+    "imageSize": {
+      "type": "string",
+      "enum": [
+        "small",
+        "large"
+      ],
+      "default": "large"
+    },
+    "image": {
+      "type": "string",
+      "default": ""
+    },
+    "imageAlt": {
+      "type": "string",
+      "default": ""
+    },
+    "heading": {
+      "type": "string",
+      "default": ""
+    },
+    "body": {
+      "type": "string",
+      "default": ""
+    },
+    "readMoreLink": {
+      "type": "string",
+      "default": ""
+    },
+    "citation": {
+      "type": "string",
+      "default": ""
+    }
+  }
+}

build/ranking-card/frontend.asset.php

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

build/ranking-card/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '8ac4cf5d85f777a13cd1');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unityblocks",
-  "version": "2.6.0",
+  "version": "3.0.0",
   "description": "UnityBlocks is a suite of page building content blocks for the ASU Web Standards Unity (UDS) WordPress theme.",
   "author": "ASU KE Web Services",
   "license": "GPL-2.0-or-later",
@@ -16,6 +16,7 @@
   "main": "build/index.js",
   "scripts": {
     "build": "wp-scripts build",
+    "manifest": "wp-scripts build-blocks-manifest",
     "format": "wp-scripts format",
     "lint:css": "wp-scripts lint-style",
     "lint:js": "wp-scripts lint-js",
@@ -27,6 +28,7 @@
     "@asu/component-carousel": "^1.2.1",
     "@asu/component-events": "^3.0.1",
     "@asu/components-core": "^3.1.0",
+    "@asu/unity-react-core": "^1.3.0",
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-regular-svg-icons": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",

src/ranking-card/block.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "unityblocks/ranking-card",
+  "version": "1.0.0",
+  "title": "Ranking Card",
+  "category": "unityblocks",
+  "keywords": ["unityblocks", "ranking", "card"],
+  "icon": "index-card",
+  "description": "A UDS default design - ranking card with an interactive show more.",
+  "supports": {
+    "html": false,
+    "align": ["wide", "full"]
+  },
+  "textdomain": "unityblocks",
+  "viewScript": ["file:./frontend.js", "unityblocks-ranking-card-view-script"],
+  "editorScript": "file:./index.js",
+  "attributes": {
+    "imageSize": {
+      "type": "string",
+      "enum": ["small", "large"],
+      "default": "large"
+    },
+    "image": {
+      "type": "string",
+      "default": ""
+    },
+    "imageAlt": {
+      "type": "string",
+      "default": ""
+    },
+    "heading": {
+      "type": "string",
+      "default": ""
+    },
+    "body": {
+      "type": "string",
+      "default": ""
+    },
+    "readMoreLink": {
+      "type": "string",
+      "default": ""
+    },
+    "citation": {
+      "type": "string",
+      "default": ""
+    }
+  }
+}

src/ranking-card/edit.js

@@ -0,0 +1,75 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from "@wordpress/i18n";
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from "@wordpress/block-editor";
+
+/**
+ * External dependencies
+ */
+import { RankingCard } from "@asu/unity-react-core/dist/esm/components/RankingCard.es";
+
+/**
+ * Internal dependencies
+ */
+import Inspector from "./inspector";
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// import "./editor.scss";
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+const Edit = (props) => {
+  const {
+    attributes: {
+      imageSize,
+      image,
+      imageAlt,
+      heading,
+      body,
+      readMoreLink,
+      citation,
+    },
+  } = props;
+
+  const args = {
+    imageSize,
+    image,
+    imageAlt,
+    heading,
+    body,
+    readMoreLink,
+    citation,
+  };
+
+  return (
+    <>
+      <Inspector {...props} />
+      <div {...useBlockProps()}>
+        <RankingCard key={imageSize} {...args} />
+      </div>
+    </>
+  );
+};
+
+export default Edit;

src/ranking-card/frontend.js

@@ -0,0 +1,29 @@
+const { render } = wp.element;
+
+import { RankingCard } from "@asu/unity-react-core/dist/esm/components/RankingCard.es";
+
+// It is possible to load multiple ranking cards onto a page.
+// Load each DOM element on page using the Gutenberg-generated class for the Ranking Card block
+const cards = document.querySelectorAll(".wp-block-unityblocks-ranking-card");
+
+cards.forEach((rankingCard) => {
+  const imageSize = rankingCard.dataset.imagesize;
+  const image = rankingCard.dataset.image;
+  const imageAlt = rankingCard.dataset.imagealt;
+  const heading = rankingCard.dataset.heading;
+  const body = rankingCard.dataset.body;
+  const readMoreLink = rankingCard.dataset.readmorelink;
+  const citation = rankingCard.dataset.citation;
+
+  const props = {
+    imageSize,
+    image,
+    imageAlt,
+    heading,
+    body,
+    readMoreLink,
+    citation,
+  };
+
+  render(<RankingCard {...props} />, rankingCard);
+});

src/ranking-card/index.js

@@ -0,0 +1,40 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from "@wordpress/blocks";
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// import "./style.scss";
+
+/**
+ * Internal dependencies
+ */
+import edit from "./edit";
+import metadata from "./block.json";
+import save from "./save";
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(metadata.name, {
+  /**
+   * @see ./edit.js
+   */
+  edit,
+
+  /**
+   * @see ./save.js
+   */
+  save,
+  example: () => {},
+});