Skip to content

Commit bc0156e

Browse files
inc2734inc2734
committed
fix #839 
1 parent c0aef68 commit bc0156e

File tree

9 files changed

+390
-30
lines changed

9 files changed

+390
-30
lines changed

‎src/blocks/spider-contents-slider/block.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@
6464
"default": {}
6565
},
6666
"sliderClientIds": {
67-
"type": "string",
68-
"default": "[]"
67+
"type": "array",
68+
"default": []
6969
},
7070
"border": {
7171
"type": "object",

‎src/blocks/spider-contents-slider/deprecated.js

+259
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,241 @@ export default [
1313
{
1414
attributes: {
1515
...blockAttributes,
16+
sliderClientIds: {
17+
type: 'string',
18+
default: '[]',
19+
},
20+
},
21+
22+
supports: {
23+
...blockSupports,
24+
},
25+
26+
save( { attributes, className } ) {
27+
const {
28+
arrows,
29+
dots,
30+
fade,
31+
shuffle,
32+
shifted,
33+
gutter,
34+
interval,
35+
autoplayButton,
36+
duration,
37+
lgSlidesToShow,
38+
mdSlidesToShow,
39+
smSlidesToShow,
40+
canvasPadding,
41+
border,
42+
boxShadow,
43+
sliderClientIds: _sliderClientIds,
44+
} = attributes;
45+
const sliderClientIds = JSON.parse( _sliderClientIds );
46+
47+
const isAlignwide = 'wide' === attributes.align;
48+
const isAlignfull = 'full' === attributes.align;
49+
const isShiftable = ! fade;
50+
const isShifted =
51+
shifted && isShiftable && ( isAlignwide || isAlignfull );
52+
53+
const classes = classnames(
54+
'smb-spider-slider',
55+
'smb-spider-contents-slider',
56+
className,
57+
{
58+
'smb-spider-slider--shifted': isShifted,
59+
[ `smb-spider-slider--gutter-${ gutter }` ]: !! gutter,
60+
}
61+
);
62+
63+
const borderWidth = String( border.width ).match( /^\d+$/ )
64+
? `${ border.width }px`
65+
: border.width;
66+
67+
const borderRadius = String( border.radius ).match( /^\d+$/ )
68+
? `${ border.radius }px`
69+
: border.radius;
70+
71+
const styles = {
72+
'--smb-spider-contents-slider--canvas-offset-top':
73+
( !! canvasPadding?.top && `${ canvasPadding?.top }px` ) ||
74+
undefined,
75+
'--smb-spider-contents-slider--canvas-offset-right':
76+
( !! canvasPadding?.right &&
77+
fade &&
78+
`${ canvasPadding?.right }px` ) ||
79+
undefined,
80+
'--smb-spider-contents-slider--canvas-offset-bottom':
81+
( !! canvasPadding?.bottom &&
82+
`${ canvasPadding?.bottom }px` ) ||
83+
undefined,
84+
'--smb-spider-contents-slider--canvas-offset-left':
85+
( !! canvasPadding?.left &&
86+
fade &&
87+
`${ canvasPadding?.left }px` ) ||
88+
undefined,
89+
'--smb-spider-slider--gap':
90+
( ! gutter &&
91+
! fade &&
92+
( !! canvasPadding?.right || !! canvasPadding?.left ) &&
93+
`${
94+
( canvasPadding?.right + canvasPadding?.left ) / 2
95+
}px` ) ||
96+
undefined,
97+
'--smb-spider-contents-slider--slide-border-width':
98+
( !! border.color &&
99+
0 < parseInt( borderWidth ) &&
100+
borderWidth ) ||
101+
undefined,
102+
'--smb-spider-contents-slider--slide-border-color':
103+
border.color || undefined,
104+
'--smb-spider-contents-slider--slide-border-type':
105+
border.style || undefined,
106+
'--smb-spider-contents-slider--slide-border-radius':
107+
( 0 < parseInt( borderRadius ) && borderRadius ) ||
108+
undefined,
109+
'--smb-spider-contents-slider--slide-box-shadow':
110+
!! boxShadow.color
111+
? `0 0 ${ boxShadow.blur }px ${ hexToRgba(
112+
boxShadow.color,
113+
boxShadow.opacity
114+
) }`
115+
: undefined,
116+
};
117+
118+
return (
119+
<div
120+
{ ...useBlockProps.save( {
121+
className: classes,
122+
style: styles,
123+
} ) }
124+
data-fade={ fade ? 'true' : 'false' }
125+
data-shuffle={ shuffle ? 'true' : 'false' }
126+
data-interval={ 0 < interval ? interval * 1000 : undefined }
127+
data-duration={ 0 < duration ? duration * 1000 : undefined }
128+
data-lg-slide-to-show={
129+
! fade && 1 < lgSlidesToShow
130+
? lgSlidesToShow
131+
: undefined
132+
}
133+
data-md-slide-to-show={
134+
! fade && 1 < mdSlidesToShow
135+
? mdSlidesToShow
136+
: undefined
137+
}
138+
data-sm-slide-to-show={
139+
! fade && 1 < smSlidesToShow
140+
? smSlidesToShow
141+
: undefined
142+
}
143+
>
144+
<div className="spider">
145+
{ isShifted && (
146+
<div className="c-container">
147+
<div className="spider__reference" />
148+
</div>
149+
) }
150+
<div
151+
{ ...useInnerBlocksProps.save( {
152+
className: 'spider__canvas',
153+
} ) }
154+
/>
155+
156+
{ arrows && (
157+
<div className="spider__arrows">
158+
<button
159+
className="spider__arrow"
160+
data-direction="prev"
161+
>
162+
Prev
163+
</button>
164+
<button
165+
className="spider__arrow"
166+
data-direction="next"
167+
>
168+
Next
169+
</button>
170+
</div>
171+
) }
172+
</div>
173+
174+
{ ( ( 0 < interval && autoplayButton ) || dots ) && (
175+
<div className="spider__dots">
176+
{ autoplayButton && (
177+
<>
178+
<button className="spider__stop">
179+
<svg
180+
width="12"
181+
height="16"
182+
viewBox="0 0 12 16"
183+
fill="none"
184+
xmlns="http://www.w3.org/2000/svg"
185+
title={ __(
186+
'Pause autoplay',
187+
'snow-monkey-blocks'
188+
) }
189+
>
190+
<rect
191+
width="5"
192+
height="16"
193+
fill="currentColor"
194+
></rect>
195+
<rect
196+
x="7"
197+
width="5"
198+
height="16"
199+
fill="currentColor"
200+
></rect>
201+
</svg>
202+
</button>
203+
<button className="spider__start">
204+
<svg
205+
width="12"
206+
height="16"
207+
viewBox="0 0 12 16"
208+
fill="none"
209+
xmlns="http://www.w3.org/2000/svg"
210+
title={ __(
211+
'Start autoplay',
212+
'snow-monkey-blocks'
213+
) }
214+
>
215+
<path
216+
d="M12 8L-2.29967e-06 16L-2.29967e-06 0L12 8Z"
217+
fill="currentColor"
218+
></path>
219+
</svg>
220+
</button>
221+
</>
222+
) }
223+
224+
{ dots &&
225+
sliderClientIds.map(
226+
( sliderClientId, index ) => {
227+
return (
228+
<button
229+
className="spider__dot"
230+
data-id={ index }
231+
key={ index }
232+
>
233+
{ index }
234+
</button>
235+
);
236+
}
237+
) }
238+
</div>
239+
) }
240+
</div>
241+
);
242+
},
243+
},
244+
{
245+
attributes: {
246+
...blockAttributes,
247+
sliderClientIds: {
248+
type: 'string',
249+
default: '[]',
250+
},
16251
},
17252

18253
supports: {
@@ -216,6 +451,10 @@ export default [
216451
{
217452
attributes: {
218453
...blockAttributes,
454+
sliderClientIds: {
455+
type: 'string',
456+
default: '[]',
457+
},
219458
},
220459

221460
supports: {
@@ -391,6 +630,10 @@ export default [
391630
{
392631
attributes: {
393632
...blockAttributes,
633+
sliderClientIds: {
634+
type: 'string',
635+
default: '[]',
636+
},
394637
},
395638

396639
supports: {
@@ -564,6 +807,10 @@ export default [
564807
{
565808
attributes: {
566809
...blockAttributes,
810+
sliderClientIds: {
811+
type: 'string',
812+
default: '[]',
813+
},
567814
},
568815

569816
supports: {
@@ -700,6 +947,10 @@ export default [
700947
{
701948
attributes: {
702949
...blockAttributes,
950+
sliderClientIds: {
951+
type: 'string',
952+
default: '[]',
953+
},
703954
},
704955

705956
supports: {
@@ -831,6 +1082,10 @@ export default [
8311082
{
8321083
attributes: {
8331084
...blockAttributes,
1085+
sliderClientIds: {
1086+
type: 'string',
1087+
default: '[]',
1088+
},
8341089
},
8351090

8361091
supports: {
@@ -954,6 +1209,10 @@ export default [
9541209
{
9551210
attributes: {
9561211
...blockAttributes,
1212+
sliderClientIds: {
1213+
type: 'string',
1214+
default: '[]',
1215+
},
9571216
},
9581217

9591218
supports: {

‎src/blocks/spider-contents-slider/edit.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,10 @@ export default function ( {
5656
canvasPadding,
5757
border,
5858
boxShadow,
59-
sliderClientIds: _sliderClientIds,
59+
sliderClientIds,
6060
templateLock,
6161
} = attributes;
6262

63-
const sliderClientIds = JSON.parse( _sliderClientIds );
64-
6563
const isAlignwide = 'wide' === attributes.align;
6664
const isAlignfull = 'full' === attributes.align;
6765
const isShiftable = ! fade;
@@ -168,7 +166,7 @@ export default function ( {
168166
// Since what is actually needed is the number of InnerBlocks, exact clientIds are not necessary.
169167
if ( sliderClientIds.length !== nowSliderClientIds.length ) {
170168
setAttributes( {
171-
sliderClientIds: JSON.stringify( nowSliderClientIds ),
169+
sliderClientIds: nowSliderClientIds,
172170
} );
173171
}
174172

‎src/blocks/spider-contents-slider/save.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@ export default function ( { attributes, className } ) {
2121
canvasPadding,
2222
border,
2323
boxShadow,
24-
sliderClientIds: _sliderClientIds,
24+
sliderClientIds,
2525
} = attributes;
26-
const sliderClientIds = JSON.parse( _sliderClientIds );
2726

2827
const isAlignwide = 'wide' === attributes.align;
2928
const isAlignfull = 'full' === attributes.align;

‎src/blocks/tabs/block.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
"category": "smb",
1010
"attributes": {
1111
"tabs": {
12-
"type": "string",
13-
"default": "[]"
12+
"type": "array",
13+
"default": []
1414
},
1515
"matchHeight": {
1616
"type": "string",

0 commit comments

Comments
 (0)