PluginProbe
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor / 2.0.7
Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor v2.0.7
2.0.13 2.0.12 2.0.11 2.0.10 2.0.9 trunk 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8
blockenberg / blocks / event-debrief / index.js

index.js in Blockenberg — 600+ Advanced Gutenberg Blocks & AI Agent for WordPress Block Editor 2.0.7, at blocks/event-debrief/index.js

305 lines 23.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 ( function () {
2 var el = wp.element.createElement;
3 var Fragment = wp.element.Fragment;
4 var registerBlockType = wp.blocks.registerBlockType;
5 var InspectorControls = wp.blockEditor.InspectorControls;
6 var useBlockProps = wp.blockEditor.useBlockProps;
7 var PanelBody = wp.components.PanelBody;
8 var PanelColorSettings = wp.blockEditor.PanelColorSettings;
9 var ToggleControl = wp.components.ToggleControl;
10 var RangeControl = wp.components.RangeControl;
11 var TextControl = wp.components.TextControl;
12 var TextareaControl = wp.components.TextareaControl;
13 var SelectControl = wp.components.SelectControl;
14 var Button = wp.components.Button;
15
16 var _edTC, _edTV;
17 function _tc() { return _edTC || (_edTC = window.bkbgTypographyControl); }
18 function _tv(t, p) { return (_edTV || (_edTV = window.bkbgTypoCssVars)) ? _edTV(t, p) : {}; }
19
20 var eventTypeOptions = [
21 { label: '🎪 Conference', value: 'conference' },
22 { label: '💻 Webinar', value: 'webinar' },
23 { label: '🤝 Meetup', value: 'meetup' },
24 { label: '🛠️ Workshop', value: 'workshop' }
25 ];
26 var eventTypeInfo = {
27 conference: { label: 'Conference', bg: '#ede9fe', color: '#5b21b6' },
28 webinar: { label: 'Webinar', bg: '#dbeafe', color: '#1e40af' },
29 meetup: { label: 'Meetup', bg: '#dcfce7', color: '#14532d' },
30 workshop: { label: 'Workshop', bg: '#fef3c7', color: '#78350f' }
31 };
32
33 function upd(arr, idx, field, val) {
34 return arr.map(function (e, i) {
35 if (i !== idx) return e;
36 var u = {}; u[field] = val;
37 return Object.assign({}, e, u);
38 });
39 }
40
41 function sectionHead(label, a) {
42 return el('div', { style: { fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.09em', color: a.accentColor, borderBottom: '2px solid ' + a.accentColor, paddingBottom: 5, marginBottom: 10 } }, label);
43 }
44
45 function badge(text, bg, color) {
46 return el('span', { style: { display: 'inline-block', padding: '3px 10px', borderRadius: 100, fontSize: 11, fontWeight: 700, background: bg, color: color } }, text);
47 }
48
49 function statTile(label, value, a) {
50 return el('div', { style: { textAlign: 'center', background: a.statBg, borderRadius: 8, padding: '12px 10px', flex: '1 1 90px' } },
51 el('div', { style: { fontSize: 22, fontWeight: 800, color: a.statColor } }, typeof value === 'number' ? value.toLocaleString() : value),
52 el('div', { style: { fontSize: 11, color: '#6b7280', marginTop: 4 } }, label)
53 );
54 }
55
56 registerBlockType('blockenberg/event-debrief', {
57 edit: function (props) {
58 var a = props.attributes;
59 var set = props.setAttributes;
60 var blockProps = useBlockProps({ className: 'bkbg-ed-editor-wrap', style: Object.assign({},
61 _tv(a.typoTitle || {}, '--bkbg-ed-ttl-'),
62 _tv(a.typoBody || {}, '--bkbg-ed-bdy-')
63 ) });
64 var tInfo = eventTypeInfo[a.eventType] || eventTypeInfo.conference;
65 var lh = (a.lineHeight / 100).toFixed(2);
66
67 var preview = el('div', { className: 'bkbg-ed-wrap', style: { border: '1px solid ' + a.borderColor, borderRadius: a.borderRadius + 'px', overflow: 'hidden', background: a.bgColor } },
68 // Header
69 el('div', { style: { background: a.headerBg, padding: '20px 24px' } },
70 el('div', { style: { marginBottom: 10, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' } },
71 badge(tInfo.label, tInfo.bg, tInfo.color),
72 a.eventLocation && el('span', { style: { fontSize: 12, color: a.metaColor } }, '📍 ' + a.eventLocation),
73 a.eventDate && el('span', { style: { fontSize: 12, color: a.metaColor } }, '�
74 ' + a.eventDate)
75 ),
76 el('h2', { className: 'bkbg-ed-title', style: { margin: 0, color: a.headerColor } }, a.eventName)
77 ),
78 // Stats
79 a.showStats && el('div', { style: { padding: '14px 24px', borderBottom: '1px solid ' + a.borderColor, display: 'flex', gap: 10, flexWrap: 'wrap' } },
80 statTile('In-Person', a.attendees, a),
81 statTile('Online', a.onlineAttendees, a),
82 statTile('NPS Score', a.nps, a)
83 ),
84 // Body
85 el('div', { style: { padding: '18px 24px', display: 'grid', gap: 20 } },
86 // Summary
87 a.showSummary && a.summary && el('div', { className: 'bkbg-ed-summary', style: { background: a.summaryBg, borderRadius: 8, padding: '12px 16px', color: a.summaryColor } }, a.summary),
88 // Highlights
89 a.showHighlights && a.highlights.length > 0 && el('div', null,
90 sectionHead(a.highlightsLabel, a),
91 el('div', { style: { display: 'grid', gap: 10 } },
92 a.highlights.map(function (h, i) {
93 return el('div', { key: i, style: { padding: '12px 14px', background: a.highlightBg, borderLeft: '4px solid ' + a.highlightBorder, borderRadius: '0 8px 8px 0' } },
94 el('strong', { style: { display: 'block', marginBottom: 5, color: '#111827' } }, h.title),
95 el('p', { style: { margin: 0, color: a.summaryColor } }, h.description)
96 );
97 })
98 )
99 ),
100 // Quotes
101 a.showQuotes && a.quotes.length > 0 && el('div', null,
102 sectionHead(a.quotesLabel, a),
103 el('div', { style: { display: 'grid', gap: 10 } },
104 a.quotes.map(function (q, i) {
105 return el('figure', { key: i, style: { margin: 0, background: a.quoteBg, borderLeft: '4px solid ' + a.quoteBorder, borderRadius: '0 8px 8px 0', padding: '12px 16px' } },
106 el('blockquote', { style: { margin: '0 0 6px', fontStyle: 'italic', color: a.quoteColor } }, '\u201c' + q.quote + '\u201d'),
107 el('figcaption', { style: { fontSize: 12, fontWeight: 700, color: a.quoteColor, opacity: .75 } }, '' + q.speaker + (q.role ? ', ' + q.role : ''))
108 );
109 })
110 )
111 ),
112 // Outcomes
113 a.showOutcomes && a.outcomes.length > 0 && el('div', null,
114 sectionHead(a.outcomesLabel, a),
115 el('ul', { style: { margin: 0, padding: '0 0 0 18px', color: a.outcomeColor } },
116 a.outcomes.map(function (o, i) {
117 return el('li', { key: i, style: { marginBottom: 5 } }, o);
118 })
119 )
120 ),
121 // Lessons
122 a.showLessons && a.lessonsLearned.length > 0 && el('div', null,
123 sectionHead(a.lessonsLabel, a),
124 el('ul', { style: { margin: 0, padding: '0 0 0 18px', color: a.lessonColor } },
125 a.lessonsLearned.map(function (l, i) {
126 return el('li', { key: i, style: { marginBottom: 5 } }, l);
127 })
128 )
129 ),
130 // Next Event
131 a.showNextEvent && a.nextEventName && el('div', { style: { background: a.nextEventBg, borderRadius: 8, padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 } },
132 el('div', null,
133 el('div', { style: { fontSize: 11, color: 'rgba(255,255,255,.55)', marginBottom: 4 } }, 'UP NEXT'),
134 el('div', { style: { fontWeight: 700, color: a.nextEventColor } }, a.nextEventName),
135 a.nextEventDate && el('div', { style: { fontSize: 12, color: 'rgba(255,255,255,.65)', marginTop: 2 } }, '�
136 ' + a.nextEventDate)
137 ),
138 el('span', { style: { background: a.accentColor, color: '#fff', padding: '7px 16px', borderRadius: 6, fontWeight: 700, fontSize: 13 } }, 'Learn More →')
139 )
140 )
141 );
142
143 return el(Fragment, null,
144 el('div', blockProps, preview),
145 el(InspectorControls, null,
146 el(PanelBody, { title: 'Event Info', initialOpen: true },
147 el(TextControl, { label: 'Event Name', value: a.eventName, __nextHasNoMarginBottom: true, onChange: function (v) { set({ eventName: v }); } }),
148 el('div', { style: { marginTop: 8 } },
149 el(SelectControl, { label: 'Event Type', value: a.eventType, options: eventTypeOptions, __nextHasNoMarginBottom: true, onChange: function (v) { set({ eventType: v }); } })
150 ),
151 el('div', { style: { marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } },
152 el(TextControl, { label: 'Date', value: a.eventDate, __nextHasNoMarginBottom: true, onChange: function (v) { set({ eventDate: v }); } }),
153 el(TextControl, { label: 'Location', value: a.eventLocation, __nextHasNoMarginBottom: true, onChange: function (v) { set({ eventLocation: v }); } })
154 )
155 ),
156 el(PanelBody, { title: 'Stats', initialOpen: false },
157 el(ToggleControl, { label: 'Show Stats', checked: a.showStats, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showStats: v }); } }),
158 el('div', { style: { marginTop: 8 } },
159 el(TextControl, { label: 'In-Person Attendees', value: String(a.attendees), type: 'number', __nextHasNoMarginBottom: true, onChange: function (v) { set({ attendees: parseInt(v, 10) || 0 }); } })
160 ),
161 el('div', { style: { marginTop: 8 } },
162 el(TextControl, { label: 'Online Attendees', value: String(a.onlineAttendees), type: 'number', __nextHasNoMarginBottom: true, onChange: function (v) { set({ onlineAttendees: parseInt(v, 10) || 0 }); } })
163 ),
164 el('div', { style: { marginTop: 8 } },
165 el(RangeControl, { label: 'NPS Score', value: a.nps, min: 0, max: 100, __nextHasNoMarginBottom: true, onChange: function (v) { set({ nps: v }); } })
166 )
167 ),
168 el(PanelBody, { title: 'Summary', initialOpen: false },
169 el(ToggleControl, { label: 'Show Summary', checked: a.showSummary, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showSummary: v }); } }),
170 el('div', { style: { marginTop: 8 } },
171 el(TextareaControl, { label: 'Summary', value: a.summary, rows: 4, __nextHasNoMarginBottom: true, onChange: function (v) { set({ summary: v }); } })
172 )
173 ),
174 el(PanelBody, { title: 'Highlights', initialOpen: false },
175 el(ToggleControl, { label: 'Show Highlights', checked: a.showHighlights, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showHighlights: v }); } }),
176 el('div', { style: { marginTop: 8 } },
177 el(TextControl, { label: 'Section Label', value: a.highlightsLabel, __nextHasNoMarginBottom: true, onChange: function (v) { set({ highlightsLabel: v }); } })
178 ),
179 el('div', { style: { marginTop: 8 } },
180 a.highlights.map(function (h, i) {
181 return el('div', { key: i, style: { marginBottom: 10, padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8, background: '#f8fafc' } },
182 el('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 4 } },
183 el(Button, { isDestructive: true, variant: 'link', style: { fontSize: 11 }, onClick: function () { set({ highlights: a.highlights.filter(function (_, j) { return j !== i; }) }); } }, '')
184 ),
185 el(TextControl, { label: 'Title', value: h.title, __nextHasNoMarginBottom: true, onChange: function (v) { set({ highlights: upd(a.highlights, i, 'title', v) }); } }),
186 el('div', { style: { marginTop: 8 } },
187 el(TextareaControl, { label: 'Description', value: h.description, rows: 2, __nextHasNoMarginBottom: true, onChange: function (v) { set({ highlights: upd(a.highlights, i, 'description', v) }); } })
188 )
189 );
190 }),
191 el(Button, { variant: 'primary', style: { width: '100%', justifyContent: 'center', marginTop: 4 }, onClick: function () { set({ highlights: a.highlights.concat([{ title: 'Highlight', description: '' }]) }); } }, '+ Add Highlight')
192 )
193 ),
194 el(PanelBody, { title: 'Attendee Quotes', initialOpen: false },
195 el(ToggleControl, { label: 'Show Quotes', checked: a.showQuotes, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showQuotes: v }); } }),
196 el('div', { style: { marginTop: 8 } },
197 el(TextControl, { label: 'Section Label', value: a.quotesLabel, __nextHasNoMarginBottom: true, onChange: function (v) { set({ quotesLabel: v }); } })
198 ),
199 el('div', { style: { marginTop: 8 } },
200 a.quotes.map(function (q, i) {
201 return el('div', { key: i, style: { marginBottom: 10, padding: '8px 10px', border: '1px solid #e5e7eb', borderRadius: 8, background: '#f8fafc' } },
202 el('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 4 } },
203 el(Button, { isDestructive: true, variant: 'link', style: { fontSize: 11 }, onClick: function () { set({ quotes: a.quotes.filter(function (_, j) { return j !== i; }) }); } }, '')
204 ),
205 el(TextareaControl, { label: 'Quote', value: q.quote, rows: 2, __nextHasNoMarginBottom: true, onChange: function (v) { set({ quotes: upd(a.quotes, i, 'quote', v) }); } }),
206 el('div', { style: { marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } },
207 el(TextControl, { label: 'Speaker', value: q.speaker, __nextHasNoMarginBottom: true, onChange: function (v) { set({ quotes: upd(a.quotes, i, 'speaker', v) }); } }),
208 el(TextControl, { label: 'Role / Company', value: q.role, __nextHasNoMarginBottom: true, onChange: function (v) { set({ quotes: upd(a.quotes, i, 'role', v) }); } })
209 )
210 );
211 }),
212 el(Button, { variant: 'primary', style: { width: '100%', justifyContent: 'center', marginTop: 4 }, onClick: function () { set({ quotes: a.quotes.concat([{ quote: 'Quote text.', speaker: 'Speaker', role: 'Role, Company' }]) }); } }, '+ Add Quote')
213 )
214 ),
215 el(PanelBody, { title: 'Key Outcomes', initialOpen: false },
216 el(ToggleControl, { label: 'Show Outcomes', checked: a.showOutcomes, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showOutcomes: v }); } }),
217 el('div', { style: { marginTop: 8 } },
218 el(TextControl, { label: 'Section Label', value: a.outcomesLabel, __nextHasNoMarginBottom: true, onChange: function (v) { set({ outcomesLabel: v }); } })
219 ),
220 el('div', { style: { marginTop: 8 } },
221 a.outcomes.map(function (o, i) {
222 return el('div', { key: i, style: { display: 'flex', gap: 6, marginBottom: 6, alignItems: 'flex-start' } },
223 el(TextControl, { label: '', value: o, __nextHasNoMarginBottom: true, onChange: function (v) { set({ outcomes: a.outcomes.map(function (x, j) { return j === i ? v : x; }) }); } }),
224 el(Button, { isDestructive: true, variant: 'link', style: { flexShrink: 0 }, onClick: function () { set({ outcomes: a.outcomes.filter(function (_, j) { return j !== i; }) }); } }, '')
225 );
226 }),
227 el(Button, { variant: 'secondary', style: { width: '100%', justifyContent: 'center', marginTop: 4 }, onClick: function () { set({ outcomes: a.outcomes.concat(['New outcome']) }); } }, '+ Add Outcome')
228 )
229 ),
230 el(PanelBody, { title: 'Lessons Learned', initialOpen: false },
231 el(ToggleControl, { label: 'Show Lessons', checked: a.showLessons, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showLessons: v }); } }),
232 el('div', { style: { marginTop: 8 } },
233 el(TextControl, { label: 'Section Label', value: a.lessonsLabel, __nextHasNoMarginBottom: true, onChange: function (v) { set({ lessonsLabel: v }); } })
234 ),
235 el('div', { style: { marginTop: 8 } },
236 a.lessonsLearned.map(function (l, i) {
237 return el('div', { key: i, style: { display: 'flex', gap: 6, marginBottom: 6, alignItems: 'flex-start' } },
238 el(TextControl, { label: '', value: l, __nextHasNoMarginBottom: true, onChange: function (v) { set({ lessonsLearned: a.lessonsLearned.map(function (x, j) { return j === i ? v : x; }) }); } }),
239 el(Button, { isDestructive: true, variant: 'link', style: { flexShrink: 0 }, onClick: function () { set({ lessonsLearned: a.lessonsLearned.filter(function (_, j) { return j !== i; }) }); } }, '')
240 );
241 }),
242 el(Button, { variant: 'secondary', style: { width: '100%', justifyContent: 'center', marginTop: 4 }, onClick: function () { set({ lessonsLearned: a.lessonsLearned.concat(['New lesson']) }); } }, '+ Add Lesson')
243 )
244 ),
245 el(PanelBody, { title: 'Next Event', initialOpen: false },
246 el(ToggleControl, { label: 'Show Next Event', checked: a.showNextEvent, __nextHasNoMarginBottom: true, onChange: function (v) { set({ showNextEvent: v }); } }),
247 el('div', { style: { marginTop: 8 } },
248 el(TextControl, { label: 'Event Name', value: a.nextEventName, __nextHasNoMarginBottom: true, onChange: function (v) { set({ nextEventName: v }); } })
249 ),
250 el('div', { style: { marginTop: 8, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 } },
251 el(TextControl, { label: 'Date', value: a.nextEventDate, __nextHasNoMarginBottom: true, onChange: function (v) { set({ nextEventDate: v }); } }),
252 el(TextControl, { label: 'URL', value: a.nextEventUrl, __nextHasNoMarginBottom: true, onChange: function (v) { set({ nextEventUrl: v }); } })
253 )
254 ),
255 el(PanelBody, { title: 'Typography', initialOpen: false },
256 _tc() && el(_tc(), { label: 'Title', typo: a.typoTitle || {}, onChange: function (v) { set({ typoTitle: v }); } }),
257 _tc() && el(_tc(), { label: 'Body Text', typo: a.typoBody || {}, onChange: function (v) { set({ typoBody: v }); } }),
258 el('div', { style: { marginTop: 8 } },
259 el(RangeControl, { label: 'Border Radius (px)', value: a.borderRadius, min: 0, max: 24, __nextHasNoMarginBottom: true, onChange: function (v) { set({ borderRadius: v }); } })
260 )
261 ),
262 el(PanelColorSettings, {
263 title: 'Header & Layout',
264 initialOpen: false,
265 colorSettings: [
266 { label: 'Header BG', value: a.headerBg, onChange: function (v) { set({ headerBg: v || '#1e1b4b' }); } },
267 { label: 'Header Text', value: a.headerColor, onChange: function (v) { set({ headerColor: v || '#ffffff' }); } },
268 { label: 'Meta Text', value: a.metaColor, onChange: function (v) { set({ metaColor: v || '#a5b4fc' }); } },
269 { label: 'Block BG', value: a.bgColor, onChange: function (v) { set({ bgColor: v || '#ffffff' }); } },
270 { label: 'Border', value: a.borderColor, onChange: function (v) { set({ borderColor: v || '#e5e7eb' }); } },
271 { label: 'Accent', value: a.accentColor, onChange: function (v) { set({ accentColor: v || '#6366f1' }); } }
272 ]
273 }),
274 el(PanelColorSettings, {
275 title: 'Content Colors',
276 initialOpen: false,
277 colorSettings: [
278 { label: 'Stat BG', value: a.statBg, onChange: function (v) { set({ statBg: v || '#f5f3ff' }); } },
279 { label: 'Stat Number', value: a.statColor, onChange: function (v) { set({ statColor: v || '#4338ca' }); } },
280 { label: 'Highlight BG', value: a.highlightBg, onChange: function (v) { set({ highlightBg: v || '#f8fafc' }); } },
281 { label: 'Highlight Border', value: a.highlightBorder, onChange: function (v) { set({ highlightBorder: v || '#6366f1' }); } },
282 { label: 'Quote BG', value: a.quoteBg, onChange: function (v) { set({ quoteBg: v || '#f5f3ff' }); } },
283 { label: 'Quote Text', value: a.quoteColor, onChange: function (v) { set({ quoteColor: v || '#4338ca' }); } },
284 { label: 'Quote Border', value: a.quoteBorder, onChange: function (v) { set({ quoteBorder: v || '#818cf8' }); } },
285 { label: 'Outcomes Color', value: a.outcomeColor, onChange: function (v) { set({ outcomeColor: v || '#166534' }); } },
286 { label: 'Lessons Color', value: a.lessonColor, onChange: function (v) { set({ lessonColor: v || '#92400e' }); } },
287 { label: 'Next Event BG', value: a.nextEventBg, onChange: function (v) { set({ nextEventBg: v || '#1e1b4b' }); } }
288 ]
289 })
290 )
291 );
292 },
293
294 save: function (props) {
295 var useBlockProps = wp.blockEditor.useBlockProps;
296 return wp.element.createElement('div', useBlockProps.save(),
297 wp.element.createElement('div', {
298 className: 'bkbg-event-debrief-app',
299 'data-opts': JSON.stringify(props.attributes)
300 })
301 );
302 }
303 });
304 }() );
305