release version 1.1.0

Update dependencies

.eslintrc.json

@@ -0,0 +1,55 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true
+  },
+  "globals": {
+    "MOBILIZON_CONNECTOR": "readonly"
+  },
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "plugin:ava/recommended",
+    "plugin:@wordpress/eslint-plugin/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "requireConfigFile": false,
+    "sourceType": "module",
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "plugins": [
+    "ava",
+    "jsx"
+  ],
+  "rules": {
+    "import/no-unresolved": [
+      "off"
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "no-console": [
+      "error", {
+        "allow": ["error"]
+      }
+    ],
+    "prettier/prettier": [
+      "off"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "react/jsx-key": [
+      "off"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ]
+  }
+}

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,71 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: 'CodeQL'
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [main]
+  schedule:
+    - cron: '39 19 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript']
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more:
+        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      #- name: Autobuild
+      #  uses: github/codeql-action/autobuild@v1
+
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
+
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
+
+      - run: |
+          npm install
+          npm run build-prod
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/test.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Upgrade NPM
+        run: npm install -g npm
+      - run: npm ci --ignore-scripts
+      - run: npm run build-prod

.gitignore

@@ -1,3 +1,8 @@
+.idea/
 build/
+coverage/
 node_modules/
 vendor/
+
+.phpunit.cache
+.phpunit.result.cache

.gulp.json

@@ -0,0 +1,5 @@
+{
+  "flags": {
+    "gulpfile": "gulpfile.cjs"
+  }
+}

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm test
+lint-staged

.prettierignore

@@ -0,0 +1,8 @@
+.idea
+build
+coverage
+node_modules
+vendor
+.eslintrc.json
+composer.lock
+LICENSE.md

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

LICENSE.md

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,22 +1,54 @@
 # Connector for Mobilizon
 
