only reload current block's events

source/connector-mobilizon.php

@@ -63,6 +63,7 @@ final class Mobilizon_Connector {
         'wp-i18n'
       ]);
     register_block_type(MobilizonConnector\NAME . '/events-list', [
+      'api_version' => 2,
       'editor_script' => $name
     ]);
     $this->load_settings_globally_before_script($name);

source/front/blocks/events-list/edit.js

@@ -1,7 +1,7 @@
 /* eslint-disable @wordpress/i18n-ellipsis */
-import { loadEventLists } from '../../events-loader.js'
+import { loadEventList } from '../../events-loader.js'
 
-const { InspectorControls } = wp.blockEditor
+const { InspectorControls, useBlockProps } = wp.blockEditor
 const { useEffect } = wp.element
 const { PanelBody } = wp.components
 const { __ } = wp.i18n
@@ -9,11 +9,15 @@ const { __ } = wp.i18n
 const NAME = '<wordpress-name>'
 
 export default ({ attributes, setAttributes }) => {
+  const blockProps = useBlockProps()
   useEffect(() => {
     reloadEventLists()
   }, [])
   function reloadEventLists() {
-    loadEventLists()
+    const container = document.getElementById(blockProps.id)
+    if (container) {
+      loadEventList(container)
+    }
   }
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
@@ -60,6 +64,7 @@ export default ({ attributes, setAttributes }) => {
       className={NAME + '_events-list'}
       data-maximum={attributes.eventsCount}
       data-group-name={attributes.groupName}
+      {...blockProps}
     >
       <div style={{ display: 'none' }}>
         {__('The events could not be loaded!', '<wordpress-name>')}

source/front/blocks/events-list/index.js

@@ -7,6 +7,7 @@ const { __ } = wp.i18n
 const NAME = '<wordpress-name>'
 
 registerBlockType(NAME + '/events-list', {
+  apiVersion: 2,
   title: __('Events List', '<wordpress-name>'),
   description: __(
     'A list of the upcoming events of the connected Mobilizon instance.',

source/front/blocks/events-list/save.js

@@ -1,19 +1,22 @@
 /* eslint-disable @wordpress/i18n-ellipsis */
+const { useBlockProps } = wp.blockEditor
 const { __ } = wp.i18n
 
 const NAME = '<wordpress-name>'
 
 export default ({ attributes }) => {
+  const blockProps = useBlockProps.save()
   return (
     <div
       className={NAME + '_events-list'}
       data-maximum={attributes.eventsCount}
       data-group-name={attributes.groupName}
+      {...blockProps}
     >
-      <div style="display: none;">
+      <div style={{ display: 'none' }}>
         {__('The events could not be loaded!', '<wordpress-name>')}
       </div>
-      <div style="display: none;">
+      <div style={{ display: 'none' }}>
         {__('The group could not be found!', '<wordpress-name>')}
       </div>
       <ul>

source/front/events-loader.js

@@ -6,14 +6,14 @@ const URL_SUFFIX = '/api'
 
 document.addEventListener('DOMContentLoaded', loadEventLists)
 
-export function loadEventLists() {
+function loadEventLists() {
   const eventLists = document.getElementsByClassName(NAME + '_events-list')
   for (const list of eventLists) {
     loadEventList(list)
   }
 }
 
-function loadEventList(container) {
+export function loadEventList(container) {
   const url = SETTINGS.url + URL_SUFFIX
   const limit = parseInt(container.getAttribute('data-maximum'))
   const groupName = container.getAttribute('data-group-name')