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-card / index.js

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

271 lines 18.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 ( function () {
2 var el = window.wp.element.createElement;
3 var { registerBlockType } = window.wp.blocks;
4 var { InspectorControls, MediaUpload, MediaUploadCheck, PanelColorSettings } = window.wp.blockEditor;
5 var { PanelBody, RangeControl, SelectControl, TextControl, TextareaControl, ToggleControl, Button } = window.wp.components;
6 var { __ } = window.wp.i18n;
7
8 var EVENT_TYPES = ['In-Person','Virtual','Hybrid'].map(v=>({label:v,value:v}));
9 var LAYOUTS = [{label:'Horizontal',value:'horizontal'},{label:'Card',value:'card'}];
10 var TYPE_COLORS = {'In-Person':'#10b981','Virtual':'#3b82f6','Hybrid':'#f59e0b'};
11
12 var _ecTC, _ecTV;
13 function _tc() { return _ecTC || (_ecTC = window.bkbgTypographyControl); }
14 function _tv(t, p) { return (_ecTV || (_ecTV = window.bkbgTypoCssVars)) ? _ecTV(t, p) : {}; }
15
16 function formatDate(dateStr) {
17 if (!dateStr) return '';
18 try {
19 return new Date(dateStr+'T12:00:00').toLocaleDateString('en-US',{month:'long',day:'numeric',year:'numeric'});
20 } catch(e) { return dateStr; }
21 }
22
23 function EventPreview(a) {
24 var acc = a.accentColor;
25 var badges = (a.badges||'').split(',').map(s=>s.trim()).filter(Boolean);
26 var typeColor = TYPE_COLORS[a.eventType] || '#6b7280';
27
28 var dateParts = a.startDate ? a.startDate.split('-') : ['2026','06','15'];
29 var monthNames = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
30 var month = monthNames[(parseInt(dateParts[1],10)||1)-1] || 'JUN';
31 var day = dateParts[2] || '15';
32
33 var cardStyle = {
34 background:a.cardBg, border:'1px solid '+a.cardBorder,
35 borderRadius:a.cardRadius+'px',
36 boxShadow:a.cardShadow?'0 8px 32px rgba(0,0,0,0.09)':'none',
37 overflow:'hidden', display:'flex',
38 flexDirection: a.layoutStyle==='card'?'column':'row',
39 };
40
41 var dateBox = el('div',{className:'bkec-date-box',style:{
42 background:acc, color:'#fff', padding:'24px 20px',
43 display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
44 minWidth: a.layoutStyle==='card'?'auto':'120px',
45 flexShrink:0,
46 }},
47 el('span',{style:{fontSize:'13px',fontWeight:700,letterSpacing:'2px',textTransform:'uppercase',opacity:0.85}},month),
48 el('span',{style:{fontSize:'48px',fontWeight:900,lineHeight:1}},day),
49 a.startTime&&el('span',{style:{fontSize:'12px',opacity:0.8,marginTop:'4px'}},a.startTime),
50 );
51
52 var body = el('div',{className:'bkec-body',style:{padding:'24px 28px',flex:1,display:'flex',flexDirection:'column',gap:'10px'}},
53 el('div',{style:{display:'flex',gap:'8px',flexWrap:'wrap',marginBottom:'4px'}},
54 el('span',{style:{background:typeColor,color:'#fff',borderRadius:'20px',padding:'3px 12px',fontSize:'11px',fontWeight:700}},a.eventType),
55 badges.map((b,i)=>el('span',{key:i,style:{background:'#f3f4f6',color:'#374151',borderRadius:'20px',padding:'3px 12px',fontSize:'11px',fontWeight:600}},b))
56 ),
57 el('h3',{className:'bkec-event-name',style:{margin:0,color:'#1f2937'}},a.eventName),
58 a.description&&el('p',{className:'bkec-desc',style:{margin:0,color:'#6b7280'}},a.description),
59 el('div',{style:{display:'flex',flexDirection:'column',gap:'6px',marginTop:'4px'}},
60 el('div',{style:{display:'flex',alignItems:'center',gap:'8px',fontSize:'14px',color:'#4b5563'}},
61 el('span',{className:'dashicons dashicons-clock',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
62 (a.startTime||'')+(a.endTime?''+a.endTime:'')+(a.timezone?' ('+a.timezone+')':'')
63 ),
64 a.venueName&&el('div',{style:{display:'flex',alignItems:'center',gap:'8px',fontSize:'14px',color:'#4b5563'}},
65 el('span',{className:'dashicons dashicons-location',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
66 el('span',null,a.venueName+(a.venueAddress?', '+a.venueAddress:''))
67 ),
68 ),
69 el('div',{style:{marginTop:'8px'}},
70 el('a',{href:a.ticketUrl||'#',style:{display:'inline-flex',alignItems:'center',gap:'6px',background:a.btnBg,color:a.btnColor,padding:'10px 22px',borderRadius:a.btnRadius+'px',fontWeight:700,textDecoration:'none',fontSize:'14px'}},
71 el('span',{className:'dashicons dashicons-tickets-alt',style:{fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
72 a.ticketLabel)
73 )
74 );
75
76 if (a.layoutStyle==='card') {
77 return el('div',{className:'bkec-wrap', style: Object.assign({}, _tv(a.typoName || {}, '--bkec-nm-'), _tv(a.typoDesc || {}, '--bkec-dc-'))},
78 a.imageUrl && el('div',{style:{height:'200px',background:'url('+a.imageUrl+') center/cover no-repeat'}}),
79 el('div',{className:'bkec-card',style:cardStyle},
80 el('div',{style:{padding:'20px 28px 0',display:'flex',justifyContent:'space-between',alignItems:'center'}}, dateBox),
81 body,
82 )
83 );
84 }
85
86 return el('div',{className:'bkec-wrap'},
87 el('div',{className:'bkec-card',style:cardStyle},
88 a.imageUrl && el('div',{style:{width:'220px',flexShrink:0,background:'url('+a.imageUrl+') center/cover no-repeat'}}),
89 dateBox,
90 body,
91 )
92 );
93 }
94
95 registerBlockType('blockenberg/event-card', {
96 edit: function(props) {
97 var a = props.attributes;
98 var set = props.setAttributes;
99 return el('div',null,
100 el(InspectorControls,null,
101 el(PanelBody,{title:__('Event Info'),initialOpen:true},
102 el(TextControl,{label:__('Event Name'),value:a.eventName,onChange:v=>set({eventName:v})}),
103 el(TextareaControl,{label:__('Description'),value:a.description,rows:3,onChange:v=>set({description:v})}),
104 el(SelectControl,{label:__('Event Type'),value:a.eventType,options:EVENT_TYPES,onChange:v=>set({eventType:v})}),
105 el(TextControl,{label:__('Badges (comma-separated)'),value:a.badges,onChange:v=>set({badges:v}),help:'e.g.: Free,Workshops,Networking'}),
106 el(TextControl,{label:__('Organizer'),value:a.organizer,onChange:v=>set({organizer:v})}),
107 ),
108 el(PanelBody,{title:__('Date & Time'),initialOpen:false},
109 el(TextControl,{label:__('Start Date (YYYY-MM-DD)'),value:a.startDate,onChange:v=>set({startDate:v})}),
110 el(TextControl,{label:__('Start Time (HH:MM)'),value:a.startTime,onChange:v=>set({startTime:v})}),
111 el(TextControl,{label:__('End Date (YYYY-MM-DD)'),value:a.endDate,onChange:v=>set({endDate:v})}),
112 el(TextControl,{label:__('End Time (HH:MM)'),value:a.endTime,onChange:v=>set({endTime:v})}),
113 el(TextControl,{label:__('Timezone'),value:a.timezone,onChange:v=>set({timezone:v})}),
114 ),
115 el(PanelBody,{title:__('Venue'),initialOpen:false},
116 el(TextControl,{label:__('Venue Name'),value:a.venueName,onChange:v=>set({venueName:v})}),
117 el(TextControl,{label:__('Address'),value:a.venueAddress,onChange:v=>set({venueAddress:v})}),
118 ),
119 el(PanelBody,{title:__('Photo'),initialOpen:false},
120 el(MediaUploadCheck,null,
121 el(MediaUpload,{onSelect:m=>set({imageUrl:m.url,imageId:m.id}),allowedTypes:['image'],value:a.imageId,
122 render:({open})=>el(Button,{onClick:open,variant:'secondary',style:{width:'100%',justifyContent:'center',marginBottom:'8px'}},
123 a.imageUrl?__('Change Image'):__('Select Image'))
124 })
125 ),
126 a.imageUrl&&el(Button,{isDestructive:true,isSmall:true,onClick:()=>set({imageUrl:'',imageId:0})},__('Remove Image')),
127 ),
128 el(PanelBody,{title:__('CTA Button'),initialOpen:false},
129 el(TextControl,{label:__('Ticket / RSVP URL'),value:a.ticketUrl,onChange:v=>set({ticketUrl:v})}),
130 el(TextControl,{label:__('Button Label'),value:a.ticketLabel,onChange:v=>set({ticketLabel:v})}),
131 el(RangeControl,{label:__('Button Radius (px)'),value:a.btnRadius,min:0,max:50,onChange:v=>set({btnRadius:v})}),
132 ),
133 el(PanelBody,{title:__('Style'),initialOpen:false},
134 el(SelectControl,{label:__('Layout'),value:a.layoutStyle,options:LAYOUTS,onChange:v=>set({layoutStyle:v})}),
135 el(RangeControl,{label:__('Card Radius (px)'),value:a.cardRadius,min:0,max:32,onChange:v=>set({cardRadius:v})}),
136 el(ToggleControl,{label:__('Card Shadow'),checked:a.cardShadow,onChange:v=>set({cardShadow:v}),__nextHasNoMarginBottom:true}),
137 el(ToggleControl,{label:__('Schema.org Markup'),checked:a.schemaEnabled,onChange:v=>set({schemaEnabled:v}),__nextHasNoMarginBottom:true}),
138 ),
139 el(PanelBody,{title:__('Typography'),initialOpen:false},
140 _tc() && el(_tc(), { label: __('Event Name', 'blockenberg'), typo: a.typoName || {}, onChange: v=>set({typoName:v}) }),
141 _tc() && el(_tc(), { label: __('Description', 'blockenberg'), typo: a.typoDesc || {}, onChange: v=>set({typoDesc:v}) }),
142 _tc() && el(_tc(), { label: __('Badges', 'blockenberg'), typo: a.typoBadge || {}, onChange: v=>set({typoBadge:v}) }),
143 _tc() && el(_tc(), { label: __('Meta / Info', 'blockenberg'), typo: a.typoMeta || {}, onChange: v=>set({typoMeta:v}) }),
144 _tc() && el(_tc(), { label: __('Button', 'blockenberg'), typo: a.typoBtn || {}, onChange: v=>set({typoBtn:v}) })
145 ),
146 el(PanelColorSettings,{title:__('Colors'),initialOpen:false,colorSettings:[
147 {label:__('Accent / Date BG'),value:a.accentColor,onChange:v=>set({accentColor:v||'#6c3fb5'})},
148 {label:__('Card Background'),value:a.cardBg,onChange:v=>set({cardBg:v||'#ffffff'})},
149 {label:__('Card Border'),value:a.cardBorder,onChange:v=>set({cardBorder:v||'#e5e7eb'})},
150 {label:__('Button BG'),value:a.btnBg,onChange:v=>set({btnBg:v||'#6c3fb5'})},
151 {label:__('Button Text'),value:a.btnColor,onChange:v=>set({btnColor:v||'#ffffff'})},
152 ]}),
153 ),
154 EventPreview(a),
155 );
156 },
157
158 save: function({attributes:a}) {
159 var acc = a.accentColor;
160 var badges = (a.badges||'').split(',').map(s=>s.trim()).filter(Boolean);
161 var typeColor = TYPE_COLORS[a.eventType] || '#6b7280';
162 var dateParts = (a.startDate||'2026-06-15').split('-');
163 var monthNames = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
164 var month = monthNames[(parseInt(dateParts[1],10)||1)-1]||'JUN';
165 var day = dateParts[2]||'15';
166
167 var cardStyle = {
168 background:a.cardBg,border:'1px solid '+a.cardBorder,borderRadius:a.cardRadius+'px',
169 boxShadow:a.cardShadow?'0 8px 32px rgba(0,0,0,0.09)':'none',
170 overflow:'hidden',display:'flex',flexDirection:a.layoutStyle==='card'?'column':'row',
171 };
172
173 return el('div',{
174 className:'bkec-wrap',
175 style: Object.assign({}, _tv(a.typoName || {}, '--bkec-nm-'), _tv(a.typoDesc || {}, '--bkec-dc-'), _tv(a.typoBadge || {}, '--bkec-ba-'), _tv(a.typoMeta || {}, '--bkec-mt-'), _tv(a.typoBtn || {}, '--bkec-bt-')),
176 'data-schema':a.schemaEnabled?'1':'0',
177 'data-event':JSON.stringify({name:a.eventName,startDate:a.startDate,startTime:a.startTime,endDate:a.endDate,endTime:a.endTime,timezone:a.timezone,venueName:a.venueName,venueAddress:a.venueAddress,eventType:a.eventType,url:a.ticketUrl,organizer:a.organizer,description:a.description,image:a.imageUrl}),
178 },
179 el('div',{className:'bkec-card',style:cardStyle},
180 a.layoutStyle!=='card'&&a.imageUrl&&el('div',{style:{width:'220px',flexShrink:0,background:'url('+a.imageUrl+') center/cover no-repeat'}}),
181 el('div',{className:'bkec-date-box',style:{background:acc,color:'#fff',padding:'24px 20px',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minWidth:a.layoutStyle==='card'?'auto':'120px',flexShrink:0}},
182 el('span',{style:{fontSize:'13px',fontWeight:700,letterSpacing:'2px',textTransform:'uppercase',opacity:0.85}},month),
183 el('span',{style:{fontSize:'48px',fontWeight:900,lineHeight:1}},day),
184 a.startTime&&el('span',{style:{fontSize:'12px',opacity:0.8,marginTop:'4px'}},a.startTime),
185 ),
186 el('div',{className:'bkec-body',style:{padding:'24px 28px',flex:1,display:'flex',flexDirection:'column',gap:'10px'}},
187 el('div',{style:{display:'flex',gap:'8px',flexWrap:'wrap',marginBottom:'4px'}},
188 el('span',{className:'bkec-type-badge',style:{background:typeColor,color:'#fff',borderRadius:'20px',padding:'3px 12px'}},a.eventType),
189 badges.map((b,i)=>el('span',{key:i,className:'bkec-badge',style:{background:'#f3f4f6',color:'#374151',borderRadius:'20px',padding:'3px 12px'}},b))
190 ),
191 el('h3',{className:'bkec-event-name',style:{margin:0,color:'#1f2937'}},a.eventName),
192 a.description&&el('p',{className:'bkec-desc',style:{margin:0,color:'#6b7280'}},a.description),
193 el('div',{style:{display:'flex',flexDirection:'column',gap:'6px',marginTop:'4px'}},
194 el('div',{className:'bkec-info-row',style:{display:'flex',alignItems:'center',gap:'8px',color:'#4b5563'}},
195 el('span',{className:'dashicons dashicons-clock',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
196 (a.startTime||'')+(a.endTime?''+a.endTime:'')+(a.timezone?' ('+a.timezone+')':'')
197 ),
198 a.venueName&&el('div',{className:'bkec-info-row',style:{display:'flex',alignItems:'center',gap:'8px',color:'#4b5563'}},
199 el('span',{className:'dashicons dashicons-location',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
200 el('span',null,a.venueName+(a.venueAddress?', '+a.venueAddress:''))
201 ),
202 ),
203 el('div',{style:{marginTop:'8px'}},
204 el('a',{className:'bkec-btn',href:a.ticketUrl||'#',style:{display:'inline-flex',alignItems:'center',gap:'6px',background:a.btnBg,color:a.btnColor,padding:'10px 22px',borderRadius:a.btnRadius+'px',textDecoration:'none'}},
205 el('span',{className:'dashicons dashicons-tickets-alt',style:{fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
206 a.ticketLabel)
207 ),
208 ),
209 )
210 );
211 },
212
213 deprecated: [{
214 save: function({attributes:a}) {
215 var acc = a.accentColor;
216 var badges = (a.badges||'').split(',').map(s=>s.trim()).filter(Boolean);
217 var typeColor = TYPE_COLORS[a.eventType] || '#6b7280';
218 var dateParts = (a.startDate||'2026-06-15').split('-');
219 var monthNames = ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
220 var month = monthNames[(parseInt(dateParts[1],10)||1)-1]||'JUN';
221 var day = dateParts[2]||'15';
222 var cardStyle = {
223 background:a.cardBg,border:'1px solid '+a.cardBorder,borderRadius:a.cardRadius+'px',
224 boxShadow:a.cardShadow?'0 8px 32px rgba(0,0,0,0.09)':'none',
225 overflow:'hidden',display:'flex',flexDirection:a.layoutStyle==='card'?'column':'row',
226 };
227 return el('div',{
228 className:'bkec-wrap',
229 style: Object.assign({}, _tv(a.typoName || {}, '--bkec-nm-'), _tv(a.typoDesc || {}, '--bkec-dc-')),
230 'data-schema':a.schemaEnabled?'1':'0',
231 'data-event':JSON.stringify({name:a.eventName,startDate:a.startDate,startTime:a.startTime,endDate:a.endDate,endTime:a.endTime,timezone:a.timezone,venueName:a.venueName,venueAddress:a.venueAddress,eventType:a.eventType,url:a.ticketUrl,organizer:a.organizer,description:a.description,image:a.imageUrl}),
232 },
233 el('div',{className:'bkec-card',style:cardStyle},
234 a.layoutStyle!=='card'&&a.imageUrl&&el('div',{style:{width:'220px',flexShrink:0,background:'url('+a.imageUrl+') center/cover no-repeat'}}),
235 el('div',{className:'bkec-date-box',style:{background:acc,color:'#fff',padding:'24px 20px',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',minWidth:a.layoutStyle==='card'?'auto':'120px',flexShrink:0}},
236 el('span',{style:{fontSize:'13px',fontWeight:700,letterSpacing:'2px',textTransform:'uppercase',opacity:0.85}},month),
237 el('span',{style:{fontSize:'48px',fontWeight:900,lineHeight:1}},day),
238 a.startTime&&el('span',{style:{fontSize:'12px',opacity:0.8,marginTop:'4px'}},a.startTime),
239 ),
240 el('div',{className:'bkec-body',style:{padding:'24px 28px',flex:1,display:'flex',flexDirection:'column',gap:'10px'}},
241 el('div',{style:{display:'flex',gap:'8px',flexWrap:'wrap',marginBottom:'4px'}},
242 el('span',{style:{background:typeColor,color:'#fff',borderRadius:'20px',padding:'3px 12px',fontSize:'11px',fontWeight:700}},a.eventType),
243 badges.map((b,i)=>el('span',{key:i,style:{background:'#f3f4f6',color:'#374151',borderRadius:'20px',padding:'3px 12px',fontSize:'11px',fontWeight:600}},b))
244 ),
245 el('h3',{className:'bkec-event-name',style:{margin:0,color:'#1f2937'}},a.eventName),
246 a.description&&el('p',{className:'bkec-desc',style:{margin:0,color:'#6b7280'}},a.description),
247 el('div',{style:{display:'flex',flexDirection:'column',gap:'6px',marginTop:'4px'}},
248 el('div',{style:{display:'flex',alignItems:'center',gap:'8px',fontSize:'14px',color:'#4b5563'}},
249 el('span',{className:'dashicons dashicons-clock',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
250 (a.startTime||'')+(a.endTime?''+a.endTime:'')+(a.timezone?' ('+a.timezone+')':'')
251 ),
252 a.venueName&&el('div',{style:{display:'flex',alignItems:'center',gap:'8px',fontSize:'14px',color:'#4b5563'}},
253 el('span',{className:'dashicons dashicons-location',style:{color:acc,fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
254 el('span',null,a.venueName+(a.venueAddress?', '+a.venueAddress:''))
255 ),
256 ),
257 el('div',{style:{marginTop:'8px'}},
258 el('a',{className:'bkec-btn',href:a.ticketUrl||'#',style:{display:'inline-flex',alignItems:'center',gap:'6px',background:a.btnBg,color:a.btnColor,padding:'10px 22px',borderRadius:a.btnRadius+'px',fontWeight:700,textDecoration:'none',fontSize:'14px'}},
259 el('span',{className:'dashicons dashicons-tickets-alt',style:{fontSize:'16px',width:'16px',height:'16px',lineHeight:1}}),
260 a.ticketLabel)
261 ),
262 ),
263 )
264 );
265 }
266 }],
267 });
268
269 var TYPE_COLORS = {'In-Person':'#10b981','Virtual':'#3b82f6','Hybrid':'#f59e0b'};
270 }() );
271