+Connector for Mobilizon allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+More details can be found in the [WordPress Plugin Directory](https://wordpress.org/plugins/connector-mobilizon/).
+
+The current changelog can be found under [source/changelog.txt](source/changelog.txt).
+
+This plugin uses [Mobilizon's GraphQL API](https://docs.joinmobilizon.org/contribute/graphql_api/).
+
 ## Development
 
 ### Setup
+
 1. Make sure `npm` and `composer` are installed.
 2. Run: `npm install`
-3. Run: `php composer.phar install`
+3. Run: `composer install`
 
 ### Development build
+
 1. Build: `npm run build-dev`
 2. Make sure to keep `changelog.txt` up-to-date.
 
 ### Release procedure
-1. Make sure `changelog.txt` is up-to-date. Use a new version number and copy over the new section into `readme.txt`.
+
-2. Build: `npm run build-prod`
+1. Make sure `changelog.txt` is up-to-date.
-3. Determine minimum PHP version for code and update package.json if needed: `./vendor/bin/phpcompatinfo analyser:run ./source`
+2. Create a new section with a new version number.
-4. Make sure screenshots are up-to-date.
+3. Copy over the new section into `readme.txt`.
+4. Update `package.json` with the same version number.
+5. Update the `package-lock.json`: `npm i --package-lock-only`
+6. Build: `npm run build-prod`
+7. Make sure screenshots are up-to-date.
+8. Copy the built plugin into `/trunk` of SVN.
+9. Create a new tag of the new version: `svn cp trunk tags/<version>`
+10. Check the version number occurrences in both folders.
+11. Make sure to handle exclamation and question marks in `svn status`.
+12. Commit everything together to the release SVN: `svn ci -m "release version <version>"`
+13. Commit the new version in git with the same message.
+14. Tag the new version: `git tag v<version>`
+15. Push the new tag to the repository: `git push --tags`
+16. Append `-next` to the version number in `package.json`.
+17. Update the `package-lock.json`: `npm i --package-lock-only`
+18. Commit: `git commit -am "prepare next release"`
 
 ### Other commands
+
+- Run ESLint: `npm run eslint`
+- Run JavaScript code coverage with tests: `npm run coverage`
 - Run tests: `npm test`
-- Delete build folder: `gulp clean`
+- Delete build folder: `npm run clean`
+- Update PHP dependencies: `composer update`
+- Check for direct PHP dependency updates: `composer outdated --direct`
+- Format code with prettier: `npm run format`
+- Generate `vendor/autoload.php` file after creating new class: `composer dump-autoload`

assets/icon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(3.1904,0,0,3.1904,-120.199,-271.206)">
+        <circle cx="37.675" cy="125.127" r="29.385" style="fill:rgb(71,68,103);"/>
+    </g>
+    <g transform="matrix(1.26548,0,0,2.29215,-58.5821,-124.97)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,0.432821,-0.783962,2.15392,28.3042,-121.978)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+    <g transform="matrix(1.18916,-0.432821,0.783962,2.15392,-144.737,-97.4496)">
+        <path d="M120.375,110.363L201.527,106.002L201.527,101.64L221.522,110.363L201.527,119.087L201.527,114.725L120.375,110.363Z" style="fill:rgb(255,213,153);"/>
+    </g>
+</svg>

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

composer.json

@@ -1,5 +1,10 @@
 {
-    "require": {
+  "autoload": {
-        "bartlett/php-compatinfo": "^5.4"
+    "psr-4": {
+      "MobilizonConnector\\": "source/includes/"
+    }
+  },
+  "require-dev": {
+    "phpunit/phpunit": "^9.6"
   }
 }

gulpfile.cjs

@@ -0,0 +1,49 @@
+/* eslint-disable no-undef */
+const { dest, src } = require('gulp')
+
+const replace = require('gulp-replace')
+
+const PACKAGE = require('./package.json')
+
+const FOLDER_BUILD = './build'
+
+function injectMetadata() {
+  return src(
+    [
+      FOLDER_BUILD + '/front/block-events-loader.js',
+      FOLDER_BUILD + '/' + PACKAGE.name + '.php',
+      FOLDER_BUILD + '/includes/Constants.php',
+      FOLDER_BUILD + '/readme.txt',
+    ],
+    { base: './' },
+  )
+    .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
+    .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
+    .pipe(replace('<wordpress-description>', PACKAGE.description))
+    .pipe(replace('<wordpress-donation-link>', PACKAGE.funding.url))
+    .pipe(replace('<wordpress-license>', PACKAGE.license))
+    .pipe(
+      replace(
+        '<wordpress-minimum-version>',
+        PACKAGE.additionalDetails.wordpressMinimumVersion,
+      ),
+    )
+    .pipe(replace('<wordpress-name>', PACKAGE.name))
+    .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
+    .pipe(
+      replace(
+        '<wordpress-php-minimum-version>',
+        PACKAGE.additionalDetails.phpMinimumVersion,
+      ),
+    )
+    .pipe(
+      replace(
+        '<wordpress-tested-up-to-version>',
+        PACKAGE.additionalDetails.wordpressTestedUpToVersion,
+      ),
+    )
+    .pipe(replace('<wordpress-version>', PACKAGE.version))
+    .pipe(dest('.'))
+}
+
+exports.inject = injectMetadata

gulpfile.js

@@ -1,79 +0,0 @@
-const { dest, series, src } = require('gulp');
-
-const del = require('del');
-const replace = require('gulp-replace');
-const webpack = require('webpack-stream');
-
-const PACKAGE = require('./package.json');
-
-const FOLDER_SOURCE = './source'
-const FOLDER_BUILD = './build';
-
-let mode = 'development';
-
-
-function clean(cb) {
-  del(FOLDER_BUILD);
-  cb();
-}
-
-const eventsLoaderOutputPath = PACKAGE.name + '/front/events-loader';
-const eventsLoaderInputPath = FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js';
-
-function bundleFrontend() {
-  return src(FOLDER_SOURCE + '/' + PACKAGE.name + '/front/events-loader.js')
-    .pipe(webpack({
-      mode,
-      entry: {
-        [eventsLoaderOutputPath]: eventsLoaderInputPath,
-      },
-      output: {
-        filename: '[name].js',
-      },
-    }))
-    .pipe(dest(FOLDER_BUILD));
-  }
-
-function copyBackend() {
-  return src([
-    FOLDER_SOURCE + '/**/*.php',
-    FOLDER_SOURCE + '/**/*.txt'
-  ])
-    .pipe(dest(FOLDER_BUILD));
-}
-
-function injectMetadata() {
-  return src([
-    FOLDER_BUILD + '/' + eventsLoaderOutputPath + '.js',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/' + PACKAGE.name + '.php',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/includes/constants.php',
-    FOLDER_BUILD + '/' + PACKAGE.name + '/readme.txt'
-  ], { base: './' })
-    .pipe(replace('<wordpress-author-name>', PACKAGE.author.name))
-    .pipe(replace('<wordpress-author-url>', PACKAGE.author.url))
-    .pipe(replace('<wordpress-description>', PACKAGE.description))
-    .pipe(replace('<wordpress-license>', PACKAGE.license))
-    .pipe(replace('<wordpress-minimum-version>', PACKAGE.additionalDetails.wordpressMinimumVersion))
-    .pipe(replace('<wordpress-name>', PACKAGE.name))
-    .pipe(replace('<wordpress-nice-name>', PACKAGE.additionalDetails.niceName))
-    .pipe(replace('<wordpress-php-minimum-version>', PACKAGE.additionalDetails.phpMinimumVersion))
-    .pipe(replace('<wordpress-tested-up-to-version>', PACKAGE.additionalDetails.wordpressTestedUpToVersion))
-    .pipe(replace('<wordpress-version>', PACKAGE.version))
-    .pipe(dest('.'));
-}
-
-exports.front = bundleFrontend;
-exports.copy = copyBackend;
-exports.inject = injectMetadata;
-
-const build = series(clean, bundleFrontend, copyBackend, injectMetadata);
-
-const buildDev = series((cb) => { mode = 'development'; cb(); }, build);
-
-const buildProd = series((cb) => { mode = 'production'; cb(); }, build);
-
-
-exports.clean = clean;
-exports.dev = buildDev;
-exports.default = buildDev;
-exports.prod = buildProd;

package.json

@@ -1,46 +1,70 @@
 {
   "name": "connector-mobilizon",
-  "version": "0.2.1",
+  "version": "1.1.0",
-  "description": "Display mobilizon events in WordPress.",
+  "description": "Display Mobilizon events in WordPress.",
   "private": true,
+  "type": "module",
   "scripts": {
-    "build-dev": "gulp dev",
+    "build-dev": "webpack --mode=development && gulp inject",
-    "build-prod": "ava && gulp prod",
+    "build-prod": "rimraf -- build && ava && webpack --mode=production && gulp inject",
-    "test": "ava"
+    "clean": "rimraf -- build",
+    "coverage": "c8 --all --reporter=html --reporter=text --include=source/**/*.js ava",
+    "eslint": "npx eslint source/**/*.js",
+    "format": "npx prettier --write .",
+    "prepare": "husky",
+    "test": "ava && ./vendor/bin/phpunit"
   },
   "author": {
     "name": "Daniel Waxweiler",
     "url": "https://www.danielwaxweiler.net/"
   },
+  "funding": {
+    "type": "individual",
+    "url": "https://paypal.me/dwaxweiler"
+  },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "^15.4.0",
+    "graphql": "16.9.0",
-    "graphql-request": "^3.4.0",
+    "luxon": "3.4.4"
-    "luxon": "^1.25.0"
   },
   "devDependencies": {
-    "ava": "^3.15.0",
+    "@babel/core": "7.24.9",
-    "del": "^6.0.0",
+    "@babel/eslint-parser": "7.24.8",
-    "esm": "^3.2.25",
+    "@babel/preset-env": "7.24.8",
-    "gulp": "^4.0.2",
+    "@babel/preset-react": "7.24.7",
-    "gulp-replace": "^1.0.0",
+    "@wordpress/eslint-plugin": "20.0.0",
-    "jsdom": "^16.4.0",
+    "ava": "6.1.3",
-    "webpack": "^5.11.1",
+    "babel-loader": "9.1.3",
-    "webpack-cli": "^4.3.1",
+    "browser-env": "3.3.0",
-    "webpack-stream": "^6.1.1"
+    "c8": "10.1.2",
+    "copy-webpack-plugin": "12.0.2",
+    "eslint": "8.57.0",
+    "eslint-plugin-ava": "14.0.0",
+    "eslint-plugin-jsx": "0.1.0",
+    "eslint-plugin-react": "7.34.4",
+    "esm": "3.2.25",
+    "gulp": "5.0.0",
+    "gulp-replace": "1.1.4",
+    "husky": "9.1.1",
+    "lint-staged": "15.2.7",
+    "prettier": "3.3.3",
+    "rimraf": "5.0.9",
+    "webpack": "5.93.0",
+    "webpack-cli": "5.1.4"
   },
   "ava": {
     "files": [
       "./source/**/*test.js"
-    ],
-    "require": [
-      "esm"
     ]
   },
   "additionalDetails": {
     "niceName": "Connector for Mobilizon",
-    "phpMinimumVersion": 5.4,
+    "phpMinimumVersion": 7.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": 5.6
+    "wordpressTestedUpToVersion": "6.6"
+  },
+  "lint-staged": {
+    "source/**/*.js": "eslint",
+    "**/*": "prettier --write --ignore-unknown"
   }
 }

phpunit.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.6/phpunit.xsd"
+         bootstrap="vendor/autoload.php"
+         cacheResultFile=".phpunit.cache/test-results"
+         executionOrder="depends,defects"
+         forceCoversAnnotation="false"
+         beStrictAboutCoversAnnotation="true"
+         beStrictAboutOutputDuringTests="true"
+         beStrictAboutTodoAnnotatedTests="true"
+         convertDeprecationsToExceptions="true"
+         failOnRisky="true"
+         failOnWarning="true"
+         verbose="true">
+    <testsuites>
+        <testsuite name="default">
+            <directory>tests</directory>
+        </testsuite>
+    </testsuites>
+
+    <coverage cacheDirectory=".phpunit.cache/code-coverage"
+              processUncoveredFiles="true">
+        <include>
+            <directory suffix=".php">source/includes</directory>
+        </include>
+    </coverage>
+</phpunit>

qodana.yaml

@@ -0,0 +1,2 @@
+version: '1.0'
+linter: jetbrains/qodana-js:2022.3-eap

source/changelog.txt

@@ -0,0 +1,169 @@
+### [Unreleased]
+#### Added
+#### Changed
+#### Deprecated
+#### Removed
+#### Fixed
+#### Security
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
+
+### [0.11.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.2
+#### Security
+- Set minimum PHP version to oldest stable 8.0
+
+### [0.10.1]
+#### Changed
+- Confirm compatibility with WordPress 6.1
+- Update dependencies
+
+### [0.10.0]
+#### Added
+- Add Gutenberg events list block
+- Show loading indicator during request
+#### Changed
+- Set list style type to none and left padding to zero for all occurences
+- Move shortcut usage description into installation section in `readme.txt`
+- Update dependencies
+
+### [0.9.1] - 2020-05-19
+#### Fixed
+- Fix WordPress compatibility version number
+
+### [0.9.0] - 2020-05-19
+#### Added
+- Improve explanation of group name filter
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.0
+#### Fixed
+- Fix displaying error message for the case the group is not found
+
+### [0.8.0] - 2022-01-09
+#### Added
+- Add support for older browsers using babel
+#### Changed
+- Confirm compatibility with WordPress 5.9
+- Update dependencies
+#### Fixed
+- Use ES modules correctly
+- Trim events' location
+
+### [0.7.0] - 2021-12-23
+#### Added
+- Add specific error message for the case the group is not found
+- Add code formatter prettier
+#### Changed
+- Update dependencies
+- Simplify build process
+#### Fixed
+- Fix Invalid DateTime on event end time being null
+#### Security
+- Set minimum PHP version to oldest stable 7.4
+
+### [0.6.2] - 2021-08-24
+#### Changed
+- Update dependencies
+#### Fixed
+- Fix empty WordPress timezone_string option resulting in Invalid DateTime
+
+### [0.6.1] - 2021-07-13
+#### Changed
+- Confirm compatibility with WordPress 5.8
+- Update dependencies
+
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/connector-mobilizon.php

@@ -0,0 +1,90 @@
+<?php
+/**
+ * Plugin Name:       <wordpress-nice-name>
+ * Author:            <wordpress-author-name>
+ * Author URI:        <wordpress-author-url>
+ * Description:       <wordpress-description>
+ * Version:           <wordpress-version>
+ * Requires at least: <wordpress-minimum-version>
+ * Requires PHP:      <wordpress-php-minimum-version>
+ * License:           <wordpress-license>
+ */
+
+require_once __DIR__ . '/includes/exceptions/GeneralException.php';
+require_once __DIR__ . '/includes/exceptions/GroupNotFoundException.php';
+require_once __DIR__ . '/includes/Constants.php';
+require_once __DIR__ . '/includes/Api.php';
+require_once __DIR__ . '/includes/EventsCache.php';
+require_once __DIR__ . '/includes/Settings.php';
+require_once __DIR__ . '/includes/DateTimeWrapper.php';
+require_once __DIR__ . '/includes/Formatter.php';
+require_once __DIR__ . '/includes/GraphQlClient.php';
+require_once __DIR__ . '/includes/EventsListBlock.php';
+require_once __DIR__ . '/includes/EventsListShortcut.php';
+require_once __DIR__ . '/includes/EventsListWidget.php';
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+
+final class Mobilizon_Connector {
+
+  private function __construct() {
+    add_action('init', [$this, 'register_api']);
+    add_action('init', [$this, 'register_blocks']);
+    add_action('init', [$this, 'register_settings'], 1); // required for register_blocks
+    add_action('init', [$this, 'register_shortcut']);
+    add_action('widgets_init', [$this, 'register_widget']);
+    register_activation_hook(__FILE__, [$this, 'enable_activation']);
+  }
+
+  public static function init() {
+    // Create singleton instance.
+    static $instance = false;
+    if(!$instance) {
+        $instance = new self();
+    }
+    return $instance;
+  }
+
+  public function enable_activation() {
+    MobilizonConnector\Settings::setDefaultOptions();
+  }
+
+  private function load_settings_globally_before_script($scriptName) {
+    $settings = array(
+      'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
+      'locale' => str_replace('_', '-', get_locale()),
+      'timeZone' => wp_timezone_string()
+    );
+    wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
+  }
+
+  public function register_api() {
+    MobilizonConnector\Api::init();
+  }
+
+  public function register_blocks() {
+    $scriptName = MobilizonConnector\EventsListBlock::initAndReturnScriptName();
+    $this->load_settings_globally_before_script($scriptName);
+  }
+
+  public function register_settings() {
+    MobilizonConnector\Settings::init();
+  }
+
+  public function register_shortcut() {
+    MobilizonConnector\EventsListShortcut::init();
+  }
+
+  public function register_widget() {
+    register_widget('MobilizonConnector\EventsListWidget');
+  }
+}
+
+function mobilizon_connector_run_plugin() {
+  return Mobilizon_Connector::init();
+}
+
+mobilizon_connector_run_plugin();

source/connector-mobilizon/changelog.txt

@@ -1,23 +0,0 @@
-### [Unreleased]
-Added
-Changed
-Deprecated
-Removed
-Fixed
-Security
-
-### [0.2.1] - 2021-01-15
-Changed
-- Add missing backtick to `readme.txt`
-
-### [0.2.0] - 2021-01-15
-Added
-- `changelog.txt`
-- Changelog maintenance steps to `README.md`
-- Link to Github repository in `readme.txt`
-- Option to show events of a specific group by indicating its name
-Changed
-- Use same Markdown style in `README.md` as in other documents
-
-### [0.1.0] - 2021-01-09
-initial release

source/connector-mobilizon/connector-mobilizon.php

@@ -1,42 +0,0 @@
-<?php
-/**
- * Plugin Name: 	    <wordpress-nice-name>
- * Author: 				    <wordpress-author-name>
- * Author URI:		    <wordpress-author-url>
- * Description: 	    <wordpress-description>
- * Version:				    <wordpress-version>
- * Requires at least: <wordpress-minimum-version>
- * Requires PHP:      <wordpress-php-minimum-version>
- * License:           <wordpress-license>
- */
-
-require_once __DIR__ . '/includes/constants.php';
-require_once __DIR__ . '/includes/settings.php';
-require_once __DIR__ . '/includes/events-list-shortcut.php';
-require_once __DIR__ . '/includes/events-list-widget.php';
-
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
-function mobilizon_connector_activate() {
-	MobilizonConnector\Settings::setDefaultOptions();
-}
-register_activation_hook(__FILE__, 'mobilizon_connector_activate');
-
-function mobilizon_connector_initialize() {
-  MobilizonConnector\Settings::init();
-  MobilizonConnector\EventsListShortcut::init();
-}
-add_action('init', 'mobilizon_connector_initialize');
-
-function mobilizon_connector_load_scripts() {
-  wp_enqueue_script(MobilizonConnector\NAME . '-js', plugins_url('front/events-loader.js', __FILE__ ));
-}
-add_action('wp_enqueue_scripts', 'mobilizon_connector_load_scripts');
-
-function mobilizon_connector_register_events_list_widget() {
-  register_widget('MobilizonConnector\EventsListWidget');
-}
-add_action('widgets_init', 'mobilizon_connector_register_events_list_widget');

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -1,53 +0,0 @@
-import test from 'ava';
-import { DateTimeWrapper } from './date-time-wrapper';
-
-test('#getShortDate usual date', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  t.is(d.getShortDate(), '24/12/2020')
-})
-
-test('#get24Time usual time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  t.is(d.get24Time(), '17:45')
-})
-
-test('#equalsDate same date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-24T17:46:01Z')
-  t.true(d.equalsDate(e))
-})
-
-test('#equalsDate different date, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-11-25T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different day, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-12-25T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different month, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2020-11-24T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#equalsDate different year, different time', t => {
-  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
-  const e = new DateTimeWrapper('2021-12-24T17:46:01Z')
-  t.false(d.equalsDate(e))
-})
-
-test('#getCurrentDatetimeAsString correct format', t => {
-  const d = DateTimeWrapper.getCurrentDatetimeAsString()
-  t.is(d[4], '-')
-  t.is(d[7], '-')
-  t.is(d[10], 'T')
-  t.is(d[13], ':')
-  t.is(d[16], ':')
-  t.is(d[19], '.')
-  t.is(d[d.length-3], ':')
-})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -1,28 +0,0 @@
-import { DateTime } from 'luxon';
-
-export class DateTimeWrapper {
-
-  constructor(text) {
-    this.dateTime = DateTime.fromISO(text)
-  }
-
-  getShortDate() {
-    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
-  }
-
-  get24Time() {
-    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
-  }
-
-  equalsDate(other) {
-    return this.dateTime &&
-      other.dateTime &&
-      this.dateTime.day === other.dateTime.day &&
-      this.dateTime.month === other.dateTime.month &&
-      this.dateTime.year === other.dateTime.year
-  }
-
-  static getCurrentDatetimeAsString() {
-    return DateTime.local().toString();
-  }
-}

