Skip to content

Commit 4e640d1

Browse files
inc2734inc2734
committed
Fix #15 
1 parent fafc2a6 commit 4e640d1

File tree

8 files changed

+306
-105
lines changed

8 files changed

+306
-105
lines changed

‎block/faq/_block.scss

+8-14
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,28 @@
99

1010
&__question,
1111
&__answer {
12-
position: relative;
13-
@include _padding-left(1.25);
12+
@include _clearfix();
1413

15-
&::before {
16-
position: absolute;
17-
top: 0;
18-
left: 0;
19-
display: block;
14+
&__label {
15+
@include _margin-right(1);
16+
float: left;
2017
@include _font-size($_base-font-size-px * 1.5);
2118
line-height: 1;
2219
font-weight: normal;
2320
color: $color-accent;
2421
}
22+
23+
&__body {
24+
overflow: hidden;
25+
}
2526
}
2627

2728
&__question {
2829
@include _margin(0, 0, 1);
2930
font-weight: bold;
30-
31-
&::before {
32-
content: 'Q';
33-
}
3431
}
3532

3633
&__answer {
37-
&::before {
38-
content: 'A';
39-
}
4034
}
4135
}
4236
}

‎block/faq/_editor.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
&__item {
33
&__question,
44
&__answer {
5-
&[data-is-placeholder-visible="true"] {
6-
position: absolute;
5+
.editor-rich-text {
6+
overflow: hidden;
77
}
88
}
99
}

‎block/faq/block.js

+93-26
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
const { get, times } = lodash;
44
const { registerBlockType } = wp.blocks;
5-
const { RichText, InspectorControls } = wp.editor;
6-
const { PanelBody, RangeControl } = wp.components;
5+
const { RichText, InspectorControls, ColorPalette } = wp.editor;
6+
const { PanelBody, RangeControl, BaseControl } = wp.components;
77
const { Fragment } = wp.element;
88
const { __, sprintf } = wp.i18n;
99

@@ -13,20 +13,36 @@ registerBlockType('snow-monkey-awesome-custom-blocks/faq', {
1313
category: 'smacb',
1414
attributes: {
1515
content: {
16+
type: 'array',
1617
source: 'query',
1718
selector: '.smacb-faq__item',
19+
default: [],
1820
query: {
1921
question: {
2022
type: 'array',
2123
source: 'children',
22-
selector: '.smacb-faq__item__question',
24+
selector: '.smacb-faq__item__question__body',
2325
default: [],
2426
},
2527
answer: {
2628
type: 'array',
2729
source: 'children',
28-
selector: '.smacb-faq__item__answer',
30+
selector: '.smacb-faq__item__answer__body',
2931
default: [],
32+
},
33+
questionColor: {
34+
type: 'string',
35+
default: '',
36+
source: 'attribute',
37+
selector: '.smacb-faq__item__question__label',
38+
attribute: 'data-color',
39+
},
40+
answerColor: {
41+
type: 'string',
42+
default: '',
43+
source: 'attribute',
44+
selector: '.smacb-faq__item__answer__label',
45+
attribute: 'data-color',
3046
}
3147
}
3248
},
@@ -58,33 +74,71 @@ registerBlockType('snow-monkey-awesome-custom-blocks/faq', {
5874
max="50"
5975
/>
6076
</PanelBody>
77+
78+
{ times(rows, (index) => {
79+
const questionColor = get(content, [index, 'questionColor'], '');
80+
const answerColor = get(content, [index, 'answerColor'], '');
81+
82+
return (
83+
<PanelBody
84+
title={ sprintf( __('(%d) Item Settings', 'snow-monkey-awesome-custom-blocks'), index + 1) }
85+
initialOpen={ false }
86+
>
87+
<BaseControl label={ __('Question Color', 'snow-monkey-awesome-custom-blocks') }>
88+
<ColorPalette
89+
value={ questionColor }
90+
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'questionColor', value) }) }
91+
/>
92+
</BaseControl>
93+
94+
<BaseControl label={ __('Answer Color', 'snow-monkey-awesome-custom-blocks') }>
95+
<ColorPalette
96+
value={ answerColor }
97+
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'answerColor', value) }) }
98+
/>
99+
</BaseControl>
100+
</PanelBody>
101+
);
102+
} ) }
61103
</InspectorControls>
62104

