remove space

This reverts commit 9662e1f333.

.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# 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/codeql.yml

@@ -0,0 +1,96 @@
+# 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 Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '20 7 * * 0'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: actions
+          build-mode: none
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v3
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # 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.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        npm install
+        npm run build-prod
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v3
+      with:
+        category: "/language:${{matrix.language}}"

.husky/pre-commit

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

.vscode/settings.json

@@ -0,0 +1,73 @@
+{
+  "intelephense.stubs": [
+    "apache",
+    "bcmath",
+    "bz2",
+    "calendar",
+    "com_dotnet",
+    "Core",
+    "ctype",
+    "curl",
+    "date",
+    "dba",
+    "dom",
+    "enchant",
+    "exif",
+    "FFI",
+    "fileinfo",
+    "filter",
+    "fpm",
+    "ftp",
+    "gd",
+    "gettext",
+    "gmp",
+    "hash",
+    "iconv",
+    "imap",
+    "intl",
+    "json",
+    "ldap",
+    "libxml",
+    "mbstring",
+    "meta",
+    "mysqli",
+    "oci8",
+    "odbc",
+    "openssl",
+    "pcntl",
+    "pcre",
+    "PDO",
+    "pgsql",
+    "Phar",
+    "posix",
+    "pspell",
+    "random",
+    "readline",
+    "Reflection",
+    "session",
+    "shmop",
+    "SimpleXML",
+    "snmp",
+    "soap",
+    "sockets",
+    "sodium",
+    "SPL",
+    "sqlite3",
+    "standard",
+    "superglobals",
+    "sysvmsg",
+    "sysvsem",
+    "sysvshm",
+    "tidy",
+    "tokenizer",
+    "xml",
+    "xmlreader",
+    "xmlrpc",
+    "xmlwriter",
+    "xsl",
+    "Zend OPcache",
+    "zip",
+    "zlib",
+    "wordpress"
+  ]
+}

README.md

