From 35921abe46bd527529327fefdb1454864c9b8a84 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 31 Jan 2019 16:53:14 +0000
Subject: [PATCH 01/20] Initial block editor setup.

---
 block-languages/benenson-blocks.pot           | 47 ++++++---
 src/scripts/blocks.js                         |  1 +
 .../countdown-timer/DisplayComponent.js       | 96 +++++++++++++++++++
 src/scripts/blocks/countdown-timer/index.js   | 44 +++++++++
 .../components/countdown-timer/_editor.scss   |  0
 .../components/countdown-timer/_main.scss     | 31 ++++++
 src/styles/style-editor.scss                  |  2 +
 src/styles/style.scss                         |  1 +
 8 files changed, 211 insertions(+), 11 deletions(-)
 create mode 100644 src/scripts/blocks/countdown-timer/DisplayComponent.js
 create mode 100644 src/scripts/blocks/countdown-timer/index.js
 create mode 100644 src/styles/components/countdown-timer/_editor.scss
 create mode 100644 src/styles/components/countdown-timer/_main.scss

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 2b8927e..0a77621 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -403,6 +403,42 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
+msgid "Date/Time"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:39
+msgid "Background color"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
+msgid "Remove background colour"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:52
+msgid "Background image"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:71
+#: src/scripts/blocks/key-facts/fact.js:30
+#: src/scripts/blocks/key-facts/index.js:79
+#: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
+#: src/scripts/blocks/media-aside/DisplayComponent.js:83
+#: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+#: src/scripts/blocks/post-list/components/editable/LinkList.js:29
+#: src/scripts/blocks/post-list/components/editable/PostItem.js:55
+#: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
+msgid "(Insert Title)"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/index.js:17
+msgid "Countdown timer"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/index.js:18
+msgid "Set a future date to countdown to."
+msgstr ""
+
 #: src/scripts/blocks/download/index.js:12
 msgid "Resource Download"
 msgstr ""
@@ -646,17 +682,6 @@ msgstr ""
 msgid "Add a flexible image block with optional overlay"
 msgstr ""
 
-#: src/scripts/blocks/key-facts/fact.js:30
-#: src/scripts/blocks/key-facts/index.js:79
-#: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/media-aside/DisplayComponent.js:83
-#: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-#: src/scripts/blocks/post-list/components/editable/LinkList.js:29
-#: src/scripts/blocks/post-list/components/editable/PostItem.js:55
-#: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
-msgid "(Insert Title)"
-msgstr ""
-
 #: src/scripts/blocks/key-facts/fact.js:39
 #: src/scripts/blocks/media-aside/DisplayComponent.js:93
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:46
diff --git a/src/scripts/blocks.js b/src/scripts/blocks.js
index a99adc8..ce781a3 100755
--- a/src/scripts/blocks.js
+++ b/src/scripts/blocks.js
@@ -28,6 +28,7 @@ import './blocks/category-list';
 import './blocks/logo-list';
 import './blocks/link';
 import './blocks/media-aside';