63105
<div className="smacb-faq">
64106
<div className="smacb-faq__body">
65107
{ times(rows, (index) => {
66-
const question = get(content, [index, 'question'], []);
67-
const answer = get(content, [index, 'answer'], []);
108+
const question = get(content, [index, 'question'], []);
109+
const answer = get(content, [index, 'answer'], []);
110+
const questionColor = get(content, [index, 'questionColor'], '');
111+
const answerColor = get(content, [index, 'answerColor'], '');
68112

69113
return (
70114
<div className="smacb-faq__item">
71-
<RichText
72-
className="smacb-faq__item__question"
73-
placeholder={ __('Write question…', 'snow-monkey-awesome-custom-blocks') }
74-
value={ question }
75-
formattingControls={ [] }
76-
multiline={ false }
77-
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'question', value) }) }
78-
/>
115+
<div className="smacb-faq__item__question">
116+
<div className="smacb-faq__item__question__label" style={{ color: questionColor }} data-color={ questionColor }>
117+
Q
118+
</div>
119+
<RichText
120+
className="smacb-faq__item__question__body"
121+
placeholder={ __('Write question…', 'snow-monkey-awesome-custom-blocks') }
122+
value={ question }
123+
formattingControls={ [] }
124+
multiline={ false }
125+
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'question', value) }) }
126+
/>
127+
</div>
79128

