Fix #5

inc2734 · Aug 21, 2018 · 7d71b3a · 7d71b3a
1 parent b44a717
commit 7d71b3a
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 7 deletions.
diff --git a/block/faq/_block.scss b/block/faq/_block.scss
@@ -0,0 +1,42 @@
+.smacb-faq {
+  &__item {
+    border-bottom: 1px solid _lighter($_color-gray);
+    @include _padding(1, 0);
+
+    &:first-child {
+      border-top: 1px solid _lighter($_color-gray);
+    }
+
+    &__question,
+    &__answer {
+      position: relative;
+      @include _padding-left(1.25);
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        @include _font-size($_base-font-size-px * 1.5);
+        line-height: 1;
+        font-weight: normal;
+        color: $color-accent;
+      }
+    }
+
+    &__question {
+      @include _margin(0, 0, 1);
+      font-weight: bold;
+
+      &::before {
+        content: 'Q';
+      }
+    }
+
+    &__answer {
+      &::before {
+        content: 'A';
+      }
+    }
+  }
+}
diff --git a/block/faq/block.js b/block/faq/block.js
@@ -0,0 +1,113 @@
+'use strict';
+
+const { get, times } = lodash;
+const { registerBlockType } = wp.blocks;
+const { RichText, InspectorControls } = wp.editor;
+const { PanelBody, RangeControl } = wp.components;
+const { Fragment } = wp.element;
+const { __, sprintf } = wp.i18n;
+
+registerBlockType('snow-monkey-awesome-custom-blocks/faq', {
+  title: __('FAQ', 'snow-monkey-awesome-custom-blocks'),
+  icon: 'businessman',
+  category: 'smacb',
+  attributes: {
+    content: {
+      type: 'array',
+      default: [
+        {
+          question: [],
+          answer: [],
+        }
+      ],
+    },
+    rows: {
+      type: 'number',
+      default: 1,
+    },
+  },
+
+  edit({ attributes, setAttributes, isSelected }) {
+    const { rows, content } = attributes;
+
+    const generateUpdatedAttribute = (parent, index, attribute, value) => {
+      let newParent = [...parent];
+      newParent[ index ] = get(newParent, index, {});
+      newParent[ index ][ attribute ] = value;
+      return newParent;
+    }
+
+    return (
+      <Fragment>
+        <InspectorControls>
+          <PanelBody title={ __('FAQ Settings', 'snow-monkey-awesome-custom-blocks') }>
+            <RangeControl
+              label={ __('Rows', 'snow-monkey-awesome-custom-blocks') }
+              value={ rows }
+              onChange={ value => setAttributes({ rows: value }) }
+              min="1"
+              max="50"
+            />
+          </PanelBody>
+        </InspectorControls>
+
+        <div className="smacb-faq">
+          <div className="smacb-faq__body">
+            { times(rows, (index) => {
+              const question = get(content, [index, 'question'], []);
+              const answer   = get(content, [index, 'answer'], []);
+
+              return (
+                <div className="smacb-faq__item">
+                  <RichText
+                    className="smacb-faq__item__question"
+                    placeholder={ __('Write question…', 'snow-monkey-awesome-custom-blocks') }
+                    value={ question }
+                    formattingControls={ [] }
+                    multiline={ false }
+                    onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'question', value) }) }
+                  />
+
+                  <RichText
+                    className="smacb-faq__item__answer"
+                    placeholder={ __('Write answer…', 'snow-monkey-awesome-custom-blocks') }
+                    value={ answer }
+                    formattingControls={ [] }
+                    multiline="p"
+                    onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'answer', value) }) }
+                  />
+                </div>
+              );
+            } ) }
+          </div>
+        </div>
+      </Fragment>
+    );
+  },
+
+  save({ attributes }) {
+    const { rows, content } = attributes;
+
+    return (
+      <div className="smacb-faq">
+        <div className="smacb-faq__body">
+          { times(rows, (index) => {
+            const question = get(content, [index, 'question'], []);
+            const answer   = get(content, [index, 'answer'], []);
+
+            return (
+              <div className="smacb-faq__item">
+                <div className="smacb-faq__item__question">
+                  { question }
+                </div>
+                <div className="smacb-faq__item__answer">
+                  { answer }
+                </div>
+              </div>
+            );
+          } ) }
+        </div>
+      </div>
+    );
+  },
+} );
diff --git a/block/faq/block.php b/block/faq/block.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * @package snow-monkey-awesome-custom-blocks
+ * @author inc2734
+ * @license GPL-2.0+
+ */
+
+use Inc2734\WP_Customizer_Framework\Customizer_Framework;
+
+$cfs = Customizer_Framework::styles();
+
+$accent_color = get_theme_mod( 'accent-color' );
+
+$cfs->register(
+	[ '.smacb-faq__item__question::before', '.smacb-faq__item__answer::before' ],
+	'color: ' . $accent_color
+);
diff --git a/languages/snow-monkey-awesome-custom-blocks-ja.mo b/languages/snow-monkey-awesome-custom-blocks-ja.mo
diff --git a/languages/snow-monkey-awesome-custom-blocks-ja.po b/languages/snow-monkey-awesome-custom-blocks-ja.po
@@ -4,8 +4,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Snow Monkey Awesome Custom Blocks\n"
 "Report-Msgid-Bugs-To: https://make.wordpress.org/polyglots/\n"