+import './blocks/countdown-timer';
 
 wp.blocks.registerBlockStyle('core/table', {
   name: 'responsive',
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
new file mode 100644
index 0000000..b36869e
--- /dev/null
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -0,0 +1,96 @@
+const { __ } = wp.i18n;
+const { Component, Fragment } = wp.element;
+const {
+  InspectorControls, RichText,
+} = wp.editor;
+const {
+  PanelBody, Button, DateTimePicker, ColorPicker,
+} = wp.components;
+
+const { PostMediaSelector } = benenson.components;
+
+class DisplayComponent extends Component {
+  render() {
+    const { attributes, setAttributes } = this.props;
+    const {
+      date = new Date(),
+      title = '',
+      backgroundColor = '',
+      backgroundId = null,
+      backgroundUrl = '',
+
+    } = attributes;
+
+    const styles = {
+      backgroundImage: `url('${backgroundUrl}')`,
+      backgroundColor,
+    };
+
+    return (
+      <Fragment>
+        <InspectorControls>
+          <PanelBody title={ __('Date/Time', 'benenson') }>
+            <DateTimePicker
+              currentDate={ attributes.date }
+              onChange={ newDate => setAttributes({ date: newDate }) }
+              // is12Hour={ is12HourTime }
+            />
+          </PanelBody>
+          <PanelBody title={ __('Background color', 'benenson') }>
+            <ColorPicker
+              color={ backgroundColor }
+              onChangeComplete={ color => setAttributes({ backgroundColor: color.hex }) }
+              disableAlpha
+            />
+            <Button
+              className="components-button is-button is-default is-large"
+              onClick={ () => setAttributes({ backgroundColor: '' }) }
+            >
+            {__('Remove background colour', 'benenson')}
+            </Button>
+          </PanelBody>
+          <PanelBody title={ __('Background image', 'benenson') }>
+            <PostMediaSelector
+              onUpdate={ (media) => {
+                  setAttributes({
+                    backgroundUrl: media ? media.source_url : '',
+                    backgroundId: media ? media.id : null,
+                  });
+                }
+              }
+              mediaId={ backgroundId }
+            />
+          </PanelBody>
+        </InspectorControls>
+        <div className="countdownTimer" style={ styles }>
+          <RichText
+            tagName="h2"
+            className="countdownTimer-title"
+            onChange={ newTitle => setAttributes({ title: newTitle }) }
+            value={ title }
+            placeholder={ __('(Insert Title)', 'benenson') }
+            keepPlaceholderOnFocus={ true }
+            formattingControls={ [] }
+            format="string"
+          />
+          <div className="countdownTimer-items">
+            <div className="countdownTimer-item countdownTimer-days">
+              <p>10</p>
+            </div>
+            <div className="countdownTimer-item countdownTimer-hours">
+              <p>5</p>
+            </div>
+            <div className="countdownTimer-item countdownTimer-mins">
+              <p>55</p>
+            </div>
+            <div className="countdownTimer-item countdownTimer-secs">
+              <p>12</p>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+export default DisplayComponent;
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
new file mode 100644
index 0000000..116ace2
--- /dev/null
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -0,0 +1,44 @@
+import classnames from 'classnames';
+import DisplayComponent from './DisplayComponent';
+
+const { __ } = wp.i18n;
+const { registerBlockType } = wp.blocks;
+const { Component, Fragment } = wp.element;
+const {
+  InspectorControls, RichText,
+} = wp.editor;
+const {
+  PanelBody, Button, DateTimePicker, ColorPicker,
+} = wp.components;
+
+const { PostMediaSelector } = benenson.components;
+
+registerBlockType('benenson/block-countdown', {
+  title: __('Countdown timer', 'benenson'),
+  description: __('Set a future date to countdown to.', 'benenson'),
+  icon: 'download',
+  category: 'benenson',
+  supports: {
+  },
+
+  attributes: {
+    title: {
+      type: 'string',
+    },
+    date: {
+      type: 'string',
+    },
+    backgroundColor: {
+      type: 'string',
+    },
+    backgroundId: {
+      type: 'interger',
+    },
+    backgroundUrl: {
+      type: 'string',
+    },
+  },
+  edit: DisplayComponent,
+
+  save: () => null,
+});
diff --git a/src/styles/components/countdown-timer/_editor.scss b/src/styles/components/countdown-timer/_editor.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
new file mode 100644
index 0000000..acdc6d0
--- /dev/null
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -0,0 +1,31 @@
+.countdownTimer {
+  padding: 50px 30px;
+  text-align: center;
+  background-color: $color-black;
+  color: $color-white;
+}
+
+.countdownTimer-title {
+  @include font-size(24px);
+  color: $color-white;
+}
+
+.countdownTimer-items {
+  display: flex;
+  max-width: 450px;
+  margin: 0 auto;
+}
+
+.countdownTimer-items .countdownTimer-item {
+  flex-grow: 1;
+  text-align: center;
+}
+
+.countdownTimer-items .countdownTimer-item p {
+  @include font-size(38px);
+  margin: 30px 0 0 0;
+}
+
+.countdownTimer-items .countdownTimer-item + .countdownTimer-item {
+  margin-left: 10px;
+}
diff --git a/src/styles/style-editor.scss b/src/styles/style-editor.scss
index 3e2601c..49cd13e 100755
--- a/src/styles/style-editor.scss
+++ b/src/styles/style-editor.scss
@@ -86,6 +86,8 @@
 @import "components/split-grid/main";
 @import "components/media-aside/main";
 @import "components/media-aside/editor";
+@import "components/countdown-timer/main";
+@import "components/countdown-timer/editor";
 
 // helpers
 @import "utils/helpers/type";
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 5294582..231276b 100755
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -99,6 +99,7 @@
 @import "components/logo-list/main";
 @import "components/post-grid/main";
 @import "components/media-aside/main";
+@import "components/countdown-timer/main";
 
 // Pages
 @import "pages/home";

From 1fd1bffc394b3a4b3a3468772baee32feeb5ef88 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Fri, 1 Feb 2019 13:28:00 +0000
Subject: [PATCH 02/20] Working countdown frontend.

---
 src/scripts/app.js                            |  2 +
 .../countdown-timer/DisplayComponent.js       |  8 +--
 src/scripts/blocks/countdown-timer/index.js   | 36 ++++++++++-
 src/scripts/modules/countdown-timer.js        | 60 +++++++++++++++++++
 .../components/countdown-timer/_main.scss     |  9 +++
 5 files changed, 110 insertions(+), 5 deletions(-)
 create mode 100644 src/scripts/modules/countdown-timer.js

diff --git a/src/scripts/app.js b/src/scripts/app.js
index 22a140f..4309de7 100755
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -15,6 +15,7 @@ import subcatDrops from './modules/subcategory-dropdown';
 import categoryExpander from './modules/category-expander';
 import fluidText from './modules/fluid-text';
 import scrollTo from './modules/scrollTo';
+import countdownTimer from './modules/countdown-timer';
 
 import './polyfills';
 
@@ -34,6 +35,7 @@ const App = () => {
   subcatDrops();
   categoryExpander();
   scrollTo();
+  countdownTimer();
 
   fluidText(document.getElementsByClassName('article-shareTitle'), 0.9);
 
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index b36869e..1495e12 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -75,16 +75,16 @@ class DisplayComponent extends Component {
           />
           <div className="countdownTimer-items">
             <div className="countdownTimer-item countdownTimer-days">
-              <p>10</p>
+              <p>00</p>
             </div>
             <div className="countdownTimer-item countdownTimer-hours">
-              <p>5</p>
+              <p>00</p>
             </div>
             <div className="countdownTimer-item countdownTimer-mins">
-              <p>55</p>
+              <p>00</p>
             </div>
             <div className="countdownTimer-item countdownTimer-secs">
-              <p>12</p>
+              <p>00</p>
             </div>
           </div>
         </div>
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 116ace2..0db80d8 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -40,5 +40,39 @@ registerBlockType('benenson/block-countdown', {
   },
   edit: DisplayComponent,
 
-  save: () => null,
+  save({ attributes }) {
+    const {
+      date = new Date(),
+      title = '',
+      backgroundColor = '',
+      backgroundId = null,
+      backgroundUrl = '',
+
+    } = attributes;
+
+    const styles = {
+      backgroundImage: `url('${backgroundUrl}')`,
+      backgroundColor,
+    };
+
+    return (
+      <div className="countdownTimer" style={ styles} data-date={ date }>
+        <h2 className="countdownTimer-title">{ title }</h2>
+        <div className="countdownTimer-items">
+          <div className="countdownTimer-item countdownTimer-days">
+            <p>00</p>
+          </div>
+          <div className="countdownTimer-item countdownTimer-hours">
+            <p>00</p>
+          </div>
+          <div className="countdownTimer-item countdownTimer-mins">
+            <p>00</p>
+          </div>
+          <div className="countdownTimer-item countdownTimer-secs">
+            <p>00</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
 });
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
new file mode 100644
index 0000000..e09034b
--- /dev/null
+++ b/src/scripts/modules/countdown-timer.js
@@ -0,0 +1,60 @@
+const init = () => {
+  Array.from(document.querySelectorAll('.countdownTimer'))
+    .forEach((timer) => {
+      let days = 0;
+      let hours = 0;
+      let minutes = 0;
+      let seconds = 0;
+      let count = 0;
+
+      const daysElement = timer.querySelector('.countdownTimer-days p');
+      const hoursElement = timer.querySelector('.countdownTimer-hours p');
+      const minutesElement = timer.querySelector('.countdownTimer-mins p');
+      const secondsElement = timer.querySelector('.countdownTimer-secs p');
+      const endDate = new Date(timer.dataset.date).getTime();
+
+      if (typeof (endDate) !== 'number') {
+        return;
+      }
+
+      const calculate = () => {
+        count += 1;
+
+        let startDate = new Date();
+        startDate = startDate.getTime();
+
+        // turn milliseconds into seconds to make calculations easier
+        let timeRemaining = parseInt((endDate - startDate) / 1000, 10);
+
+        if (timeRemaining >= 0) {
+          // divide time remaining by number of seconds in a day & remove days from timeRemaining
+          days = parseInt(timeRemaining / 86400, 10);
+          timeRemaining %= 86400;
+
+          // divide time remaining by number of seconds in an hour & remove hours from timeRemaining
+          hours = parseInt(timeRemaining / 3600, 10);
+          timeRemaining %= 3600;
+
+          /* divide time remaining by number of seconds in a minute &
+          remove minutes from timeRemaining */
+          minutes = parseInt(timeRemaining / 60, 10);
+          timeRemaining %= 60;
+
+          seconds = parseInt(timeRemaining, 10);
+
+          daysElement.innerHTML = parseInt(days, 10);
+          hoursElement.innerHTML = (`0${hours}`).slice(-2);
+          minutesElement.innerHTML = (`0${minutes}`).slice(-2);
+          secondsElement.innerHTML = (`0${seconds}`).slice(-2);
+
+          if (count >= 1) {
+            timer.classList.add('countdownTimer--set');
+          }
+        }
+      };
+
+      setInterval(calculate, 1000);
+    });
+};
+
+export default init;
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index acdc6d0..a512fbe 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -2,6 +2,9 @@
   padding: 50px 30px;
   text-align: center;
   background-color: $color-black;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
   color: $color-white;
 }
 
@@ -19,6 +22,8 @@
 .countdownTimer-items .countdownTimer-item {
   flex-grow: 1;
   text-align: center;
+  filter: blur(20px);
+  transition: .3s filter linear;
 }
 
 .countdownTimer-items .countdownTimer-item p {
@@ -29,3 +34,7 @@
 .countdownTimer-items .countdownTimer-item + .countdownTimer-item {
   margin-left: 10px;
 }
+
+.countdownTimer.countdownTimer--set .countdownTimer-items .countdownTimer-item {
+  filter: blur(0px);
+}

From 04f44e681d5aa6b6bc72affdbb958a69a682d502 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Fri, 1 Feb 2019 13:38:36 +0000
Subject: [PATCH 03/20] some more style

---
 src/styles/components/countdown-timer/_editor.scss | 3 +++
 src/styles/components/countdown-timer/_main.scss   | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/countdown-timer/_editor.scss b/src/styles/components/countdown-timer/_editor.scss
index e69de29..30a718e 100644
--- a/src/styles/components/countdown-timer/_editor.scss
+++ b/src/styles/components/countdown-timer/_editor.scss
@@ -0,0 +1,3 @@
+.countdownTimer-title {
+  @include font-size(28px);
+}
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index a512fbe..454695b 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -9,8 +9,8 @@
 }
 
 .countdownTimer-title {
-  @include font-size(24px);
   color: $color-white;
+  margin-bottom: 5px;
 }
 
 .countdownTimer-items {

From f219c3394a59426cd8519035480c8ec545c7de16 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Fri, 1 Feb 2019 15:27:30 +0000
Subject: [PATCH 04/20] Add days, hours, minutes and seconds labels.

---
 block-languages/benenson-blocks.pot           |  24 ++++
 includes/block-translations.php               | 106 ++++++++++++------
 .../countdown-timer/DisplayComponent.js       |   8 +-
 src/scripts/blocks/countdown-timer/index.js   |   8 +-
 src/scripts/modules/countdown-timer.js        |   8 +-
 .../components/countdown-timer/_main.scss     |  16 ++-
 6 files changed, 119 insertions(+), 51 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 0a77621..9dfee4c 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -431,6 +431,30 @@ msgstr ""
 msgid "(Insert Title)"
 msgstr ""
 
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:78
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:79
+#: src/scripts/blocks/countdown-timer/index.js:63
+msgid "Days"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:81
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
+#: src/scripts/blocks/countdown-timer/index.js:66
+msgid "Hours"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:84
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+#: src/scripts/blocks/countdown-timer/index.js:69
+msgid "Minutes"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
+#: src/scripts/blocks/countdown-timer/index.js:72
+msgid "Seconds"
+msgstr ""
+
 #: src/scripts/blocks/countdown-timer/index.js:17
 msgid "Countdown timer"
 msgstr ""
diff --git a/includes/block-translations.php b/includes/block-translations.php
index 7c928b8..cb4fe8d 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -12,7 +12,7 @@
 	__( 'Standard', 'benenson' ),
 
 	// Reference: src/scripts/blocks/action/BlockEdit.js:37
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:62
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:74
 	__( 'Wide', 'benenson' ),
 
 	// Reference: src/scripts/blocks/action/BlockEdit.js:62
@@ -70,7 +70,7 @@
 	// Reference: src/scripts/blocks/blockquote/index.js:232
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:95
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:12
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:37
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:49
 	__( 'White', 'benenson' ),
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:42
@@ -103,7 +103,7 @@
 	// Reference: src/scripts/blocks/link/DisplayComponent.js:53
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:96
 	// Reference: src/scripts/blocks/post-list/DisplayComponent.js:91
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:68
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:80
 	// Reference: src/scripts/blocks/slider/DisplayComponent.js:215
 	__( 'Options', 'benenson' ),
 
@@ -144,6 +144,7 @@
 
 	// Reference: src/scripts/blocks/blockquote/index.js:165
 	// Reference: src/scripts/blocks/image/BlockEdit.js:197
+	// Reference: src/scripts/blocks/section/index.js:53
 	// Reference: src/scripts/blocks/tweet/index.js:26
 	__( 'Default', 'benenson' ),
 
@@ -159,7 +160,7 @@
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:114
 	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:223
 	// Reference: src/scripts/blocks/logo-list/InnerBlockEdit.js:139
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:48
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:60
 	__( 'Small', 'benenson' ),
 
 	// Reference: src/scripts/blocks/blockquote/index.js:217
@@ -181,7 +182,7 @@
 	// Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:60
 	// Reference: src/scripts/blocks/logo-list/BlockEdit.js:52
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:15
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:40
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:52
 	// Reference: src/scripts/blocks/section/index.js:27
 	__( 'Grey', 'benenson' ),
 
@@ -316,25 +317,74 @@
 	// Reference: src/scripts/blocks/columns/row-column.js:9
 	__( 'Row Column', 'benenson' ),
 
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
+	__( 'Date/Time', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:39
+	__( 'Background color', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
+	__( 'Remove background colour', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:52
+	__( 'Background image', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:71
+	// Reference: src/scripts/blocks/key-facts/fact.js:30
+	// Reference: src/scripts/blocks/key-facts/index.js:79
+	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
+	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
+	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
+	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
+	__( '(Insert Title)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:78
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:79
+	// Reference: src/scripts/blocks/countdown-timer/index.js:63
+	__( 'Days', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:81
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
+	// Reference: src/scripts/blocks/countdown-timer/index.js:66
+	__( 'Hours', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:84
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+	// Reference: src/scripts/blocks/countdown-timer/index.js:69
+	__( 'Minutes', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
+	// Reference: src/scripts/blocks/countdown-timer/index.js:72
+	__( 'Seconds', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/index.js:17
+	__( 'Countdown timer', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/index.js:18
+	__( 'Set a future date to countdown to.', 'benenson' ),
+
 	// Reference: src/scripts/blocks/download/index.js:12
 	__( 'Resource Download', 'benenson' ),
 
 	// Reference: src/scripts/blocks/download/index.js:13
 	__( 'Add a button to download a resource', 'benenson' ),
 
-	// Reference: src/scripts/blocks/download/index.js:44
+	// Reference: src/scripts/blocks/download/index.js:43
 	__( 'File', 'benenson' ),
 
-	// Reference: src/scripts/blocks/download/index.js:45
+	// Reference: src/scripts/blocks/download/index.js:44
 	__( 'A File', 'benenson' ),
 
-	// Reference: src/scripts/blocks/download/index.js:67
+	// Reference: src/scripts/blocks/download/index.js:66
 	__( '[Download Resource]', 'benenson' ),
 
-	// Reference: src/scripts/blocks/download/index.js:75
+	// Reference: src/scripts/blocks/download/index.js:74
 	__( 'Remove Resource', 'benenson' ),
 
-	// Reference: src/scripts/blocks/download/index.js:85
+	// Reference: src/scripts/blocks/download/index.js:84
 	__( 'Edit File', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:103
@@ -346,7 +396,7 @@
 	__( 'Video', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:111
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:56
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:68
 	__( 'Normal', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:128
@@ -354,7 +404,7 @@
 	// Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:81
 	// Reference: src/scripts/blocks/logo-list/BlockEdit.js:67
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:107
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:70
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:82
 	__( 'Background Colour', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:140
@@ -369,7 +419,7 @@
 	__( 'Setting this will override the cta link and will now open a modal with the embed in the hero.', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:93
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:105
 	__( 'Background Image', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
@@ -400,7 +450,7 @@
 	// Reference: src/scripts/blocks/link/DisplayComponent.js:30
 	// Reference: src/scripts/blocks/links-with-icons/BlockEdit.js:57
 	// Reference: src/scripts/blocks/logo-list/BlockEdit.js:49
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:51
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:63
 	__( 'None', 'benenson' ),
 
 	// Reference: src/scripts/blocks/header/PostFeaturedVideo.js:6
@@ -438,7 +488,7 @@
 	__( 'Write caption…', 'benenson' ),
 
 	// Reference: src/scripts/blocks/iframe/DisplayComponent.js:91
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:82
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:94
 	__( 'Width', 'benenson' ),
 
 	// Reference: src/scripts/blocks/iframe/DisplayComponent.js:95
@@ -502,18 +552,8 @@
 	// Reference: src/scripts/blocks/image/index.js:76
 	__( 'Add a flexible image block with optional overlay', 'benenson' ),
 
-	// Reference: src/scripts/blocks/key-facts/fact.js:30
-	// Reference: src/scripts/blocks/key-facts/index.js:79
-	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
-	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:27
-	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
-	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
-	__( '(Insert Title)', 'benenson' ),
-
 	// Reference: src/scripts/blocks/key-facts/fact.js:39
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:94
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:93
 	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:46
 	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:71
 	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:54
@@ -645,7 +685,7 @@
 	// Reference: src/scripts/blocks/logo-list/index.js:21
 	__( 'Add a repeatable logo block', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:104
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:103
 	__( '(Insert Link text)', 'benenson' ),
 
 	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:57
@@ -760,7 +800,7 @@
 	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:22
 	__( '(Insert Tag)', 'benenson' ),
 
-	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:12
+	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:13
 	__( '(Tag Name)', 'benenson' ),
 
 	// Reference: src/scripts/blocks/post-list/components/post-selector/PostList.js:21
@@ -790,15 +830,15 @@
 	// Reference: src/scripts/blocks/post-list/index.js:49
 	__( 'Posts', 'benenson' ),
 
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:59
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:100
+	__( 'Id (scroll location)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:71
 	// Reference: src/scripts/blocks/tweet/index.js:27
 	__( 'Narrow', 'benenson' ),
 
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:76
-	__( 'Padding', 'benenson' ),
-
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:88
-	__( 'Id (scroll location)', 'benenson' ),
+	__( 'Padding', 'benenson' ),
 
 	// Reference: src/scripts/blocks/section/index.js:26
 	__( 'Section', 'benenson' ),
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 1495e12..5b07044 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -75,16 +75,16 @@ class DisplayComponent extends Component {
           />
           <div className="countdownTimer-items">
             <div className="countdownTimer-item countdownTimer-days">
-              <p>00</p>
+              <p><span>00</span>{ __('Days', 'benenson') }</p>
             </div>
             <div className="countdownTimer-item countdownTimer-hours">
-              <p>00</p>
+              <p><span>00</span>{ __('Hours', 'benenson') }</p>
             </div>
             <div className="countdownTimer-item countdownTimer-mins">
-              <p>00</p>
+              <p><span>00</span>{ __('Minutes', 'benenson') }</p>
             </div>
             <div className="countdownTimer-item countdownTimer-secs">
-              <p>00</p>
+              <p><span>00</span>{ __('Seconds', 'benenson') }</p>
             </div>
           </div>
         </div>
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 0db80d8..7a59e1e 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -60,16 +60,16 @@ registerBlockType('benenson/block-countdown', {
         <h2 className="countdownTimer-title">{ title }</h2>
         <div className="countdownTimer-items">
           <div className="countdownTimer-item countdownTimer-days">
-            <p>00</p>
+            <p><span>00</span>{ __('Days', 'benenson') }</p>
           </div>
           <div className="countdownTimer-item countdownTimer-hours">
-            <p>00</p>
+            <p><span>00</span>{ __('Hours', 'benenson') }</p>
           </div>
           <div className="countdownTimer-item countdownTimer-mins">
-            <p>00</p>
+            <p><span>00</span>{ __('Minutes', 'benenson') }</p>
           </div>
           <div className="countdownTimer-item countdownTimer-secs">
-            <p>00</p>
+            <p><span>00</span>{ __('Seconds', 'benenson') }</p>
           </div>
         </div>
       </div>
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index e09034b..1863b1d 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -7,10 +7,10 @@ const init = () => {
       let seconds = 0;
       let count = 0;
 
-      const daysElement = timer.querySelector('.countdownTimer-days p');
-      const hoursElement = timer.querySelector('.countdownTimer-hours p');
-      const minutesElement = timer.querySelector('.countdownTimer-mins p');
-      const secondsElement = timer.querySelector('.countdownTimer-secs p');
+      const daysElement = timer.querySelector('.countdownTimer-days span');
+      const hoursElement = timer.querySelector('.countdownTimer-hours span');
+      const minutesElement = timer.querySelector('.countdownTimer-mins span');
+      const secondsElement = timer.querySelector('.countdownTimer-secs span');
       const endDate = new Date(timer.dataset.date).getTime();
 
       if (typeof (endDate) !== 'number') {
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index 454695b..73c8cc1 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -22,19 +22,23 @@
 .countdownTimer-items .countdownTimer-item {
   flex-grow: 1;
   text-align: center;
-  filter: blur(20px);
-  transition: .3s filter linear;
 }
 
 .countdownTimer-items .countdownTimer-item p {
-  @include font-size(38px);
   margin: 30px 0 0 0;
 }
 
-.countdownTimer-items .countdownTimer-item + .countdownTimer-item {
-  margin-left: 10px;
+.countdownTimer-items .countdownTimer-item p span{
+  @include font-size(38px);
+  margin-right: 5px;
+  filter: blur(20px);
+  transition: .3s filter linear;
 }
 
-.countdownTimer.countdownTimer--set .countdownTimer-items .countdownTimer-item {
+.countdownTimer.countdownTimer--set .countdownTimer-items .countdownTimer-item span {
   filter: blur(0px);
 }
+
+.countdownTimer-items .countdownTimer-item + .countdownTimer-item {
+  margin-left: 10px;
+}

From 92a6cfcac33f1d145e5b9cb4019090c1ae2191be Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Fri, 1 Feb 2019 15:36:07 +0000
Subject: [PATCH 05/20] Responsive style(s).

---
 src/styles/components/countdown-timer/_main.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index 73c8cc1..a1caa22 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -28,11 +28,17 @@
   margin: 30px 0 0 0;
 }
 
-.countdownTimer-items .countdownTimer-item p span{
-  @include font-size(38px);
+.countdownTimer-items .countdownTimer-item p span {
+  @include font-size(28px);
+  display: block;
   margin-right: 5px;
   filter: blur(20px);
   transition: .3s filter linear;
+
+  @include mq(small) {
+    @include font-size(38px);
+    display: initial;
+  }
 }
 
 .countdownTimer.countdownTimer--set .countdownTimer-items .countdownTimer-item span {

From 541ff308c3a639291ef92f9cba0a876578ff2262 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Fri, 1 Feb 2019 16:12:13 +0000
Subject: [PATCH 06/20] Add text color option.

---
 block-languages/benenson-blocks.pot           | 60 ++++++++++---------
 includes/block-translations.php               | 54 +++++++++--------
 .../countdown-timer/DisplayComponent.js       | 34 ++++++++---
 src/scripts/blocks/countdown-timer/index.js   | 12 +++-
 .../components/countdown-timer/_main.scss     |  5 ++
 5 files changed, 102 insertions(+), 63 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 9dfee4c..78a1a93 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -88,6 +88,8 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -96,6 +98,8 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -125,10 +129,12 @@ msgstr ""
 #: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:44
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -403,56 +409,54 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
-msgid "Date/Time"
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
+#: src/scripts/blocks/countdown-timer/index.js:72
+msgid "Hours"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
+#: src/scripts/blocks/countdown-timer/index.js:75
+msgid "Minutes"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
+#: src/scripts/blocks/countdown-timer/index.js:78
+msgid "Seconds"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
+msgid "Text color"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:39
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
 msgid "Background color"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
-msgid "Remove background colour"
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
+msgid "Remove background color"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:52
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
 msgid "Background image"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:71
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:85
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
 msgid "(Insert Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:78
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:79
-#: src/scripts/blocks/countdown-timer/index.js:63
-msgid "Days"
-msgstr ""
-
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:81
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
-#: src/scripts/blocks/countdown-timer/index.js:66
-msgid "Hours"
-msgstr ""
-
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:84
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
 #: src/scripts/blocks/countdown-timer/index.js:69
-msgid "Minutes"
-msgstr ""
-
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
-#: src/scripts/blocks/countdown-timer/index.js:72
-msgid "Seconds"
+msgid "Days"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/index.js:17
diff --git a/includes/block-translations.php b/includes/block-translations.php
index cb4fe8d..1b09a6a 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -68,6 +68,8 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:39
 	// Reference: src/scripts/blocks/blockquote/index.js:232
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:95
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:12
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:49
@@ -75,6 +77,8 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:42
 	// Reference: src/scripts/blocks/blockquote/index.js:226
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:98
 	__( 'Black', 'benenson' ),
 
@@ -98,10 +102,12 @@
 	// Reference: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 	// Reference: src/scripts/blocks/category-list/DisplayComponent.js:62
 	// Reference: src/scripts/blocks/columns/DisplayComponent.js:28
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:120
 	// Reference: src/scripts/blocks/iframe/DisplayComponent.js:89
 	// Reference: src/scripts/blocks/link/DisplayComponent.js:53
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:96
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:44
 	// Reference: src/scripts/blocks/post-list/DisplayComponent.js:91
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:80
 	// Reference: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -317,48 +323,46 @@
 	// Reference: src/scripts/blocks/columns/row-column.js:9
 	__( 'Row Column', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
-	__( 'Date/Time', 'benenson' ),
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
+	// Reference: src/scripts/blocks/countdown-timer/index.js:72
+	__( 'Hours', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:39
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
+	// Reference: src/scripts/blocks/countdown-timer/index.js:75
+	__( 'Minutes', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
+	// Reference: src/scripts/blocks/countdown-timer/index.js:78
+	__( 'Seconds', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
+	__( 'Text color', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
 	__( 'Background color', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
-	__( 'Remove background colour', 'benenson' ),
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
+	__( 'Remove background color', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:52
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
 	__( 'Background image', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:71
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
 	// Reference: src/scripts/blocks/key-facts/fact.js:30
 	// Reference: src/scripts/blocks/key-facts/index.js:79
 	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
 	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
 	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:85
 	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
 	__( '(Insert Title)', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:78
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:79
-	// Reference: src/scripts/blocks/countdown-timer/index.js:63
-	__( 'Days', 'benenson' ),
-
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:81
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
-	// Reference: src/scripts/blocks/countdown-timer/index.js:66
-	__( 'Hours', 'benenson' ),
-
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:84
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
 	// Reference: src/scripts/blocks/countdown-timer/index.js:69
-	__( 'Minutes', 'benenson' ),
-
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:87
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
-	// Reference: src/scripts/blocks/countdown-timer/index.js:72
-	__( 'Seconds', 'benenson' ),
+	__( 'Days', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/index.js:17
 	__( 'Countdown timer', 'benenson' ),
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 5b07044..4ea0a77 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -1,12 +1,14 @@
+import classnames from 'classnames';
+
 const { __ } = wp.i18n;
 const { Component, Fragment } = wp.element;
 const {
   InspectorControls, RichText,
 } = wp.editor;
 const {
-  PanelBody, Button, DateTimePicker, ColorPicker,
+  PanelBody, Button, DateTimePicker, ColorPicker, SelectControl,
 } = wp.components;
-
+const { applyFilters } = wp.hooks;
 const { PostMediaSelector } = benenson.components;
 
 class DisplayComponent extends Component {
@@ -18,20 +20,38 @@ class DisplayComponent extends Component {
       backgroundColor = '',
       backgroundId = null,
       backgroundUrl = '',
-
+      textColor = '',
     } = attributes;
 
+    const colourOptions = applyFilters('benenson.block.blockCountdown.colorOptions', [{
+      label: __('White', 'benenson'),
+      value: '',
+    }, {
+      label: __('Black', 'benenson'),
+      value: 'black',
+    }]);
+
     const styles = {
       backgroundImage: `url('${backgroundUrl}')`,
       backgroundColor,
     };
 
+    const classes = classnames('countdownTimer', {
+      [`is-${textColor}`]: !!textColor,
+    });
+
     return (
       <Fragment>
         <InspectorControls>
-          <PanelBody title={ __('Date/Time', 'benenson') }>
+          <PanelBody title={ __('Options', 'benenson') }>
+            <SelectControl
+              label={ __('Text color', 'benenson') }
+              value={ textColor }
+              onChange={ color => setAttributes({ textColor: color }) }
+              options={ colourOptions }
+            />
             <DateTimePicker
-              currentDate={ attributes.date }
+              currentDate={ date }
               onChange={ newDate => setAttributes({ date: newDate }) }
               // is12Hour={ is12HourTime }
             />
@@ -46,7 +66,7 @@ class DisplayComponent extends Component {
               className="components-button is-button is-default is-large"
               onClick={ () => setAttributes({ backgroundColor: '' }) }
             >
-            {__('Remove background colour', 'benenson')}
+            {__('Remove background color', 'benenson')}
             </Button>
           </PanelBody>
           <PanelBody title={ __('Background image', 'benenson') }>
@@ -62,7 +82,7 @@ class DisplayComponent extends Component {
             />
           </PanelBody>
         </InspectorControls>
-        <div className="countdownTimer" style={ styles }>
+        <div className={ classes } style={ styles }>
           <RichText
             tagName="h2"
             className="countdownTimer-title"
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 7a59e1e..0c78a76 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -37,6 +37,9 @@ registerBlockType('benenson/block-countdown', {
     backgroundUrl: {
       type: 'string',
     },
+    textColor: {
+      type: 'string',
+    },
   },
   edit: DisplayComponent,
 
@@ -45,9 +48,8 @@ registerBlockType('benenson/block-countdown', {
       date = new Date(),
       title = '',
       backgroundColor = '',
-      backgroundId = null,
       backgroundUrl = '',
-
+      textColor = '',
     } = attributes;
 
     const styles = {
@@ -55,8 +57,12 @@ registerBlockType('benenson/block-countdown', {
       backgroundColor,
     };
 
+    const classes = classnames('countdownTimer', {
+      [`is-${textColor}`]: !!textColor,
+    });
+
     return (
-      <div className="countdownTimer" style={ styles} data-date={ date }>
+      <div className={ classes } style={ styles} data-date={ date }>
         <h2 className="countdownTimer-title">{ title }</h2>
         <div className="countdownTimer-items">
           <div className="countdownTimer-item countdownTimer-days">
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index a1caa22..c90dd4e 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -48,3 +48,8 @@
 .countdownTimer-items .countdownTimer-item + .countdownTimer-item {
   margin-left: 10px;
 }
+
+.countdownTimer.is-black,
+.countdownTimer.is-black .countdownTimer-title {
+  color: $color-black;
+}

From 7155e3ce5abab685f6c72c42d4540134f01c0832 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Mon, 4 Feb 2019 17:36:12 +0000
Subject: [PATCH 07/20] Code improvements.

---
 block-languages/benenson-blocks.pot           | 31 +++++--------
 includes/block-translations.php               | 29 +++++-------
 .../countdown-timer/DisplayComponent.js       | 12 ++---
 src/scripts/blocks/countdown-timer/index.js   |  2 +-
 src/scripts/modules/countdown-timer.js        | 44 ++++++++++---------
 5 files changed, 50 insertions(+), 68 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 78a1a93..456b068 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -88,8 +88,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:28
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -98,8 +97,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:31
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -129,12 +127,11 @@ msgstr ""
 #: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:47
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:44
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -248,6 +245,7 @@ msgid "Alignment"
 msgstr ""
 
 #: src/scripts/blocks/blockquote/index.js:252
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 msgid "Text Colour"
 msgstr ""
 
@@ -424,20 +422,18 @@ msgstr ""
 msgid "Seconds"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
-msgid "Text color"
-msgstr ""
-
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
-msgid "Background color"
+msgid "Background colour"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
-msgid "Remove background color"
+msgid "Remove background colour"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
-msgid "Background image"
+#: src/scripts/blocks/header/DisplayComponent.js:152
+#: src/scripts/blocks/section/DisplayComponent.js:105
+msgid "Background Image"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
@@ -446,8 +442,6 @@ msgstr ""
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:85
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
@@ -460,7 +454,7 @@ msgid "Days"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/index.js:17
-msgid "Countdown timer"
+msgid "Countdown Timer"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/index.js:18
@@ -535,11 +529,6 @@ msgid ""
 "embed in the hero."
 msgstr ""
 
-#: src/scripts/blocks/header/DisplayComponent.js:152
-#: src/scripts/blocks/section/DisplayComponent.js:105
-msgid "Background Image"
-msgstr ""
-
 #: src/scripts/blocks/header/DisplayComponent.js:152
 msgid "Featured Image"
 msgstr ""
diff --git a/includes/block-translations.php b/includes/block-translations.php
index 1b09a6a..e69be01 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -68,8 +68,7 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:39
 	// Reference: src/scripts/blocks/blockquote/index.js:232
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:28
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:95
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:12
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:49
@@ -77,8 +76,7 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:42
 	// Reference: src/scripts/blocks/blockquote/index.js:226
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:30
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:27
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:31
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:98
 	__( 'Black', 'benenson' ),
 
@@ -102,12 +100,11 @@
 	// Reference: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 	// Reference: src/scripts/blocks/category-list/DisplayComponent.js:62
 	// Reference: src/scripts/blocks/columns/DisplayComponent.js:28
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:47
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:120
 	// Reference: src/scripts/blocks/iframe/DisplayComponent.js:89
 	// Reference: src/scripts/blocks/link/DisplayComponent.js:53
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:96
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:44
 	// Reference: src/scripts/blocks/post-list/DisplayComponent.js:91
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:80
 	// Reference: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -201,6 +198,7 @@
 	__( 'Alignment', 'benenson' ),
 
 	// Reference: src/scripts/blocks/blockquote/index.js:252
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 	__( 'Text Colour', 'benenson' ),
 
 	// Reference: src/scripts/blocks/blockquote/index.js:258
@@ -335,17 +333,16 @@
 	// Reference: src/scripts/blocks/countdown-timer/index.js:78
 	__( 'Seconds', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
-	__( 'Text color', 'benenson' ),
-
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
-	__( 'Background color', 'benenson' ),
+	__( 'Background colour', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
-	__( 'Remove background color', 'benenson' ),
+	__( 'Remove background colour', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
-	__( 'Background image', 'benenson' ),
+	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
+	// Reference: src/scripts/blocks/section/DisplayComponent.js:105
+	__( 'Background Image', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
 	// Reference: src/scripts/blocks/key-facts/fact.js:30
@@ -353,8 +350,6 @@
 	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
 	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
 	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:85
 	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
@@ -365,7 +360,7 @@
 	__( 'Days', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/index.js:17
-	__( 'Countdown timer', 'benenson' ),
+	__( 'Countdown Timer', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/index.js:18
 	__( 'Set a future date to countdown to.', 'benenson' ),
@@ -422,10 +417,6 @@
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:150
 	__( 'Setting this will override the cta link and will now open a modal with the embed in the hero.', 'benenson' ),
 
-	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
-	// Reference: src/scripts/blocks/section/DisplayComponent.js:105
-	__( 'Background Image', 'benenson' ),
-
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
 	__( 'Featured Image', 'benenson' ),
 
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 4ea0a77..79057b1 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -23,6 +23,7 @@ class DisplayComponent extends Component {
       textColor = '',
     } = attributes;
 
+    // Note: US English spelling.
     const colourOptions = applyFilters('benenson.block.blockCountdown.colorOptions', [{
       label: __('White', 'benenson'),
       value: '',
@@ -45,7 +46,7 @@ class DisplayComponent extends Component {
         <InspectorControls>
           <PanelBody title={ __('Options', 'benenson') }>
             <SelectControl
-              label={ __('Text color', 'benenson') }
+              label={ __('Text Colour', 'benenson') }
               value={ textColor }
               onChange={ color => setAttributes({ textColor: color }) }
               options={ colourOptions }
@@ -53,23 +54,22 @@ class DisplayComponent extends Component {
             <DateTimePicker
               currentDate={ date }
               onChange={ newDate => setAttributes({ date: newDate }) }
-              // is12Hour={ is12HourTime }
             />
           </PanelBody>
-          <PanelBody title={ __('Background color', 'benenson') }>
+          <PanelBody title={ __('Background colour', 'benenson') }>
             <ColorPicker
               color={ backgroundColor }
               onChangeComplete={ color => setAttributes({ backgroundColor: color.hex }) }
-              disableAlpha
+              disableAlpha={ true }
             />
             <Button
               className="components-button is-button is-default is-large"
               onClick={ () => setAttributes({ backgroundColor: '' }) }
             >
-            {__('Remove background color', 'benenson')}
+            { __('Remove background colour', 'benenson') }
             </Button>
           </PanelBody>
-          <PanelBody title={ __('Background image', 'benenson') }>
+          <PanelBody title={ __('Background Image', 'benenson') }>
             <PostMediaSelector
               onUpdate={ (media) => {
                   setAttributes({
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 0c78a76..f8ab2f3 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -14,7 +14,7 @@ const {
 const { PostMediaSelector } = benenson.components;
 
 registerBlockType('benenson/block-countdown', {
-  title: __('Countdown timer', 'benenson'),
+  title: __('Countdown Timer', 'benenson'),
   description: __('Set a future date to countdown to.', 'benenson'),
   icon: 'download',
   category: 'benenson',
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index 1863b1d..671faa4 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -13,9 +13,8 @@ const init = () => {
       const secondsElement = timer.querySelector('.countdownTimer-secs span');
       const endDate = new Date(timer.dataset.date).getTime();
 
-      if (typeof (endDate) !== 'number') {
+      if (typeof endDate !== 'number')
         return;
-      }
 
       const calculate = () => {
         count += 1;
@@ -26,30 +25,33 @@ const init = () => {
         // turn milliseconds into seconds to make calculations easier
         let timeRemaining = parseInt((endDate - startDate) / 1000, 10);
 
-        if (timeRemaining >= 0) {
-          // divide time remaining by number of seconds in a day & remove days from timeRemaining
-          days = parseInt(timeRemaining / 86400, 10);
-          timeRemaining %= 86400;
+        if (timeRemaining < 0) {
+          timer.classList.add('countdownTimer--set');
+          return;
+        }
+
+        // divide time remaining by number of seconds in a day & remove days from timeRemaining
+        days = parseInt(timeRemaining / 86400, 10);
+        timeRemaining %= 86400;
 
-          // divide time remaining by number of seconds in an hour & remove hours from timeRemaining
-          hours = parseInt(timeRemaining / 3600, 10);
-          timeRemaining %= 3600;
+        // divide time remaining by number of seconds in an hour & remove hours from timeRemaining
+        hours = parseInt(timeRemaining / 3600, 10);
+        timeRemaining %= 3600;
 
-          /* divide time remaining by number of seconds in a minute &
-          remove minutes from timeRemaining */
-          minutes = parseInt(timeRemaining / 60, 10);
-          timeRemaining %= 60;
+        /* divide time remaining by number of seconds in a minute &
+        remove minutes from timeRemaining */
+        minutes = parseInt(timeRemaining / 60, 10);
+        timeRemaining %= 60;
 
-          seconds = parseInt(timeRemaining, 10);
+        seconds = parseInt(timeRemaining, 10);
 
-          daysElement.innerHTML = parseInt(days, 10);
-          hoursElement.innerHTML = (`0${hours}`).slice(-2);
-          minutesElement.innerHTML = (`0${minutes}`).slice(-2);
-          secondsElement.innerHTML = (`0${seconds}`).slice(-2);
+        daysElement.innerHTML = parseInt(days, 10);
+        hoursElement.innerHTML = (`0${hours}`).slice(-2);
+        minutesElement.innerHTML = (`0${minutes}`).slice(-2);
+        secondsElement.innerHTML = (`0${seconds}`).slice(-2);
 
-          if (count >= 1) {
-            timer.classList.add('countdownTimer--set');
-          }
+        if (count >= 1) {
+          timer.classList.add('countdownTimer--set');
         }
       };
 

From 9009842f7ff3b1bc0687fb82630641ab57dc14d7 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 5 Feb 2019 15:17:03 +0000
Subject: [PATCH 08/20] PHP render block.

---
 block-languages/benenson-blocks.pot           |  4 -
 includes/block-translations.php               |  4 -
 includes/blocks/countdown-timer/render.php    | 92 +++++++++++++++++++
 includes/blocks/register.php                  |  6 ++
 src/scripts/blocks/countdown-timer/index.js   | 40 +-------
 src/scripts/modules/countdown-timer.js        |  3 +-
 .../components/countdown-timer/_main.scss     |  6 --
 7 files changed, 102 insertions(+), 53 deletions(-)
 create mode 100644 includes/blocks/countdown-timer/render.php

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 456b068..87c3e76 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -408,17 +408,14 @@ msgid "Row Column"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
-#: src/scripts/blocks/countdown-timer/index.js:72
 msgid "Hours"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
-#: src/scripts/blocks/countdown-timer/index.js:75
 msgid "Minutes"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
-#: src/scripts/blocks/countdown-timer/index.js:78
 msgid "Seconds"
 msgstr ""
 
@@ -449,7 +446,6 @@ msgid "(Insert Title)"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
-#: src/scripts/blocks/countdown-timer/index.js:69
 msgid "Days"
 msgstr ""
 
diff --git a/includes/block-translations.php b/includes/block-translations.php
index e69be01..003436a 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -322,15 +322,12 @@
 	__( 'Row Column', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
-	// Reference: src/scripts/blocks/countdown-timer/index.js:72
 	__( 'Hours', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
-	// Reference: src/scripts/blocks/countdown-timer/index.js:75
 	__( 'Minutes', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
-	// Reference: src/scripts/blocks/countdown-timer/index.js:78
 	__( 'Seconds', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
@@ -356,7 +353,6 @@
 	__( '(Insert Title)', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
-	// Reference: src/scripts/blocks/countdown-timer/index.js:69
 	__( 'Days', 'benenson' ),
 
 	// Reference: src/scripts/blocks/countdown-timer/index.js:17
diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
new file mode 100644
index 0000000..b65dbf1
--- /dev/null
+++ b/includes/blocks/countdown-timer/render.php
@@ -0,0 +1,92 @@
+<?php
+
+/**
+ * Renders the countdown timer block.
+ *
+ * @since 1.0.0
+ * @return string
+ */
+if ( ! function_exists( 'benenson_render_countdown_timer_block' ) ) {
+	function benenson_render_countdown_timer_block( array $attributes = [] ) {
+		$required = [ 'title', 'date' ];
+		foreach ( $required as $req ) {
+			if ( ! isset( $attributes[ $req ] ) ) {
+				$attributes[ $req ] = '';
+			}
+		}
+
+		$days    = 00;
+		$hours   = 00;
+		$minutes = 00;
+		$seconds = 00;
+
+		if ( ! empty ( $attributes['date'] ) ) {
+			$start_date     = time();
+			$end_date       = strtotime( $attributes['date'] );
+			$time_remaining = $end_date - $start_date;
+
+			$days            = intval( $time_remaining / 86400 );
+			$time_remaining %= 86400;
+
+			$hours           = str_pad( intval( $time_remaining / 3600 ), 2, '0', STR_PAD_LEFT );
+			$time_remaining %= 3600;
+
+			$minutes         = str_pad( intval( $time_remaining / 60 ), 2, '0', STR_PAD_LEFT );
+			$time_remaining %= 60;
+
+			$seconds = str_pad( $time_remaining, 2, '0', STR_PAD_LEFT );
+		}
+
+		spaceless();
+		?>
+
+		<div class="countdownTimer" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
+			<?php
+			if ( ! empty ( $attributes['title'] ) ) {
+				printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
+			}
+			?>
+			<div class="countdownTimer-items">
+				<div class="countdownTimer-item countdownTimer-days">
+				<?php
+				printf(
+					'<p><span>%s</span>%s</p>',
+					esc_attr( $days ),
+					esc_html__( 'Days', 'benenson' )
+				);
+				?>
+				</div>
+				<div class="countdownTimer-item countdownTimer-hours">
+				<?php
+				printf(
+					'<p><span>%s</span>%s</p>',
+					esc_attr( $hours ),
+					esc_html__( 'Hours', 'benenson' )
+				);
+				?>
+				</div>
+				<div class="countdownTimer-item countdownTimer-mins">
+				<?php
+				printf(
+					'<p><span>%s</span>%s</p>',
+					esc_attr( $minutes ),
+					esc_html__( 'Minutes', 'benenson' )
+				);
+				?>
+				</div>
+				<div class="countdownTimer-item countdownTimer-secs">
+				<?php
+				printf(
+					'<p><span>%s</span>%s</p>',
+					esc_attr( $seconds ),
+					esc_html__( 'Seconds', 'benenson' )
+				);
+				?>
+				</div>
+			</div>
+		</div>
+
+		<?php
+		return endspaceless( false );
+	}
+}
diff --git a/includes/blocks/register.php b/includes/blocks/register.php
index 48a619d..cc1b9ec 100644
--- a/includes/blocks/register.php
+++ b/includes/blocks/register.php
@@ -12,6 +12,7 @@
 require_once __DIR__ . '/header/render.php';
 require_once __DIR__ . '/category-list/render.php';
 require_once __DIR__ . '/media-aside/render.php';
+require_once __DIR__ . '/countdown-timer/render.php';
 
 
 /**
@@ -56,6 +57,11 @@ function benenson_register_php_rendered_blocks() {
 			'render_callback' => 'benenson_render_media_aside_block',
 			'editor_script'   => 'benenson-blocks-js',
 		] );
+
+		register_block_type( 'benenson/block-countdown', [
+			'render_callback' => 'benenson_render_countdown_timer_block',
+			'editor_script'   => 'benenson-blocks-js',
+		] );
 	}
 }
 
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index f8ab2f3..329ddaa 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -43,42 +43,6 @@ registerBlockType('benenson/block-countdown', {
   },
   edit: DisplayComponent,
 
-  save({ attributes }) {
-    const {
-      date = new Date(),
-      title = '',
-      backgroundColor = '',
-      backgroundUrl = '',
-      textColor = '',
-    } = attributes;
-
-    const styles = {
-      backgroundImage: `url('${backgroundUrl}')`,
-      backgroundColor,
-    };
-
-    const classes = classnames('countdownTimer', {
-      [`is-${textColor}`]: !!textColor,
-    });
-
-    return (
-      <div className={ classes } style={ styles} data-date={ date }>
-        <h2 className="countdownTimer-title">{ title }</h2>
-        <div className="countdownTimer-items">
-          <div className="countdownTimer-item countdownTimer-days">
-            <p><span>00</span>{ __('Days', 'benenson') }</p>
-          </div>
-          <div className="countdownTimer-item countdownTimer-hours">
-            <p><span>00</span>{ __('Hours', 'benenson') }</p>
-          </div>
-          <div className="countdownTimer-item countdownTimer-mins">
-            <p><span>00</span>{ __('Minutes', 'benenson') }</p>
-          </div>
-          <div className="countdownTimer-item countdownTimer-secs">
-            <p><span>00</span>{ __('Seconds', 'benenson') }</p>
-          </div>
-        </div>
-      </div>
-    );
-  },
+  // Returns null due to the component being rendered server side
+  save: () => null,
 });
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index 671faa4..3aa46d5 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -13,8 +13,9 @@ const init = () => {
       const secondsElement = timer.querySelector('.countdownTimer-secs span');
       const endDate = new Date(timer.dataset.date).getTime();
 
-      if (typeof endDate !== 'number')
+      if (typeof endDate !== 'number') {
         return;
+      }
 
       const calculate = () => {
         count += 1;
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index c90dd4e..0fd655c 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -32,8 +32,6 @@
   @include font-size(28px);
   display: block;
   margin-right: 5px;
-  filter: blur(20px);
-  transition: .3s filter linear;
 
   @include mq(small) {
     @include font-size(38px);
@@ -41,10 +39,6 @@
   }
 }
 
-.countdownTimer.countdownTimer--set .countdownTimer-items .countdownTimer-item span {
-  filter: blur(0px);
-}
-
 .countdownTimer-items .countdownTimer-item + .countdownTimer-item {
   margin-left: 10px;
 }

From a593ebabd11147ead34f3b45e555ffb7c653ecb4 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 5 Feb 2019 16:08:34 +0000
Subject: [PATCH 09/20] Added reveal content inputs and editor styles.

---
 block-languages/benenson-blocks.pot           | 48 +++++++++++--------
 .../countdown-timer/DisplayComponent.js       | 43 ++++++++++++++++-
 src/scripts/blocks/countdown-timer/index.js   | 12 +++++
 src/scripts/modules/countdown-timer.js        |  9 +---
 .../components/countdown-timer/_editor.scss   |  6 +++
 5 files changed, 90 insertions(+), 28 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 87c3e76..c506ae2 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -88,7 +88,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:28
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -97,7 +97,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:31
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:35
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -127,7 +127,7 @@ msgstr ""
 #: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:47
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:51
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
@@ -245,7 +245,7 @@ msgid "Alignment"
 msgstr ""
 
 #: src/scripts/blocks/blockquote/index.js:252
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:53
 msgid "Text Colour"
 msgstr ""
 
@@ -407,48 +407,62 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:102
+msgid "Days"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:105
 msgid "Hours"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
 msgid "Minutes"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:111
 msgid "Seconds"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:120
+msgid "(Insert Reveal Title)"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:130
+msgid "(Insert Reveal Content)"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:140
+#: src/scripts/blocks/media-aside/DisplayComponent.js:103
+msgid "(Insert Link text)"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:63
 msgid "Background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:73
 msgid "Remove background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:76
 #: src/scripts/blocks/header/DisplayComponent.js:152
 #: src/scripts/blocks/section/DisplayComponent.js:105
 msgid "Background Image"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:95
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:92
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
 msgid "(Insert Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
-msgid "Days"
-msgstr ""
-
 #: src/scripts/blocks/countdown-timer/index.js:17
 msgid "Countdown Timer"
 msgstr ""
@@ -869,10 +883,6 @@ msgstr ""
 msgid "Add a repeatable logo block"
 msgstr ""
 
-#: src/scripts/blocks/media-aside/DisplayComponent.js:103
-msgid "(Insert Link text)"
-msgstr ""
-
 #: src/scripts/blocks/media-aside/DisplayComponent.js:57
 msgid "Display in modal"
 msgstr ""
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 79057b1..56977dc 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 const { __ } = wp.i18n;
 const { Component, Fragment } = wp.element;
 const {
-  InspectorControls, RichText,
+  InspectorControls, RichText, URLInputButton,
 } = wp.editor;
 const {
   PanelBody, Button, DateTimePicker, ColorPicker, SelectControl,
@@ -17,6 +17,10 @@ class DisplayComponent extends Component {
     const {
       date = new Date(),
       title = '',
+      revealTitle = '',
+      revealContent = '',
+      revealBtnText = '',
+      revealBtnLink = '',
       backgroundColor = '',
       backgroundId = null,
       backgroundUrl = '',
@@ -107,6 +111,43 @@ class DisplayComponent extends Component {
               <p><span>00</span>{ __('Seconds', 'benenson') }</p>
             </div>
           </div>
+          <div className="countdownTimer-reveal">
+            <RichText
+              tagName="h2"
+              className="countdownTimer-title"
+              onChange={ newTitle => setAttributes({ revealTitle: newTitle }) }
+              value={ revealTitle }
+              placeholder={ __('(Insert Reveal Title)', 'benenson') }
+              keepPlaceholderOnFocus={ true }
+              formattingControls={ [] }
+              format="string"
+            />
+            <RichText
+              tagName="h2"
+              className="countdownTimer-content"
+              onChange={ newContent => setAttributes({ revealContent: newContent }) }
+              value={ revealContent }
+              placeholder={ __('(Insert Reveal Content)', 'benenson') }
+              keepPlaceholderOnFocus={ true }
+              formattingControls={ [] }
+              format="string"
+            />
+            <div className="countdownTimer-btn btn">
+              <RichText
+                tagName="p"
+                onChange={ newCtaText => setAttributes({ revealBtnText: newCtaText }) }
+                value={ revealBtnText }
+                placeholder={ __('(Insert Link text)', 'benenson') }
+                keepPlaceholderOnFocus={ true }
+                formattingControls={ [] }
+                format="string"
+              />
+              <URLInputButton
+                url={ revealBtnLink }
+                onChange={ newCtaLink => setAttributes({ revealBtnLink: newCtaLink }) }
+              />
+            </div>
+          </div>
         </div>
       </Fragment>
     );
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 329ddaa..f6116c8 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -28,6 +28,18 @@ registerBlockType('benenson/block-countdown', {
     date: {
       type: 'string',
     },
+    revealTitle: {
+      type: 'string',
+    },
+    revealContent: {
+      type: 'string',
+    },
+    revealBtnText: {
+      type: 'string',
+    },
+    revealBtnUrl: {
+      type: 'string',
+    },
     backgroundColor: {
       type: 'string',
     },
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index 3aa46d5..afa8637 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -5,7 +5,6 @@ const init = () => {
       let hours = 0;
       let minutes = 0;
       let seconds = 0;
-      let count = 0;
 
       const daysElement = timer.querySelector('.countdownTimer-days span');
       const hoursElement = timer.querySelector('.countdownTimer-hours span');
@@ -18,8 +17,6 @@ const init = () => {
       }
 
       const calculate = () => {
-        count += 1;
-
         let startDate = new Date();
         startDate = startDate.getTime();
 
@@ -27,7 +24,7 @@ const init = () => {
         let timeRemaining = parseInt((endDate - startDate) / 1000, 10);
 
         if (timeRemaining < 0) {
-          timer.classList.add('countdownTimer--set');
+          timer.classList.add('is-finished');
           return;
         }
 
@@ -50,10 +47,6 @@ const init = () => {
         hoursElement.innerHTML = (`0${hours}`).slice(-2);
         minutesElement.innerHTML = (`0${minutes}`).slice(-2);
         secondsElement.innerHTML = (`0${seconds}`).slice(-2);
-
-        if (count >= 1) {
-          timer.classList.add('countdownTimer--set');
-        }
       };
 
       setInterval(calculate, 1000);
diff --git a/src/styles/components/countdown-timer/_editor.scss b/src/styles/components/countdown-timer/_editor.scss
index 30a718e..007199c 100644
--- a/src/styles/components/countdown-timer/_editor.scss
+++ b/src/styles/components/countdown-timer/_editor.scss
@@ -1,3 +1,9 @@
 .countdownTimer-title {
   @include font-size(28px);
 }
+
+.countdownTimer-reveal {
+  background-color: rgba($color-white, .5);
+  margin-top: 40px;
+  padding: 20px;
+}

From f0b22faebb713a4fa5eadbecb9765c5e7cd1aa48 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 5 Feb 2019 16:36:20 +0000
Subject: [PATCH 10/20] Add ref to block.

---
 block-languages/benenson-blocks.pot           | 61 +++++++++++--------
 includes/blocks/countdown-timer/render.php    |  2 +-
 includes/scripts-and-styles.php               |  4 ++
 .../countdown-timer/DisplayComponent.js       | 15 ++++-
 src/scripts/blocks/countdown-timer/index.js   |  3 +
 5 files changed, 56 insertions(+), 29 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index c506ae2..67780c8 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -88,7 +88,8 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:32
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:45
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -97,7 +98,8 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:35
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -127,11 +129,13 @@ msgstr ""
 #: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:51
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:65
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:66
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -245,7 +249,7 @@ msgid "Alignment"
 msgstr ""
 
 #: src/scripts/blocks/blockquote/index.js:252
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:53
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:66
 msgid "Text Colour"
 msgstr ""
 
@@ -407,62 +411,65 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:102
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:109
+#: src/scripts/blocks/key-facts/fact.js:30
+#: src/scripts/blocks/key-facts/index.js:79
+#: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:110
+#: src/scripts/blocks/media-aside/DisplayComponent.js:83
+#: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+#: src/scripts/blocks/post-list/components/editable/LinkList.js:29
+#: src/scripts/blocks/post-list/components/editable/PostItem.js:55
+#: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
+msgid "(Insert Title)"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:115
 msgid "Days"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:105
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:118
 msgid "Hours"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:121
 msgid "Minutes"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:111
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:124
 msgid "Seconds"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:120
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:133
 msgid "(Insert Reveal Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:130
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:143
 msgid "(Insert Reveal Content)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:140
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:153
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:154
 #: src/scripts/blocks/media-aside/DisplayComponent.js:103
 msgid "(Insert Link text)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:63
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:76
 msgid "Background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:73
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:86
 msgid "Remove background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:76
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:90
 #: src/scripts/blocks/header/DisplayComponent.js:152
 #: src/scripts/blocks/section/DisplayComponent.js:105
 msgid "Background Image"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:95
-#: src/scripts/blocks/key-facts/fact.js:30
-#: src/scripts/blocks/key-facts/index.js:79
-#: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/media-aside/DisplayComponent.js:83
-#: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:92
-#: src/scripts/blocks/post-list/components/editable/LinkList.js:29
-#: src/scripts/blocks/post-list/components/editable/PostItem.js:55
-#: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
-msgid "(Insert Title)"
-msgstr ""
-
 #: src/scripts/blocks/countdown-timer/index.js:17
 msgid "Countdown Timer"
 msgstr ""
diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index b65dbf1..d640544 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -8,7 +8,7 @@
  */
 if ( ! function_exists( 'benenson_render_countdown_timer_block' ) ) {
 	function benenson_render_countdown_timer_block( array $attributes = [] ) {
-		$required = [ 'title', 'date' ];
+		$required = [ 'countdownId', 'title', 'date' ];
 		foreach ( $required as $req ) {
 			if ( ! isset( $attributes[ $req ] ) ) {
 				$attributes[ $req ] = '';
diff --git a/includes/scripts-and-styles.php b/includes/scripts-and-styles.php
index ce957db..54d8302 100644
--- a/includes/scripts-and-styles.php
+++ b/includes/scripts-and-styles.php
@@ -84,6 +84,10 @@ function benenson_scripts() {
 			wp_enqueue_script( 'comment-reply' );
 		}
 
+		wp_localize_script( 'global-scripts', 'benenson_data', [
+			'post_id' => get_the_ID(),
+		] );
+
 		if ( ! is_home() && ! is_archive() && ! is_search() ) {
 			return;
 		}
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 56977dc..b2e3afb 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -1,5 +1,7 @@
 import classnames from 'classnames';
 
+const randId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
+
 const { __ } = wp.i18n;
 const { Component, Fragment } = wp.element;
 const {
@@ -12,9 +14,20 @@ const { applyFilters } = wp.hooks;
 const { PostMediaSelector } = benenson.components;
 
 class DisplayComponent extends Component {
+  componentDidMount() {
+    const { attributes, setAttributes } = this.props;
+
+    if (!attributes.countdownId) {
+      setAttributes({
+        countdownId: randId(),
+      });
+    }
+  }
+
   render() {
     const { attributes, setAttributes } = this.props;
     const {
+      countdownId = '',
       date = new Date(),
       title = '',
       revealTitle = '',
@@ -86,7 +99,7 @@ class DisplayComponent extends Component {
             />
           </PanelBody>
         </InspectorControls>
-        <div className={ classes } style={ styles }>
+        <div id={ countdownId } className={ classes } style={ styles }>
           <RichText
             tagName="h2"
             className="countdownTimer-title"
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index f6116c8..8ec43d9 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -22,6 +22,9 @@ registerBlockType('benenson/block-countdown', {
   },
 
   attributes: {
+    countdownId: {
+      type: 'string',
+    },
     title: {
       type: 'string',
     },

From e00bf1af2fee52762e44af994f5ab960684b0208 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Wed, 6 Feb 2019 11:25:37 +0000
Subject: [PATCH 11/20] Add rest api route for countdown timer block.

---
 block-languages/benenson-blocks.pot           |  8 ---
 functions.php                                 |  1 +
 includes/blocks/countdown-timer/render.php    |  2 +-
 .../blocks/countdown-timer/reveal-content.php | 64 +++++++++++++++++++
 src/scripts/modules/countdown-timer.js        |  4 ++
 5 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 includes/blocks/countdown-timer/reveal-content.php

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 67780c8..4a0efa0 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -89,7 +89,6 @@ msgstr ""
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:45
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -99,7 +98,6 @@ msgstr ""
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -130,12 +128,10 @@ msgstr ""
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:65
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:66
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
@@ -412,11 +408,9 @@ msgid "Row Column"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:109
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:110
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
@@ -450,7 +444,6 @@ msgid "(Insert Reveal Content)"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:153
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:154
 #: src/scripts/blocks/media-aside/DisplayComponent.js:103
 msgid "(Insert Link text)"
 msgstr ""
@@ -464,7 +457,6 @@ msgid "Remove background colour"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:90
 #: src/scripts/blocks/header/DisplayComponent.js:152
 #: src/scripts/blocks/section/DisplayComponent.js:105
 msgid "Background Image"
diff --git a/functions.php b/functions.php
index 3418989..7e0da8d 100644
--- a/functions.php
+++ b/functions.php
@@ -32,6 +32,7 @@
 require_once realpath( get_template_directory() . '/includes/blocks/meta.php' );
 require_once realpath( get_template_directory() . '/includes/blocks/register.php' );
 require_once realpath( get_template_directory() . '/includes/blocks/templates.php' );
+require_once realpath( get_template_directory() . '/includes/blocks/countdown-timer/reveal-content.php' );
 require_once realpath( get_template_directory() . '/includes/rest-api/category-list.php' );
 require_once realpath( get_template_directory() . '/includes/rest-api/fetch-menu.php' );
 
diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index d640544..15452ef 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -40,7 +40,7 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 		spaceless();
 		?>
 
-		<div class="countdownTimer" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
+		<div id="<?php echo esc_attr( $attributes['countdownId'] ); ?>" class="countdownTimer" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
 			<?php
 			if ( ! empty ( $attributes['title'] ) ) {
 				printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
new file mode 100644
index 0000000..41de7c2
--- /dev/null
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -0,0 +1,64 @@
+<?php
+
+if ( class_exists( 'Benenson_Core_Reveal_Content' ) ) {
+	return new Benenson_Core_Reveal_Content();
+}
+
+class Benenson_Core_Reveal_Content {
+	/**
+	 * @var string - Api route namespace.
+	 */
+	private $namespace = 'benenson/v1';
+
+	/**
+	 * Benenson_Core_Reveal_Content constructor.
+	 */
+	public function __construct() {
+		add_action( 'rest_api_init', [ $this, 'register_routes' ] );
+	}
+
+	/**
+	 * Validate that a parameter is numeric.
+	 *
+	 * @param mixed $param - Paramater to check,
+	 * @return bool
+	 */
+	public function validate_numeric( $param ) {
+		return is_numeric( $param );
+	}
+
+	/**
+	 * Register api routes
+	 */
+	public function register_routes() {
+		register_rest_route( $this->namespace, '/reveal-content/(?P<id>\d+)', [
+			'callback' => [ $this, 'get_item' ],
+			'methods'  => 'GET',
+			'args'     => [
+				'id' => [
+					'validate_callback' => [ $this, 'validate_numeric' ],
+				],
+			],
+		] );
+	}
+
+	/**
+	 * Return an array containing the menu object and its rendered html.
+	 *
+	 * @param WP_REST_Request $request - Current Request.
+	 * @return array|mixed|WP_REST_Response
+	 */
+	public function get_item( WP_REST_Request $request ) {
+		$object = get_post_field('post_content', $request->get_param( 'id' ));
+
+		if ( ! $object ) {
+			return rest_ensure_response(
+				new WP_Error( 'rest_invalid_param', 'Content not found', [ 'status' => 404 ] )
+			);
+		}
+
+		return [
+			'test'  => 'test',
+		];
+	}
+}
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index afa8637..4268279 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -1,6 +1,10 @@
+const { benenson_data: benensonData } = window;
+
 const init = () => {
   Array.from(document.querySelectorAll('.countdownTimer'))
     .forEach((timer) => {
+      console.log(benensonData.post_id);
+
       let days = 0;
       let hours = 0;
       let minutes = 0;

From 2fd6eb3323b097c4bf31f5323fb7424c9586b8a2 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Wed, 6 Feb 2019 17:27:53 +0000
Subject: [PATCH 12/20] Show reveal content.

---
 includes/blocks/countdown-timer/render.php    | 141 +++++++++++-------
 .../blocks/countdown-timer/reveal-content.php |  25 +++-
 .../countdown-timer/DisplayComponent.js       |   8 +-
 src/scripts/modules/countdown-timer.js        |  54 ++++++-
 .../components/countdown-timer/_main.scss     |  14 ++
 5 files changed, 179 insertions(+), 63 deletions(-)

diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index 15452ef..01354e8 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -15,75 +15,110 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 			}
 		}
 
-		$days    = 00;
-		$hours   = 00;
-		$minutes = 00;
-		$seconds = 00;
+		$days           = '0';
+		$hours          = '00';
+		$minutes        = '00';
+		$seconds        = '00';
+		$time_remaining = 0;
 
 		if ( ! empty ( $attributes['date'] ) ) {
 			$start_date     = time();
 			$end_date       = strtotime( $attributes['date'] );
 			$time_remaining = $end_date - $start_date;
 
-			$days            = intval( $time_remaining / 86400 );
-			$time_remaining %= 86400;
+			if ( $time_remaining > 0 ) {
+				$days            = intval( $time_remaining / 86400 );
+				$time_remaining %= 86400;
 
-			$hours           = str_pad( intval( $time_remaining / 3600 ), 2, '0', STR_PAD_LEFT );
-			$time_remaining %= 3600;
+				$hours           = str_pad( intval( $time_remaining / 3600 ), 2, '0', STR_PAD_LEFT );
+				$time_remaining %= 3600;
 
-			$minutes         = str_pad( intval( $time_remaining / 60 ), 2, '0', STR_PAD_LEFT );
-			$time_remaining %= 60;
+				$minutes         = str_pad( intval( $time_remaining / 60 ), 2, '0', STR_PAD_LEFT );
+				$time_remaining %= 60;
 
-			$seconds = str_pad( $time_remaining, 2, '0', STR_PAD_LEFT );
+				$seconds = str_pad( $time_remaining, 2, '0', STR_PAD_LEFT );
+			}
 		}
 
+		$finished = $time_remaining > 0 ? '' : 'is-finished';
+
 		spaceless();
 		?>
 
-		<div id="<?php echo esc_attr( $attributes['countdownId'] ); ?>" class="countdownTimer" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
-			<?php
-			if ( ! empty ( $attributes['title'] ) ) {
-				printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
-			}
-			?>
-			<div class="countdownTimer-items">
-				<div class="countdownTimer-item countdownTimer-days">
-				<?php
-				printf(
-					'<p><span>%s</span>%s</p>',
-					esc_attr( $days ),
-					esc_html__( 'Days', 'benenson' )
-				);
-				?>
-				</div>
-				<div class="countdownTimer-item countdownTimer-hours">
-				<?php
-				printf(
-					'<p><span>%s</span>%s</p>',
-					esc_attr( $hours ),
-					esc_html__( 'Hours', 'benenson' )
-				);
-				?>
+		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
+			<?php if ( $time_remaining > 0 ) { ?>
+				<div class="countdownTimer-container">
+					<?php
+					if ( ! empty ( $attributes['title'] ) ) {
+						printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
+					}
+					?>
+					<div class="countdownTimer-items">
+						<div class="countdownTimer-item countdownTimer-days">
+						<?php
+						printf(
+							'<p><span>%s</span>%s</p>',
+							esc_attr( $days ),
+							esc_html__( 'Days', 'benenson' )
+						);
+						?>
+						</div>
+						<div class="countdownTimer-item countdownTimer-hours">
+						<?php
+						printf(
+							'<p><span>%s</span>%s</p>',
+							esc_attr( $hours ),
+							esc_html__( 'Hours', 'benenson' )
+						);
+						?>
+						</div>
+						<div class="countdownTimer-item countdownTimer-mins">
+						<?php
+						printf(
+							'<p><span>%s</span>%s</p>',
+							esc_attr( $minutes ),
+							esc_html__( 'Minutes', 'benenson' )
+						);
+						?>
+						</div>
+						<div class="countdownTimer-item countdownTimer-secs">
+						<?php
+						printf(
+							'<p><span>%s</span>%s</p>',
+							esc_attr( $seconds ),
+							esc_html__( 'Seconds', 'benenson' )
+						);
+						?>
+						</div>
+					</div>
 				</div>
-				<div class="countdownTimer-item countdownTimer-mins">
-				<?php
-				printf(
-					'<p><span>%s</span>%s</p>',
-					esc_attr( $minutes ),
-					esc_html__( 'Minutes', 'benenson' )
-				);
-				?>
-				</div>
-				<div class="countdownTimer-item countdownTimer-secs">
-				<?php
-				printf(
-					'<p><span>%s</span>%s</p>',
-					esc_attr( $seconds ),
-					esc_html__( 'Seconds', 'benenson' )
-				);
-				?>
+			<?php } else { ?>
+				<div class="coutdownTimer-revealContainer">
+					<?php
+					if ( ! empty ( $attributes['revealTitle'] ) ) {
+						printf(
+							'<h2 class="countdownTimer-title">%s</h2>',
+							esc_attr( $attributes['revealTitle'] )
+						);
+					}
+
+					if ( ! empty ( $attributes['revealContent'] ) ) {
+						printf(
+							'<p class="countdownTimer-content">%s</p>',
+							esc_attr( $attributes['revealContent'] )
+						);
+					}
+
+					if ( ! empty ( $attributes['revealBtnUrl'] ) && ! empty ( $attributes['revealBtnText'] ) ) {
+						printf(
+							'<a href="%s" class="btn countdownTimer-btn">%s</a>',
+							esc_url( $attributes['revealBtnUrl'] ),
+							esc_attr( $attributes['revealBtnText'] )
+						);
+					}
+					?>
 				</div>
-			</div>
+			<?php } ?>
 		</div>
 
 		<?php
diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
index 41de7c2..b718765 100644
--- a/includes/blocks/countdown-timer/reveal-content.php
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -31,7 +31,7 @@ public function validate_numeric( $param ) {
 	 * Register api routes
 	 */
 	public function register_routes() {
-		register_rest_route( $this->namespace, '/reveal-content/(?P<id>\d+)', [
+		register_rest_route( $this->namespace, '/reveal-content/(?P<id>\d+)/(?P<ref>\w+)', [
 			'callback' => [ $this, 'get_item' ],
 			'methods'  => 'GET',
 			'args'     => [
@@ -49,7 +49,7 @@ public function register_routes() {
 	 * @return array|mixed|WP_REST_Response
 	 */
 	public function get_item( WP_REST_Request $request ) {
-		$object = get_post_field('post_content', $request->get_param( 'id' ));
+		$object = get_post_field( 'post_content', $request->get_param( 'id' ) );
 
 		if ( ! $object ) {
 			return rest_ensure_response(
@@ -57,8 +57,27 @@ public function get_item( WP_REST_Request $request ) {
 			);
 		}
 
+		$blocks      = parse_blocks( $object );
+		$block_attrs = $this->get_block( $blocks, $request->get_param( 'ref' ) );
+
 		return [
-			'test'  => 'test',
+			'attrs' => $block_attrs,
 		];
 	}
+
+	public function get_block( array $blocks, string $ref ) {
+		$value = false;
+
+		foreach ( $blocks as $block ) {
+			if ( isset( $block['attrs']['countdownId'] ) && $block['attrs']['countdownId'] === $ref ) {
+				$value = $block['attrs'];
+			}
+
+			if ( $block['innerBlocks'] ) {
+				$value = $this->get_block( $block['innerBlocks'], $ref );
+			}
+		}
+
+		return $value;
+	}
 }
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index b2e3afb..d0edfc9 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -33,7 +33,7 @@ class DisplayComponent extends Component {
       revealTitle = '',
       revealContent = '',
       revealBtnText = '',
-      revealBtnLink = '',
+      revealBtnUrl = '',
       backgroundColor = '',
       backgroundId = null,
       backgroundUrl = '',
@@ -99,7 +99,7 @@ class DisplayComponent extends Component {
             />
           </PanelBody>
         </InspectorControls>
-        <div id={ countdownId } className={ classes } style={ styles }>
+        <div className={ classes } style={ styles }>
           <RichText
             tagName="h2"
             className="countdownTimer-title"
@@ -156,8 +156,8 @@ class DisplayComponent extends Component {
                 format="string"
               />
               <URLInputButton
-                url={ revealBtnLink }
-                onChange={ newCtaLink => setAttributes({ revealBtnLink: newCtaLink }) }
+                url={ revealBtnUrl }
+                onChange={ newCtaLink => setAttributes({ revealBtnUrl: newCtaLink }) }
               />
             </div>
           </div>
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index 4268279..ad944d9 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -3,8 +3,12 @@ const { benenson_data: benensonData } = window;
 const init = () => {
   Array.from(document.querySelectorAll('.countdownTimer'))
     .forEach((timer) => {
-      console.log(benensonData.post_id);
+      // return if timer has already finished
+      if (timer.classList.contains('is-finished')) {
+        return;
+      }
 
+      let finished = false;
       let days = 0;
       let hours = 0;
       let minutes = 0;
@@ -15,6 +19,7 @@ const init = () => {
       const minutesElement = timer.querySelector('.countdownTimer-mins span');
       const secondsElement = timer.querySelector('.countdownTimer-secs span');
       const endDate = new Date(timer.dataset.date).getTime();
+      const timerRef = timer.dataset.ref;
 
       if (typeof endDate !== 'number') {
         return;
@@ -28,7 +33,7 @@ const init = () => {
         let timeRemaining = parseInt((endDate - startDate) / 1000, 10);
 
         if (timeRemaining < 0) {
-          timer.classList.add('is-finished');
+          finished = true;
           return;
         }
 
@@ -53,7 +58,50 @@ const init = () => {
         secondsElement.innerHTML = (`0${seconds}`).slice(-2);
       };
 
-      setInterval(calculate, 1000);
+      const timerFinished = () => {
+        // HTTP request for retreiving reveal information
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = function revealContent() {
+          if (this.readyState === 4) {
+            const jsonResponse = JSON.parse(this.responseText);
+
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('coutdownTimer-revealContainer');
+
+            const title = document.createElement('h2');
+            const titleText = document.createTextNode(jsonResponse.attrs.revealTitle);
+            title.appendChild(titleText);
+            title.classList.add('countdownTimer-title');
+            wrapper.append(title);
+
+            const content = document.createElement('p');
+            const contentText = document.createTextNode(jsonResponse.attrs.revealContent);
+            content.appendChild(contentText);
+            content.classList.add('countdownTimer-content');
+            wrapper.append(content);
+
+            const button = document.createElement('a');
+            const buttonText = document.createTextNode('Hi there and greetings!');
+            button.appendChild(buttonText);
+            button.classList.add('btn', 'countdownTimer-btn');
+            wrapper.append(button);
+
+            document.querySelector(`.countdownTimer[data-ref="${timerRef}"]`).append(wrapper);
+            timer.classList.add('is-finished');
+          }
+        };
+
+        xhr.open('GET', `/wp-json/benenson/v1/reveal-content/${benensonData.post_id}/${timerRef}`);
+        xhr.send();
+      };
+
+      const start = setInterval(() => {
+        calculate();
+        if (finished) {
+          timerFinished();
+          clearInterval(start);
+        }
+      }, 1000);
     });
 };
 
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index 0fd655c..539ef04 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -47,3 +47,17 @@
 .countdownTimer.is-black .countdownTimer-title {
   color: $color-black;
 }
+
+// .countdownTimer-container {
+//   transition: all .5s ease;
+// }
+
+.countdownTimer.is-finished .countdownTimer-container {
+  // height: 0px;
+  // opacity: 0;
+  display: none;
+}
+
+.countdownTimer.is-finished .coutdownTimer-revealContainer {
+//   transition: all .5s ease;
+}

From cbfd984df23d04a8187cb4cd47522a5a3d17bdab Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 7 Feb 2019 13:03:03 +0000
Subject: [PATCH 13/20] Add toggle to hide timer once finished.

---
 block-languages/benenson-blocks.pot           | 41 +++++++----
 includes/block-translations.php               | 70 ++++++++++++-------
 includes/blocks/countdown-timer/render.php    |  5 +-
 .../countdown-timer/DisplayComponent.js       |  9 ++-
 src/scripts/blocks/countdown-timer/index.js   |  3 +
 src/scripts/modules/countdown-timer.js        | 12 ++--
 .../components/countdown-timer/_main.scss     | 10 +--
 7 files changed, 90 insertions(+), 60 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 4a0efa0..5b99b5a 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -88,7 +88,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:39
 #: src/scripts/blocks/blockquote/index.js:232
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:45
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 #: src/scripts/blocks/header/DisplayComponent.js:95
 #: src/scripts/blocks/menu/DisplayComponent.js:12
 #: src/scripts/blocks/section/DisplayComponent.js:49
@@ -97,7 +97,7 @@ msgstr ""
 
 #: src/scripts/blocks/appearance-options/index.js:42
 #: src/scripts/blocks/blockquote/index.js:226
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:48
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 #: src/scripts/blocks/header/DisplayComponent.js:98
 msgid "Black"
 msgstr ""
@@ -127,12 +127,13 @@ msgstr ""
 #: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 #: src/scripts/blocks/category-list/DisplayComponent.js:62
 #: src/scripts/blocks/columns/DisplayComponent.js:28
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:65
 #: src/scripts/blocks/header/DisplayComponent.js:120
 #: src/scripts/blocks/iframe/DisplayComponent.js:89
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
 msgid "Options"
@@ -245,7 +246,7 @@ msgid "Alignment"
 msgstr ""
 
 #: src/scripts/blocks/blockquote/index.js:252
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:66
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:73
 msgid "Text Colour"
 msgstr ""
 
@@ -407,56 +408,66 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:115
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:114
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
 msgid "(Insert Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:115
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:122
 msgid "Days"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:118
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:125
 msgid "Hours"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:121
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:128
 msgid "Minutes"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:124
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:131
 msgid "Seconds"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:133
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:140
 msgid "(Insert Reveal Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:143
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:150
 msgid "(Insert Reveal Content)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:153
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:160
 #: src/scripts/blocks/media-aside/DisplayComponent.js:103
 msgid "(Insert Link text)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:76
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:67
+msgid "Hide timer"
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:68
+msgid "When the timer has finished hide it from users."
+msgstr ""
+
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
 msgid "Background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:86
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:93
 msgid "Remove background colour"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:89
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:96
 #: src/scripts/blocks/header/DisplayComponent.js:152
 #: src/scripts/blocks/section/DisplayComponent.js:105
 msgid "Background Image"
diff --git a/includes/block-translations.php b/includes/block-translations.php
index 003436a..fef0833 100644
--- a/includes/block-translations.php
+++ b/includes/block-translations.php
@@ -68,7 +68,7 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:39
 	// Reference: src/scripts/blocks/blockquote/index.js:232
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:28
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:46
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:95
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:12
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:49
@@ -76,7 +76,7 @@
 
 	// Reference: src/scripts/blocks/appearance-options/index.js:42
 	// Reference: src/scripts/blocks/blockquote/index.js:226
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:31
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:98
 	__( 'Black', 'benenson' ),
 
@@ -100,12 +100,13 @@
 	// Reference: src/scripts/blocks/call-to-action/DisplayComponent.js:46
 	// Reference: src/scripts/blocks/category-list/DisplayComponent.js:62
 	// Reference: src/scripts/blocks/columns/DisplayComponent.js:28
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:47
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:65
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:120
 	// Reference: src/scripts/blocks/iframe/DisplayComponent.js:89
 	// Reference: src/scripts/blocks/link/DisplayComponent.js:53
 	// Reference: src/scripts/blocks/menu/DisplayComponent.js:96
 	// Reference: src/scripts/blocks/post-list/DisplayComponent.js:91
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:80
 	// Reference: src/scripts/blocks/slider/DisplayComponent.js:215
 	__( 'Options', 'benenson' ),
@@ -198,7 +199,7 @@
 	__( 'Alignment', 'benenson' ),
 
 	// Reference: src/scripts/blocks/blockquote/index.js:252
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:49
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:73
 	__( 'Text Colour', 'benenson' ),
 
 	// Reference: src/scripts/blocks/blockquote/index.js:258
@@ -321,40 +322,58 @@
 	// Reference: src/scripts/blocks/columns/row-column.js:9
 	__( 'Row Column', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:101
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:115
+	// Reference: src/scripts/blocks/key-facts/fact.js:30
+	// Reference: src/scripts/blocks/key-facts/index.js:79
+	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:114
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
+	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
+	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
+	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
+	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
+	__( '(Insert Title)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:122
+	__( 'Days', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:125
 	__( 'Hours', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:104
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:128
 	__( 'Minutes', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:107
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:131
 	__( 'Seconds', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:59
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:140
+	__( '(Insert Reveal Title)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:150
+	__( '(Insert Reveal Content)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:160
+	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:103
+	__( '(Insert Link text)', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:67
+	__( 'Hide timer', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:68
+	__( 'When the timer has finished hide it from users.', 'benenson' ),
+
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
 	__( 'Background colour', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:69
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:93
 	__( 'Remove background colour', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:72
+	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:96
 	// Reference: src/scripts/blocks/header/DisplayComponent.js:152
 	// Reference: src/scripts/blocks/section/DisplayComponent.js:105
 	__( 'Background Image', 'benenson' ),
 
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:91
-	// Reference: src/scripts/blocks/key-facts/fact.js:30
-	// Reference: src/scripts/blocks/key-facts/index.js:79
-	// Reference: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:83
-	// Reference: src/scripts/blocks/post-list/components/editable/GridItem.js:30
-	// Reference: src/scripts/blocks/post-list/components/editable/LinkList.js:29
-	// Reference: src/scripts/blocks/post-list/components/editable/PostItem.js:55
-	// Reference: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
-	__( '(Insert Title)', 'benenson' ),
-
-	// Reference: src/scripts/blocks/countdown-timer/DisplayComponent.js:98
-	__( 'Days', 'benenson' ),
-
 	// Reference: src/scripts/blocks/countdown-timer/index.js:17
 	__( 'Countdown Timer', 'benenson' ),
 
@@ -676,9 +695,6 @@
 	// Reference: src/scripts/blocks/logo-list/index.js:21
 	__( 'Add a repeatable logo block', 'benenson' ),
 
-	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:103
-	__( '(Insert Link text)', 'benenson' ),
-
 	// Reference: src/scripts/blocks/media-aside/DisplayComponent.js:57
 	__( 'Display in modal', 'benenson' ),
 
diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index 01354e8..06c59df 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -40,12 +40,13 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 			}
 		}
 
-		$finished = $time_remaining > 0 ? '' : 'is-finished';
+		$finished   = $time_remaining > 0 ? '' : 'is-finished';
+		$hide_timer = ! empty ( $attributes['hideTimer'] ) && $attributes['hideTimer'] ? 'data-hide-show=' . $attributes['hideTimer'] . '' : '';
 
 		spaceless();
 		?>
 
-		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
+		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" <?php echo esc_attr( $hide_timer ); ?> data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
 			<?php if ( $time_remaining > 0 ) { ?>
 				<div class="countdownTimer-container">
 					<?php
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index d0edfc9..20f178d 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -8,7 +8,7 @@ const {
   InspectorControls, RichText, URLInputButton,
 } = wp.editor;
 const {
-  PanelBody, Button, DateTimePicker, ColorPicker, SelectControl,
+  PanelBody, Button, DateTimePicker, ColorPicker, SelectControl, ToggleControl,
 } = wp.components;
 const { applyFilters } = wp.hooks;
 const { PostMediaSelector } = benenson.components;
@@ -38,6 +38,7 @@ class DisplayComponent extends Component {
       backgroundId = null,
       backgroundUrl = '',
       textColor = '',
+      hideTimer = false,
     } = attributes;
 
     // Note: US English spelling.
@@ -62,6 +63,12 @@ class DisplayComponent extends Component {
       <Fragment>
         <InspectorControls>
           <PanelBody title={ __('Options', 'benenson') }>
+            <ToggleControl
+              label={ __('Hide timer', 'benenson') }
+              help={ __('When the timer has finished hide it from users.', 'benenson') }
+              checked={ hideTimer }
+              onChange={ hideShow => setAttributes({ hideTimer: hideShow }) }
+            />
             <SelectControl
               label={ __('Text Colour', 'benenson') }
               value={ textColor }
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index 8ec43d9..e6855f7 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -55,6 +55,9 @@ registerBlockType('benenson/block-countdown', {
     textColor: {
       type: 'string',
     },
+    hideTimer: {
+      type: 'boolean',
+    },
   },
   edit: DisplayComponent,
 
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index ad944d9..8d5831b 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -69,25 +69,23 @@ const init = () => {
             wrapper.classList.add('coutdownTimer-revealContainer');
 
             const title = document.createElement('h2');
-            const titleText = document.createTextNode(jsonResponse.attrs.revealTitle);
-            title.appendChild(titleText);
+            title.innerText = jsonResponse.attrs.revealTitle;
             title.classList.add('countdownTimer-title');
             wrapper.append(title);
 
             const content = document.createElement('p');
-            const contentText = document.createTextNode(jsonResponse.attrs.revealContent);
-            content.appendChild(contentText);
+            content.innerText = jsonResponse.attrs.revealContent;
             content.classList.add('countdownTimer-content');
             wrapper.append(content);
 
             const button = document.createElement('a');
-            const buttonText = document.createTextNode('Hi there and greetings!');
-            button.appendChild(buttonText);
+            button.href = jsonResponse.attrs.revealBtnUrl;
+            button.innerText = jsonResponse.attrs.revealBtnText;
             button.classList.add('btn', 'countdownTimer-btn');
             wrapper.append(button);
 
-            document.querySelector(`.countdownTimer[data-ref="${timerRef}"]`).append(wrapper);
             timer.classList.add('is-finished');
+            document.querySelector(`.countdownTimer[data-ref="${timerRef}"]`).append(wrapper);
           }
         };
 
diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index 539ef04..36c4ffd 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -48,16 +48,10 @@
   color: $color-black;
 }
 
-// .countdownTimer-container {
-//   transition: all .5s ease;
-// }
-
 .countdownTimer.is-finished .countdownTimer-container {
-  // height: 0px;
-  // opacity: 0;
   display: none;
 }
 
-.countdownTimer.is-finished .coutdownTimer-revealContainer {
-//   transition: all .5s ease;
+.countdownTimer.is-finished[data-hide-show="1"]{
+  display: none;
 }

From d586d6e4c5c2fd37131da7c1a0624e60352f00d8 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 7 Feb 2019 13:07:53 +0000
Subject: [PATCH 14/20] Fix lint error.

---
 src/styles/components/countdown-timer/_main.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/components/countdown-timer/_main.scss b/src/styles/components/countdown-timer/_main.scss
index 36c4ffd..17fc7da 100644
--- a/src/styles/components/countdown-timer/_main.scss
+++ b/src/styles/components/countdown-timer/_main.scss
@@ -52,6 +52,6 @@
   display: none;
 }
 
-.countdownTimer.is-finished[data-hide-show="1"]{
+.countdownTimer.is-finished[data-hide-show="1"] {
   display: none;
 }

From 7078cc5b1c148ee541b07390c0993c7d2b4aa273 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Thu, 7 Feb 2019 14:14:57 +0000
Subject: [PATCH 15/20] Set background colour and image in php render.

---
 includes/blocks/countdown-timer/render.php | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index 06c59df..2a836d6 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -40,13 +40,15 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 			}
 		}
 
-		$finished   = $time_remaining > 0 ? '' : 'is-finished';
-		$hide_timer = ! empty ( $attributes['hideTimer'] ) && $attributes['hideTimer'] ? 'data-hide-show=' . $attributes['hideTimer'] . '' : '';
+		$finished         = $time_remaining > 0 ? '' : 'is-finished';
+		$hide_timer       = ! empty ( $attributes['hideTimer'] ) && $attributes['hideTimer'] ? 'data-hide-show=' . $attributes['hideTimer'] . '' : '';
+		$background_color = ! empty ( $attributes['backgroundColor'] ) ? 'background-color:' . $attributes['backgroundColor'] . ';' : '';
+		$background_image = ! empty ( $attributes['backgroundUrl'] ) ? 'background-image: url(' . $attributes['backgroundUrl'] . ');' : '';
 
 		spaceless();
 		?>
 
-		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" <?php echo esc_attr( $hide_timer ); ?> data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
+		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" style="<?php echo esc_attr( $background_color ) . esc_attr ( $background_image ); ?>" <?php echo esc_attr( $hide_timer ); ?> data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
 			<?php if ( $time_remaining > 0 ) { ?>
 				<div class="countdownTimer-container">
 					<?php

From 14c03966b0a40b5dc6785b78a70050d8c0e5905f Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 12 Feb 2019 15:24:28 +0000
Subject: [PATCH 16/20] Code review changes.

---
 block-languages/benenson-blocks.pot           | 21 +++++-----
 .../blocks/countdown-timer/reveal-content.php | 12 +-----
 .../countdown-timer/DisplayComponent.js       | 15 ++++---
 src/scripts/blocks/countdown-timer/index.js   |  2 +-
 src/scripts/modules/countdown-timer.js        | 39 +++++++++++--------
 5 files changed, 40 insertions(+), 49 deletions(-)

diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot
index 5b99b5a..225ab7f 100644
--- a/block-languages/benenson-blocks.pot
+++ b/block-languages/benenson-blocks.pot
@@ -133,7 +133,6 @@ msgstr ""
 #: src/scripts/blocks/link/DisplayComponent.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:96
 #: src/scripts/blocks/post-list/DisplayComponent.js:91
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:64
 #: src/scripts/blocks/section/DisplayComponent.js:80
 #: src/scripts/blocks/slider/DisplayComponent.js:215
 msgid "Options"
@@ -408,45 +407,43 @@ msgstr ""
 msgid "Row Column"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:115
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:114
 #: src/scripts/blocks/key-facts/fact.js:30
 #: src/scripts/blocks/key-facts/index.js:79
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:268
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:114
 #: src/scripts/blocks/media-aside/DisplayComponent.js:83
 #: src/scripts/blocks/post-list/components/editable/GridItem.js:30
 #: src/scripts/blocks/post-list/components/editable/LinkList.js:29
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:108
 #: src/scripts/blocks/post-list/components/editable/PostItem.js:55
 #: src/scripts/blocks/post-list/components/editable/SplitGridItem.js:38
 msgid "(Insert Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:122
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:121
 msgid "Days"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:125
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:124
 msgid "Hours"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:128
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:127
 msgid "Minutes"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:131
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:130
 msgid "Seconds"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:140
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:139
 msgid "(Insert Reveal Title)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:150
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:149
 msgid "(Insert Reveal Content)"
 msgstr ""
 
-#: src/scripts/blocks/countdown-timer/DisplayComponent.js:160
+#: src/scripts/blocks/countdown-timer/DisplayComponent.js:159
 #: src/scripts/blocks/media-aside/DisplayComponent.js:103
 msgid "(Insert Link text)"
 msgstr ""
@@ -456,7 +453,7 @@ msgid "Hide timer"
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:68
-msgid "When the timer has finished hide it from users."
+msgid "Hide the timer from users when the countdown has completed."
 msgstr ""
 
 #: src/scripts/blocks/countdown-timer/DisplayComponent.js:83
diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
index b718765..139d928 100644
--- a/includes/blocks/countdown-timer/reveal-content.php
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -17,16 +17,6 @@ public function __construct() {
 		add_action( 'rest_api_init', [ $this, 'register_routes' ] );
 	}
 
-	/**
-	 * Validate that a parameter is numeric.
-	 *
-	 * @param mixed $param - Paramater to check,
-	 * @return bool
-	 */
-	public function validate_numeric( $param ) {
-		return is_numeric( $param );
-	}
-
 	/**
 	 * Register api routes
 	 */
@@ -36,7 +26,7 @@ public function register_routes() {
 			'methods'  => 'GET',
 			'args'     => [
 				'id' => [
-					'validate_callback' => [ $this, 'validate_numeric' ],
+					'validate_callback' => is_numeric( $this ),
 				],
 			],
 		] );
diff --git a/src/scripts/blocks/countdown-timer/DisplayComponent.js b/src/scripts/blocks/countdown-timer/DisplayComponent.js
index 20f178d..9acbac3 100644
--- a/src/scripts/blocks/countdown-timer/DisplayComponent.js
+++ b/src/scripts/blocks/countdown-timer/DisplayComponent.js
@@ -65,7 +65,7 @@ class DisplayComponent extends Component {
           <PanelBody title={ __('Options', 'benenson') }>
             <ToggleControl
               label={ __('Hide timer', 'benenson') }
-              help={ __('When the timer has finished hide it from users.', 'benenson') }
+              help={ __('Hide the timer from users when the countdown has completed.', 'benenson') }
               checked={ hideTimer }
               onChange={ hideShow => setAttributes({ hideTimer: hideShow }) }
             />
@@ -90,18 +90,17 @@ class DisplayComponent extends Component {
               className="components-button is-button is-default is-large"
               onClick={ () => setAttributes({ backgroundColor: '' }) }
             >
-            { __('Remove background colour', 'benenson') }
+              { __('Remove background colour', 'benenson') }
             </Button>
           </PanelBody>
           <PanelBody title={ __('Background Image', 'benenson') }>
             <PostMediaSelector
               onUpdate={ (media) => {
-                  setAttributes({
-                    backgroundUrl: media ? media.source_url : '',
-                    backgroundId: media ? media.id : null,
-                  });
-                }
-              }
+                setAttributes({
+                  backgroundUrl: media ? media.source_url : '',
+                  backgroundId: media ? media.id : null,
+                });
+              } }
               mediaId={ backgroundId }
             />
           </PanelBody>
diff --git a/src/scripts/blocks/countdown-timer/index.js b/src/scripts/blocks/countdown-timer/index.js
index e6855f7..ea5b55e 100644
--- a/src/scripts/blocks/countdown-timer/index.js
+++ b/src/scripts/blocks/countdown-timer/index.js
@@ -16,7 +16,7 @@ const { PostMediaSelector } = benenson.components;
 registerBlockType('benenson/block-countdown', {
   title: __('Countdown Timer', 'benenson'),
   description: __('Set a future date to countdown to.', 'benenson'),
-  icon: 'download',
+  icon: 'clock',
   category: 'benenson',
   supports: {
   },
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index 8d5831b..d350087 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -45,8 +45,7 @@ const init = () => {
         hours = parseInt(timeRemaining / 3600, 10);
         timeRemaining %= 3600;
 
-        /* divide time remaining by number of seconds in a minute &
-        remove minutes from timeRemaining */
+        // divide time remaining by number of seconds in a min & remove mins from timeRemaining.
         minutes = parseInt(timeRemaining / 60, 10);
         timeRemaining %= 60;
 
@@ -68,21 +67,27 @@ const init = () => {
             const wrapper = document.createElement('div');
             wrapper.classList.add('coutdownTimer-revealContainer');
 
-            const title = document.createElement('h2');
-            title.innerText = jsonResponse.attrs.revealTitle;
-            title.classList.add('countdownTimer-title');
-            wrapper.append(title);
-
-            const content = document.createElement('p');
-            content.innerText = jsonResponse.attrs.revealContent;
-            content.classList.add('countdownTimer-content');
-            wrapper.append(content);
-
-            const button = document.createElement('a');
-            button.href = jsonResponse.attrs.revealBtnUrl;
-            button.innerText = jsonResponse.attrs.revealBtnText;
-            button.classList.add('btn', 'countdownTimer-btn');
-            wrapper.append(button);
+            if (jsonResponse.attrs.revealTitle !== '') {
+              const title = document.createElement('h2');
+              title.innerText = jsonResponse.attrs.revealTitle;
+              title.classList.add('countdownTimer-title');
+              wrapper.append(title);
+            }
+
+            if (jsonResponse.attrs.revealContent !== '') {
+              const content = document.createElement('p');
+              content.innerText = jsonResponse.attrs.revealContent;
+              content.classList.add('countdownTimer-content');
+              wrapper.append(content);
+            }
+
+            if (jsonResponse.attrs.revealBtnUrl !== '' && jsonResponse.attrs.revealBtnText !== '') {
+              const button = document.createElement('a');
+              button.href = jsonResponse.attrs.revealBtnUrl;
+              button.innerText = jsonResponse.attrs.revealBtnText;
+              button.classList.add('btn', 'countdownTimer-btn');
+              wrapper.append(button);
+            }
 
             timer.classList.add('is-finished');
             document.querySelector(`.countdownTimer[data-ref="${timerRef}"]`).append(wrapper);

From 754450b3c7213107381f4e4a0cead9f776a92bea Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Tue, 12 Feb 2019 15:34:55 +0000
Subject: [PATCH 17/20] Check property is not empty.

---
 includes/blocks/countdown-timer/reveal-content.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
index 139d928..0607505 100644
--- a/includes/blocks/countdown-timer/reveal-content.php
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -63,7 +63,7 @@ public function get_block( array $blocks, string $ref ) {
 				$value = $block['attrs'];
 			}
 
-			if ( $block['innerBlocks'] ) {
+			if ( ! empty ( $block['innerBlocks'] ) ) {
 				$value = $this->get_block( $block['innerBlocks'], $ref );
 			}
 		}

From 129fe4fff88e1b32455e034dc2a78c60c24f0df6 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Wed, 13 Feb 2019 14:24:06 +0000
Subject: [PATCH 18/20] Code review changes.

---
 includes/blocks/countdown-timer/render.php    | 116 +++++++-----------
 .../blocks/countdown-timer/reveal-content.php |   2 +-
 includes/scripts-and-styles.php               |   3 +-
 src/scripts/modules/countdown-timer.js        |   2 +-
 4 files changed, 49 insertions(+), 74 deletions(-)

diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index 2a836d6..44bca41 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -21,7 +21,7 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 		$seconds        = '00';
 		$time_remaining = 0;
 
-		if ( ! empty ( $attributes['date'] ) ) {
+		if ( ! empty( $attributes['date'] ) ) {
 			$start_date     = time();
 			$end_date       = strtotime( $attributes['date'] );
 			$time_remaining = $end_date - $start_date;
@@ -41,87 +41,61 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 		}
 
 		$finished         = $time_remaining > 0 ? '' : 'is-finished';
-		$hide_timer       = ! empty ( $attributes['hideTimer'] ) && $attributes['hideTimer'] ? 'data-hide-show=' . $attributes['hideTimer'] . '' : '';
-		$background_color = ! empty ( $attributes['backgroundColor'] ) ? 'background-color:' . $attributes['backgroundColor'] . ';' : '';
-		$background_image = ! empty ( $attributes['backgroundUrl'] ) ? 'background-image: url(' . $attributes['backgroundUrl'] . ');' : '';
+		$hide_timer       = ! empty( $attributes['hideTimer'] ) && $attributes['hideTimer'] ? sprintf( 'data-hide-show="%s"', esc_attr( $attributes['hideTimer'] ) ) : '';
+		$background_color = ! empty( $attributes['backgroundColor'] ) ? sprintf( 'background-color:%s', esc_attr( $attributes['backgroundColor'] ) ) : '';
+		$background_image = ! empty( $attributes['backgroundUrl'] ) ? sprintf( 'background-image: url(\'%s\');', esc_attr( $attributes['backgroundUrl'] ) ) : '';
 
 		spaceless();
 		?>
 
 		<div class="countdownTimer <?php echo esc_attr( $finished ); ?>" style="<?php echo esc_attr( $background_color ) . esc_attr ( $background_image ); ?>" <?php echo esc_attr( $hide_timer ); ?> data-ref="<?php echo esc_attr( $attributes['countdownId'] ); ?>" data-date="<?php echo esc_attr( $attributes['date'] ); ?>">
-			<?php if ( $time_remaining > 0 ) { ?>
-				<div class="countdownTimer-container">
+		<?php if ( $time_remaining > 0 ) : ?>
+			<div class="countdownTimer-container">
+				<?php
+				if ( ! empty( $attributes['title'] ) ) {
+					printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
+				}
+				?>
+				<div class="countdownTimer-items">
+					<div class="countdownTimer-item countdownTimer-days">
 					<?php
-					if ( ! empty ( $attributes['title'] ) ) {
-						printf( '<h2 class="countdownTimer-title">%s</h2>', wp_kses_post( $attributes['title'] ) );
-					}
+					printf( '<p><span>%s</span>%s</p>', esc_attr( $days ), esc_html__( 'Days', 'benenson' ) );
 					?>
-					<div class="countdownTimer-items">
-						<div class="countdownTimer-item countdownTimer-days">
-						<?php
-						printf(
-							'<p><span>%s</span>%s</p>',
-							esc_attr( $days ),
-							esc_html__( 'Days', 'benenson' )
-						);
-						?>
-						</div>
-						<div class="countdownTimer-item countdownTimer-hours">
-						<?php
-						printf(
-							'<p><span>%s</span>%s</p>',
-							esc_attr( $hours ),
-							esc_html__( 'Hours', 'benenson' )
-						);
-						?>
-						</div>
-						<div class="countdownTimer-item countdownTimer-mins">
-						<?php
-						printf(
-							'<p><span>%s</span>%s</p>',
-							esc_attr( $minutes ),
-							esc_html__( 'Minutes', 'benenson' )
-						);
-						?>
-						</div>
-						<div class="countdownTimer-item countdownTimer-secs">
-						<?php
-						printf(
-							'<p><span>%s</span>%s</p>',
-							esc_attr( $seconds ),
-							esc_html__( 'Seconds', 'benenson' )
-						);
-						?>
-						</div>
 					</div>
-				</div>
-			<?php } else { ?>
-				<div class="coutdownTimer-revealContainer">
+					<div class="countdownTimer-item countdownTimer-hours">
 					<?php
-					if ( ! empty ( $attributes['revealTitle'] ) ) {
-						printf(
-							'<h2 class="countdownTimer-title">%s</h2>',
-							esc_attr( $attributes['revealTitle'] )
-						);
-					}
-
-					if ( ! empty ( $attributes['revealContent'] ) ) {
-						printf(
-							'<p class="countdownTimer-content">%s</p>',
-							esc_attr( $attributes['revealContent'] )
-						);
-					}
-
-					if ( ! empty ( $attributes['revealBtnUrl'] ) && ! empty ( $attributes['revealBtnText'] ) ) {
-						printf(
-							'<a href="%s" class="btn countdownTimer-btn">%s</a>',
-							esc_url( $attributes['revealBtnUrl'] ),
-							esc_attr( $attributes['revealBtnText'] )
-						);
-					}
+						printf( '<p><span>%s</span>%s</p>', esc_attr( $hours ), esc_html__( 'Hours', 'benenson' ) );
+					?>
+					</div>
+					<div class="countdownTimer-item countdownTimer-mins">
+					<?php
+						printf( '<p><span>%s</span>%s</p>', esc_attr( $minutes ), esc_html__( 'Minutes', 'benenson' ) );
 					?>
+					</div>
+					<div class="countdownTimer-item countdownTimer-secs">
+					<?php
+						printf( '<p><span>%s</span>%s</p>', esc_attr( $seconds ), esc_html__( 'Seconds', 'benenson' ) );
+					?>
+					</div>
 				</div>
-			<?php } ?>
+			</div>
+		<?php else : ?>
+			<div class="coutdownTimer-revealContainer">
+				<?php
+				if ( ! empty( $attributes['revealTitle'] ) ) {
+					printf( '<h2 class="countdownTimer-title">%s</h2>', esc_attr( $attributes['revealTitle'] ) );
+				}
+
+				if ( ! empty( $attributes['revealContent'] ) ) {
+					printf( '<p class="countdownTimer-content">%s</p>', esc_attr( $attributes['revealContent'] ) );
+				}
+
+				if ( ! empty( $attributes['revealBtnUrl'] ) && ! empty ( $attributes['revealBtnText'] ) ) {
+					printf( '<a href="%s" class="btn countdownTimer-btn">%s</a>', esc_url( $attributes['revealBtnUrl'] ), esc_attr( $attributes['revealBtnText'] ) );
+				}
+				?>
+			</div>
+			<?php endif; ?>
 		</div>
 
 		<?php
diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
index 0607505..4adf51d 100644
--- a/includes/blocks/countdown-timer/reveal-content.php
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -63,7 +63,7 @@ public function get_block( array $blocks, string $ref ) {
 				$value = $block['attrs'];
 			}
 
-			if ( ! empty ( $block['innerBlocks'] ) ) {
+			if ( ! empty( $block['innerBlocks'] ) ) {
 				$value = $this->get_block( $block['innerBlocks'], $ref );
 			}
 		}
diff --git a/includes/scripts-and-styles.php b/includes/scripts-and-styles.php
index 54d8302..7828e44 100644
--- a/includes/scripts-and-styles.php
+++ b/includes/scripts-and-styles.php
@@ -85,7 +85,8 @@ function benenson_scripts() {
 		}
 
 		wp_localize_script( 'global-scripts', 'benenson_data', [
-			'post_id' => get_the_ID(),
+			'post_id'   => get_the_ID(),
+			'rest_base' => get_rest_url(),
 		] );
 
 		if ( ! is_home() && ! is_archive() && ! is_search() ) {
diff --git a/src/scripts/modules/countdown-timer.js b/src/scripts/modules/countdown-timer.js
index d350087..14f56c9 100644
--- a/src/scripts/modules/countdown-timer.js
+++ b/src/scripts/modules/countdown-timer.js
@@ -94,7 +94,7 @@ const init = () => {
           }
         };
 
-        xhr.open('GET', `/wp-json/benenson/v1/reveal-content/${benensonData.post_id}/${timerRef}`);
+        xhr.open('GET', `${benensonData.rest_base}benenson/v1/reveal-content/${benensonData.post_id}/${timerRef}`);
         xhr.send();
       };
 

From 7c69fbbe14414d4cb1866ba645da932e8dc25ce2 Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Wed, 13 Feb 2019 14:54:26 +0000
Subject: [PATCH 19/20] Change api validate_callback function.

---
 includes/blocks/countdown-timer/reveal-content.php | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/includes/blocks/countdown-timer/reveal-content.php b/includes/blocks/countdown-timer/reveal-content.php
index 4adf51d..263b027 100644
--- a/includes/blocks/countdown-timer/reveal-content.php
+++ b/includes/blocks/countdown-timer/reveal-content.php
@@ -26,7 +26,9 @@ public function register_routes() {
 			'methods'  => 'GET',
 			'args'     => [
 				'id' => [
-					'validate_callback' => is_numeric( $this ),
+					'validate_callback' => function ( $value ) {
+						return is_numeric( $value );
+					},
 				],
 			],
 		] );

From 7fdfc70a390563ab475457ee27879ab8cecf4d0f Mon Sep 17 00:00:00 2001
From: Connor Brough <connor@bigbitecreative.com>
Date: Wed, 13 Feb 2019 15:23:20 +0000
Subject: [PATCH 20/20] Minor syntax changes.

---
 includes/blocks/countdown-timer/render.php | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/includes/blocks/countdown-timer/render.php b/includes/blocks/countdown-timer/render.php
index 44bca41..2724ed6 100644
--- a/includes/blocks/countdown-timer/render.php
+++ b/includes/blocks/countdown-timer/render.php
@@ -58,24 +58,16 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 				?>
 				<div class="countdownTimer-items">
 					<div class="countdownTimer-item countdownTimer-days">
-					<?php
-					printf( '<p><span>%s</span>%s</p>', esc_attr( $days ), esc_html__( 'Days', 'benenson' ) );
-					?>
+						<?php printf( '<p><span>%s</span>%s</p>', esc_attr( $days ), esc_html__( 'Days', 'benenson' ) ); ?>
 					</div>
 					<div class="countdownTimer-item countdownTimer-hours">
-					<?php
-						printf( '<p><span>%s</span>%s</p>', esc_attr( $hours ), esc_html__( 'Hours', 'benenson' ) );
-					?>
+						<?php printf( '<p><span>%s</span>%s</p>', esc_attr( $hours ), esc_html__( 'Hours', 'benenson' ) ); ?>
 					</div>
 					<div class="countdownTimer-item countdownTimer-mins">
-					<?php
-						printf( '<p><span>%s</span>%s</p>', esc_attr( $minutes ), esc_html__( 'Minutes', 'benenson' ) );
-					?>
+						<?php printf( '<p><span>%s</span>%s</p>', esc_attr( $minutes ), esc_html__( 'Minutes', 'benenson' ) ); ?>
 					</div>
 					<div class="countdownTimer-item countdownTimer-secs">
-					<?php
-						printf( '<p><span>%s</span>%s</p>', esc_attr( $seconds ), esc_html__( 'Seconds', 'benenson' ) );
-					?>
+						<?php printf( '<p><span>%s</span>%s</p>', esc_attr( $seconds ), esc_html__( 'Seconds', 'benenson' ) ); ?>
 					</div>
 				</div>
 			</div>
@@ -90,12 +82,12 @@ function benenson_render_countdown_timer_block( array $attributes = [] ) {
 					printf( '<p class="countdownTimer-content">%s</p>', esc_attr( $attributes['revealContent'] ) );
 				}
 
-				if ( ! empty( $attributes['revealBtnUrl'] ) && ! empty ( $attributes['revealBtnText'] ) ) {
+				if ( ! empty( $attributes['revealBtnUrl'] ) && ! empty( $attributes['revealBtnText'] ) ) {
 					printf( '<a href="%s" class="btn countdownTimer-btn">%s</a>', esc_url( $attributes['revealBtnUrl'] ), esc_attr( $attributes['revealBtnText'] ) );
 				}
 				?>
 			</div>
-			<?php endif; ?>
+		<?php endif; ?>
 		</div>
 
 		<?php