Settings > General and change the date format.
= Is the block responsive on mobile devices? =
Yes, the block is fully responsive and optimized for mobile viewing with touch-friendly collapsible sections.
= Can I customize the styling? =
Yes! The block includes color customization options for year headers in both collapsed and expanded states. You can also add custom CSS to match your theme's design.
= Is the plugin translation-ready? =
Absolutely! The plugin is fully internationalized with proper text domains and translation functions. All user-facing strings can be translated using standard WordPress translation tools like Poedit.
= How do I translate the plugin? =
1. Create a `/languages/` folder in the plugin directory.
2. Use translation tools like Poedit to create .po/.mo files.
3. Name them according to WordPress standards (e.g., `speaking-events-es_ES.po`).
4. WordPress will automatically load the translations.
== Screenshots ==
1. Expanded view showing all events for a selected year
2. Block editor interface without events
3. Block editor interface showing the form for adding speaking events
4. Viewing an event in the block editor
5. Viewing two events in the block editor
== Changelog ==
= 0.1.2 =
* Minor changes in documentation
= 0.1.1 =
* The date format is now displayed as defined in the general site settings.
* Minor changes in documentation.
= 0.1.0 =
* Initial release with full speaking events functionality.
* Year-based collapsible organization.
* Responsive design and smooth animations.
* Comprehensive event data capture.
* Clean admin interface.
* Color customization for year headers.
* Full internationalization support.
* Keyboard navigation and accessibility features.
== Translating This Plugin ==
The Speaking Events plugin is translation-ready. To contribute translations:
1. Visit the plugin's translation page on WordPress.org.
2. Select your language and start translating.
3. All translations are automatically included in plugin updates.
For manual translations:
1. Extract strings using `wp i18n make-pot`.
2. Create `.po` files using Poedit or similar tools.
3. Compile to `.mo` files and place in `/languages/` directory.
== Support ==
For support and feature requests, please visit Pablo Moratinos' website at https://pablomoratinos.es.]]> {
const newEvent = {
id: Date.now().toString(),
date: '',
venue: '',
eventName: '',
presentationTitle: '',
eventUrl: '',
description: ''
};
setEditingEvent(newEvent);
};
const saveEvent = (eventData) => {
const updatedEvents = editingEvent.id && events.find(e => e.id === editingEvent.id)
? events.map(event => event.id === eventData.id ? eventData : event)
: [...events, eventData];
setAttributes({ events: updatedEvents });
setEditingEvent(null);
};
const deleteEvent = (eventId) => {
const updatedEvents = events.filter(event => event.id !== eventId);
setAttributes({ events: updatedEvents });
};
const editEvent = (event) => {
setEditingEvent({ ...event });
};
const formatDate = (dateString) => {
if (!dateString) return '';
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
};
const groupEventsByYear = (events) => {
const grouped = events.reduce((acc, event) => {
const year = new Date(event.date).getFullYear();
if (!acc[year]) acc[year] = [];
acc[year].push(event);
return acc;
}, {});
// Sort years descending and events within each year by date descending
Object.keys(grouped).forEach(year => {
grouped[year].sort((a, b) => new Date(b.date) - new Date(a.date));
});
return grouped;
};
const blockProps = useBlockProps({
className: 'wp-block-pablo-moratinos-speaking-events-editor'
});
if (editingEvent) {
return (
<>
setAttributes({ yearBackgroundColor: color })}
enableAlpha
defaultValue="#f8fafc"
/>
setAttributes({ yearTextColor: color })}
enableAlpha
defaultValue="#1e293b"
/>
setAttributes({ yearBackgroundColorExpanded: color })}
enableAlpha
defaultValue="#3b82f6"
/>
setAttributes({ yearTextColorExpanded: color })}
enableAlpha
defaultValue="#ffffff"
/>
updateField('date', value)}
help={__('Select the date of the speaking event', 'speaking-events')}
/>
updateField('venue', value)}
placeholder={__('e.g., WordCamp Europe, Online, San Francisco', 'speaking-events')}
/>
updateField('eventName', value)}
placeholder={__('e.g., WordCamp Europe 2024', 'speaking-events')}
/>
updateField('eventUrl', value)}
placeholder={__('https://example.com/event', 'speaking-events')}
/>
updateField('presentationTitle', value)}
placeholder={__('e.g., The Future of Block Development', 'speaking-events')}
/>
updateField('description', value)}
placeholder={__('A brief description of your talk or the event...', 'speaking-events')}
help={__('Add a short description to provide more context about your presentation or the event', 'speaking-events')}
rows={3}
/>
);
}]]>= 0 && rect.bottom <= window.innerHeight;
if (!isInView) {
toggle.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}
});
// Clean up animation class
setTimeout(function() {
if (eventsList) {
eventsList.classList.remove('expanding');
}
}, 300);
}
function collapseSection(toggle, eventsList) {
// Update toggle state
toggle.setAttribute('aria-expanded', 'false');
toggle.classList.remove('expanded');
// Apply collapsed colors
const collapsedBg = toggle.getAttribute('data-collapsed-bg');
const collapsedText = toggle.getAttribute('data-collapsed-text');
if (collapsedBg && collapsedText) {
toggle.style.backgroundColor = collapsedBg;
toggle.style.color = collapsedText;
toggle.style.borderBottomColor = '#e2e8f0';
}
// Animate collapse
eventsList.classList.remove('expanding');
eventsList.classList.add('collapsing');
// Hide after animation
setTimeout(function() {
if (eventsList) {
eventsList.style.display = 'none';
eventsList.classList.remove('collapsing');
}
}, 300);
}
// Handle window resize to ensure responsive behavior
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Recalculate any necessary dimensions or states
const expandedSections = document.querySelectorAll('.wp-block-pablo-moratinos-speaking-events .events-list[style*="block"]');
expandedSections.forEach(function(section) {
// Ensure expanded sections remain properly displayed
if (section.style.display === 'block') {
section.style.height = 'auto';
}
});
}, 250);
});
// Add focus management for better keyboard navigation
document.addEventListener('keydown', function(e) {
// Handle Escape key to collapse all sections
if (e.key === 'Escape') {
const expandedToggles = document.querySelectorAll('.wp-block-pablo-moratinos-speaking-events .year-toggle.expanded');
expandedToggles.forEach(function(toggle) {
const year = toggle.getAttribute('data-year');
const eventsList = document.getElementById('events-' + year);
if (eventsList) {
collapseSection(toggle, eventsList);
}
});
}
});
// Prevent event bubbling on the events list itself
document.addEventListener('click', function(e) {
if (e.target.closest('.events-list')) {
e.stopPropagation();
}
});]]> &$year_events) {
usort($year_events, function($a, $b) {
return strtotime($b['date']) - strtotime($a['date']);
});
}
unset($year_events);
$years = array_keys($grouped_events);
// Get block wrapper attributes safely
$wrapper_attributes = get_block_wrapper_attributes();
?>