diff --git a/block/faq/_block.scss b/block/faq/_block.scss new file mode 100644 index 00000000..bd4297c7 --- /dev/null +++ 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 new file mode 100644 index 00000000..7b08974f --- /dev/null +++ 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 ( + + + + setAttributes({ rows: value }) } + min="1" + max="50" + /> + + + +
+
+ { times(rows, (index) => { + const question = get(content, [index, 'question'], []); + const answer = get(content, [index, 'answer'], []); + + return ( +
+ setAttributes({ content: generateUpdatedAttribute(content, index, 'question', value) }) } + /> + + setAttributes({ content: generateUpdatedAttribute(content, index, 'answer', value) }) } + /> +
+ ); + } ) } +
+
+ + ); + }, + + save({ attributes }) { + const { rows, content } = attributes; + + return ( +
+
+ { times(rows, (index) => { + const question = get(content, [index, 'question'], []); + const answer = get(content, [index, 'answer'], []); + + return ( +
+
+ { question } +
+
+ { answer } +
+
+ ); + } ) } +
+
+ ); + }, +} ); diff --git a/block/faq/block.php b/block/faq/block.php new file mode 100644 index 00000000..da80c866 --- /dev/null +++ b/block/faq/block.php @@ -0,0 +1,17 @@ +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 index 692ac9be..15d49806 100644 Binary files a/languages/snow-monkey-awesome-custom-blocks-ja.mo and b/languages/snow-monkey-awesome-custom-blocks-ja.mo differ diff --git a/languages/snow-monkey-awesome-custom-blocks-ja.po b/languages/snow-monkey-awesome-custom-blocks-ja.po index 117a27b6..edb372f2 100644 --- 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 \n" "Language-Team: Takashi Kitajima \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,10 +208,6 @@ 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" @@ -199,7 +215,7 @@ 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 index 69f7feda..1f4847e4 100644 --- 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 index 848bd334..2ea23936 100644 --- 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';