Separated JSX files into categories

- Block in jsx/blocks/
- Meta blocks in jsx/meta/
- Helper methods and functions in jsx/meta/
- Components in jsx/components (as before)

gumbo-millennium/lib/jsx/central-intro.jsx → gumbo-millennium/lib/jsx/blocks/central-intro.jsx

@@ -5,13 +5,20 @@
  * @license MPL-2.0
  */
 
-import registerBlock from './gumbo'
-import iconRender from './svg'
+// Imports
+import { registerBlockType } from '../helpers/gumbo'
+import svg from './../helpers/svg'
 
-const BLOCK_NAME = 'gumbo/central-intro'
+// Constant imports
 const { RichText } = wp.editor
-const icon = iconRender('question')
 
+// Metadata
+const meta = {
+  title: 'Centrale pagina intro',
+  icon: svg('question')
+}
+
+// Attributes
 const attributes = {
   title: {
     source: 'text',
@@ -23,7 +30,16 @@ const attributes = {
   }
 }
 
-const edit = function ({ attributes, className, setAttributes }) {
+// List of styles
+const styles = [
+  { name: 'light', label: 'Licht', isDefault: true },
+  { name: 'regular', label: 'Normaal' },
+  { name: 'dark', label: 'Donker' },
+  { name: 'brand', label: 'Gumbo Groen' }
+]
+
+// Edit method (editor-visible HTML)
+const edit = ({ attributes, className, setAttributes }) => {
   return <div className="central-intro central-intro--editor">
     <RichText
       tagName="h3"
@@ -45,7 +61,8 @@ const edit = function ({ attributes, className, setAttributes }) {
   </div>
 }
 
-const save = function ({ attributes }) {
+// Save method (stored HTML)
+const save = ({ attributes }) => {
   return <div className="central-intro">
     <div className="central-intro__container">
       <RichText.Content tagName="h3" className="central-intro__title" value={attributes.title} />
@@ -55,23 +72,13 @@ const save = function ({ attributes }) {
   </div>
 }
 
-const init = () => {
-  registerBlock({
-    name: BLOCK_NAME,
-    title: 'Centrale pagina intro',
-    icon: icon,
-
-    attributes: attributes,
-    edit: edit,
-    save: save,
-
-    styles: [
-      { name: 'light', label: 'Licht', isDefault: true },
-      { name: 'regular', label: 'Normaal' },
-      { name: 'dark', label: 'Donker' },
-      { name: 'brand', label: 'Gumbo Groen' }
-    ]
+// Publish block
+export default () => {
+  registerBlockType('gumbo/central-intro', {
+    ...meta,
+    attributes,
+    styles,
+    save,
+    edit
   })
 }
-
-export default init

gumbo-millennium/lib/jsx/cta-banner.jsx → gumbo-millennium/lib/jsx/blocks/cta-banner.jsx

@@ -1,16 +1,25 @@
 /**
+ * Sponsor block
+ *
  * @author Roelof Roos <[email protected]>
  * @license MPL-2.0
  */
 
-import registerBlock from './gumbo'
-import iconRender from './svg'
-import LinkedButton from './components/linked-button'
+// Imports
+import { LinkedButton } from '../components/linked-button'
+import { registerBlockType } from '../helpers/gumbo'
+import svg from './../helpers/svg'
 
-const BLOCK_NAME = 'gumbo/cta-block'
+// Constant imports
 const { RichText } = wp.editor
-const icon = iconRender('bullseye')
 
+// Metadata
+const meta = {
+  title: 'Call to Action blok',
+  icon: svg('bullseye')
+}
+
+// Attributes
 const attributes = {
   primary: {
     source: 'html',
@@ -32,10 +41,16 @@ const attributes = {
   }
 }
 
-const edit = props => {
-  console.log('Got properties: %O', props)
-  let { attributes, setAttributes } = props
+// List of styles
+const styles = [
+  { name: 'light', label: 'Licht', isDefault: true },
+  { name: 'regular', label: 'Normaal' },
+  { name: 'dark', label: 'Donker' },
+  { name: 'brand', label: 'Gumbo Groen' }
+]
 
+// Edit method (editor-visible HTML)
+const edit = ({ attributes, className, setAttributes }) => {
   return <div className="cta-banner cta-banner--editor">
     <div className="cta-banner__text-container">
       <RichText
@@ -71,7 +86,8 @@ const edit = props => {
   </div>
 }
 
-const save = ({attributes}) => {
+// Save method (stored HTML)
+const save = ({ attributes }) => {
   return <div className="cta-banner">
     <div className="container cta-banner__container">
       <div className="cta-banner__text-container">
@@ -88,16 +104,13 @@ const save = ({attributes}) => {
   </div>
 }
 
-const init = () => {
-  registerBlock({
-    name: BLOCK_NAME,
-    title: 'Call to Action blok',
-    icon: icon,
-
-    attributes: attributes,
-    edit: edit,
-    save: save
+// Publish block
+export default () => {
+  registerBlockType('gumbo/cta-block', {
+    ...meta,
+    attributes,
+    styles,
+    save,
+    edit
   })
 }
-
-export default init

gumbo-millennium/lib/jsx/blocks/index.jsx

@@ -0,0 +1,23 @@
+/**
+ * Load blocks
+ *
+ * @author Roelof Roos <[email protected]>
+ * @license MPL-2.0
+ */
+
+import registerCentralIntro from './central-intro'
+import registerCtaBanner from './cta-banner'
+import registerSponsor from './sponsor'
+import registerTestimonial from './testimonials'
+import registerUniqueSellingPoint from './unique-selling-point'
+import registerUniqueSellingPoints from './unique-selling-points'
+
+export default function () {
+  // Register blocks
+  registerCentralIntro()
+  registerCtaBanner()
+  registerSponsor()
+  registerTestimonial()
+  registerUniqueSellingPoint()
+  registerUniqueSellingPoints()
+}

gumbo-millennium/lib/jsx/blocks/sponsor.jsx

@@ -0,0 +1,37 @@
+/**
+ * Sponsor block
+ *
+ * @author Roelof Roos <[email protected]>
+ * @license MPL-2.0
+ */
+
+// Imports
+import { registerBlockType } from '../helpers/gumbo'
+import svg from './../helpers/svg'
+
+// Metadata
+const meta = {
+  title: 'Sponsor',
+  icon: svg('ad')
+}
+
+// Attributes
+const attributes = {}
+
+// List of styles
+const styles = []
+
+// Edit method (editor-visible HTML)
+const edit = ({ className }) => {
+  return <p className="sponsor-placeholder">Sponsor advertentie</p>
+}
+
+// Publish block
+export default () => {
+  registerBlockType('gumbo/sponsor', {
+    ...meta,
+    attributes,
+    styles,
+    edit
+  })
+}

gumbo-millennium/lib/jsx/testimonials.jsx → gumbo-millennium/lib/jsx/blocks/testimonials.jsx

@@ -1,15 +1,24 @@
 /**
+ * Sponsor block
+ *
  * @author Roelof Roos <[email protected]>
  * @license MPL-2.0
  */
 
-import registerBlock from './gumbo'
-import iconRender from './svg'
+// Imports
+import { registerBlockType } from '../helpers/gumbo'
+import svg from './../helpers/svg'
 
-const BLOCK_NAME = 'gumbo/testimonials'
+// Constant imports
 const { RichText, MediaUpload } = wp.editor
-const icon = iconRender('comment')
 
+// Metadata
+const meta = {
+  title: 'Leden citaat',
+  icon: svg('comment')
+}
+
+// Attributes
 const attributes = {
   content: {
     source: 'html',
@@ -34,7 +43,16 @@ const attributes = {
   }
 }
 
-const edit = function ({ attributes, setAttributes }) {
+// List of styles
+const styles = [
+  { name: 'light', label: 'Licht', isDefault: true },
+  { name: 'regular', label: 'Normaal' },
+  { name: 'dark', label: 'Donker' },
+  { name: 'brand', label: 'Gumbo Groen' }
+]
+
+// Edit method (editor-visible HTML)
+const edit = ({ attributes, className, setAttributes }) => {
   const onSelectImage = media => {
     if (!media || !media.url) {
       setAttributes({ photo: undefined, id: undefined })
@@ -44,7 +62,7 @@ const edit = function ({ attributes, setAttributes }) {
   }
 
   let iconPlaceholder
-  iconPlaceholder = ({open}) => {
+  iconPlaceholder = ({ open }) => {
     if (!attributes.photo) {
       return <div
         className="testimonials__photo testimonials__photo--placeholder"
@@ -95,7 +113,8 @@ const edit = function ({ attributes, setAttributes }) {
   </div>
 }
 
-const save = function ({ attributes }) {
+// Save method (stored HTML)
+const save = ({ attributes }) => {
   return <div className="testimonials">
     <div className="container">
       <RichText.Content tagName="div" className="testimonials__quote" value={attributes.content} />
@@ -110,16 +129,13 @@ const save = function ({ attributes }) {
   </div>
 }
 
-const init = () => {
-  registerBlock({
-    name: BLOCK_NAME,
-    title: 'Leden citaat',
-    icon: icon,
-
-    attributes: attributes,
-    edit: edit,
-    save: save
+// Publish block
+export default () => {
+  registerBlockType('gumbo/testimonials', {
+    ...meta,
+    attributes,
+    styles,
+    save,
+    edit
   })
 }
-
-export default init