Dc sb alert

src/editor/lib/blocks/index.js

@@ -1,3 +1,4 @@
+import alert from "./ucd-theme-alert";
 import backgroundColor from "./ucd-theme-background-color";
 import backgroundImage from "./ucd-theme-background-image";
 import brandTextbox from "./ucd-theme-brand-textbox";
@@ -53,6 +54,7 @@ import trumbaUpcoming from "./ucd-theme-trumba-upcoming";
 import trumbaFilter from "./ucd-theme-trumba-filter";
 
 export default [
+  alert,
   backgroundColor,
   backgroundImage,
   brandTextbox,

src/editor/lib/blocks/ucd-theme-alert/edit.js

@@ -0,0 +1,29 @@
+import { html } from "../../utils";
+import { useBlockProps, BlockControls, InnerBlocks } from '@wordpress/block-editor';
+
+
+export default ( props ) => {
+  const { attributes, setAttributes } = props;
+  const blockProps = useBlockProps();
+
+  const mainEleProps = () => {
+    const p = {};
+    p['brand-color'] = 'red';
+    return p;
+  }
+
+  // set up color picker
+  const onColorChange = (value) => {
+    setAttributes( {brandColor: value ? value.slug : "" } );
+  }
+
+  return html`
+  <div ...${ blockProps }>
+    <div className="alertdiv">
+      <div className="divAlertIcon"><ucdlib-icon class="alertIcon" icon="ucd-public:fa-circle-exclamation"></ucdlib-icon></div>
+      <div className="divAlertContent"><b><${InnerBlocks} /></b></div>
+    </div>
+
+  </div>
+  `
+}

src/editor/lib/blocks/ucd-theme-alert/index.js

@@ -0,0 +1,28 @@
+import { UCDIcons } from "../../utils";
+import Edit from './edit';
+import Save from "./save";
+
+const name = 'ucd-theme/alert-textbox';
+const settings = {
+  api_version: 2,
+	title: "Alert textbox",
+	description: "Alert Box that has customizable text",
+	icon: UCDIcons.render('color.fill2'),
+	category: 'text',
+	keywords: [ "color", "section", "alert"],
+  supports: {
+    "html": false,
+    "customClassName": false
+  },
+  attributes: {
+    brandColor: {
+      type: "string",
+      default: ""
+    },
+
+  },
+  edit: Edit,
+  save: Save
+};
+
+export default { name, settings };

src/editor/lib/blocks/ucd-theme-alert/save.js

@@ -0,0 +1,8 @@
+import { html } from "../../utils";
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default ( props ) => {
+  return html`
+    <${InnerBlocks.Content} />
+  `;
+  }

src/editor/lib/iconsets/wp-editor/wp-editor.js

@@ -276,6 +276,9 @@ const template = html`
 <g id="fa-fill" viewBox="0 0 512 512">
   <path d="M502.63 217.06L294.94 9.37C288.69 3.12 280.5 0 272.31 0s-16.38 3.12-22.62 9.37l-81.58 81.58L81.93 4.77c-6.24-6.25-16.38-6.25-22.62 0L36.69 27.38c-6.24 6.25-6.24 16.38 0 22.63l86.19 86.18-94.76 94.76c-37.49 37.49-37.49 98.26 0 135.75l117.19 117.19c18.75 18.74 43.31 28.12 67.87 28.12 24.57 0 49.13-9.37 67.88-28.12l221.57-221.57c12.49-12.5 12.49-32.76 0-45.26zm-116.22 70.97H65.93c1.36-3.84 3.57-7.98 7.43-11.83l13.15-13.15 81.61-81.61 58.61 58.6c12.49 12.49 32.75 12.49 45.24 0 12.49-12.49 12.49-32.75 0-45.24l-58.61-58.6 58.95-58.95 162.45 162.44-48.35 48.34z"/>
 </g>
+<g id="fa-circle-exclamation" viewBox="0 0 512 512">
+  <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z"/>
+</g>
 <g id="fa-star" viewBox="0 0 576 512">
   <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"/>
 </g>