source/connector-mobilizon/front/events-loader.js

@@ -1,59 +0,0 @@
-import { DateTimeWrapper } from './date-time-wrapper';
-import * as GraphqlWrapper from './graphql-wrapper'
-import * as HtmlCreator from './html-creator'
-
-const NAME = '<wordpress-name>';
-
-function displayEvents(data, list) {
-  const maxEventsCount = list.getAttribute('data-maximum')
-  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
-  const eventsCount = Math.min(maxEventsCount, events.length)
-  for (let i = 0; i < eventsCount; i++) {
-    const li = document.createElement('li')
-    
-    const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
-    li.appendChild(a)
-
-    const br = document.createElement('br')
-    li.appendChild(br)
-
-    const beginsOn = new DateTimeWrapper(events[i].beginsOn)
-    const endsOn = new DateTimeWrapper(events[i].endsOn)
-    let dateText = beginsOn.getShortDate()
-    dateText += ' ' + beginsOn.get24Time()
-    dateText += ' - '
-    if (!beginsOn.equalsDate(endsOn)) {
-        dateText += endsOn.getShortDate() + ' '
-    }
-    dateText += endsOn.get24Time()
-    const textnode = document.createTextNode(dateText);
-    li.appendChild(textnode)
-
-    list.appendChild(li)
-  }
-}
-
-function displayErrorMessage(data, list) {
-  console.error(data)
-  for (let i = 0; i < list.children.length; i++) {
-    list.children[i].style.display = 'block'
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list')
-  for (let list of eventLists) {
-    const url = list.getAttribute('data-url') + '/api'
-    const limit = list.getAttribute('data-maximum')
-    const groupName = list.getAttribute('data-group-name')
-    if (groupName) {
-      GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-        .then((data) => displayEvents(data, list))
-        .catch((data) => displayErrorMessage(data, list))
-    } else {
-      GraphqlWrapper.getUpcomingEvents({ url, limit })
-        .then((data) => displayEvents(data, list))
-        .catch((data) => displayErrorMessage(data, list))
-    }
-  }
-})

source/connector-mobilizon/front/graphql-wrapper.js

@@ -1,41 +0,0 @@
-import { request, gql } from 'graphql-request'
-import { DateTimeWrapper } from './date-time-wrapper'
-
-export function getUpcomingEvents({ url, limit }) {
-  const query = gql`
-  query {
-    events(limit:${limit}) {
-      elements {
-        id,
-        title,
-        url,
-        beginsOn,
-        endsOn
-      },
-      total
-    }
-  }
-  `
-  return request(url, query)
-}
-
-export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
-  const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString();
-  const query = gql`
-  query {
-    group(preferredUsername:"${groupName}") {
-      organizedEvents(afterDatetime:"${afterDatetime}", limit:${limit}) {
-        elements {
-          id,
-          title,
-          url,
-          beginsOn,
-          endsOn
-        },
-        total
-      }
-    }
-  }
-  `
-  return request(url, query)
-}

source/connector-mobilizon/front/html-creator-test.js

@@ -1,15 +0,0 @@
-import test from 'ava';
-import { JSDOM } from 'jsdom';
-
-import * as HtmlCreator from './html-creator';
-
-test.beforeEach(() => {
-  global.document = new JSDOM().window.document
-})
-
-test('createAnchorElement() usual parameters', t => {
-  const a = HtmlCreator.createAnchorElement({ text: 'a', url: 'b' })
-  t.is(a.tagName, 'A')
-  t.is(a.innerHTML, 'a')
-	t.is(a.getAttribute('href'), 'b')
-})

source/connector-mobilizon/readme.txt

