| 1 |
( function () { |
| 2 |
var el = wp.element.createElement; |
| 3 |
var __ = wp.i18n.__; |
| 4 |
var registerBlockType = wp.blocks.registerBlockType; |
| 5 |
var InspectorControls = wp.blockEditor.InspectorControls; |
| 6 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 7 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 8 |
var PanelBody = wp.components.PanelBody; |
| 9 |
var ToggleControl = wp.components.ToggleControl; |
| 10 |
var RangeControl = wp.components.RangeControl; |
| 11 |
var SelectControl = wp.components.SelectControl; |
| 12 |
|
| 13 |
/* ── Shape paths (1200×120 viewBox) ──────────────────────────────────── */ |
| 14 |
var SHAPES = { |
| 15 |
wave: 'M0,60 C150,120 350,0 600,60 C850,120 1050,0 1200,60 L1200,120 L0,120 Z', |
| 16 |
wave2: 'M0,40 C200,100 400,0 600,50 C800,100 1000,0 1200,40 L1200,120 L0,120 Z', |
| 17 |
wave3: 'M0,80 C100,20 200,100 300,60 C400,20 500,100 600,60 C700,20 800,100 900,60 C1000,20 1100,100 1200,60 L1200,120 L0,120 Z', |
| 18 |
curve: 'M0,0 Q600,120 1200,0 L1200,120 L0,120 Z', |
| 19 |
curve2: 'M0,120 Q600,0 1200,120 L1200,120 L0,120 Z', |
| 20 |
triangle: 'M0,120 L600,0 L1200,120 Z', |
| 21 |
tilt: 'M0,0 L1200,80 L1200,120 L0,120 Z', |
| 22 |
'tilt-r': 'M0,80 L1200,0 L1200,120 L0,120 Z', |
| 23 |
zigzag: 'M0,60 L100,0 L200,60 L300,0 L400,60 L500,0 L600,60 L700,0 L800,60 L900,0 L1000,60 L1100,0 L1200,60 L1200,120 L0,120 Z', |
| 24 |
mountains: 'M0,120 L100,60 L200,100 L350,20 L500,80 L650,40 L800,90 L950,30 L1100,70 L1200,50 L1200,120 Z', |
| 25 |
arrow: 'M0,0 L550,0 L600,60 L650,0 L1200,0 L1200,120 L0,120 Z', |
| 26 |
fan: 'M0,120 Q200,0 400,60 Q600,120 800,0 Q1000,60 1200,120 Z', |
| 27 |
}; |
| 28 |
|
| 29 |
var SHAPE_OPTIONS = [ |
| 30 |
{ label: 'Wave', value: 'wave' }, |
| 31 |
{ label: 'Wave Alt', value: 'wave2' }, |
| 32 |
{ label: 'Wave Small', value: 'wave3' }, |
| 33 |
{ label: 'Curve Down', value: 'curve' }, |
| 34 |
{ label: 'Curve Up', value: 'curve2' }, |
| 35 |
{ label: 'Triangle', value: 'triangle' }, |
| 36 |
{ label: 'Tilt Left', value: 'tilt' }, |
| 37 |
{ label: 'Tilt Right', value: 'tilt-r' }, |
| 38 |
{ label: 'Zigzag', value: 'zigzag' }, |
| 39 |
{ label: 'Mountains', value: 'mountains' }, |
| 40 |
{ label: 'Arrow', value: 'arrow' }, |
| 41 |
{ label: 'Fan', value: 'fan' }, |
| 42 |
]; |
| 43 |
|
| 44 |
var POS_OPTIONS = [ |
| 45 |
{ label: 'Bottom', value: 'bottom' }, |
| 46 |
{ label: 'Top', value: 'top' }, |
| 47 |
]; |
| 48 |
|
| 49 |
/* ── Build SVG ────────────────────────────────────────────────────────── */ |
| 50 |
function buildSVG(a, isPreview) { |
| 51 |
var path = SHAPES[a.shape] || SHAPES.wave; |
| 52 |
var scaleX = a.flipHorizontal ? -1 : 1; |
| 53 |
var scaleY = a.flipVertical ? -1 : 1; |
| 54 |
var animClass = a.animate && !isPreview ? ' bksvd-animate' : ''; |
| 55 |
|
| 56 |
var transformAttr = (scaleX !== 1 || scaleY !== 1) |
| 57 |
? 'scale(' + scaleX + ',' + scaleY + ')' |
| 58 |
: undefined; |
| 59 |
|
| 60 |
var g = el('g', { transform: transformAttr }, |
| 61 |
a.layers >= 2 && el('path', { |
| 62 |
d: path, |
| 63 |
fill: a.layer2Color, |
| 64 |
transform: 'translate(0,' + a.layer2Offset + ')', |
| 65 |
opacity: 0.6, |
| 66 |
}), |
| 67 |
el('path', { d: path, fill: a.color }) |
| 68 |
); |
| 69 |
|
| 70 |
return el('svg', { |
| 71 |
xmlns: 'http://www.w3.org/2000/svg', |
| 72 |
viewBox: '0 0 1200 120', |
| 73 |
preserveAspectRatio: 'none', |
| 74 |
className: 'bksvd-svg' + animClass, |
| 75 |
'data-shape': a.shape, |
| 76 |
style: { |
| 77 |
width: a.width + '%', |
| 78 |
height: a.height + 'px', |
| 79 |
display: 'block', |
| 80 |
transformOrigin: 'center', |
| 81 |
} |
| 82 |
}, g); |
| 83 |
} |
| 84 |
|
| 85 |
/* ── Wrapper style ────────────────────────────────────────────────────── */ |
| 86 |
function buildWrap(a) { |
| 87 |
var isTop = a.position === 'top'; |
| 88 |
return { |
| 89 |
position: 'relative', |
| 90 |
lineHeight: 0, |
| 91 |
background: a.bgColor || 'transparent', |
| 92 |
zIndex: a.zIndex, |
| 93 |
overflow: 'hidden', |
| 94 |
display: 'flex', |
| 95 |
justifyContent: 'center', |
| 96 |
alignItems: isTop ? 'flex-start' : 'flex-end', |
| 97 |
}; |
| 98 |
} |
| 99 |
|
| 100 |
/* ── Block registration ───────────────────────────────────────────────── */ |
| 101 |
registerBlockType('blockenberg/shape-divider', { |
| 102 |
edit: function (props) { |
| 103 |
var a = props.attributes; |
| 104 |
var set = props.setAttributes; |
| 105 |
var blockProps = useBlockProps({ style: buildWrap(a) }); |
| 106 |
|
| 107 |
return el('div', blockProps, |
| 108 |
el(InspectorControls, null, |
| 109 |
el(PanelBody, { title: __('Shape', 'blockenberg'), initialOpen: true }, |
| 110 |
el(SelectControl, { |
| 111 |
label: __('Shape', 'blockenberg'), |
| 112 |
value: a.shape, |
| 113 |
options: SHAPE_OPTIONS, |
| 114 |
onChange: function (v) { set({ shape: v }); } |
| 115 |
}), |
| 116 |
el(SelectControl, { |
| 117 |
label: __('Position', 'blockenberg'), |
| 118 |
value: a.position, |
| 119 |
options: POS_OPTIONS, |
| 120 |
onChange: function (v) { set({ position: v }); } |
| 121 |
}), |
| 122 |
el(RangeControl, { |
| 123 |
label: __('Height (px)', 'blockenberg'), |
| 124 |
value: a.height, |
| 125 |
min: 20, max: 300, |
| 126 |
onChange: function (v) { set({ height: v }); } |
| 127 |
}), |
| 128 |
el(RangeControl, { |
| 129 |
label: __('Width %', 'blockenberg'), |
| 130 |
value: a.width, |
| 131 |
min: 100, max: 200, |
| 132 |
onChange: function (v) { set({ width: v }); } |
| 133 |
}), |
| 134 |
el(ToggleControl, { |
| 135 |
label: __('Flip Horizontal', 'blockenberg'), |
| 136 |
checked: a.flipHorizontal, |
| 137 |
onChange: function (v) { set({ flipHorizontal: v }); }, |
| 138 |
__nextHasNoMarginBottom: true |
| 139 |
}), |
| 140 |
el(ToggleControl, { |
| 141 |
label: __('Flip Vertical', 'blockenberg'), |
| 142 |
checked: a.flipVertical, |
| 143 |
onChange: function (v) { set({ flipVertical: v }); }, |
| 144 |
__nextHasNoMarginBottom: true |
| 145 |
}), |
| 146 |
), |
| 147 |
el(PanelBody, { title: __('Layers & Animation', 'blockenberg'), initialOpen: false }, |
| 148 |
el(SelectControl, { |
| 149 |
label: __('Layers', 'blockenberg'), |
| 150 |
value: String(a.layers), |
| 151 |
options: [{ label: '1 layer', value: '1' }, { label: '2 layers', value: '2' }], |
| 152 |
onChange: function (v) { set({ layers: parseInt(v, 10) }); } |
| 153 |
}), |
| 154 |
a.layers >= 2 && el(RangeControl, { |
| 155 |
label: __('Layer 2 Offset (px)', 'blockenberg'), |
| 156 |
value: a.layer2Offset, |
| 157 |
min: 0, max: 40, |
| 158 |
onChange: function (v) { set({ layer2Offset: v }); } |
| 159 |
}), |
| 160 |
el(ToggleControl, { |
| 161 |
label: __('Animate (wave scroll)', 'blockenberg'), |
| 162 |
checked: a.animate, |
| 163 |
onChange: function (v) { set({ animate: v }); }, |
| 164 |
__nextHasNoMarginBottom: true |
| 165 |
}), |
| 166 |
a.animate && el(RangeControl, { |
| 167 |
label: __('Animation Speed (s)', 'blockenberg'), |
| 168 |
value: a.animationSpeed, |
| 169 |
min: 2, max: 30, |
| 170 |
onChange: function (v) { set({ animationSpeed: v }); } |
| 171 |
}), |
| 172 |
el(RangeControl, { |
| 173 |
label: __('Z-Index', 'blockenberg'), |
| 174 |
value: a.zIndex, |
| 175 |
min: 0, max: 100, |
| 176 |
onChange: function (v) { set({ zIndex: v }); } |
| 177 |
}), |
| 178 |
), |
| 179 |
el(PanelColorSettings, { |
| 180 |
title: __('Colors', 'blockenberg'), |
| 181 |
initialOpen: false, |
| 182 |
colorSettings: [ |
| 183 |
{ |
| 184 |
label: __('Shape Color', 'blockenberg'), |
| 185 |
value: a.color, |
| 186 |
onChange: function (v) { set({ color: v || '#ffffff' }); } |
| 187 |
}, |
| 188 |
{ |
| 189 |
label: __('Layer 2 Color', 'blockenberg'), |
| 190 |
value: a.layer2Color, |
| 191 |
onChange: function (v) { set({ layer2Color: v || 'rgba(255,255,255,0.4)' }); } |
| 192 |
}, |
| 193 |
{ |
| 194 |
label: __('Background Color', 'blockenberg'), |
| 195 |
value: a.bgColor, |
| 196 |
onChange: function (v) { set({ bgColor: v || '' }); } |
| 197 |
}, |
| 198 |
] |
| 199 |
}), |
| 200 |
), |
| 201 |
buildSVG(a, true) |
| 202 |
); |
| 203 |
}, |
| 204 |
|
| 205 |
save: function (props) { |
| 206 |
var a = props.attributes; |
| 207 |
var path = SHAPES[a.shape] || SHAPES.wave; |
| 208 |
var scaleX = a.flipHorizontal ? -1 : 1; |
| 209 |
var scaleY = a.flipVertical ? -1 : 1; |
| 210 |
var transformAttr = (scaleX !== 1 || scaleY !== 1) |
| 211 |
? 'scale(' + scaleX + ',' + scaleY + ')' |
| 212 |
: undefined; |
| 213 |
|
| 214 |
var g = el('g', { transform: transformAttr }, |
| 215 |
a.layers >= 2 && el('path', { |
| 216 |
d: path, |
| 217 |
fill: a.layer2Color, |
| 218 |
transform: 'translate(0,' + a.layer2Offset + ')', |
| 219 |
opacity: 0.6, |
| 220 |
}), |
| 221 |
el('path', { d: path, fill: a.color }) |
| 222 |
); |
| 223 |
|
| 224 |
return el('div', { |
| 225 |
className: 'bksvd-wrap', |
| 226 |
'data-animate': a.animate ? '1' : '0', |
| 227 |
'data-speed': a.animationSpeed, |
| 228 |
style: { |
| 229 |
position: 'relative', |
| 230 |
lineHeight: 0, |
| 231 |
background: a.bgColor || 'transparent', |
| 232 |
zIndex: a.zIndex, |
| 233 |
overflow: 'hidden', |
| 234 |
display: 'flex', |
| 235 |
justifyContent: 'center', |
| 236 |
alignItems: a.position === 'top' ? 'flex-start' : 'flex-end', |
| 237 |
} |
| 238 |
}, |
| 239 |
el('svg', { |
| 240 |
xmlns: 'http://www.w3.org/2000/svg', |
| 241 |
viewBox: '0 0 1200 120', |
| 242 |
preserveAspectRatio: 'none', |
| 243 |
className: 'bksvd-svg' + (a.animate ? ' bksvd-animate' : ''), |
| 244 |
style: { |
| 245 |
width: a.width + '%', |
| 246 |
height: a.height + 'px', |
| 247 |
display: 'block', |
| 248 |
'--bksvd-speed': a.animationSpeed + 's', |
| 249 |
} |
| 250 |
}, g) |
| 251 |
); |
| 252 |
} |
| 253 |
}); |
| 254 |
}() ); |
| 255 |
|
