#286

src/editor/lib/blocks/ucd-theme-brand-textbox/edit.js

@@ -3,6 +3,8 @@ import { useBlockProps, BlockControls, InnerBlocks } from '@wordpress/block-edit
 import { ToolbarColorPicker, ToolbarFloat } from "../../block-components";
 import { ToolbarButton } from '@wordpress/components';
 
+import classnames from 'classnames';
+
 
 export default ( props ) => {
   const { attributes, setAttributes } = props;
@@ -15,6 +17,12 @@ export default ( props ) => {
     return p;
   }
 
+  const classes = classnames({
+    "brand-textbox": true,
+    "category-brand__background": true,
+    [`category-brand--${attributes.brandColor}`]: attributes.brandColor
+  });
+
   // set up color picker
   const onColorChange = (value) => {
     setAttributes( {brandColor: value ? value.slug : "" } );
@@ -23,24 +31,31 @@ export default ( props ) => {
   return html`
   <div ...${ blockProps }>
     <${BlockControls} group="block">
-      <${ToolbarColorPicker} 
+      <${ToolbarColorPicker}
         onChange=${onColorChange}
         value=${attributes.brandColor}
         ucdBlock="brand-textbox"
       />
-      <${ToolbarButton} 
-          icon=${html`<span>X</span>`} 
-          onClick=${ () => {setAttributes({'collapsible': !attributes.collapsible})}} 
+      <${ToolbarButton}
+          icon=${html`<span>X</span>`}
+          onClick=${ () => {setAttributes({'collapsible': !attributes.collapsible})}}
           isPressed=${attributes.collapsible}
           label="Make textbox collapsible"/>
-      <${ToolbarFloat} 
+      <${ToolbarFloat}
         value=${attributes.float}
         onChange=${(v) => setAttributes({float: v.slug})}
       />
     </${BlockControls}>
-    <ucd-theme-brand-textbox ...${ mainEleProps() }>
-      <${InnerBlocks} />
-    </ucd-theme-brand-textbox>
+    ${attributes.collapsible ? html`
+      <ucd-theme-brand-textbox ...${ mainEleProps() }>
+        <${InnerBlocks} />
+      </ucd-theme-brand-textbox>` :
+      html`
+        <div className=${classes}>
+          <${InnerBlocks} />
+        </div>
+      `}
+
   </div>
   `
-}
+}

src/editor/lib/blocks/ucd-theme-brand-textbox/index.js

@@ -1,6 +1,5 @@
-import { UCDIcons } from "../../utils";
+import { UCDIcons, Save } from "../../utils";
 import Edit from './edit';
-import Save from "./save";
 
 const name = 'ucd-theme/brand-textbox';
 const settings = {
@@ -27,10 +26,10 @@ const settings = {
       type: "string",
       default: ""
     }
-    
+
   },
   edit: Edit,
   save: Save
 };
 
-export default { name, settings };
+export default { name, settings };

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

@@ -1,7 +1,6 @@
-import { html } from "../../utils";
+import { html, Save } from "../../utils";
 import { people } from '@wordpress/icons';
 import Edit from './edit';
-import Save from "./save";
 
 const name = 'ucd-theme/careers';
 const settings = {
@@ -33,4 +32,4 @@ const settings = {
   save: Save,
 };
 
-export default { name, settings };
+export default { name, settings };

src/editor/lib/blocks/ucd-theme-faq-item/edit.js

@@ -1,52 +1,32 @@
 import { html } from "../../utils";
-import "./ucd-wp-faq-item";
-import { useBlockProps, BlockControls, InnerBlocks } from '@wordpress/block-editor';
-import { useRef, useEffect } from "@wordpress/element";
-
+import { useBlockProps, InnerBlocks, RichText } from '@wordpress/block-editor';
+import classnames from 'classnames';
 
 export default ( props ) => {
   const { attributes, setAttributes } = props;
   const blockProps = useBlockProps();
-  const mainEleRef = useRef();
-
-  // Wire up the main component
-  const onMainEleUpdated = (e) => {
-    const propName = e.detail.propName;
-    const propValue = e.detail.propValue;
-    const newAttrs = {};
-    newAttrs[propName] = propValue;
-    setAttributes(newAttrs);
-  }
 
-  useEffect(() => {
-    let mainEle = null;
-    if ( mainEleRef.current ) {
-      mainEleRef.current.addEventListener('updated', onMainEleUpdated);
-      mainEle = mainEleRef.current;
-    }
-    return () => {
-      if ( mainEle ) {
-        mainEle.removeEventListener('updated', onMainEleUpdated);
-      }
-    };
+  const classes = classnames({
+    [`list--${attributes.listStyle}`]: true,
   });
 
-  const mainEleProps = () => {
-    let p = {ref: mainEleRef};
-    if ( attributes.question ) p.question = attributes.question;
-    p['list-style'] = attributes.listStyle;
-    return p;
-  }
-
   return html`
   <div ...${ blockProps }>
-    <ucd-wp-faq-item ...${ mainEleProps() }>
-      <div slot="question" contentEditable="true"></div>
-      <div slot="answer">
-          <${InnerBlocks} />
-      </div>
-    </ucd-wp-faq-item>
-
+    <ul className=${classes}>
+      <li>
+        <${RichText}
+          tagName="div"
+          value=${attributes.question}
+          onChange=${(v) => setAttributes({question: v})}
+          withoutInteractiveFormatting
+          allowedFormats=${[]}
+          placeholder="Enter a question"
+        />
+      </li>
+      <li>
+        <${InnerBlocks} />
+      </li>
+    </ul>
   </div>
   `
-}
+}

src/editor/lib/blocks/ucd-theme-faq-item/index.js

@@ -1,13 +1,11 @@
-import { UCDIcons } from "../../utils";
+import { UCDIcons, Save } from "../../utils";
 import Edit from './edit';
-import Save from './save';
 
 const name = 'ucd-theme/faq-item';
 const settings = {
   api_version: 2,
 	title: "FAQ Item",
-  parent: [
-    "ucd-theme/faq"],
+  parent: ["ucd-theme/faq"],
 	description: "Add a question and answer to a faq section",
 	icon: UCDIcons.renderBlockIcon('faq-individual'),
 	category: 'text',
@@ -30,4 +28,4 @@ const settings = {
   save: Save
 };
 
-export default { name, settings };
+export default { name, settings };

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

@@ -1,6 +1,5 @@
-import { UCDIcons } from "../../utils";
+import { UCDIcons, Save } from "../../utils";
 import Edit from './edit';
-import Save from './save';
 
 const name = 'ucd-theme/faq';
 const settings = {
@@ -24,4 +23,4 @@ const settings = {
   save: Save
 };
 
-export default { name, settings };
+export default { name, settings };