| 1 |
( function () { |
| 2 |
const el = window.wp.element.createElement; |
| 3 |
const Fragment = window.wp.element.Fragment; |
| 4 |
const { registerBlockType } = window.wp.blocks; |
| 5 |
const { InspectorControls, useBlockProps, PanelColorSettings } = window.wp.blockEditor; |
| 6 |
const { PanelBody, RangeControl, SelectControl, ToggleControl, TextControl, Button } = window.wp.components; |
| 7 |
const { __ } = window.wp.i18n; |
| 8 |
let _tc; const getTypoControl = () => _tc || (_tc = window.bkbgTypographyControl); |
| 9 |
let _tv; const getTypoCssVars = () => _tv || (_tv = window.bkbgTypoCssVars); |
| 10 |
|
| 11 |
const STYLES = [ |
| 12 |
{ label: 'Cards', value: 'cards' }, |
| 13 |
{ label: 'Minimal', value: 'minimal' }, |
| 14 |
{ label: 'Arrows', value: 'arrows' }, |
| 15 |
{ label: 'Pills', value: 'pills' }, |
| 16 |
{ label: 'Split', value: 'split' }, |
| 17 |
]; |
| 18 |
|
| 19 |
function wrapStyle(a) { |
| 20 |
const _tvFn = getTypoCssVars(); |
| 21 |
const s = { |
| 22 |
'--bkbg-pn-bg': a.bgColor, |
| 23 |
'--bkbg-pn-card-bg': a.cardBg, |
| 24 |
'--bkbg-pn-text': a.textColor, |
| 25 |
'--bkbg-pn-label': a.labelColor, |
| 26 |
'--bkbg-pn-accent': a.accentColor, |
| 27 |
'--bkbg-pn-border': a.borderColor, |
| 28 |
'--bkbg-pn-hover-bg': a.hoverBg, |
| 29 |
'--bkbg-pn-max-w': a.maxWidth + 'px', |
| 30 |
'--bkbg-pn-pt': a.paddingTop + 'px', |
| 31 |
'--bkbg-pn-pb': a.paddingBottom + 'px', |
| 32 |
'--bkbg-pn-radius': a.borderRadius + 'px', |
| 33 |
'--bkbg-pn-gap': a.gap + 'px', |
| 34 |
'--bkbg-pn-arrow-sz': a.arrowSize + 'px', |
| 35 |
}; |
| 36 |
Object.assign(s, _tvFn(a.labelTypo, '--bkbg-pn-lb-')); |
| 37 |
Object.assign(s, _tvFn(a.titleTypo, '--bkbg-pn-tt-')); |
| 38 |
return s; |
| 39 |
} |
| 40 |
|
| 41 |
function NavCard({ side, label, title, url, showLabel, showArrow, a }) { |
| 42 |
const isPrev = side === 'prev'; |
| 43 |
return el('div', { className: 'bkbg-pn-card bkbg-pn-card--' + side }, |
| 44 |
isPrev && showArrow && el('span', { className: 'bkbg-pn-arrow bkbg-pn-arrow--prev dashicons dashicons-arrow-left-alt2' }), |
| 45 |
el('div', { className: 'bkbg-pn-body' }, |
| 46 |
showLabel && el('span', { className: 'bkbg-pn-label' }, label), |
| 47 |
el('span', { className: 'bkbg-pn-title' }, title), |
| 48 |
), |
| 49 |
!isPrev && showArrow && el('span', { className: 'bkbg-pn-arrow bkbg-pn-arrow--next dashicons dashicons-arrow-right-alt2' }), |
| 50 |
); |
| 51 |
} |
| 52 |
|
| 53 |
registerBlockType('blockenberg/post-navigation', { |
| 54 |
deprecated: [{ |
| 55 |
attributes: { |
| 56 |
prevLabel: { type: 'string', default: 'Previous Article' }, |
| 57 |
prevTitle: { type: 'string', default: 'How to Build a Design System from Scratch' }, |
| 58 |
prevUrl: { type: 'string', default: '#' }, |
| 59 |
nextLabel: { type: 'string', default: 'Next Article' }, |
| 60 |
nextTitle: { type: 'string', default: '10 Principles Every Product Designer Should Know' }, |
| 61 |
nextUrl: { type: 'string', default: '#' }, |
| 62 |
showLabels: { type: 'boolean', default: true }, |
| 63 |
showArrows: { type: 'boolean', default: true }, |
| 64 |
showDivider: { type: 'boolean', default: true }, |
| 65 |
style: { type: 'string', default: 'cards' }, |
| 66 |
maxWidth: { type: 'integer', default: 860 }, |
| 67 |
paddingTop: { type: 'integer', default: 48 }, |
| 68 |
paddingBottom: { type: 'integer', default: 48 }, |
| 69 |
borderRadius: { type: 'integer', default: 14 }, |
| 70 |
gap: { type: 'integer', default: 16 }, |
| 71 |
labelSize: { type: 'integer', default: 11 }, |
| 72 |
titleSize: { type: 'integer', default: 17 }, |
| 73 |
arrowSize: { type: 'integer', default: 22 }, |
| 74 |
bgColor: { type: 'string', default: '#ffffff' }, |
| 75 |
cardBg: { type: 'string', default: '#f8fafc' }, |
| 76 |
textColor: { type: 'string', default: '#0f172a' }, |
| 77 |
labelColor: { type: 'string', default: '#94a3b8' }, |
| 78 |
accentColor: { type: 'string', default: '#6c3fb5' }, |
| 79 |
borderColor: { type: 'string', default: '#e2e8f0' }, |
| 80 |
hoverBg: { type: 'string', default: '#f1f5f9' }, |
| 81 |
titleFontWeight:{ type: 'string', default: '700' }, |
| 82 |
labelFontWeight:{ type: 'string', default: '600' } |
| 83 |
}, |
| 84 |
save: function ({ attributes: a }) { |
| 85 |
const oldStyle = { |
| 86 |
'--bkbg-pn-bg': a.bgColor, |
| 87 |
'--bkbg-pn-card-bg': a.cardBg, |
| 88 |
'--bkbg-pn-text': a.textColor, |
| 89 |
'--bkbg-pn-label': a.labelColor, |
| 90 |
'--bkbg-pn-accent': a.accentColor, |
| 91 |
'--bkbg-pn-border': a.borderColor, |
| 92 |
'--bkbg-pn-hover-bg': a.hoverBg, |
| 93 |
'--bkbg-pn-max-w': a.maxWidth + 'px', |
| 94 |
'--bkbg-pn-pt': a.paddingTop + 'px', |
| 95 |
'--bkbg-pn-pb': a.paddingBottom + 'px', |
| 96 |
'--bkbg-pn-radius': a.borderRadius + 'px', |
| 97 |
'--bkbg-pn-gap': a.gap + 'px', |
| 98 |
'--bkbg-pn-label-sz': a.labelSize + 'px', |
| 99 |
'--bkbg-pn-title-sz': a.titleSize + 'px', |
| 100 |
'--bkbg-pn-arrow-sz': a.arrowSize + 'px', |
| 101 |
}; |
| 102 |
return el('div', { |
| 103 |
className: 'bkbg-pn-wrap bkbg-pn-style--' + a.style, |
| 104 |
style: oldStyle, |
| 105 |
}, |
| 106 |
el('div', { className: 'bkbg-pn-inner' }, |
| 107 |
el('a', { href: a.prevUrl, className: 'bkbg-pn-card bkbg-pn-card--prev', rel: 'prev' }, |
| 108 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-left-alt2', 'aria-hidden': 'true' }), |
| 109 |
el('div', { className: 'bkbg-pn-body' }, |
| 110 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.prevLabel), |
| 111 |
el('span', { className: 'bkbg-pn-title' }, a.prevTitle), |
| 112 |
), |
| 113 |
), |
| 114 |
a.showDivider && el('div', { className: 'bkbg-pn-divider', 'aria-hidden': 'true' }), |
| 115 |
el('a', { href: a.nextUrl, className: 'bkbg-pn-card bkbg-pn-card--next', rel: 'next' }, |
| 116 |
el('div', { className: 'bkbg-pn-body bkbg-pn-body--next' }, |
| 117 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.nextLabel), |
| 118 |
el('span', { className: 'bkbg-pn-title' }, a.nextTitle), |
| 119 |
), |
| 120 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-right-alt2', 'aria-hidden': 'true' }), |
| 121 |
), |
| 122 |
), |
| 123 |
); |
| 124 |
} |
| 125 |
}], |
| 126 |
edit: function (props) { |
| 127 |
const { attributes: a, setAttributes } = props; |
| 128 |
const blockProps = useBlockProps({ className: 'bkbg-pn-wrap bkbg-pn-style--' + a.style, style: wrapStyle(a) }); |
| 129 |
|
| 130 |
return el('div', blockProps, |
| 131 |
el(InspectorControls, null, |
| 132 |
|
| 133 |
el(PanelBody, { title: __('Previous Article'), initialOpen: true }, |
| 134 |
el(TextControl, { label: __('Label'), value: a.prevLabel, onChange: v => setAttributes({ prevLabel: v }) }), |
| 135 |
el(TextControl, { label: __('Post Title'), value: a.prevTitle, onChange: v => setAttributes({ prevTitle: v }) }), |
| 136 |
el(TextControl, { label: __('URL'), value: a.prevUrl, onChange: v => setAttributes({ prevUrl: v }) }), |
| 137 |
), |
| 138 |
|
| 139 |
el(PanelBody, { title: __('Next Article'), initialOpen: true }, |
| 140 |
el(TextControl, { label: __('Label'), value: a.nextLabel, onChange: v => setAttributes({ nextLabel: v }) }), |
| 141 |
el(TextControl, { label: __('Post Title'), value: a.nextTitle, onChange: v => setAttributes({ nextTitle: v }) }), |
| 142 |
el(TextControl, { label: __('URL'), value: a.nextUrl, onChange: v => setAttributes({ nextUrl: v }) }), |
| 143 |
), |
| 144 |
|
| 145 |
el(PanelBody, { title: __('Style & Display'), initialOpen: false }, |
| 146 |
el(SelectControl, { label: __('Style'), value: a.style, options: STYLES, onChange: v => setAttributes({ style: v }) }), |
| 147 |
el(ToggleControl, { label: __('Show Direction Labels'), checked: a.showLabels, onChange: v => setAttributes({ showLabels: v }), __nextHasNoMarginBottom: true }), |
| 148 |
el(ToggleControl, { label: __('Show Arrows'), checked: a.showArrows, onChange: v => setAttributes({ showArrows: v }), __nextHasNoMarginBottom: true }), |
| 149 |
el(ToggleControl, { label: __('Show Center Divider'), checked: a.showDivider, onChange: v => setAttributes({ showDivider: v }), __nextHasNoMarginBottom: true }), |
| 150 |
el(RangeControl, { label: __('Max Width (px)'), value: a.maxWidth, min: 480, max: 1400, onChange: v => setAttributes({ maxWidth: v }) }), |
| 151 |
el(RangeControl, { label: __('Border Radius (px)'), value: a.borderRadius, min: 0, max: 32, onChange: v => setAttributes({ borderRadius: v }) }), |
| 152 |
el(RangeControl, { label: __('Gap (px)'), value: a.gap, min: 0, max: 64, onChange: v => setAttributes({ gap: v }) }), |
| 153 |
el(RangeControl, { label: __('Padding Top (px)'), value: a.paddingTop, min: 0, max: 160, onChange: v => setAttributes({ paddingTop: v }) }), |
| 154 |
el(RangeControl, { label: __('Padding Bottom (px)'), value: a.paddingBottom, min: 0, max: 160, onChange: v => setAttributes({ paddingBottom: v }) }), |
| 155 |
), |
| 156 |
|
| 157 |
el(PanelBody, { title: __('Typography'), initialOpen: false }, |
| 158 |
(() => { |
| 159 |
const TC = getTypoControl(); |
| 160 |
if (!TC) return el('p', null, 'Loading…'); |
| 161 |
return el(Fragment, null, |
| 162 |
el(TC, { label: 'Label Typography', value: a.labelTypo, onChange: v => setAttributes({ labelTypo: v }) }), |
| 163 |
el(TC, { label: 'Title Typography', value: a.titleTypo, onChange: v => setAttributes({ titleTypo: v }) }) |
| 164 |
); |
| 165 |
})(), |
| 166 |
el(RangeControl, { label: __('Arrow Size (px)'), value: a.arrowSize, min: 14, max: 40, onChange: v => setAttributes({ arrowSize: v }) }), |
| 167 |
), |
| 168 |
|
| 169 |
el(PanelColorSettings, { |
| 170 |
title: __('Colors'), initialOpen: false, |
| 171 |
colorSettings: [ |
| 172 |
{ label: __('Background'), value: a.bgColor, onChange: v => setAttributes({ bgColor: v || '#ffffff' }) }, |
| 173 |
{ label: __('Card BG'), value: a.cardBg, onChange: v => setAttributes({ cardBg: v || '#f8fafc' }) }, |
| 174 |
{ label: __('Text'), value: a.textColor, onChange: v => setAttributes({ textColor: v || '#0f172a' }) }, |
| 175 |
{ label: __('Label'), value: a.labelColor, onChange: v => setAttributes({ labelColor: v || '#94a3b8' }) }, |
| 176 |
{ label: __('Accent'), value: a.accentColor, onChange: v => setAttributes({ accentColor: v || '#6c3fb5' }) }, |
| 177 |
{ label: __('Border'), value: a.borderColor, onChange: v => setAttributes({ borderColor: v || '#e2e8f0' }) }, |
| 178 |
{ label: __('Hover BG'), value: a.hoverBg, onChange: v => setAttributes({ hoverBg: v || '#f1f5f9' }) }, |
| 179 |
] |
| 180 |
}), |
| 181 |
), |
| 182 |
|
| 183 |
el('div', { className: 'bkbg-pn-inner' }, |
| 184 |
el('a', { href: a.prevUrl, className: 'bkbg-pn-card bkbg-pn-card--prev', onClick: e => e.preventDefault() }, |
| 185 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-left-alt2' }), |
| 186 |
el('div', { className: 'bkbg-pn-body' }, |
| 187 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.prevLabel), |
| 188 |
el('span', { className: 'bkbg-pn-title' }, a.prevTitle), |
| 189 |
), |
| 190 |
), |
| 191 |
a.showDivider && el('div', { className: 'bkbg-pn-divider' }), |
| 192 |
el('a', { href: a.nextUrl, className: 'bkbg-pn-card bkbg-pn-card--next', onClick: e => e.preventDefault() }, |
| 193 |
el('div', { className: 'bkbg-pn-body bkbg-pn-body--next' }, |
| 194 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.nextLabel), |
| 195 |
el('span', { className: 'bkbg-pn-title' }, a.nextTitle), |
| 196 |
), |
| 197 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-right-alt2' }), |
| 198 |
), |
| 199 |
), |
| 200 |
); |
| 201 |
}, |
| 202 |
|
| 203 |
save: function ({ attributes: a }) { |
| 204 |
return el('div', { |
| 205 |
className: 'bkbg-pn-wrap bkbg-pn-style--' + a.style, |
| 206 |
style: wrapStyle(a), |
| 207 |
}, |
| 208 |
el('div', { className: 'bkbg-pn-inner' }, |
| 209 |
el('a', { href: a.prevUrl, className: 'bkbg-pn-card bkbg-pn-card--prev', rel: 'prev' }, |
| 210 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-left-alt2', 'aria-hidden': 'true' }), |
| 211 |
el('div', { className: 'bkbg-pn-body' }, |
| 212 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.prevLabel), |
| 213 |
el('span', { className: 'bkbg-pn-title' }, a.prevTitle), |
| 214 |
), |
| 215 |
), |
| 216 |
a.showDivider && el('div', { className: 'bkbg-pn-divider', 'aria-hidden': 'true' }), |
| 217 |
el('a', { href: a.nextUrl, className: 'bkbg-pn-card bkbg-pn-card--next', rel: 'next' }, |
| 218 |
el('div', { className: 'bkbg-pn-body bkbg-pn-body--next' }, |
| 219 |
a.showLabels && el('span', { className: 'bkbg-pn-label' }, a.nextLabel), |
| 220 |
el('span', { className: 'bkbg-pn-title' }, a.nextTitle), |
| 221 |
), |
| 222 |
a.showArrows && el('span', { className: 'bkbg-pn-arrow dashicons dashicons-arrow-right-alt2', 'aria-hidden': 'true' }), |
| 223 |
), |
| 224 |
), |
| 225 |
); |
| 226 |
} |
| 227 |
}); |
| 228 |
}() ); |
| 229 |
|