-"POT-Creation-Date: 2018-08-21 14:26+0900\n"
-"PO-Revision-Date: 2018-08-21 14:27+0900\n"
+"POT-Creation-Date: 2018-08-21 20:46+0900\n"
+"PO-Revision-Date: 2018-08-21 20:47+0900\n"
 "Last-Translator: inc2734 <inc@2inc.org>\n"
 "Language-Team: Takashi Kitajima <inc@2inc.org>\n"
 "Language: ja_JP\n"
@@ -152,6 +152,26 @@ msgstr "ノーマルボタン"
 msgid "Full button"
 msgstr "フルサイズのボタン"
 
+#: block/faq/block.js:11
+msgid "FAQ"
+msgstr "FAQ"
+
+#: block/faq/block.js:43
+msgid "FAQ Settings"
+msgstr "FAQ 設定"
+
+#: block/faq/block.js:45 block/rating-box/block.js:46
+msgid "Rows"
+msgstr "行数"
+
+#: block/faq/block.js:64
+msgid "Write question…"
+msgstr "質問を書く…"
+
+#: block/faq/block.js:73
+msgid "Write answer…"
+msgstr "回答を書く…"
+
 #: block/pricing-table/block.js:11
 msgid "Pricing table"
 msgstr "価格表"
@@ -188,18 +208,14 @@ msgstr "レーティングボックス"
 msgid "Rating box Settings"
 msgstr "レーティングボックス設定"
 
-#: block/rating-box/block.js:46
-msgid "Rows"
-msgstr "行数"
-
 #: block/rating-box/block.js:61
 #, javascript-format
 msgid "(%d) Rating Settings"
 msgstr "(%d) レーティング設定"
 
 #: block/rating-box/block.js:65
 msgid "Rating"
-msgstr ""
+msgstr "レーティング"
 
 #: block/rating-box/block.js:72
 msgid "Color"

diff --git a/src/css/blocks.scss b/src/css/blocks.scss
@@ -25,3 +25,4 @@ $_font-path: '../../../../themes/snow-monkey/vendor/inc2734/wp-basis/src/assets/
 @import '../../block/section-has-items/block';
 @import '../../block/btn-box/block';
 @import '../../block/rating-box/block';
+@import '../../block/faq/block';
diff --git a/src/js/blocks.js b/src/js/blocks.js
@@ -11,3 +11,4 @@ import '../../block/section-has-bgimage/block.js';
 import '../../block/section-has-items/block.js';
 import '../../block/btn-box/block.js';
 import '../../block/rating-box/block.js';
+import '../../block/faq/block.js';