@@ -1,45 +0,0 @@
-# <wordpress-nice-name>
-Contributors: dwaxweiler
-Tags: mobilizon, events
-Stable tag: <wordpress-version>
-Requires at least: <wordpress-minimum-version>
-Tested up to: <wordpress-tested-up-to-version>
-Requires PHP: <wordpress-php-minimum-version>
-License: <wordpress-license>
-
-<wordpress-description>
-
-## Description
-
-<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform.
-
-You can display the upcoming events using a widget and everywhere else using a shortcut.
-
-Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
-Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]`
-
-The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
-
-## Screenshots
-1. Events list
-2. General settings
-3. Widget creation
-4. Shortcut creation
-
-## Changelog
-
-### [0.2.1] - 2021-01-15
-Changed
-- Add missing backtick to `readme.txt`
-
-### [0.2.0] - 2021-01-15
-Added
-- `changelog.txt`
-- Changelog maintenance steps to `README.md`
-- Link to Github repository in `readme.txt`
-- Option to show events of a specific group by indicating its name
-Changed
-- Use same Markdown style in `README.md` as in other documents
-
-### [0.1.0] - 2021-01-09
-initial release

source/connector-mobilizon/view/events-list.php

@@ -1,12 +0,0 @@
-<?php
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-?>
-<ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
-  data-url="<?php echo esc_attr($url); ?>"
-  data-maximum="<?php echo esc_attr($eventsCount); ?>"
-  data-group-name="<?php echo esc_attr($groupName); ?>">
-  <li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
-</ul>

source/front/block-events-loader.js

@@ -0,0 +1 @@
+import './blocks/events-list/index.js'

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

@@ -0,0 +1,113 @@
+/* eslint-disable @wordpress/i18n-ellipsis */
+import {
+  clearEventsList,
+  displayErrorMessage,
+  displayEvents,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from '../../events-displayer.js'
+
+const { InspectorControls, useBlockProps } = wp.blockEditor
+const { Panel, PanelBody } = wp.components
+const { useEffect } = wp.element
+const { __ } = wp.i18n
+
+const NAME = '<wordpress-name>'
+
+export default ({ attributes, setAttributes }) => {
+  let timer
+  const blockProps = useBlockProps({
+    className: NAME + '_events-list',
+  })
+  function reloadEventList(eventsCount, groupName) {
+    if (timer) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(async () => {
+      const container = document.getElementById(blockProps.id)
+      if (container) {
+        hideErrorMessages(container)
+        clearEventsList(container)
+        showLoadingIndicator(container)
+        let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
+        if (groupName) {
+          url += `&groupName=${groupName}`
+        }
+        await fetch(url)
+          .then((response) => response.text())
+          .then((data) => {
+            const events = JSON.parse(data)
+            displayEvents({
+              events,
+              document,
+              container,
+              maxEventsCount: eventsCount,
+            })
+          })
+          .catch((data) => {
+            displayErrorMessage({ data, container })
+          })
+      }
+    }, 500)
+  }
+  useEffect(() => {
+    reloadEventList(attributes.eventsCount, attributes.groupName)
+  }, [])
+  function updateEventsCount(event) {
+    let newValue = Number(event.target.value)
+    if (newValue < 1) newValue = 1
+    setAttributes({ eventsCount: newValue })
+    reloadEventList(newValue, attributes.groupName)
+  }
+  function updateGroupName(event) {
+    const newValue = event.target.value
+    setAttributes({ groupName: newValue })
+    reloadEventList(attributes.eventsCount, newValue)
+  }
+  return [
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={__('Events List Settings', '<wordpress-name>')}>
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_events-count'}
+          >
+            {__('Number of events to show', '<wordpress-name>')}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="number"
+            value={attributes.eventsCount}
+            onChange={updateEventsCount}
+            id={NAME + '_events-count'}
+          />
+          <label
+            className="components-base-control__label"
+            htmlFor={NAME + '_group-name'}
+          >
+            {__('Group name (optional)', '<wordpress-name>')}
+          </label>
+          <input
+            className="components-text-control__input"
+            type="text"
+            value={attributes.groupName}
+            onChange={updateGroupName}
+            id={NAME + '_group-name'}
+          />
+        </PanelBody>
+      </Panel>
+    </InspectorControls>,
+    <div {...blockProps}>
+      <div className="general-error" style={{ display: 'none' }}>
+        {__('The events could not be loaded!', '<wordpress-name>')}
+      </div>
+      <div className="group-not-found" style={{ display: 'none' }}>
+        {__('The group could not be found!', '<wordpress-name>')}
+      </div>
+      <div className="loading-indicator" style={{ display: 'none' }}>
+        {__('Loading...', '<wordpress-name>')}
+      </div>
+      <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+    </div>,
+  ]
+}

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

@@ -0,0 +1,7 @@
+import edit from './edit.js'
+
+const { registerBlockType } = wp.blocks
+
+const NAME = '<wordpress-name>'
+
+registerBlockType(NAME + '/events-list', { edit })

source/front/date-time-wrapper-test.js

@@ -0,0 +1,87 @@
+import test from 'ava'
+import DateTimeWrapper from './date-time-wrapper.js'
+
+test('#getShortDate usual date', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with timezone string', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: 'Europe/Rome',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with fixed offset', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: 'UTC+02:00',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with fixed offset without UTC prefix', (t) => {
+  const d = new DateTimeWrapper({
+    text: '2020-12-24T16:45:00Z',
+    timeZone: '+02:00',
+  })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#getShortDate usual date with empty time zone', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: '' })
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#get24Time usual time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.get24Time(), '16:45')
+})
+
+test('#equalsDate same date, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-24T17:46:01Z' })
+  t.true(d.equalsDate(e))
+})
+
+test('#equalsDate different date, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-11-25T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different day, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-12-25T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different month, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2020-11-24T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different year, different time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  const e = new DateTimeWrapper({ text: '2021-12-24T17:46:01Z' })
+  t.false(d.equalsDate(e))
+})
+
+test('#getCurrentDatetimeAsString correct format', (t) => {
+  const d = DateTimeWrapper.getCurrentDatetimeAsString()
+  t.is(d[4], '-')
+  t.is(d[7], '-')
+  t.is(d[10], 'T')
+  t.is(d[13], ':')
+  t.is(d[16], ':')
+  t.is(d[19], '.')
+  t.is(d[d.length - 3], ':')
+})
+
+test('#getShortOffsetName usual time', (t) => {
+  const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
+  t.is(d.getShortOffsetName(), 'UTC')
+})

source/front/date-time-wrapper.js

@@ -0,0 +1,42 @@
+import { DateTime } from 'luxon'
+
+export default class DateTimeWrapper {
+  constructor({ locale = 'en-GB', text, timeZone = 'utc' } = {}) {
+    if (!timeZone) {
+      timeZone = 'utc'
+    }
+    if (
+      timeZone.includes(':') &&
+      timeZone.substring(0, 3).toUpperCase() !== 'UTC'
+    ) {
+      timeZone = 'UTC' + timeZone
+    }
+    this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
+  }
+
+  getShortDate() {
+    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
+  }
+
+  getShortOffsetName() {
+    return this.dateTime.offsetNameShort
+  }
+
+  get24Time() {
+    return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
+  }
+
+  equalsDate(other) {
+    return (
+      this.dateTime &&
+      other.dateTime &&
+      this.dateTime.day === other.dateTime.day &&
+      this.dateTime.month === other.dateTime.month &&
+      this.dateTime.year === other.dateTime.year
+    )
+  }
+
+  static getCurrentDatetimeAsString() {
+    return DateTime.now().toString()
+  }
+}

source/front/events-displayer-test.js

@@ -0,0 +1,117 @@
+import test from 'ava'
+import browserEnv from 'browser-env'
+
+import {
+  displayEvents,
+  displayErrorMessage,
+  hideErrorMessages,
+  showLoadingIndicator,
+} from './events-displayer.js'
+
+test.before(() => {
+  browserEnv()
+  window.MOBILIZON_CONNECTOR = {
+    locale: 'en-GB',
+    timeZone: 'utc',
+  }
+})
+
+test.beforeEach((t) => {
+  t.context.container = document.createElement('div')
+
+  const errorMessageGeneral = document.createElement('div')
+  errorMessageGeneral.setAttribute('class', 'general-error')
+  errorMessageGeneral.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(errorMessageGeneral)
+
+  const errorMessageGroupNotFound = document.createElement('div')
+  errorMessageGroupNotFound.setAttribute('class', 'group-not-found')
+  errorMessageGroupNotFound.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(errorMessageGroupNotFound)
+
+  const loadingIndicator = document.createElement('div')
+  loadingIndicator.setAttribute('class', 'loading-indicator')
+  loadingIndicator.setAttribute('style', 'display: none;')
+  t.context.container.appendChild(loadingIndicator)
+
+  const list = document.createElement('ul')
+  t.context.container.appendChild(list)
+})
+
+test('#displayEvents one event', (t) => {
+  const events = [
+    {
+      title: 'a',
+      url: 'b',
+      beginsOn: '2021-04-15T10:30:00Z',
+      endsOn: '2021-04-15T15:30:00Z',
+      physicalAddress: {
+        description: 'c',
+        locality: 'd',
+      },
+    },
+  ]
+  const container = t.context.container
+  displayEvents({ events, document, container, maxEventsCount: 2 })
+  const list = container.querySelector('ul')
+  t.is(list.children[0].childNodes[0].tagName, 'A')
+  t.is(list.children[0].childNodes[0].getAttribute('href'), 'b')
+  t.is(list.children[0].childNodes[0].childNodes[0].nodeValue, 'a')
+  t.is(list.children[0].childNodes[1].tagName, 'BR')
+  t.is(list.children[0].childNodes[2].nodeValue, '15/04/2021 10:30 - 15:30')
+  t.is(list.children[0].childNodes[3].tagName, 'BR')
+  t.is(list.children[0].childNodes[4].nodeValue, 'c, d')
+})
+
+test('#displayErrorMessage no list entries shown', (t) => {
+  const container = t.context.container
+  displayErrorMessage({ data: '', container })
+  const list = container.querySelector('ul')
+  t.is(list.children.length, 0)
+})
+
+test('#displayErrorMessage general error message display', (t) => {
+  const container = t.context.container
+  displayErrorMessage({ data: '', container })
+  t.is(container.querySelector('.general-error').style.display, 'block')
+  t.is(container.querySelector('.group-not-found').style.display, 'none')
+  t.is(container.querySelector('.loading-indicator').style.display, 'none')
+})
+
+test('#displayErrorMessage group not found error message display', (t) => {
+  const container = t.context.container
+  const data = {
+    response: {
+      errors: [
+        {
+          code: 'group_not_found',
+        },
+      ],
+    },
+  }
+  displayErrorMessage({ data, container })
+  t.is(container.querySelector('.general-error').style.display, 'none')
+  t.is(container.querySelector('.group-not-found').style.display, 'block')
+  t.is(container.querySelector('.loading-indicator').style.display, 'none')
+})
+
+test('#showLoadingIndicator remove events', (t) => {
+  const container = t.context.container
+  const loadingIndicator = container.querySelector('.loading-indicator')
+  t.is(loadingIndicator.style.display, 'none')
+  showLoadingIndicator(container)
+  t.is(loadingIndicator.style.display, 'block')
+})
+
+test('#hideErrorMessages remove events', (t) => {
+  const container = t.context.container
+  const generalErrorMessage = container.querySelector('.general-error')
+  const groupNotFoundErrorMessage = container.querySelector('.group-not-found')
+  generalErrorMessage.style.display = 'block'
+  groupNotFoundErrorMessage.style.display = 'block'
+  t.is(generalErrorMessage.style.display, 'block')
+  t.is(groupNotFoundErrorMessage.style.display, 'block')
+  hideErrorMessages(container)
+  t.is(generalErrorMessage.style.display, 'none')
+  t.is(groupNotFoundErrorMessage.style.display, 'none')
+})

source/front/events-displayer.js

@@ -0,0 +1,91 @@
+import Formatter from './formatter.js'
+import { createAnchorElement } from './html-creator.js'
+
+export function clearEventsList(container) {
+  const list = container.querySelector('ul')
+  list.replaceChildren()
+}
+
+export function displayEvents({ events, document, container, maxEventsCount }) {
+  hideLoadingIndicator(container)
+
+  const isShortOffsetNameShown =
+    window.MOBILIZON_CONNECTOR.isShortOffsetNameShown
+  const locale = window.MOBILIZON_CONNECTOR.locale
+  const timeZone = window.MOBILIZON_CONNECTOR.timeZone
+
+  const eventsCount = Math.min(maxEventsCount, events.length)
+  const list = container.querySelector('ul')
+  for (let i = 0; i < eventsCount; i++) {
+    const li = document.createElement('li')
+
+    const a = createAnchorElement({
+      document,
+      text: events[i].title,
+      url: events[i].url,
+    })
+    li.appendChild(a)
+
+    const br = document.createElement('br')
+    li.appendChild(br)
+
+    const date = Formatter.formatDate({
+      locale,
+      start: events[i].beginsOn,
+      end: events[i].endsOn,
+      timeZone,
+      isShortOffsetNameShown,
+    })
+    const textnode = document.createTextNode(date)
+    li.appendChild(textnode)
+
+    if (events[i].physicalAddress) {
+      const location = Formatter.formatLocation({
+        description: events[i].physicalAddress.description,
+        locality: events[i].physicalAddress.locality,
+      })
+      if (location) {
+        const brBeforeLocation = document.createElement('br')
+        li.appendChild(brBeforeLocation)
+
+        const textnodeLocation = document.createTextNode(location)
+        li.appendChild(textnodeLocation)
+      }
+    }
+
+    list.appendChild(li)
+  }
+}
+
+export function displayErrorMessage({ data, container }) {
+  hideLoadingIndicator(container)
+  if (
+    Object.prototype.hasOwnProperty.call(data, 'response') &&
+    Object.prototype.hasOwnProperty.call(data.response, 'errors') &&
+    data.response.errors.length > 0 &&
+    Object.prototype.hasOwnProperty.call(data.response.errors[0], 'code') &&
+    data.response.errors[0].code === 'group_not_found'
+  ) {
+    const message = container.querySelector('.group-not-found')
+    message.style.display = 'block'
+  } else {
+    const message = container.querySelector('.general-error')
+    message.style.display = 'block'
+    console.error(data)
+  }
+}
+
+export function showLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'block'
+}
+
+function hideLoadingIndicator(container) {
+  const indicator = container.querySelector('.loading-indicator')
+  indicator.style.display = 'none'
+}
+
+export function hideErrorMessages(container) {
+  container.querySelector('.group-not-found').style.display = 'none'
+  container.querySelector('.general-error').style.display = 'none'
+}

source/front/formatter-test.js

@@ -0,0 +1,73 @@
+import test from 'ava'
+import Formatter from './formatter.js'
+
+test('#formatDate one date', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-15T15:30:00Z',
+  })
+  t.is(date, '15/04/2021 10:30 - 15:30')
+})
+
+test('#formatDate one date with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-15T15:30:00Z',
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
+})
+
+test('#formatDate two dates', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-16T15:30:00Z',
+  })
+  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
+})
+
+test('#formatDate two dates with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: '2021-04-16T15:30:00Z',
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30 (UTC)')
+})
+
+test('#formatDate second date is null', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: null,
+  })
+  t.is(date, '15/04/2021 10:30')
+})
+
+test('#formatDate second date is null with short offset name', (t) => {
+  const date = Formatter.formatDate({
+    start: '2021-04-15T10:30:00Z',
+    end: null,
+    isShortOffsetNameShown: true,
+  })
+  t.is(date, '15/04/2021 10:30 (UTC)')
+})
+
+test('#formatLocation both parameters', (t) => {
+  const location = Formatter.formatLocation({ description: 'a', locality: 'b' })
+  t.is(location, 'a, b')
+})
+
+test('#formatLocation description only', (t) => {
+  const location = Formatter.formatLocation({ description: 'a' })
+  t.is(location, 'a')
+})
+
+test('#formatLocation description with space only', (t) => {
+  const location = Formatter.formatLocation({ description: ' ' })
+  t.is(location, '')
+})
+
+test('#formatLocation locality only', (t) => {
+  const location = Formatter.formatLocation({ locality: 'a' })
+  t.is(location, 'a')
+})

source/front/formatter.js

@@ -0,0 +1,45 @@
+import DateTimeWrapper from './date-time-wrapper.js'
+
+export default class Formatter {
+  static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
+    const startDateTime = new DateTimeWrapper({
+      locale,
+      text: start,
+      timeZone,
+    })
+    let dateText = startDateTime.getShortDate()
+    dateText += ' ' + startDateTime.get24Time()
+    if (!end && isShortOffsetNameShown) {
+      dateText += ' (' + startDateTime.getShortOffsetName() + ')'
+    }
+
+    if (end) {
+      const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
+      if (!startDateTime.equalsDate(endDateTime)) {
+        dateText += ' - '
+        dateText += endDateTime.getShortDate() + ' '
+      } else {
+        dateText += ' - '
+      }
+      dateText += endDateTime.get24Time()
+      if (isShortOffsetNameShown) {
+        dateText += ' (' + endDateTime.getShortOffsetName() + ')'
+      }
+    }
+    return dateText
+  }
+
+  static formatLocation({ description, locality }) {
+    let location = ''
+    if (description && description.trim()) {
+      location += description.trim()
+    }
+    if (location && locality) {
+      location += ', '
+    }
+    if (locality) {
+      location += locality
+    }
+    return location
+  }
+}

source/front/html-creator-test.js

@@ -0,0 +1,15 @@
+import test from 'ava'
+import browserEnv from 'browser-env'
+
+import { createAnchorElement } from './html-creator.js'
+
+test.beforeEach(() => {
+  browserEnv()
+})
+
+test('#createAnchorElement usual parameters', (t) => {
+  const a = createAnchorElement({ document, text: 'a', url: 'b' })
+  t.is(a.tagName, 'A')
+  t.is(a.innerHTML, 'a')
+  t.is(a.getAttribute('href'), 'b')
+})

source/front/html-creator.js

@@ -1,4 +1,4 @@
-export function createAnchorElement({ text, url }) {
+export function createAnchorElement({ document, text, url }) {
   const a = document.createElement('a')
   a.setAttribute('href', url)
   a.setAttribute('target', '_blank')

source/includes/Api.php

@@ -0,0 +1,53 @@
+<?php
+namespace MobilizonConnector;
+
+class Api {
+  public static function init() {
+    add_action('rest_api_init', 'MobilizonConnector\Api::init_api');
+  }
+
+  public static function init_api() {
+    register_rest_route(
+      NAME . '/v1',
+      '/events',
+      [
+        'methods' => 'GET',
+        'callback' => 'MobilizonConnector\Api::get_events',
+        'args' => [
+          'eventsCount' => [
+            'required' => true,
+            'validate_callback' => function($param, $request, $key) {
+              return is_numeric($param) && $param > 0;
+            }
+          ],
+          'groupName' => [
+            'validate_callback' => function($param, $request, $key) {
+              return !is_numeric($param);
+            }
+          ]
+        ],
+        'permission_callback' => '__return_true',
+      ]
+      );
+  }
+
+  public static function get_events($request) {
+    $eventsCount = $request['eventsCount'];
+    $groupName = isset($request['groupName']) ? $request['groupName'] : '';
+
+    $url = Settings::getUrl();
+
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+      return $events;
+    } catch (GeneralException $e) {
+      return new \WP_Error('events_not_loading', 'The events could not be loaded!', array('status' => 500));
+    } catch (GroupNotFoundException $e) {
+      return new \WP_Error('group_not_found', sprintf('The group "%s" could not be found!', $groupName), array('status' => 404));
+    }
+  }
+}

source/includes/Constants.php

@@ -1,12 +1,6 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 const DEFAULT_EVENTS_COUNT = 5;
 const NAME = '<wordpress-name>';
 const NICE_NAME = '<wordpress-nice-name>';
-const TEXT_DOMAIN = '<wordpress-name>';

source/includes/DateTimeWrapper.php

@@ -0,0 +1,34 @@
+<?php
+namespace MobilizonConnector;
+
+final class DateTimeWrapper {
+  private $dateTime;
+  private $locale;
+  private $timeZone;
+
+  public function __construct(string $text, string $locale = 'en-GB', string $timeZone = 'utc') {
+    if (!$locale) {
+      $locale = 'en-GB';
+    }
+    if (!$timeZone) {
+      $timeZone = 'utc';
+    }
+    $this->dateTime = new \DateTime($text);
+    $this->locale = $locale;
+    $this->timeZone = new \DateTimeZone($timeZone);
+  }
+
+  public function get24Time(): string {
+    $formatter = \IntlDateFormatter::create($this->locale, \IntlDateFormatter::NONE, \IntlDateFormatter::SHORT, $this->timeZone);
+    return $formatter->format($this->dateTime);
+  }
+
+  public function getShortDate(): string {
+    $formatter = \IntlDateFormatter::create($this->locale, \IntlDateFormatter::SHORT, \IntlDateFormatter::NONE, $this->timeZone);
+    return $formatter->format($this->dateTime);
+  }
+
+  public function getTimeZoneName(): string {
+    return $this->timeZone->getName();
+  }
+}

source/includes/EventsCache.php

@@ -0,0 +1,19 @@
+<?php
+namespace MobilizonConnector;
+
+final class EventsCache {
+
+  private static $MAX_AGE_IN_S = 120;
+
+  public static function set(array $parameters, mixed $data): void {
+    // md5 is used as key must be 172 characters or fewer in length.
+    $key = md5(json_encode($parameters));
+    set_transient($key, $data, self::$MAX_AGE_IN_S);
+  }
+
+  public static function get(array $parameters): mixed {
+    $key = md5(json_encode($parameters));
+    $data = get_transient($key);
+    return $data;
+  }
+}

source/includes/EventsListBlock.php

@@ -0,0 +1,65 @@
+<?php
+namespace MobilizonConnector;
+
+class EventsListBlock {
+
+  public static function initAndReturnScriptName(): string {
+    $scriptName = NAME . '-block-starter';
+    wp_register_script($scriptName, plugins_url(NAME . '/front/block-events-loader.js'), [
+        'wp-block-editor',
+        'wp-blocks',
+        'wp-components',
+        'wp-i18n'
+      ]);
+    register_block_type(NAME . '/events-list', [
+      'api_version' => 2,
+      'title' => __('Events List', 'connector-mobilizon'),
+      'description' =>  __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+      'category' => 'widgets',
+      'icon' => 'list-view',
+      'supports' => [
+        'html' => false
+      ],
+      'attributes' => [
+        'eventsCount' => [
+          'type' => 'number',
+          'default' => 3,
+        ],
+        'groupName' => [
+          'type' => 'string',
+        ],
+      ],
+      'editor_script' => $scriptName,
+      'render_callback' => 'MobilizonConnector\EventsListBlock::render',
+    ]);
+    return $scriptName;
+  }
+
+  public static function render($block_attributes, $content) {
+    $url = Settings::getUrl();
+    $eventsCount = $block_attributes['eventsCount'];
+    $groupName = isset($block_attributes['groupName']) ? $block_attributes['groupName'] : '';
+    $classNamePrefix = NAME;
+
+    ob_start();
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
+
+      require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
+    $output = ob_get_clean();
+    return $output;
+  }
+}

source/includes/EventsListShortcut.php

@@ -1,11 +1,6 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class EventsListShortcut {
   
   public static function init() {
@@ -24,14 +19,29 @@ class EventsListShortcut {
       ), $atts
     );
 
-    $classNamePrefix = NAME;
+    $url = Settings::getUrl();
     $eventsCount = $atts_with_overriden_defaults['events-count'];
     $groupName = $atts_with_overriden_defaults['group-name'];
-    $url = Settings::getUrl();
+    $classNamePrefix = NAME;
-    $textDomain = TEXT_DOMAIN;
 
     ob_start();
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
+
       require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
     $output = ob_get_clean();
     return $output;
   }

source/includes/EventsListWidget.php

@@ -1,19 +1,14 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class EventsListWidget extends \WP_Widget {
 
   public function __construct() {
     parent::__construct(
       NAME . '-events-list',
-      NICE_NAME . ' ' . esc_html__('Events List', TEXT_DOMAIN),
+      NICE_NAME . ' ' . __('Events List', 'connector-mobilizon'),
       array(
-        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', TEXT_DOMAIN),
+        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       ),
     );
   }
@@ -25,22 +20,36 @@ class EventsListWidget extends \WP_Widget {
       echo $args['before_title'].apply_filters('widget_title', $options['title']).$args['after_title'];
     }
 
-    $classNamePrefix = NAME;
+    $url = Settings::getUrl();
     $eventsCount = $options['eventsCount'];
     $groupName = isset($options['groupName']) ? $options['groupName'] : '';
-    $url = Settings::getUrl();
+    $classNamePrefix = NAME;
-    $textDomain = TEXT_DOMAIN;
+
+    try {
+      if ($groupName) {
+        $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+      } else {
+        $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
+      }
+
+      $locale = get_locale();
+      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
+      $timeZone = wp_timezone_string();
   
       require dirname(__DIR__) . '/view/events-list.php';
+    } catch (GeneralException $e) {
+      require dirname(__DIR__) . '/view/events-list-not-loaded.php';
+    } catch (GroupNotFoundException $e) {
+      require dirname(__DIR__) . '/view/events-list-group-not-found.php';
+    }
 
     echo $args['after_widget'];
   }
 
   public function form($options) {
-    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
+    $title = !empty($options['title']) ? $options['title'] : __('Events', 'connector-mobilizon');
     $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
     $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
-    $textDomain = TEXT_DOMAIN;
     
     require dirname(__DIR__) . '/view/events-list-widget/form.php';
   }

source/includes/Formatter.php

@@ -0,0 +1,42 @@
+<?php
+namespace MobilizonConnector;
+
+final class Formatter
+{
+  public static function format_date(string $locale, string $timeZone, string $start, ?string $end, bool $isShortOffsetNameShown): string {
+    $startDateTime = new DateTimeWrapper($start, $locale, $timeZone);
+    $dateText = $startDateTime->getShortDate();
+    $dateText .= ' ' . $startDateTime->get24Time();
+    if (!$end && $isShortOffsetNameShown) {
+      $dateText .= ' (' . $startDateTime->getTimeZoneName() . ')';
+    }
+    if ($end) {
+      $endDateTime = new DateTimeWrapper($end, $locale, $timeZone);
+      if ($startDateTime->getShortDate() != $endDateTime->getShortDate()) {
+        $dateText .= ' - ';
+        $dateText .= $endDateTime->getShortDate() . ' ';
+      } else {
+        $dateText .= ' - ';
+      }
+      $dateText .= $endDateTime->get24Time();
+      if ($isShortOffsetNameShown) {
+        $dateText .= ' (' . $endDateTime->getTimeZoneName() . ')';
+      }
+    }
+    return $dateText;
+  }
+
+  public static function format_location(string $description, string $locality): string {
+    $location = '';
+    if ($description && trim($description)) {
+      $location .= trim($description);
+    }
+    if ($location && $locality) {
+      $location .= ', ';
+    }
+    if ($locality) {
+      $location .= $locality;
+    }
+    return $location;
+  }
+}

source/includes/GraphQlClient.php

@@ -0,0 +1,113 @@
+<?php
+namespace MobilizonConnector;
+
+final class GraphQlClient {
+
+  public static function query(string $endpoint, string $query, array $variables = [], ?string $token = null): array
+  {
+    $headers = ['Content-Type: application/json'];
+    if ($token !== null) {
+        $headers[] = "Authorization: bearer $token";
+    }
+
+    $context = stream_context_create([
+        'http' => [
+            'method' => 'POST',
+            'header' => $headers,
+            'content' => json_encode(['query' => $query, 'variables' => $variables]),
+        ]
+      ]);
+    $data = @file_get_contents($endpoint, false, $context);
+
+    if ($data === false) {
+      $error = error_get_last();
+      throw new \ErrorException($error['message'], $error['type']);
+    }
+
+    return json_decode($data, true);
+  }
+
+  public static function get_upcoming_events(string $url, int $limit): array {
+    $query = <<<'GRAPHQL'
+      query ($limit: Int) {
+        events(limit: $limit) {
+          elements {
+            id,
+            title,
+            url,
+            beginsOn,
+            endsOn,
+            physicalAddress {
+              description,
+              locality
+            }
+          },
+          total
+        }
+      }
+      GRAPHQL;
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['events']['elements'];
+    EventsCache::set(['url' => $url, 'query' => $query, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  public static function get_upcoming_events_by_group_name(string $url, int $limit, string $groupName): array {
+    $query = <<<'GRAPHQL'
+      query ($afterDatetime: DateTime, $groupName: String!, $limit: Int) {
+        group(preferredUsername: $groupName) {
+          organizedEvents(afterDatetime: $afterDatetime, limit: $limit) {
+            elements {
+              id,
+              title,
+              url,
+              beginsOn,
+              endsOn,
+              physicalAddress {
+                description,
+                locality
+              }
+            },
+            total
+          }
+        }
+      }
+      GRAPHQL;
+
+    $afterDatetime = date(\DateTime::ISO8601);
+
+    $cachedEvents = EventsCache::get(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    if ($cachedEvents !== false) {
+      return $cachedEvents;
+    }
+
+    $endpoint = $url . '/api';
+    $data = self::query($endpoint, $query, ['afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit]);
+    self::checkData($data);
+
+    $events = $data['data']['group']['organizedEvents']['elements'];
+    EventsCache::set(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit], $events);
+    return $events;
+  }
+
+  private static function checkData($data) {
+    if (isset($data['errors'])) {
+      if (count($data['errors']) > 0 &&
+          isset($data['errors'][0]['code']) &&
+          $data['errors'][0]['code'] === 'group_not_found') {
+        throw new GroupNotFoundException(serialize($data['errors'][0]));
+      } else {
+        throw new GeneralException(serialize($data['errors']));
+      }
+    }
+  }
+}

source/includes/Settings.php

@@ -1,17 +1,15 @@
 <?php
 namespace MobilizonConnector;
 
-// Exit if this file is called directly.
-if (!defined('ABSPATH')) {
-  exit;
-}
-
 class Settings {
 
   private static $DEFAULT_OPTION_URL = 'https://mobilizon.fr';
+  private static $DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN = false;
   private static $PAGE_NAME = 'wordpress_mobilizon';
   private static $OPTIONS_GROUP_NAME = 'wordpress_mobilizon';
+  private static $OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_is_short_offset_name_shown';
   private static $OPTION_NAME_URL = 'wordpress_mobilizon_url';
+  private static $SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN = 'wordpress_mobilizon_field_is_short_offset_name_shown';
   private static $SETTING_FIELD_NAME_URL = 'wordpress_mobilizon_field_url';
   private static $SETTINGS_SECTION_NAME = 'wordpress_mobilizon_section_general';
 
@@ -21,6 +19,10 @@ class Settings {
   }
 
   public static function init_settings() {
+    register_setting(
+      self::$OPTIONS_GROUP_NAME,
+      self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+    );
     register_setting(
       self::$OPTIONS_GROUP_NAME,
       self::$OPTION_NAME_URL,
@@ -29,14 +31,14 @@ class Settings {
 
     add_settings_section(
       self::$SETTINGS_SECTION_NAME,
-      __('General Settings', TEXT_DOMAIN),
+      __('General Settings', 'connector-mobilizon'),
       '',
       self::$PAGE_NAME
     );
 
     add_settings_field(
       self::$SETTING_FIELD_NAME_URL,
-      __('URL', TEXT_DOMAIN),
+      __('URL', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_url',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -44,10 +46,24 @@ class Settings {
         'label_for' => self::$SETTING_FIELD_NAME_URL
       )
     );
+    add_settings_field(
+      self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
+      __('Display named offset', 'connector-mobilizon'),
+      'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
+      self::$PAGE_NAME,
+      self::$SETTINGS_SECTION_NAME,
+      array(
+        'label_for' => self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN
+      )
+    );
+  }
+
+  public static function output_field_is_short_offset_name_shown($args) {
+    $isShortOffsetNameShown = self::isShortOffsetNameShown();
+    require dirname(__DIR__) . '/view/settings/is-short-offset-name-shown-field.php';
   }
 
   public static function output_field_url($args) {
-    $textDomain = TEXT_DOMAIN;
     $url = self::getUrl();
     require dirname(__DIR__) . '/view/settings/url-field.php';
   }
@@ -58,7 +74,7 @@ class Settings {
       add_settings_error(
         self::$OPTION_NAME_URL,
         'wordpress_mobilizon_field_url_error',
-        __('The URL is invalid.', TEXT_DOMAIN),
+        __('The URL is invalid.', 'connector-mobilizon'),
         'error'
       );
     }
@@ -70,7 +86,7 @@ class Settings {
 
   public static function register_settings_page() {
     add_options_page(
-      NICE_NAME . ' ' . __('Settings', TEXT_DOMAIN),
+      NICE_NAME . ' ' . __('Settings', 'connector-mobilizon'),
       NICE_NAME,
       'manage_options',
       NAME . '-settings',
@@ -85,15 +101,21 @@ class Settings {
     require dirname(__DIR__) . '/view/settings/page.php';
   }
 
+  public static function isShortOffsetNameShown() {
+    return get_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+  }
+
   public static function getUrl() {
     return get_option(self::$OPTION_NAME_URL);
   }
 
   public static function setDefaultOptions() {
+    add_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN, self::$DEFAULT_IS_SHORT_OFFSET_NAME_SHOWN);
     add_option(self::$OPTION_NAME_URL, self::$DEFAULT_OPTION_URL);
   }
 
   public static function deleteAllOptions() {
+    delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
     delete_option(self::$OPTION_NAME_URL);
   }
 

source/includes/exceptions/GeneralException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GeneralException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/includes/exceptions/GroupNotFoundException.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+class GroupNotFoundException extends \Exception {
+  public function __construct($message, $code = 0, Throwable $previous = null) {
+    parent::__construct($message, $code, $previous);
+  }
+
+  public function __toString() {
+    return __CLASS__ . ": [{$this->code}]: {$this->message}\n";
+}
+}

source/readme.txt

@@ -0,0 +1,206 @@
+# <wordpress-nice-name>
+Contributors: dwaxweiler
+Donate link: <wordpress-donation-link>
+Tags: mobilizon, events
+Stable tag: <wordpress-version>
+Requires at least: <wordpress-minimum-version>
+Tested up to: <wordpress-tested-up-to-version>
+Requires PHP: <wordpress-php-minimum-version>
+License: <wordpress-license>
+
+<wordpress-description>
+
+## Description
+
+<wordpress-nice-name> allows you to display the upcoming events of [Mobilizon](https://joinmobilizon.org/), which is a federated event listing platform, on your WordPress website.
+
+Features
+- Display events as Gutenberg block, as widget and as shortcut
+- Display events' title with link, date, and location, if available
+- Cache requests' responses for 2 minutes in the database
+- Configure number of events to show per block, per widget and per shortcut
+- Optionally filter events by a specific public group per block, per widget and per shortcut
+- Set the URL of the Mobilizon instance in the settings
+- Toggle adding named offset in brackets after the time in the settings
+
+This plugin requests the events via Mobilizon's GraphQL API.
+
+The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
+
+## Installation
+
+Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
+
+Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]`
+You have to use their username, e.g. `@nosliensvivants`, and append the name of their instance if they use a different one, e.g. `@yaam_berlin@mobilize.berlin`.
+
+## Screenshots
+1. Events list
+2. General settings
+3. Widget creation
+4. Shortcut creation
+5. Gutenberg block in editor
+
+## Changelog
+
+### [1.1.0]
+#### Added
+- Add some spacing between event items
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.6
+#### Fixed
+- Fix undefined variable $classNamePrefix for both error views
+
+### [1.0.0]
+#### Added
+- Display name of group when it cannot be found
+#### Changed
+- Let backend do requests to API of Mobilizon instance for increased privacy
+- Update dependencies
+#### Fixed
+- Fix displaying more than one block in the editor
+
+### [0.11.5]
+#### Changed
+- Confirm compatibility with WordPress 6.5
+
+### [0.11.4]
+#### Changed
+- Confirm compatibility with WordPress 6.4
+- Update dependencies
+
+### [0.11.3]
+#### Fixed
+- Clean up distributed files
+
+### [0.11.2]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.3
+
+### [0.11.1]
+#### Fixed
+- Revert minimum PHP version to 7.4 to allow some more time for upgrading PHP
+
+### [0.11.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.2
+#### Security
+- Set minimum PHP version to oldest stable 8.0
+
+### [0.10.1]
+#### Changed
+- Confirm compatibility with WordPress 6.1
+- Update dependencies
+
+### [0.10.0]
+#### Added
+- Add Gutenberg events list block
+- Show loading indicator during request
+#### Changed
+- Set list style type to none and left padding to zero for all occurences
+- Move shortcut usage description into installation section in `readme.txt`
+- Update dependencies
+
+### [0.9.1] - 2020-05-19
+#### Fixed
+- Fix WordPress compatibility version number
+
+### [0.9.0] - 2020-05-19
+#### Added
+- Improve explanation of group name filter
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.0
+#### Fixed
+- Fix displaying error message for the case the group is not found
+
+### [0.8.0] - 2022-01-09
+#### Added
+- Add support for older browsers using babel
+#### Changed
+- Confirm compatibility with WordPress 5.9
+- Update dependencies
+#### Fixed
+- Use ES modules correctly
+- Trim events' location
+
+### [0.7.0] - 2021-12-23
+#### Added
+- Add specific error message for the case the group is not found
+- Add code formatter prettier
+#### Changed
+- Update dependencies
+- Simplify build process
+#### Fixed
+- Fix Invalid DateTime on event end time being null
+#### Security
+- Set minimum PHP version to oldest stable 7.4
+
+### [0.6.2] - 2021-08-24
+#### Changed
+- Update dependencies
+#### Fixed
+- Fix empty WordPress timezone_string option resulting in Invalid DateTime
+
+### [0.6.1] - 2021-07-13
+#### Changed
+- Confirm compatibility with WordPress 5.8
+- Update dependencies
+
+### [0.6.0] - 2021-06-02
+#### Added
+- Optionally display the current offset as short name after the time via the general plugin settings
+#### Changed
+- Update dependencies
+#### Fixed
+- Capitalise Mobilizon name in description
+
+### [0.5.0] - 2021-05-06
+#### Added
+- Localise dates based on the WordPress locale and time zone
+#### Changed
+- Clearly list features in `readme.txt` description
+- Update dev dependencies c8, eslint, gulp-replace, webpack
+#### Fixed
+- Improve translatability
+
+### [0.4.0] - 2021-04-20
+#### Added
+- Show events' location if set: `description` and `locality` fields
+- Plugin icon
+#### Changed
+- Update dev dependencies eslint, jsdom, webpack
+
+### [0.3.0] - 2021-04-05
+#### Added
+- Donation link to WordPress Plugin Directory sidebar and to `package.json`
+- Cache requests for 2 minutes
+- Set up ESLint static code analysis
+#### Changed
+- Update luxon dependency
+- Update dev dependencies jsdom, webpack, webpack-cli
+
+### [0.2.2] - 2021-03-10
+#### Changed
+- Confirm compatibility with WordPress 5.7
+- Update graphql dependency
+- Update dev dependencies jsdom, webpack, webpack-cli, webpack-stream
+
+### [0.2.1] - 2021-01-15
+#### Fixed
+- Add missing backtick to `readme.txt`
+
+### [0.2.0] - 2021-01-15
+#### Added
+- `changelog.txt`
+- Changelog maintenance steps to `README.md`
+- Link to Github repository in `readme.txt`
+- Option to show events of a specific group by indicating its name
+#### Changed
+- Use same Markdown style in `README.md` as in other documents
+
+### [0.1.0] - 2021-01-09
+initial release

