Merge pull request #56 from ucsc/feature/verbiage

Feature/verbiage

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-components', 'wp-element', 'wp-polyfill'), 'version' => 'f356208fedc09a50d3e7c0908cb65f6a');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-element', 'wp-polyfill'), 'version' => '1a616c20ecf3577e268b6eb4094a8e38');

classes/Accordion.php

@@ -0,0 +1,32 @@
+<?php
+
+class Accordion
+{
+  function __construct()
+  {
+    add_action('init', array($this, 'adminAssets'));
+  }
+
+  function adminAssets()
+  {
+    wp_register_style( 'accordion',
+      plugins_url('../src/components/Accordion/editor.css', __FILE__),
+      array(),
+      filemtime(plugin_dir_path(__FILE__) . '../src/components/Accordion/editor.css'));
+    wp_enqueue_style( 'accordion');
+
+    register_block_type('ucscblocks/accordion', array(
+      'editor_script' => 'ucscblocks',
+      'render_callback' => array($this, 'theHTML')
+    ));
+  }
+
+  function theHTML($attributes, $content)
+  {
+    $open = ($attributes['openOnPageLoad'] === true) ? 'open' : '';
+    return '<details ' . $open . '>
+              <summary>' . $attributes['title'] . '</summary>'
+              . $content .
+           '</details>';
+  }
+}

index.php

@@ -15,6 +15,7 @@
 include(plugin_dir_path(__FILE__) . 'classes/CourseCatalog.php');
 include(plugin_dir_path(__FILE__) . 'classes/CampusDirectory.php');
 include(plugin_dir_path(__FILE__) . 'classes/ClassSchedule.php');
+include(plugin_dir_path(__FILE__) . 'classes/Accordion.php');
 // include(plugin_dir_path(__FILE__) . 'classes/FeedbackForm.php');
 include(plugin_dir_path(__FILE__) . 'classes/SiteSettings.php');
 
@@ -34,5 +35,6 @@ function registerJSBuild() {
 $CourseCatalog = new CourseCatalog();
 $CampusDirectory = new CampusDirectory();
 $ClassSchedule = new ClassSchedule();
+$Accordion = new Accordion();
 $SiteSettings = new SiteSettings();
 // $FeedbackForm = new FeedbackForm();

src/blocks/Accordion.js

@@ -0,0 +1,55 @@
+import { InnerBlocks, useBlockProps, BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { Panel, PanelBody, CheckboxControl } from '@wordpress/components';
+
+const Accordion = () => {
+  wp.blocks.registerBlockType("ucscblocks/accordion", {
+    title: "Accordion",
+    icon: "menu",
+    category: "common",
+    attributes: {
+      openOnPageLoad: {
+        type: 'boolean',
+      }
+    },
+    edit: ({ setAttributes, attributes }) => {
+      const blockProps = useBlockProps();
+
+      return (
+        <>
+          <InspectorControls key="setting">
+            <Panel>
+              <PanelBody>
+                <CheckboxControl
+                  label="Open on page load"
+                  checked={attributes.openOnPageLoad}
+                  onChange={newValue =>  setAttributes({openOnPageLoad: newValue})}
+                ></CheckboxControl>
+              </PanelBody>
+            </Panel>
+          </InspectorControls>
+          <details className='ucsc-accordion' open="true" >
+              <summary><input
+                placeholder='Accordion Item Title'
+                value={attributes.title}
+                onKeyUp={event => {
+                  event.preventDefault();
+                }}
+                onChange={e => setAttributes({title: e.target.value})} /></summary>
+              <InnerBlocks />
+          </details>
+        </>
+      );
+    },
+    save:() => {
+      const blockProps = useBlockProps.save();
+
+      return (
+          <div { ...blockProps }>
+              <InnerBlocks.Content />
+          </div>
+      );
+    },
+  })
+}
+
+export default Accordion;

src/blocks/CampusDirectory.js

@@ -12,12 +12,6 @@ const CampusDirectory = () => {
     icon: "welcome-learn-more",
     category: "common",
     attributes: {
-      boolIntroParagraph: {
-        type: 'boolean',
-      },
-      introParagraph: {
-        type: 'string',
-      },
       pageLayout: {
         type: 'string',
       },
@@ -70,8 +64,6 @@ const CampusDirectory = () => {
     },
     edit: ({ setAttributes, attributes }) => {
       const {
-        boolIntroParagraph,
-        introParagraph,
         pageLayout,
         automatedFeeds,
         cruzidList,

src/components/Accordion/editor.css

@@ -0,0 +1,15 @@
+.ucsc-accordion {
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  margin: .5em .5em 0;
+  padding: .5em .5em 0;
+}
+
+.ucsc-accordion[open] summary {
+  border-bottom: 1px solid #aaa;
+  margin-bottom: .5em;
+}
+
+.ucsc-accordion summary input {
+  border: 0;
+}

src/index.js

@@ -4,6 +4,8 @@
 import CourseCatalog from './blocks/CourseCatalog';
 import CampusDirectory from './blocks/CampusDirectory';
 import ClassSchedule from './blocks/ClassSchedule';
+import Accordion from './blocks/Accordion';
+
 // import FeedbackForm from './blocks/FeedbackForm';
 
 
@@ -13,4 +15,5 @@ import ClassSchedule from './blocks/ClassSchedule';
 CourseCatalog();
 CampusDirectory();
 ClassSchedule();
+Accordion();
 // FeedbackForm();

templates/CampusDirectoryTemplate.php

@@ -1,8 +1,3 @@
-<?php if (strlen($items["introParagraph"])) { ?>
-  <div class="intro-paragraph">
-    <?php echo $items["introParagraph"] ?>
-  </div>
-<?php } ?>
 <?php
 // echo "<pre>";
 // echo print_r($items['informationToDisplay'], true);