@@ -6,6 +6,8 @@ More details can be found in the [WordPress Plugin Directory](https://wordpress.
 
 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
@@ -22,21 +24,23 @@ The current changelog can be found under [source/changelog.txt](source/changelog
 ### Release procedure
 
 1. Make sure `changelog.txt` is up-to-date.
-2. Use a new version number and copy over the new section into `readme.txt`.
-3. Update `package.json` with the same version number.
-4. Update the `package-lock.json`: `npm i --package-lock-only`
-5. Build: `npm run build-prod`
-6. Make sure screenshots are up-to-date.
-7. Copy the built plugin into `/trunk` of SVN.
-8. Create a new tag of the new version: `svn cp trunk tags/<version>`
-9. Check the version number occurrences in both folders.
-10. Commit everything together to the release SVN: `svn ci -m "release version <version>"` Make sure to add new files beforehand.
-11. Commit the new version in git with the same message.
-12. Tag the new version: `git tag v<version>`
-13. Push the new tag to the repository: `git push --tags`
-14. Append `-next` to the version number in `package.json`.
-15. Update the `package-lock.json`: `npm i --package-lock-only`
-16. Commit: `git commit -am "prepare next release"`
+2. Create a new section with a new version number.
+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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "connector-mobilizon",
-  "version": "1.0.0",
+  "version": "1.4.0-next",
   "description": "Display Mobilizon events in WordPress.",
   "private": true,
   "type": "module",
@@ -24,33 +24,33 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "graphql": "16.8.1",
-    "luxon": "3.4.4"
+    "graphql": "16.11.0",
+    "luxon": "3.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
-    "@babel/eslint-parser": "7.24.1",
-    "@babel/preset-env": "7.24.4",
-    "@babel/preset-react": "7.24.1",
-    "@wordpress/eslint-plugin": "17.12.0",
-    "ava": "6.1.2",
-    "babel-loader": "9.1.3",
-    "browser-env": "3.3.0",
-    "c8": "9.1.0",
-    "copy-webpack-plugin": "12.0.2",
-    "eslint": "8.57.0",
+    "@babel/core": "7.27.1",
+    "@babel/eslint-parser": "7.27.1",
+    "@babel/preset-env": "7.27.2",
+    "@babel/preset-react": "7.27.1",
+    "@wordpress/eslint-plugin": "22.10.0",
+    "ava": "6.3.0",
+    "babel-loader": "10.0.0",
+    "c8": "10.1.3",
+    "copy-webpack-plugin": "13.0.0",
+    "eslint": "8.57.1",
     "eslint-plugin-ava": "14.0.0",
     "eslint-plugin-jsx": "0.1.0",
-    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react": "7.37.5",
     "esm": "3.2.25",
-    "gulp": "4.0.2",
+    "gulp": "5.0.0",
     "gulp-replace": "1.1.4",
-    "husky": "9.0.11",
-    "lint-staged": "15.2.2",
-    "prettier": "3.2.5",
-    "rimraf": "5.0.5",
-    "webpack": "5.91.0",
-    "webpack-cli": "5.1.4"
+    "husky": "9.1.7",
+    "jsdom": "26.1.0",
+    "lint-staged": "15.5.2",
+    "prettier": "3.5.3",
+    "rimraf": "5.0.10",
+    "webpack": "5.99.9",
+    "webpack-cli": "6.0.1"
   },
   "ava": {
     "files": [
@@ -61,7 +61,7 @@
     "niceName": "Connector for Mobilizon",
     "phpMinimumVersion": 7.4,
     "wordpressMinimumVersion": 5.6,
-    "wordpressTestedUpToVersion": "6.5"
+    "wordpressTestedUpToVersion": "6.8"
   },
   "lint-staged": {
     "source/**/*.js": "eslint",

qodana.yaml

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

source/changelog.txt

@@ -1,10 +1,51 @@
 ### [Unreleased]
 #### Added
+- Display "Show more events" button below the events list
+- Document basic installation
+- Add settings link to plugin on plugins page
+- Add donation link to plugin on plugins page
 #### Changed
+- Use `wp_remote_get()` instead of cURL functions for downloading the images
+- Use date and time formats from general site settings
 #### Deprecated
 #### Removed
+- Removed option "Display named offset"
 #### Fixed
+- Show group not found error message in block
 #### Security
+- Escape translated strings to prevent HTML injections
+
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [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

source/connector-mobilizon.php

@@ -16,8 +16,10 @@ 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/SiteSettings.php';
+require_once __DIR__ . '/includes/LocalDateTime.php';
+require_once __DIR__ . '/includes/LocalDateTimeFormatter.php';
+require_once __DIR__ . '/includes/LineFormatter.php';
 require_once __DIR__ . '/includes/GraphQlClient.php';
 require_once __DIR__ . '/includes/EventsListBlock.php';
 require_once __DIR__ . '/includes/EventsListShortcut.php';
@@ -37,6 +39,8 @@ final class Mobilizon_Connector {
     add_action('init', [$this, 'register_shortcut']);
     add_action('widgets_init', [$this, 'register_widget']);
     register_activation_hook(__FILE__, [$this, 'enable_activation']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_donation_link_to_plugins_page']);
+    add_filter('plugin_action_links_connector-mobilizon/connector-mobilizon.php', [$this, 'add_settings_link_to_plugins_page']);
   }
 
   public static function init() {
@@ -48,15 +52,34 @@ final class Mobilizon_Connector {
     return $instance;
   }
 
+  public function add_donation_link_to_plugins_page(array $links) {
+    $url = esc_url('<wordpress-donation-link>');
+    $settings_link = "<a href='$url'>" . esc_html__('Donate', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
+  public function add_settings_link_to_plugins_page(array $links) {
+    $url = esc_url(
+      add_query_arg(
+        'page',
+        'connector-mobilizon-settings',
+        get_admin_url() . 'options-general.php'
+      )
+    );
+    $settings_link = "<a href='$url'>" . esc_html__('Settings', 'connector-mobilizon') . '</a>';
+    array_unshift($links, $settings_link);
+    return $links;
+  }
+
   public function enable_activation() {
     MobilizonConnector\Settings::setDefaultOptions();
+    MobilizonConnector\Settings::removeObsoleteOptionsIfNeeded();
   }
 
   private function load_settings_globally_before_script($scriptName) {
     $settings = array(
-      'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
-      'locale' => str_replace('_', '-', get_locale()),
-      'timeZone' => wp_timezone_string()
+      'url' => MobilizonConnector\Settings::getUrl()
     );
     wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');
   }

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable @wordpress/i18n-ellipsis */
 import {
   clearEventsList,
@@ -6,6 +7,7 @@ import {
   hideErrorMessages,
   showLoadingIndicator,
 } from '../../events-displayer.js'
+import Formatter from '../../formatter.js'
 
 const { InspectorControls, useBlockProps } = wp.blockEditor
 const { Panel, PanelBody } = wp.components
@@ -30,11 +32,21 @@ export default ({ attributes, setAttributes }) => {
         clearEventsList(container)
         showLoadingIndicator(container)
         let url = `/wp-json/connector-mobilizon/v1/events?eventsCount=${eventsCount}`
+        let showMoreUrl = window.MOBILIZON_CONNECTOR.url
         if (groupName) {
+          showMoreUrl += '/@' + groupName + '/events'
           url += `&groupName=${groupName}`
         }
+        container.querySelector('a').href = showMoreUrl
         await fetch(url)
-          .then((response) => response.text())
+          .then(async (response) => {
+            if (!response.ok) {
+              // Reject if no 2xx response.
+              const data = await response.text()
+              return Promise.reject(data)
+            }
+            return response.text()
+          })
           .then((data) => {
             const events = JSON.parse(data)
             displayEvents({
@@ -45,7 +57,8 @@ export default ({ attributes, setAttributes }) => {
             })
           })
           .catch((data) => {
-            displayErrorMessage({ data, container })
+            const parsedData = JSON.parse(data)
+            displayErrorMessage({ data: parsedData, container })
           })
       }
     }, 500)
@@ -55,7 +68,9 @@ export default ({ attributes, setAttributes }) => {
   }, [])
   function updateEventsCount(event) {
     let newValue = Number(event.target.value)
-    if (newValue < 1) newValue = 1
+    if (newValue < 1) {
+      newValue = 1
+    }
     setAttributes({ eventsCount: newValue })
     reloadEventList(newValue, attributes.groupName)
   }
@@ -67,12 +82,18 @@ export default ({ attributes, setAttributes }) => {
   return [
     <InspectorControls>
       <Panel>
-        <PanelBody title={__('Events List Settings', '<wordpress-name>')}>
+        <PanelBody
+          title={Formatter.escapeHTML(
+            __('Events List Settings', '<wordpress-name>'),
+          )}
+        >
           <label
             className="components-base-control__label"
             htmlFor={NAME + '_events-count'}
           >
-            {__('Number of events to show', '<wordpress-name>')}
+            {Formatter.escapeHTML(
+              __('Number of events to show', '<wordpress-name>'),
+            )}
           </label>
           <input
             className="components-text-control__input"
@@ -85,7 +106,9 @@ export default ({ attributes, setAttributes }) => {
             className="components-base-control__label"
             htmlFor={NAME + '_group-name'}
           >
-            {__('Group name (optional)', '<wordpress-name>')}
+            {Formatter.escapeHTML(
+              __('Group name (optional)', '<wordpress-name>'),
+            )}
           </label>
           <input
             className="components-text-control__input"
@@ -99,15 +122,26 @@ export default ({ attributes, setAttributes }) => {
     </InspectorControls>,
     <div {...blockProps}>
       <div className="general-error" style={{ display: 'none' }}>
-        {__('The events could not be loaded!', '<wordpress-name>')}
+        {Formatter.escapeHTML(
+          __('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>')}
+        {Formatter.escapeHTML(
+          __('The group could not be found!', '<wordpress-name>'),
+        )}
       </div>
       <div className="loading-indicator" style={{ display: 'none' }}>
-        {__('Loading...', '<wordpress-name>')}
+        {Formatter.escapeHTML(__('Loading...', '<wordpress-name>'))}
       </div>
       <ul style={{ 'list-style-type': 'none', 'padding-left': 0 }}></ul>
+      <a
+        href=""
+        target="_blank"
+        style={{ display: 'inline-block', 'margin-top': '20px;' }}
+      >
+        {Formatter.escapeHTML(__('Show more events', '<wordpress-name>'))}
+      </a>
     </div>,
   ]
 }

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

@@ -1,87 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,5 +1,5 @@
 import test from 'ava'
-import browserEnv from 'browser-env'
+import { JSDOM } from 'jsdom'
 
 import {
   displayEvents,
@@ -9,7 +9,9 @@ import {
 } from './events-displayer.js'
 
 test.before(() => {
-  browserEnv()
+  const dom = new JSDOM()
+  global.document = dom.window.document
+  global.window = dom.window
   window.MOBILIZON_CONNECTOR = {
     locale: 'en-GB',
     timeZone: 'utc',
@@ -49,6 +51,10 @@ test('#displayEvents one event', (t) => {
         description: 'c',
         locality: 'd',
       },
+      startDateFormatted: '15/04/2021',
+      startTimeFormatted: '10:30',
+      endDateFormatted: '15/04/2021',
+      endTimeFormatted: '15:30',
     },
   ]
   const container = t.context.container
@@ -81,13 +87,7 @@ test('#displayErrorMessage general error message display', (t) => {
 test('#displayErrorMessage group not found error message display', (t) => {
   const container = t.context.container
   const data = {
-    response: {
-      errors: [
-        {
-          code: 'group_not_found',
-        },
-      ],
-    },
+    code: 'group_not_found',
   }
   displayErrorMessage({ data, container })
   t.is(container.querySelector('.general-error').style.display, 'none')

source/front/events-displayer.js

@@ -1,5 +1,5 @@
 import Formatter from './formatter.js'
-import { createAnchorElement } from './html-creator.js'
+import { createAnchorElement, createImageElement } from './html-creator.js'
 
 export function clearEventsList(container) {
   const list = container.querySelector('ul')
@@ -9,15 +9,23 @@ export function clearEventsList(container) {
 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')
+    li.style.lineHeight = '150%'
+    li.style.marginTop = '20px'
+
+    if (events[i].picture) {
+      const img = createImageElement({
+        document,
+        alt: events[i].picture.alt ? events[i].picture.alt : '',
+        src: events[i].picture.base64 ? events[i].picture.base64 : '',
+      })
+      img.style.display = 'block'
+      img.style.maxWidth = '100%'
+      li.appendChild(img)
+    }
 
     const a = createAnchorElement({
       document,
@@ -30,11 +38,10 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
     li.appendChild(br)
 
     const date = Formatter.formatDate({
-      locale,
-      start: events[i].beginsOn,
-      end: events[i].endsOn,
-      timeZone,
-      isShortOffsetNameShown,
+      startDateFormatted: events[i].startDateFormatted,
+      startTimeFormatted: events[i].startTimeFormatted,
+      endDateFormatted: events[i].endDateFormatted,
+      endTimeFormatted: events[i].endTimeFormatted,
     })
     const textnode = document.createTextNode(date)
     li.appendChild(textnode)
@@ -59,13 +66,7 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
 
 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'
-  ) {
+  if (Object.hasOwn(data, 'code') && data.code === 'group_not_found') {
     const message = container.querySelector('.group-not-found')
     message.style.display = 'block'
   } else {

source/front/formatter-test.js

@@ -1,57 +1,48 @@
 import test from 'ava'
+import { JSDOM } from 'jsdom'
+
 import Formatter from './formatter.js'
 
+test.beforeEach(() => {
+  const dom = new JSDOM()
+  global.document = dom.window.document
+})
+
+test('#escapeHTML', (t) => {
+  const escaped = Formatter.escapeHTML('<b>a</b>')
+  t.is(escaped, '&lt;b&gt;a&lt;/b&gt;')
+})
+
 test('#formatDate one date', (t) => {
   const date = Formatter.formatDate({
-    start: '2021-04-15T10:30:00Z',
-    end: '2021-04-15T15:30:00Z',
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: '15/04/2021',
+    endTimeFormatted: '15:30',
   })
   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',
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: '16/04/2021',
+    endTimeFormatted: '15:30',
   })
   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,
+    startDateFormatted: '15/04/2021',
+    startTimeFormatted: '10:30',
+    endDateFormatted: undefined,
+    endTimeFormatted: undefined,
   })
   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')

source/front/formatter.js

@@ -1,30 +1,26 @@
-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() + ')'
-    }
+  static escapeHTML(input) {
+    const div = document.createElement('div')
+    div.appendChild(document.createTextNode(input))
+    return div.innerHTML
+  }
 
-    if (end) {
-      const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
-      if (!startDateTime.equalsDate(endDateTime)) {
+  static formatDate({
+    startDateFormatted,
+    startTimeFormatted,
+    endDateFormatted,
+    endTimeFormatted,
+  }) {
+    let dateText = startDateFormatted
+    dateText += ' ' + startTimeFormatted
+    if (endDateFormatted) {
+      if (startDateFormatted !== endDateFormatted) {
         dateText += ' - '
-        dateText += endDateTime.getShortDate() + ' '
+        dateText += endDateFormatted + ' '
       } else {
         dateText += ' - '
       }
-      dateText += endDateTime.get24Time()
-      if (isShortOffsetNameShown) {
-        dateText += ' (' + endDateTime.getShortOffsetName() + ')'
-      }
+      dateText += endTimeFormatted
     }
     return dateText
   }

source/front/html-creator-test.js

@@ -1,10 +1,11 @@
 import test from 'ava'
-import browserEnv from 'browser-env'
+import { JSDOM } from 'jsdom'
 
 import { createAnchorElement } from './html-creator.js'
 
 test.beforeEach(() => {
-  browserEnv()
+  const dom = new JSDOM()
+  global.document = dom.window.document
 })
 
 test('#createAnchorElement usual parameters', (t) => {

source/front/html-creator.js

@@ -5,3 +5,10 @@ export function createAnchorElement({ document, text, url }) {
   a.innerHTML = text
   return a
 }
+
+export function createImageElement({ document, alt, src }) {
+  const img = document.createElement('img')
+  img.setAttribute('alt', alt)
+  img.setAttribute('src', src)
+  return img
+}

source/includes/Api.php

@@ -43,6 +43,7 @@ class Api {
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }
+      $events = array_map([self::class, 'addDateAndTimeFormats'], $events);
       return $events;
     } catch (GeneralException $e) {
       return new \WP_Error('events_not_loading', 'The events could not be loaded!', array('status' => 500));
@@ -50,4 +51,21 @@ class Api {
       return new \WP_Error('group_not_found', sprintf('The group "%s" could not be found!', $groupName), array('status' => 404));
     }
   }
+
+  public static function addDateAndTimeFormats($event) {
+    $dateFormat = SiteSettings::getDateFormat();
+    $timeFormat = SiteSettings::getTimeFormat();
+    $timeZone = SiteSettings::getTimeZone();
+
+    $startDateTime = new LocalDateTime($event['beginsOn'], $timeZone);
+    $event['startDateFormatted'] = LocalDateTimeFormatter::format($startDateTime, $dateFormat);
+    $event['startTimeFormatted'] = LocalDateTimeFormatter::format($startDateTime, $timeFormat);
+
+    if ($event['endsOn']) {
+      $endDateTime = new LocalDateTime($event['endsOn'], $timeZone);
+      $event['endDateFormatted'] = LocalDateTimeFormatter::format($endDateTime, $dateFormat);
+      $event['endTimeFormatted'] = LocalDateTimeFormatter::format($endDateTime, $timeFormat);
+    }
+    return $event;
+  }
 }

source/includes/Constants.php

@@ -4,3 +4,4 @@ namespace MobilizonConnector;
 const DEFAULT_EVENTS_COUNT = 5;
 const NAME = '<wordpress-name>';
 const NICE_NAME = '<wordpress-nice-name>';
+const PLUGIN_VERSION = '<wordpress-version>';

source/includes/DateTimeWrapper.php

@@ -1,34 +0,0 @@
-<?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/EventsListBlock.php

@@ -10,11 +10,11 @@ class EventsListBlock {
         'wp-blocks',
         'wp-components',
         'wp-i18n'
-      ]);
+      ], '<wordpress-version>', array('in_footer' => true));
     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'),
+      'title' => esc_html__('Events List', 'connector-mobilizon'),
+      'description' =>  esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       'category' => 'widgets',
       'icon' => 'list-view',
       'supports' => [
@@ -39,19 +39,21 @@ class EventsListBlock {
     $url = Settings::getUrl();
     $eventsCount = $block_attributes['eventsCount'];
     $groupName = isset($block_attributes['groupName']) ? $block_attributes['groupName'] : '';
+    $classNamePrefix = NAME;
 
     ob_start();
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }
 
-      $classNamePrefix = NAME;
-      $locale = get_locale();
-      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
-      $timeZone = wp_timezone_string();
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
 
       require dirname(__DIR__) . '/view/events-list.php';
     } catch (GeneralException $e) {

source/includes/EventsListShortcut.php

@@ -22,19 +22,21 @@ class EventsListShortcut {
     $url = Settings::getUrl();
     $eventsCount = $atts_with_overriden_defaults['events-count'];
     $groupName = $atts_with_overriden_defaults['group-name'];
+    $classNamePrefix = NAME;
 
     ob_start();
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }
 
-      $classNamePrefix = NAME;
-      $locale = get_locale();
-      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
-      $timeZone = wp_timezone_string();
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
 
       require dirname(__DIR__) . '/view/events-list.php';
     } catch (GeneralException $e) {

source/includes/EventsListWidget.php

@@ -6,9 +6,9 @@ class EventsListWidget extends \WP_Widget {
   public function __construct() {
     parent::__construct(
       NAME . '-events-list',
-      NICE_NAME . ' ' . __('Events List', 'connector-mobilizon'),
+      NICE_NAME . ' ' . esc_html__('Events List', 'connector-mobilizon'),
       array(
-        'description' => __('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
+        'description' => esc_html__('A list of the upcoming events of the connected Mobilizon instance.', 'connector-mobilizon'),
       ),
     );
   }
@@ -23,18 +23,20 @@ class EventsListWidget extends \WP_Widget {
     $url = Settings::getUrl();
     $eventsCount = $options['eventsCount'];
     $groupName = isset($options['groupName']) ? $options['groupName'] : '';
+    $classNamePrefix = NAME;
 
     try {
+      $showMoreUrl = Settings::getUrl();
       if ($groupName) {
         $events = GraphQlClient::get_upcoming_events_by_group_name($url, (int) $eventsCount, $groupName);
+        $showMoreUrl .= '/@' . $groupName . '/events';
       } else {
         $events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
       }
 
-      $classNamePrefix = NAME;
-      $locale = get_locale();
-      $isShortOffsetNameShown = Settings::isShortOffsetNameShown();
-      $timeZone = wp_timezone_string();
+      $dateFormat = SiteSettings::getDateFormat();
+      $timeFormat = SiteSettings::getTimeFormat();
+      $timeZone = SiteSettings::getTimeZone();
   
       require dirname(__DIR__) . '/view/events-list.php';
     } catch (GeneralException $e) {
@@ -47,7 +49,7 @@ class EventsListWidget extends \WP_Widget {
   }
 
   public function form($options) {
-    $title = !empty($options['title']) ? $options['title'] : __('Events', 'connector-mobilizon');
+    $title = !empty($options['title']) ? $options['title'] : esc_html__('Events', 'connector-mobilizon');
     $eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
     $groupName = !empty($options['groupName']) ? $options['groupName'] : '';
     

source/includes/Formatter.php

@@ -1,42 +0,0 @@
-<?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

@@ -40,6 +40,11 @@ final class GraphQlClient {
             physicalAddress {
               description,
               locality
+            },
+            picture {
+              alt,
+              contentType,
+              url
             }
           },
           total
@@ -57,6 +62,17 @@ final class GraphQlClient {
     self::checkData($data);
 
     $events = $data['data']['events']['elements'];
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
     EventsCache::set(['url' => $url, 'query' => $query, 'limit' => $limit], $events);
     return $events;
   }
@@ -75,6 +91,11 @@ final class GraphQlClient {
               physicalAddress {
                 description,
                 locality
+              },
+              picture {
+                alt,
+                contentType,
+                url
               }
             },
             total
@@ -95,6 +116,18 @@ final class GraphQlClient {
     self::checkData($data);
 
     $events = $data['data']['group']['organizedEvents']['elements'];
+    
+    foreach ($events as &$event) {
+      if ($event['picture']) {
+        $picture_response = self::download_image($event['picture']['url']);
+        if ($picture_response !== false) {
+          $picture_encoded = 'data:' . $event['picture']['contentType'] . ';base64,' . base64_encode($picture_response);
+          $event['picture']['base64'] = $picture_encoded;
+        }
+      }
+      unset($event);
+    }
+
     EventsCache::set(['url' => $url, 'query' => $query, 'afterDatetime' => $afterDatetime, 'groupName' => $groupName, 'limit' => $limit], $events);
     return $events;
   }
@@ -110,4 +143,10 @@ final class GraphQlClient {
       }
     }
   }
+
+  private static function download_image($url) {
+    $response = wp_remote_get($url);
+    $image_data = $response['body'];
+    return $image_data;
+  }
 }

source/includes/LineFormatter.php

@@ -0,0 +1,41 @@
+<?php
+namespace MobilizonConnector;
+
+final class LineFormatter
+{
+  public static function format_date_time(\DateTimeZone $timeZone, string $dateFormat, string $timeFormat, string $start, ?string $end): string {
+    $startDateTime = new LocalDateTime($start, $timeZone);
+    $startDate = LocalDateTimeFormatter::format($startDateTime, $dateFormat);
+    $startTime = LocalDateTimeFormatter::format($startDateTime, $timeFormat);
+
+    $dateText = $startDate . ' ' . $startTime;
+    if ($end) {
+      $endDateTime = new LocalDateTime($end, $timeZone);
+      $endDate = LocalDateTimeFormatter::format($endDateTime, $dateFormat);
+      $endTime = LocalDateTimeFormatter::format($endDateTime, $timeFormat);
+
+      if ($startDate != $endDate) {
+        $dateText .= ' - ';
+        $dateText .= $endDate . ' ';
+      } else {
+        $dateText .= ' - ';
+      }
+      $dateText .= $endTime;
+    }
+    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/LocalDateTime.php

@@ -0,0 +1,15 @@
+<?php
+namespace MobilizonConnector;
+
+final class LocalDateTime {
+  private $dateTime;
+
+  public function __construct(string $dateTimeString, \DateTimeZone $timeZone) {
+    $date = new \DateTimeImmutable($dateTimeString);
+    $this->dateTime = $date->setTimezone($timeZone);
+  }
+
+  public function getValue() {
+    return $this->dateTime;
+  }
+}

source/includes/LocalDateTimeFormatter.php

@@ -0,0 +1,12 @@
+<?php
+namespace MobilizonConnector;
+
+final class LocalDateTimeFormatter
+{
+  public static function format(LocalDateTime $dateTime, string $format) {
+    $timestamp = $dateTime->getValue()->getTimestamp();
+    $offset = $dateTime->getValue()->getOffset();
+    $timestampWithOffset = $timestamp + $offset;
+    return date_i18n($format, $timestampWithOffset);
+  }
+}

source/includes/Settings.php

@@ -4,12 +4,11 @@ namespace MobilizonConnector;
 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_PLUGIN_VERSION = 'wordpress_mobilizon_plugin_version';
   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';
 
@@ -19,10 +18,6 @@ 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,
@@ -31,14 +26,14 @@ class Settings {
 
     add_settings_section(
       self::$SETTINGS_SECTION_NAME,
-      __('General Settings', 'connector-mobilizon'),
+      esc_html__('General Settings', 'connector-mobilizon'),
       '',
       self::$PAGE_NAME
     );
 
     add_settings_field(
       self::$SETTING_FIELD_NAME_URL,
-      __('URL', 'connector-mobilizon'),
+      esc_html__('URL', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_url',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -46,21 +41,6 @@ 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) {
@@ -74,7 +54,7 @@ class Settings {
       add_settings_error(
         self::$OPTION_NAME_URL,
         'wordpress_mobilizon_field_url_error',
-        __('The URL is invalid.', 'connector-mobilizon'),
+        esc_html__('The URL is invalid.', 'connector-mobilizon'),
         'error'
       );
     }
@@ -86,7 +66,7 @@ class Settings {
 
   public static function register_settings_page() {
     add_options_page(
-      NICE_NAME . ' ' . __('Settings', 'connector-mobilizon'),
+      NICE_NAME . ' ' . esc_html__('Settings', 'connector-mobilizon'),
       NICE_NAME,
       'manage_options',
       NAME . '-settings',
@@ -101,22 +81,26 @@ 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);
   }
 
+  public static function removeObsoleteOptionsIfNeeded() {
+    $storedPluginVersion = get_option(self::$OPTION_NAME_PLUGIN_VERSION);
+    if ($storedPluginVersion !== PLUGIN_VERSION) {
+      if (version_compare($storedPluginVersion, '1.5.0', '<') ) {
+        delete_option(self::$OPTION_NAME_IS_SHORT_OFFSET_NAME_SHOWN);
+      }
+      update_option(self::$OPTION_NAME_PLUGIN_VERSION, PLUGIN_VERSION);
+    }    
+  }
+
 }

source/includes/SiteSettings.php

@@ -0,0 +1,25 @@
+<?php
+namespace MobilizonConnector;
+
+class SiteSettings {
+
+  private static $OPTION_NAME_DATE_FORMAT = 'date_format';
+  private static $OPTION_NAME_TIME_FORMAT = 'time_format';
+
+  public static function getDateFormat() {
+    return get_option(self::$OPTION_NAME_DATE_FORMAT);
+  }
+
+  public static function getTimeFormat() {
+    return get_option(self::$OPTION_NAME_TIME_FORMAT);
+  }
+
+  public static function getTimeZone() {
+    return wp_timezone();
+  }
+
+  public static function getTimeZoneString() {
+    return wp_timezone_string();
+  }
+
+}

source/readme.txt

@@ -16,17 +16,25 @@ License: <wordpress-license>
 
 Features
 - Display events as Gutenberg block, as widget and as shortcut
-- Display events' title with link, date, and location, if available
+- Display events' picture, if available, 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
 
+Install this plugin on the "Add Plugin" page in the administrator backend of your WordPress website by searching for it by its name or by uploading its archive by clicking on "Upload Plugin".
+In both cases, you then need to click the corresponding "Install now" button.
+
+After the installation, you can adapt the URL of the Mobilizon instance whose events you want to list on the plugin's settings' page.
+
+### Shortcut usage
+
 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"]`
@@ -41,6 +49,38 @@ You have to use their username, e.g. `@nosliensvivants`, and append the name of
 
 ## Changelog
 
+### [1.4.0]
+#### Changed
+- Update dependencies
+- Confirm compatibility with WordPress 6.8
+
+### [1.3.0]
+#### Added
+- Comment for translators what placeholder will contain
+#### Changed
+- Confirm compatibility with WordPress 6.7
+- Load block script only in footer to reduce waiting time
+- Update dependencies
+#### Fixed
+- Mark event-related data as non-translatable within plugin
+- Add version number to script registration to break browser caching
+- Handle location being null
+
+### [1.2.0]
+#### Added
+- Display event picture if available
+#### Changed
+- Update dependencies
+
+### [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

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

@@ -7,5 +7,8 @@ if (!defined('ABSPATH')) {
 }
 ?>
 <div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
-  <?php echo esc_html(sprintf(__('The group "%s" could not be found!', 'connector-mobilizon'), $groupName)); ?>
+  <?php
+  /* translators: %s is replaced with the name of the group. */
+  echo esc_html(sprintf(__('The group "%s" could not be found!', 'connector-mobilizon'), $groupName));
+  ?>
 </div>

source/view/events-list.php

@@ -8,16 +8,22 @@ if (!defined('ABSPATH')) {
 ?>
 <div class="<?php echo esc_attr($classNamePrefix); ?>_events-list">
   <ul style="list-style-type: none; padding-left: 0;">
-    <?php foreach($events as $event) { ?>
-    <li>
-      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html_e($event['title']); ?></a>
+    <?php foreach ($events as $event) { ?>
+    <li style="line-height: 150%; margin-top: 20px;">
+      <?php if (isset($event['picture'])) { ?>
+      <img alt="<?php echo esc_attr($event['picture']['alt']); ?>" src="<?php echo esc_attr($event['picture']['base64']); ?>" style="display: block; max-width: 100%;">
+      <?php } ?>
+      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html($event['title']); ?></a>
       <br>
-      <?php echo esc_html_e(Formatter::format_date($locale, $timeZone, $event['beginsOn'], $event['endsOn'], $isShortOffsetNameShown)); ?>
+      <?php echo esc_html(LineFormatter::format_date_time($timeZone, $dateFormat, $timeFormat, $event['beginsOn'], $event['endsOn'])); ?>
       <?php if (isset($event['physicalAddress'])) { ?>
       <br>
-      <?php echo esc_html_e(Formatter::format_location($event['physicalAddress']['description'], $event['physicalAddress']['locality'])) ?>
+      <?php echo esc_html(LineFormatter::format_location($event['physicalAddress']['description'], $event['physicalAddress']['locality'])) ?>
       <?php } ?>
     </li>
     <?php } ?>
   </ul>
+  <a href="<?php echo esc_attr($showMoreUrl); ?>" class="button" style="display:inline-block; margin-top: 20px;">
+    <?php esc_html_e('Show more events', 'connector-mobilizon'); ?>
+  </a>
 </div>

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

@@ -1,15 +0,0 @@
-<?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>

tests/DateTimeWrapperTest.php

@@ -1,47 +0,0 @@
-<?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

@@ -1,52 +0,0 @@
-<?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'));
-  }
-}

tests/LineFormatterTest.php

@@ -0,0 +1,58 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\LineFormatter;
+use PHPUnit\Framework\TestCase;
+
+function date_i18n(string $format, int $timestamp) {
+  // Mock WordPress function.
+  if ($format == 'H:i') {
+    if ($timestamp == 1618482600) {
+      return '10:30';
+    } else if ($timestamp == 1618500600 || $timestamp == 1618587000) {
+      return '15:30';
+    }
+  } else if ($format == 'd/m/Y') {
+    if ($timestamp == 1618482600 || $timestamp == 1618500600) {
+      return '15/04/2021';
+    } else if ($timestamp == 1618587000) {
+      return '16/04/2021';
+    }
+  }
+  return '';
+}
+
+final class LineFormatterTest extends TestCase
+{
+  public function testCanDateFormatOneDate(): void {
+    $this->assertSame('15/04/2021 10:30 - 15:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', '2021-04-15T15:30:00Z'));
+  }
+
+  public function testCanDateFormatTwoDates(): void {
+    $this->assertSame('15/04/2021 10:30 - 16/04/2021 15:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', '2021-04-16T15:30:00Z'));
+  }
+
+  public function testCanDateFormatWhenSecondDateIsNull(): void {
+    $this->assertSame('15/04/2021 10:30', LineFormatter::format_date_time(new \DateTimeZone('UTC'), 'd/m/Y', 'H:i', '2021-04-15T10:30:00Z', null));
+  }
+
+  public function testCanLocationFormatBothParameters(): void {
+    $this->assertSame('a, b', LineFormatter::format_location('a', 'b'));
+  }
+
+  public function testLocationFormatDescriptionOnly(): void {
+    $this->assertSame('a', LineFormatter::format_location('a', ''));
+  }
+
+  public function testLocationFormatDescriptionOnlyWithNull(): void {
+    $this->assertSame('a', LineFormatter::format_location('a', null));
+  }
+
+  public function testLocationFormatDescriptionWithSpaceOnly(): void {
+    $this->assertSame('', LineFormatter::format_location(' ', ''));
+  }
+
+  public function testLocationFormatLocalityOnly(): void {
+    $this->assertSame('a', LineFormatter::format_location('', 'a'));
+  }
+}

tests/LocalDateTimeTest.php

@@ -0,0 +1,12 @@
+<?php
+declare(strict_types=1);
+
+use MobilizonConnector\LocalDateTime;
+use PHPUnit\Framework\TestCase;
+
+final class LocalDateTimeTest extends TestCase {
+  public function testCanGet24TimeForUsualTime(): void {
+    $d = new LocalDateTime('2020-12-24T16:45:00Z', new DateTimeZone("utc"));
+    $this->assertEquals(new DateTimeImmutable('2020-12-24T16:45:00Z'), $d->getValue());
+  }
+}