80-
<RichText
81-
className="smacb-faq__item__answer"
82-
placeholder={ __('Write answer…', 'snow-monkey-awesome-custom-blocks') }
83-
value={ answer }
84-
formattingControls={ [] }
85-
multiline="p"
86-
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'answer', value) }) }
87-
/>
129+
<div className="smacb-faq__item__answer">
130+
<div className="smacb-faq__item__answer__label" style={{ color: answerColor }} data-color={ answerColor }>
131+
A
132+
</div>
133+
<RichText
134+
className="smacb-faq__item__answer__body"
135+
placeholder={ __('Write answer…', 'snow-monkey-awesome-custom-blocks') }
136+
value={ answer }
137+
formattingControls={ [] }
138+
multiline="p"
139+
onChange={ value => setAttributes({ content: generateUpdatedAttribute(content, index, 'answer', value) }) }
140+
/>
141+
</div>
88142
</div>
89143
);
90144
} ) }
@@ -101,16 +155,29 @@ registerBlockType('snow-monkey-awesome-custom-blocks/faq', {
101155
<div className="smacb-faq">
102156
<div className="smacb-faq__body">
103157
{ times(rows, (index) => {
104-
const question = get(content, [index, 'question'], []);
105-
const answer = get(content, [index, 'answer'], []);
158+
const question = get(content, [index, 'question'], []);
159+
const answer = get(content, [index, 'answer'], []);
160+
const questionColor = get(content, [index, 'questionColor'], '');
161+
const answerColor = get(content, [index, 'answerColor'], '');
106162

107163
return (
108164
<div className="smacb-faq__item">
109165
<div className="smacb-faq__item__question">
110-
{ question }
166+
<div className="smacb-faq__item__question__label" style={{ color: questionColor }} data-color={ questionColor }>
167+
Q
168+
</div>
169+
<div className="smacb-faq__item__question__body">
170+
{ question }
171+
</div>
111172
</div>
173+
112174
<div className="smacb-faq__item__answer">
113-
{ answer }
175+
<div className="smacb-faq__item__answer__label" style={{ color: answerColor }} data-color={ answerColor }>
176+
A
177+
</div>
178+
<div className="smacb-faq__item__answer__body">
179+
{ answer }
180+
</div>
114181
</div>
115182
</div>
116183
);

‎block/faq/block.php

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@
1212
$accent_color = get_theme_mod( 'accent-color' );
1313

1414
$cfs->register(
15-
[ '.smacb-faq__item__question::before', '.smacb-faq__item__answer::before' ],
15+
[
16+
'.smacb-faq__item__question__label',
17+
'.smacb-faq__item__answer__label',
18+
],
1619
'color: ' . $accent_color
1720
);

‎block/pricing-table/block.js

+78-24
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,69 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
1414
attributes: {
1515
content: {
1616
type: 'array',
17-
default: [
18-
{
19-
title: [],
20-
price: [],
21-
lede: [],
22-
list: [],
23-
btnLabel: [],
24-
btnURL: '',
25-
btnTarget: '',
26-
btnBackgroundColor: '',
27-
btnTextColor: '',
17+
source: 'query',
18+
selector: '.smacb-pricing-table__item',
19+
default: [],
20+
query: {
21+
title: {
22+
type: 'array',
23+
source: 'children',
24+
selector: '.smacb-pricing-table__item__title',
25+
default: [],
26+
},
27+
price: {
28+
type: 'array',
29+
source: 'children',
30+
selector: '.smacb-pricing-table__item__price',
31+
default: [],
32+
},
33+
lede: {
34+
type: 'array',
35+
source: 'children',
36+
selector: '.smacb-pricing-table__item__lede',
37+
default: [],
38+
},
39+
list: {
40+
type: 'array',
41+
source: 'children',
42+
selector: 'ul',
43+
default: [],
44+
},
45+
btnLabel: {
46+
type: 'array',
47+
source: 'children',
48+
selector: '.smacb-pricing-table__item__btn > .smacb-btn__label',
49+
default: [],
50+
},
51+
btnURL: {
52+
type: 'string',
53+
source: 'attribute',
54+
selector: '.smacb-pricing-table__item__btn',
55+
attribute: 'href',
56+
default: '',
57+
},
58+
btnTarget: {
59+
type: 'string',
60+
source: 'attribute',
61+
selector: '.smacb-pricing-table__item__btn',
62+
attribute: 'target',
63+
default: '_self',
64+
},
65+
btnBackgroundColor: {
66+
type: 'string',
67+
source: 'attribute',
68+
selector: '.smacb-pricing-table__item__btn',
69+
attribute: 'data-background-color',
70+
default: '',
71+
},
72+
btnTextColor: {
73+
type: 'string',
74+
source: 'attribute',
75+
selector: '.smacb-pricing-table__item__btn',
76+
attribute: 'data-color',
77+
default: '',
2878
}
29-
],
79+
}
3080
},
3181
columns: {
3282
type: 'number',
@@ -58,10 +108,10 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
58108
</PanelBody>
59109

60110
{ times(columns, (index) => {
61-
const btnURL = get(content, [index, 'btnURL']);
62-
const btnTarget = get(content, [index, 'btnTarget']);
63-
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor']);
64-
const btnTextColor = get(content, [index, 'btnTextColor']);
111+
const btnURL = get(content, [index, 'btnURL'], '');
112+
const btnTarget = get(content, [index, 'btnTarget'], '_self');
113+
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor'], '');
114+
const btnTextColor = get(content, [index, 'btnTextColor'], '');
65115

66116
return (
67117
<PanelBody
@@ -116,10 +166,10 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
116166
const lede = get(content, [index, 'lede'], []);
117167
const list = get(content, [index, 'list'], []);
118168
const btnLabel = get(content, [index, 'btnLabel'], []);
119-
const btnURL = get(content, [index, 'btnURL']);
120-
const btnTarget = get(content, [index, 'btnTarget']);
121-
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor']);
122-
const btnTextColor = get(content, [index, 'btnTextColor']);
169+
const btnURL = get(content, [index, 'btnURL'], '');
170+
const btnTarget = get(content, [index, 'btnTarget'], '_self');
171+
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor'], '');
172+
const btnTextColor = get(content, [index, 'btnTextColor'], '');
123173

124174
return (
125175
<div className="smacb-pricing-table__col">
@@ -165,6 +215,8 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
165215
href={ btnURL }
166216
target={ btnTarget }
167217
style={ { backgroundColor: btnBackgroundColor } }
218+
data-background-color={ btnBackgroundColor }
219+
data-color={ btnTextColor }
168220
>
169221
<RichText
170222
className="smacb-btn__label"
@@ -199,10 +251,10 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
199251
const lede = get(content, [index, 'lede'], []);
200252
const list = get(content, [index, 'list'], []);
201253
const btnLabel = get(content, [index, 'btnLabel'], []);
202-
const btnURL = get(content, [index, 'btnURL']);
203-
const btnTarget = get(content, [index, 'btnTarget']);
204-
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor']);
205-
const btnTextColor = get(content, [index, 'btnTextColor']);
254+
const btnURL = get(content, [index, 'btnURL'], '');
255+
const btnTarget = get(content, [index, 'btnTarget'], '_self');
256+
const btnBackgroundColor = get(content, [index, 'btnBackgroundColor'], '');
257+
const btnTextColor = get(content, [index, 'btnTextColor'], '');
206258

207259
return (
208260
<div className="smacb-pricing-table__col">
@@ -233,6 +285,8 @@ registerBlockType('snow-monkey-awesome-custom-blocks/pricing-table', {
233285
href={ btnURL }
234286
target={ btnTarget }
235287
style={ { backgroundColor: btnBackgroundColor } }
288+
data-background-color={ btnBackgroundColor }
289+
data-color={ btnTextColor }
236290
>
237291
<span className="smacb-btn__label" style={ { color: btnTextColor } }>
238292
{ btnLabel }

0 commit comments

Comments
 (0)