source/uninstall.php

@@ -1,6 +1,6 @@
 <?php
-require_once __DIR__ . '/includes/constants.php';
+require_once __DIR__ . '/includes/Constants.php';
-require_once __DIR__ . '/includes/settings.php';
+require_once __DIR__ . '/includes/Settings.php';
 
 // If uninstall.php is not called by WordPress, exit.
 if (!defined('WP_UNINSTALL_PLUGIN')) {

source/view/events-list-group-not-found.php

@@ -0,0 +1,11 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php echo esc_html(sprintf(__('The group "%s" could not be found!', 'connector-mobilizon'), $groupName)); ?>
+</div>

source/view/events-list-not-loaded.php

@@ -0,0 +1,11 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <?php esc_html_e('The events could not be loaded!', 'connector-mobilizon'); ?>
+</div>

source/view/events-list-widget/form.php

@@ -1,18 +1,20 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;
 }
 ?>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title', $textDomain); ?>:</label> 
+  <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_html_e('Title', 'connector-mobilizon'); ?>:</label>
   <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
 </p>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_attr_e('Number of events to show', $textDomain); ?>:</label>
+  <label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_html_e('Number of events to show', 'connector-mobilizon'); ?>:</label>
   <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>" name="<?php echo esc_attr($this->get_field_name('eventsCount')); ?>" type="number" value="<?php echo esc_attr($eventsCount); ?>" min="1">
 </p>
 <p>
