add missing backticks to changelog, add picture loading to features list

.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`.
+2. Create a new section with a new version number.
-3. Update `package.json` with the same version number.
+3. Copy over the new section into `readme.txt`.
-4. Update the `package-lock.json`: `npm i --package-lock-only`
+4. Update `package.json` with the same version number.
-5. Build: `npm run build-prod`
+5. Update the `package-lock.json`: `npm i --package-lock-only`
-6. Make sure screenshots are up-to-date.
+6. Build: `npm run build-prod`
-7. Copy the built plugin into `/trunk` of SVN.
+7. Make sure screenshots are up-to-date.
-8. Create a new tag of the new version: `svn cp trunk tags/<version>`
+8. Copy the built plugin into `/trunk` of SVN.
-9. Check the version number occurrences in both folders.
+9. Create a new tag of the new version: `svn cp trunk tags/<version>`
-10. Commit everything together to the release SVN: `svn ci -m "release version <version>"` Make sure to add new files beforehand.
+10. Check the version number occurrences in both folders.
-11. Commit the new version in git with the same message.
+11. Make sure to handle exclamation and question marks in `svn status`.
-12. Tag the new version: `git tag v<version>`
+12. Commit everything together to the release SVN: `svn ci -m "release version <version>"`
-13. Push the new tag to the repository: `git push --tags`
+13. Commit the new version in git with the same message.
-14. Append `-next` to the version number in `package.json`.
+14. Tag the new version: `git tag v<version>`
-15. Update the `package-lock.json`: `npm i --package-lock-only`
+15. Push the new tag to the repository: `git push --tags`
-16. Commit: `git commit -am "prepare next release"`
+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",
+    "graphql": "16.11.0",
-    "luxon": "3.4.4"
+    "luxon": "3.6.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.4",
+    "@babel/core": "7.27.1",
-    "@babel/eslint-parser": "7.24.1",
+    "@babel/eslint-parser": "7.27.1",
-    "@babel/preset-env": "7.24.4",
+    "@babel/preset-env": "7.27.2",
-    "@babel/preset-react": "7.24.1",
+    "@babel/preset-react": "7.27.1",
-    "@wordpress/eslint-plugin": "17.12.0",
+    "@wordpress/eslint-plugin": "22.10.0",
-    "ava": "6.1.2",
+    "ava": "6.3.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "10.0.0",
-    "browser-env": "3.3.0",
+    "c8": "10.1.3",
-    "c8": "9.1.0",
+    "copy-webpack-plugin": "13.0.0",
-    "copy-webpack-plugin": "12.0.2",
+    "eslint": "8.57.1",
-    "eslint": "8.57.0",
     "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",
+    "husky": "9.1.7",
-    "lint-staged": "15.2.2",
+    "jsdom": "26.1.0",
-    "prettier": "3.2.5",
+    "lint-staged": "15.5.2",
-    "rimraf": "5.0.5",
+    "prettier": "3.5.3",
-    "webpack": "5.91.0",
+    "rimraf": "5.0.10",
-    "webpack-cli": "5.1.4"
+    "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,49 @@
 ### [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
 #### Deprecated
 #### Removed
 #### 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

@@ -37,6 +37,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,6 +50,26 @@ 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();
   }
@@ -56,7 +78,8 @@ final class Mobilizon_Connector {
     $settings = array(
       'isShortOffsetNameShown' => MobilizonConnector\Settings::isShortOffsetNameShown(),
       'locale' => str_replace('_', '-', get_locale()),
-      'timeZone' => wp_timezone_string()
+      '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/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',
@@ -81,13 +83,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',
-        },
-      ],
-    },
   }
   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')
@@ -18,6 +18,19 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
   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,
@@ -59,13 +72,7 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
 
 export function displayErrorMessage({ data, container }) {
   hideLoadingIndicator(container)
-  if (
+  if (Object.hasOwn(data, 'code') && data.code === 'group_not_found') {
-    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 {

source/front/formatter-test.js

@@ -1,6 +1,18 @@
 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',

source/front/formatter.js

@@ -1,6 +1,12 @@
 import DateTimeWrapper from './date-time-wrapper.js'
 
 export default class Formatter {
+  static escapeHTML(input) {
+    const div = document.createElement('div')
+    div.appendChild(document.createTextNode(input))
+    return div.innerHTML
+  }
+
   static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
     const startDateTime = new DateTimeWrapper({
       locale,

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/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'),
+      'title' => esc_html__('Events List', 'connector-mobilizon'),
-      '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'),
       'category' => 'widgets',
       'icon' => 'list-view',
       'supports' => [
@@ -39,16 +39,18 @@ 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();

source/includes/EventsListShortcut.php

@@ -22,16 +22,18 @@ 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();

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,15 +23,17 @@ 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();
@@ -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

@@ -26,7 +26,7 @@ final class Formatter
     return $dateText;
   }
 
-  public static function format_location(string $description, string $locality): string {
+  public static function format_location(string $description, ?string $locality): string {
     $location = '';
     if ($description && trim($description)) {
       $location .= trim($description);

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/Settings.php

@@ -31,14 +31,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,
@@ -48,7 +48,7 @@ class Settings {
     );
     add_settings_field(
       self::$SETTING_FIELD_NAME_IS_SHORT_OFFSET_NAME_SHOWN,
-      __('Display named offset', 'connector-mobilizon'),
+      esc_html__('Display named offset', 'connector-mobilizon'),
       'MobilizonConnector\Settings::output_field_is_short_offset_name_shown',
       self::$PAGE_NAME,
       self::$SETTINGS_SECTION_NAME,
@@ -74,7 +74,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 +86,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',

source/readme.txt

@@ -16,17 +16,26 @@ 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 +50,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

@@ -9,15 +9,21 @@ 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>
+    <li style="line-height: 150%; margin-top: 20px;">
-      <a href="<?php echo esc_attr($event['url']); ?>"><?php echo esc_html_e($event['title']); ?></a>
+      <?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(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 echo esc_html(Formatter::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>

tests/FormatterTest.php

@@ -42,6 +42,10 @@ final class FormatterTest extends PHPUnit\Framework\TestCase
     $this->assertSame('a', Formatter::format_location('a', ''));
   }
 
+  public function testLocationFormatDescriptionOnlyWithNull(): void {
+    $this->assertSame('a', Formatter::format_location('a', null));
+  }
+
   public function testLocationFormatDescriptionWithSpaceOnly(): void {
     $this->assertSame('', Formatter::format_location(' ', ''));
   }