| 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 MediaUpload = wp.blockEditor.MediaUpload; |
| 7 |
var MediaUploadCheck = wp.blockEditor.MediaUploadCheck; |
| 8 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 9 |
var RichText = wp.blockEditor.RichText; |
| 10 |
var PanelColorSettings = wp.blockEditor.PanelColorSettings; |
| 11 |
var PanelBody = wp.components.PanelBody; |
| 12 |
var ToggleControl = wp.components.ToggleControl; |
| 13 |
var RangeControl = wp.components.RangeControl; |
| 14 |
var SelectControl = wp.components.SelectControl; |
| 15 |
var TextControl = wp.components.TextControl; |
| 16 |
var Button = wp.components.Button; |
| 17 |
|
| 18 |
var _tc, _tvf; |
| 19 |
Object.defineProperty(window, '_tc', { get: function () { return _tc || (_tc = window.bkbgTypographyControl); } }); |
| 20 |
Object.defineProperty(window, '_tvf', { get: function () { return _tvf || (_tvf = window.bkbgTypoCssVars); } }); |
| 21 |
function getTypoControl(label, key, attrs, setA) { return _tc(label, key, attrs, setA); } |
| 22 |
function getTypoCssVars(attrs) { |
| 23 |
var v = {}; |
| 24 |
_tvf(v, 'headingTypo', attrs, '--bkwbn-hd-'); |
| 25 |
_tvf(v, 'subtextTypo', attrs, '--bkwbn-st-'); |
| 26 |
_tvf(v, 'topicsHeadingTypo', attrs, '--bkwbn-th-'); |
| 27 |
_tvf(v, 'ctaTypo', attrs, '--bkwbn-ct-'); |
| 28 |
return v; |
| 29 |
} |
| 30 |
|
| 31 |
registerBlockType('blockenberg/webinar-section', { |
| 32 |
edit: function (props) { |
| 33 |
var attributes = props.attributes; |
| 34 |
var setAttributes = props.setAttributes; |
| 35 |
var a = attributes; |
| 36 |
|
| 37 |
var blockProps = useBlockProps((function () { |
| 38 |
var s = getTypoCssVars(a); |
| 39 |
s.backgroundColor = a.bgColor; |
| 40 |
s.paddingTop = a.paddingTop + 'px'; |
| 41 |
s.paddingBottom = a.paddingBottom + 'px'; |
| 42 |
return { className: 'bkbg-wbn-wrap', style: s }; |
| 43 |
})()); |
| 44 |
|
| 45 |
function updateSpeaker(idx, key, val) { |
| 46 |
setAttributes({ speakers: a.speakers.map(function (s, i) { return i === idx ? Object.assign({}, s, { [key]: val }) : s; }) }); |
| 47 |
} |
| 48 |
function addSpeaker() { |
| 49 |
setAttributes({ speakers: a.speakers.concat([{ name: 'New Speaker', title: 'Role', bio: '', avatarUrl: '', avatarId: 0 }]) }); |
| 50 |
} |
| 51 |
function removeSpeaker(idx) { |
| 52 |
setAttributes({ speakers: a.speakers.filter(function (_, i) { return i !== idx; }) }); |
| 53 |
} |
| 54 |
function updateTopic(idx, val) { |
| 55 |
setAttributes({ topics: a.topics.map(function (t, i) { return i === idx ? Object.assign({}, t, { text: val }) : t; }) }); |
| 56 |
} |
| 57 |
function addTopic() { |
| 58 |
setAttributes({ topics: a.topics.concat([{ text: 'New topic' }]) }); |
| 59 |
} |
| 60 |
function removeTopic(idx) { |
| 61 |
setAttributes({ topics: a.topics.filter(function (_, i) { return i !== idx; }) }); |
| 62 |
} |
| 63 |
|
| 64 |
var isSplit = a.layout === 'split'; |
| 65 |
|
| 66 |
var innerStyle = { maxWidth: a.maxWidth + 'px', margin: '0 auto', padding: '0 24px' }; |
| 67 |
|
| 68 |
// Left column content |
| 69 |
var leftContent = el('div', { className: 'bkbg-wbn-left' }, |
| 70 |
a.showBadge && el('span', { style: { display: 'inline-block', background: a.badgeBg, color: a.badgeColor, fontWeight: 800, fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '5px 14px', borderRadius: 999, marginBottom: 20 } }, a.badge), |
| 71 |
el(RichText, { tagName: 'h2', className: 'bkbg-wbn-heading', value: a.heading, onChange: function (v) { setAttributes({ heading: v }); }, placeholder: __('Webinar Title…', 'blockenberg'), style: { color: a.headingColor } }), |
| 72 |
a.showSubtext && el(RichText, { tagName: 'p', className: 'bkbg-wbn-subtext', value: a.subtext, onChange: function (v) { setAttributes({ subtext: v }); }, placeholder: __('Description…', 'blockenberg'), style: { color: a.subtextColor, margin: '0 0 28px' } }), |
| 73 |
|
| 74 |
// Date/time row |
| 75 |
a.showDateTime && el('div', { style: { display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 32 } }, |
| 76 |
el('div', { style: { background: a.dateBg, border: '1px solid ' + a.dateBorder, borderRadius: 10, padding: '14px 20px' } }, |
| 77 |
el('p', { style: { fontSize: 11, color: a.subtextColor, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 4px' } }, __('Date', 'blockenberg')), |
| 78 |
el('p', { style: { fontSize: 18, fontWeight: 800, color: a.dateColor, margin: 0 } }, a.eventDate || __('Set date…', 'blockenberg')) |
| 79 |
), |
| 80 |
el('div', { style: { background: a.dateBg, border: '1px solid ' + a.dateBorder, borderRadius: 10, padding: '14px 20px' } }, |
| 81 |
el('p', { style: { fontSize: 11, color: a.subtextColor, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 4px' } }, __('Time', 'blockenberg')), |
| 82 |
el('p', { style: { fontSize: 18, fontWeight: 800, color: a.dateColor, margin: 0 } }, a.eventTime + ' ' + a.eventTimezone) |
| 83 |
) |
| 84 |
), |
| 85 |
|
| 86 |
// Topics |
| 87 |
a.showTopics && el('div', { style: { marginBottom: 32 } }, |
| 88 |
el('h3', { style: { color: a.headingColor, fontSize: 18, fontWeight: 700, margin: '0 0 16px' } }, a.topicsHeading), |
| 89 |
el('ul', { style: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 } }, |
| 90 |
a.topics.map(function (t, idx) { |
| 91 |
return el('li', { key: idx, style: { display: 'flex', alignItems: 'flex-start', gap: 10 } }, |
| 92 |
el('span', { style: { color: a.checkColor, fontSize: 16, marginTop: 1, flexShrink: 0 } }, '✓'), |
| 93 |
el(RichText, { tagName: 'span', value: t.text, onChange: function (v) { updateTopic(idx, v); }, placeholder: __('Topic…', 'blockenberg'), style: { color: a.topicColor, fontSize: 15, lineHeight: 1.5 } }), |
| 94 |
el(Button, { isDestructive: true, size: 'small', onClick: function () { removeTopic(idx); }, style: { marginLeft: 'auto', fontSize: 10, flexShrink: 0 } }, '✕') |
| 95 |
); |
| 96 |
}), |
| 97 |
el('li', null, el(Button, { variant: 'secondary', size: 'small', onClick: addTopic, __nextHasNoMarginBottom: true }, '+ Add Topic')) |
| 98 |
) |
| 99 |
), |
| 100 |
|
| 101 |
// CTA |
| 102 |
el('div', null, |
| 103 |
el('a', { href: '#', style: { display: 'inline-block', background: a.ctaBg, color: a.ctaColor, fontWeight: 800, fontSize: 16, padding: '16px 36px', borderRadius: 8, textDecoration: 'none', marginBottom: a.showCtaSubtext ? 12 : 0 } }, a.ctaLabel), |
| 104 |
a.showCtaSubtext && el('p', { style: { color: a.ctaSubtextColor, fontSize: 13, margin: '10px 0 0' } }, a.ctaSubtext) |
| 105 |
) |
| 106 |
); |
| 107 |
|
| 108 |
// Right column: speakers + countdown |
| 109 |
var rightContent = el('div', { className: 'bkbg-wbn-right' }, |
| 110 |
a.showSpeakers && el('div', { style: { marginBottom: 28 } }, |
| 111 |
el('h3', { style: { color: a.headingColor, fontSize: 16, fontWeight: 700, margin: '0 0 16px', textTransform: 'uppercase', letterSpacing: '0.06em' } }, __('Your Hosts', 'blockenberg')), |
| 112 |
el('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } }, |
| 113 |
a.speakers.map(function (s, idx) { |
| 114 |
return el('div', { key: idx, style: { background: a.speakerCardBg, borderRadius: 12, padding: '16px 18px', display: 'flex', gap: 14, alignItems: 'center', position: 'relative' } }, |
| 115 |
el(MediaUploadCheck, null, |
| 116 |
el(MediaUpload, { |
| 117 |
onSelect: function (media) { setAttributes({ speakers: a.speakers.map(function (s, i) { return i === idx ? Object.assign({}, s, { avatarUrl: media.url, avatarId: media.id }) : s; }) }); }, |
| 118 |
allowedTypes: ['image'], |
| 119 |
value: s.avatarId, |
| 120 |
render: function (ref) { |
| 121 |
return el('div', { onClick: ref.open, style: { cursor: 'pointer', flexShrink: 0 } }, |
| 122 |
s.avatarUrl |
| 123 |
? el('img', { src: s.avatarUrl, style: { width: 52, height: 52, borderRadius: '50%', objectFit: 'cover' } }) |
| 124 |
: el('div', { style: { width: 52, height: 52, borderRadius: '50%', background: '#334155', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 } }, '🎤') |
| 125 |
); |
| 126 |
} |
| 127 |
}) |
| 128 |
), |
| 129 |
el('div', { style: { flex: 1 } }, |
| 130 |
el(RichText, { tagName: 'p', value: s.name, onChange: function (v) { updateSpeaker(idx, 'name', v); }, placeholder: __('Name…', 'blockenberg'), style: { color: a.speakerNameColor, fontWeight: 700, fontSize: 15, margin: '0 0 2px' } }), |
| 131 |
el(RichText, { tagName: 'p', value: s.title, onChange: function (v) { updateSpeaker(idx, 'title', v); }, placeholder: __('Title…', 'blockenberg'), style: { color: a.speakerTitleColor, fontSize: 13, margin: '0 0 4px' } }), |
| 132 |
el(RichText, { tagName: 'p', value: s.bio, onChange: function (v) { updateSpeaker(idx, 'bio', v); }, placeholder: __('Short bio…', 'blockenberg'), style: { color: a.subtextColor, fontSize: 12, margin: 0 } }) |
| 133 |
), |
| 134 |
el(Button, { isDestructive: true, size: 'small', onClick: function () { removeSpeaker(idx); }, style: { position: 'absolute', top: 8, right: 8, fontSize: 10 } }, '✕') |
| 135 |
); |
| 136 |
}), |
| 137 |
el(Button, { variant: 'secondary', size: 'small', onClick: addSpeaker, __nextHasNoMarginBottom: true }, '+ Add Speaker') |
| 138 |
) |
| 139 |
), |
| 140 |
|
| 141 |
// Countdown preview |
| 142 |
a.showCountdown && el('div', { style: { background: a.countdownBg, borderRadius: 12, padding: 24 } }, |
| 143 |
el('p', { style: { color: a.subtextColor, fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '0 0 14px', textAlign: 'center' } }, __('Starts In', 'blockenberg')), |
| 144 |
el('div', { className: 'bkbg-wbn-countdown-preview', style: { display: 'flex', justifyContent: 'center', gap: 16 } }, |
| 145 |
['00', '00', '00', '00'].map(function (n, i) { |
| 146 |
return el('div', { key: i, style: { textAlign: 'center' } }, |
| 147 |
el('div', { style: { fontSize: 32, fontWeight: 800, color: a.countdownNumColor, lineHeight: 1 } }, n), |
| 148 |
el('div', { style: { fontSize: 11, color: a.countdownLabelColor, marginTop: 4 } }, ['Days', 'Hours', 'Mins', 'Secs'][i]) |
| 149 |
); |
| 150 |
}) |
| 151 |
) |
| 152 |
) |
| 153 |
); |
| 154 |
|
| 155 |
return el('div', blockProps, |
| 156 |
el(InspectorControls, null, |
| 157 |
el(PanelBody, { title: __('Content', 'blockenberg'), initialOpen: true }, |
| 158 |
el(ToggleControl, { label: __('Show Badge', 'blockenberg'), checked: a.showBadge, onChange: function (v) { setAttributes({ showBadge: v }); }, __nextHasNoMarginBottom: true }), |
| 159 |
a.showBadge && el(TextControl, { label: __('Badge Text', 'blockenberg'), value: a.badge, onChange: function (v) { setAttributes({ badge: v }); }, __nextHasNoMarginBottom: true }), |
| 160 |
el(ToggleControl, { label: __('Show Subtext', 'blockenberg'), checked: a.showSubtext, onChange: function (v) { setAttributes({ showSubtext: v }); }, __nextHasNoMarginBottom: true }), |
| 161 |
el(ToggleControl, { label: __('Show Date/Time', 'blockenberg'), checked: a.showDateTime, onChange: function (v) { setAttributes({ showDateTime: v }); }, __nextHasNoMarginBottom: true }), |
| 162 |
a.showDateTime && el(TextControl, { label: __('Event Date', 'blockenberg'), value: a.eventDate, placeholder: 'e.g. Thursday, March 28', onChange: function (v) { setAttributes({ eventDate: v }); }, __nextHasNoMarginBottom: true }), |
| 163 |
a.showDateTime && el(TextControl, { label: __('Time', 'blockenberg'), value: a.eventTime, onChange: function (v) { setAttributes({ eventTime: v }); }, __nextHasNoMarginBottom: true }), |
| 164 |
a.showDateTime && el(TextControl, { label: __('Timezone', 'blockenberg'), value: a.eventTimezone, onChange: function (v) { setAttributes({ eventTimezone: v }); }, __nextHasNoMarginBottom: true }), |
| 165 |
el(ToggleControl, { label: __('Show Topics', 'blockenberg'), checked: a.showTopics, onChange: function (v) { setAttributes({ showTopics: v }); }, __nextHasNoMarginBottom: true }), |
| 166 |
a.showTopics && el(TextControl, { label: __('Topics Heading', 'blockenberg'), value: a.topicsHeading, onChange: function (v) { setAttributes({ topicsHeading: v }); }, __nextHasNoMarginBottom: true }), |
| 167 |
el(ToggleControl, { label: __('Show Speakers', 'blockenberg'), checked: a.showSpeakers, onChange: function (v) { setAttributes({ showSpeakers: v }); }, __nextHasNoMarginBottom: true }), |
| 168 |
el(ToggleControl, { label: __('Show Countdown', 'blockenberg'), checked: a.showCountdown, onChange: function (v) { setAttributes({ showCountdown: v }); }, __nextHasNoMarginBottom: true }), |
| 169 |
a.showCountdown && el(TextControl, { label: __('Countdown End (ISO date)', 'blockenberg'), value: a.countdownEnd, placeholder: '2025-09-15T14:00:00', onChange: function (v) { setAttributes({ countdownEnd: v }); }, __nextHasNoMarginBottom: true }), |
| 170 |
el(TextControl, { label: __('CTA Label', 'blockenberg'), value: a.ctaLabel, onChange: function (v) { setAttributes({ ctaLabel: v }); }, __nextHasNoMarginBottom: true }), |
| 171 |
el(TextControl, { label: __('CTA URL', 'blockenberg'), value: a.ctaUrl, onChange: function (v) { setAttributes({ ctaUrl: v }); }, __nextHasNoMarginBottom: true }), |
| 172 |
el(ToggleControl, { label: __('Show CTA Subtext', 'blockenberg'), checked: a.showCtaSubtext, onChange: function (v) { setAttributes({ showCtaSubtext: v }); }, __nextHasNoMarginBottom: true }), |
| 173 |
a.showCtaSubtext && el(TextControl, { label: __('CTA Subtext', 'blockenberg'), value: a.ctaSubtext, onChange: function (v) { setAttributes({ ctaSubtext: v }); }, __nextHasNoMarginBottom: true }) |
| 174 |
), |
| 175 |
el(PanelBody, { title: __('Layout', 'blockenberg'), initialOpen: false }, |
| 176 |
el(SelectControl, { label: __('Layout', 'blockenberg'), value: a.layout, options: [{ label: 'Split (info + speakers)', value: 'split' }, { label: 'Centered', value: 'centered' }], onChange: function (v) { setAttributes({ layout: v }); }, __nextHasNoMarginBottom: true }), |
| 177 |
el(RangeControl, { label: __('Max Width (px)', 'blockenberg'), value: a.maxWidth, min: 600, max: 1400, onChange: function (v) { setAttributes({ maxWidth: v }); }, __nextHasNoMarginBottom: true }), |
| 178 |
el(RangeControl, { label: __('Padding Top (px)', 'blockenberg'), value: a.paddingTop, min: 0, max: 200, onChange: function (v) { setAttributes({ paddingTop: v }); }, __nextHasNoMarginBottom: true }), |
| 179 |
el(RangeControl, { label: __('Padding Bottom (px)', 'blockenberg'), value: a.paddingBottom, min: 0, max: 200, onChange: function (v) { setAttributes({ paddingBottom: v }); }, __nextHasNoMarginBottom: true }) |
| 180 |
), |
| 181 |
|
| 182 |
el( PanelBody, { title: __( 'Typography', 'blockenberg' ), initialOpen: false }, |
| 183 |
getTypoControl(__('Heading', 'blockenberg'), 'headingTypo', a, setAttributes), |
| 184 |
getTypoControl(__('Subtext', 'blockenberg'), 'subtextTypo', a, setAttributes), |
| 185 |
getTypoControl(__('Topics Heading', 'blockenberg'), 'topicsHeadingTypo', a, setAttributes), |
| 186 |
getTypoControl(__('CTA Button', 'blockenberg'), 'ctaTypo', a, setAttributes) |
| 187 |
), |
| 188 |
el(PanelColorSettings, { |
| 189 |
title: __('Colors', 'blockenberg'), |
| 190 |
initialOpen: false, |
| 191 |
colorSettings: [ |
| 192 |
{ label: __('Background', 'blockenberg'), value: a.bgColor, onChange: function (v) { setAttributes({ bgColor: v || '#0f172a' }); } }, |
| 193 |
{ label: __('Heading Color', 'blockenberg'), value: a.headingColor, onChange: function (v) { setAttributes({ headingColor: v || '#ffffff' }); } }, |
| 194 |
{ label: __('Subtext Color', 'blockenberg'), value: a.subtextColor, onChange: function (v) { setAttributes({ subtextColor: v || '#94a3b8' }); } }, |
| 195 |
{ label: __('Accent Color', 'blockenberg'), value: a.accentColor, onChange: function (v) { setAttributes({ accentColor: v || '#a78bfa' }); } }, |
| 196 |
{ label: __('Badge BG', 'blockenberg'), value: a.badgeBg, onChange: function (v) { setAttributes({ badgeBg: v || '#7c3aed' }); } }, |
| 197 |
{ label: __('Check/Topic Color', 'blockenberg'), value: a.checkColor, onChange: function (v) { setAttributes({ checkColor: v || '#a78bfa' }); } }, |
| 198 |
{ label: __('Date Block BG', 'blockenberg'), value: a.dateBg, onChange: function (v) { setAttributes({ dateBg: v || '#1e293b' }); } }, |
| 199 |
{ label: __('Speaker Card BG', 'blockenberg'), value: a.speakerCardBg, onChange: function (v) { setAttributes({ speakerCardBg: v || '#1e293b' }); } }, |
| 200 |
{ label: __('CTA Button BG', 'blockenberg'), value: a.ctaBg, onChange: function (v) { setAttributes({ ctaBg: v || '#7c3aed' }); } } |
| 201 |
] |
| 202 |
}) |
| 203 |
), |
| 204 |
|
| 205 |
el('div', { style: innerStyle }, |
| 206 |
isSplit |
| 207 |
? el('div', { className: 'bkbg-wbn-grid', style: { display: 'grid', gridTemplateColumns: '1fr 420px', gap: 48, alignItems: 'start' } }, leftContent, rightContent) |
| 208 |
: el('div', { className: 'bkbg-wbn-centered', style: { maxWidth: 700, margin: '0 auto', textAlign: 'center' } }, leftContent) |
| 209 |
) |
| 210 |
); |
| 211 |
}, |
| 212 |
save: function (props) { |
| 213 |
var useBlockProps = wp.blockEditor.useBlockProps; |
| 214 |
return el('div', useBlockProps.save({ style: getTypoCssVars(props.attributes) }), |
| 215 |
el('div', { className: 'bkbg-wbn-app', 'data-opts': JSON.stringify(props.attributes) }) |
| 216 |
); |
| 217 |
} |
| 218 |
}); |
| 219 |
}() ); |
| 220 |
|