-  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_attr_e('Group name (optional)', $textDomain); ?>:</label> 
+  <label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_html_e('Group name (optional)', 'connector-mobilizon'); ?>:</label>
   <input class="widefat" id="<?php echo esc_attr($this->get_field_id('groupName')); ?>" name="<?php echo esc_attr($this->get_field_name('groupName')); ?>" type="text" value="<?php echo esc_attr($groupName); ?>">
 </p>

source/view/events-list.php

@@ -0,0 +1,23 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
+  <ul style="list-style-type: none; padding-left: 0;">
+    <?php foreach($events as $event) { ?>
+    <li style="margin-top: 10px;">
+      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html_e($event['title']); ?></a>
+      <br>
+      <?php echo esc_html_e(Formatter::format_date($locale, $timeZone, $event['beginsOn'], $event['endsOn'], $isShortOffsetNameShown)); ?>
+      <?php if (isset($event['physicalAddress'])) { ?>
+      <br>
+      <?php echo esc_html_e(Formatter::format_location($event['physicalAddress']['description'], $event['physicalAddress']['locality'])) ?>
+      <?php } ?>
+    </li>
+    <?php } ?>
+  </ul>
+</div>

source/view/settings/is-short-offset-name-shown-field.php

@@ -0,0 +1,15 @@
+<?php
+namespace MobilizonConnector;
+
+// Exit if this file is called directly.
+if (!defined('ABSPATH')) {
+  exit;
+}
+?>
+<input id="<?php echo esc_attr($args['label_for']); ?>"
+  name="<?php echo esc_attr(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN); ?>"
+  type="checkbox"
+  <?php echo $isShortOffsetNameShown == true ? 'checked' : ''; ?>>
+<p class="description">
+  <?php esc_html_e('The time zone of this WordPress installation is used. Whether the current offset should be displayed in brackets after the time, e.g. 10:00 (UTC)', 'connector-mobilizon'); ?>
+</p>

source/view/settings/page.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;

source/view/settings/url-field.php

@@ -1,4 +1,6 @@
 <?php
+namespace MobilizonConnector;
+
 // Exit if this file is called directly.
 if (!defined('ABSPATH')) {
   exit;
@@ -10,5 +12,5 @@ if (!defined('ABSPATH')) {
   type="url"
   value="<?php echo esc_attr($url); ?>">
 <p class="description">
-  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', $textDomain); ?>
+  <?php esc_html_e('The URL of the Mobilizon instance whose events you want to list, e.g. https://example.net', 'connector-mobilizon'); ?>
 </p>

tests/DateTimeWrapperTest.php

@@ -0,0 +1,47 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\DateTimeWrapper;
+use PHPUnit\Framework\TestCase;
+
+final class DateTimeWrapperTest extends TestCase {
+  public function testCanGet24TimeForUsualTime(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('16:45', $d->get24Time());
+  }
+
+  public function testCanGetShortDateForUsualDate(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithLocaleWithUnderscore(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('24/12/2020', $d->getShortDate(), 'en_GB');
+  }
+
+  public function testCanGetShortDateForUsualDateWithTimezoneString(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', 'Europe/Rome');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithNamedOffset(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', 'UTC');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithOffset(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', '+02:00');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortDateForUsualDateWithEmptyTimezone(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z', 'en-GB', '');
+    $this->assertSame('24/12/2020', $d->getShortDate());
+  }
+
+  public function testCanGetShortOffsetNameForUsualTime(): void {
+    $d = new DateTimeWrapper('2020-12-24T16:45:00Z');
+    $this->assertSame('UTC', $d->getTimeZoneName());
+  }
+}

tests/FormatterTest.php

@@ -0,0 +1,52 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\Formatter;
+use PHPUnit\Framework\TestCase;
+
+final class FormatterTest extends PHPUnit\Framework\TestCase
+{
+  public function testCanDateFormatOneDate(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatOneDateWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', true));
+  }
+
+  public function testCanDateFormatOneDateWithTimeZoneOffset(): void {
+    $this->assertSame('15/04/2021 11:30 - 16:30', Formatter::format_date('en-GB', '+01:00', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatTwoDates(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z', false));
+  }
+
+  public function testCanDateFormatTwoDatesWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z', true));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNull(): void {
+    $this->assertSame('15/04/2021 10:30', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', null, false));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNullWithOffset(): void {
+    $this->assertSame('15/04/2021 10:30 (UTC)', Formatter::format_date('en-GB', 'UTC', '2021-04-15T10:30:00Z', null, true));
+  }
+
+  public function testCanLocationFormatBothParameters(): void {
+    $this->assertSame('a, b', Formatter::format_location('a', 'b'));
+  }
+
+  public function testLocationFormatDescriptionOnly(): void {
+    $this->assertSame('a', Formatter::format_location('a', ''));
+  }
+
+  public function testLocationFormatDescriptionWithSpaceOnly(): void {
+    $this->assertSame('', Formatter::format_location(' ', ''));
+  }
+
+  public function testLocationFormatLocalityOnly(): void {
+    $this->assertSame('a', Formatter::format_location('', 'a'));
+  }
+}

webpack.config.cjs

@@ -0,0 +1,46 @@
+/* eslint-disable no-undef */
+const path = require('path')
+
+const CopyPlugin = require('copy-webpack-plugin')
+
+const FOLDER_SOURCE = './source'
+
+module.exports = {
+  entry: {
+    'block-events-loader': FOLDER_SOURCE + '/front/block-events-loader.js',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'build/front'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', { targets: 'defaults' }]],
+          },
+        },
+      },
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          context: FOLDER_SOURCE,
+          from: '**/*.php',
+          to: '../',
+        },
+        {
+          context: FOLDER_SOURCE,
+          from: '**/*.txt',
+          to: '../',
+        },
+      ],
+    }),
+  ],
+}