io-sanita-theme 2.11.0 → 2.11.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [2.11.2](https://github.com/RedTurtle/io-sanita-theme/compare/2.11.1...2.11.2) (2025-04-08)
+
+### Bug Fixes
+
+* fixed title tag for a11y in Attachments component  not displayed as section ([#79](https://github.com/RedTurtle/io-sanita-theme/issues/79)) ([96bed38](https://github.com/RedTurtle/io-sanita-theme/commit/96bed38f4441dde74e3e059d7c3a05ad138a7f24))
+* table block sorting ([#78](https://github.com/RedTurtle/io-sanita-theme/issues/78)) ([2e1dfca](https://github.com/RedTurtle/io-sanita-theme/commit/2e1dfcad4faaafddc4991b96deb58078b56fd9be))
+
+## [2.11.1](https://github.com/RedTurtle/io-sanita-theme/compare/2.11.0...2.11.1) (2025-03-31)
+
+### Bug Fixes
+
+* a11y Table block ([#76](https://github.com/RedTurtle/io-sanita-theme/issues/76)) ([773d4d9](https://github.com/RedTurtle/io-sanita-theme/commit/773d4d9da80563ef531bcff4d546dd79cbedce00))
+* display none to -newsletterSubscribe on main footer settings ([f2d61ea](https://github.com/RedTurtle/io-sanita-theme/commit/f2d61eabd36d66ea8e5bb146762c5d9bbec595e5))
+* ImageWidget submit form . Backport of voltopr ([2c6c873](https://github.com/RedTurtle/io-sanita-theme/commit/2c6c873042661006f0ba3d60159630d68b07ed20))
+* locales ([b21cbbf](https://github.com/RedTurtle/io-sanita-theme/commit/b21cbbfa51927914081f912e22a801cc9400073f))
+* remove newsletter subscribe option in footer configuration form ([#77](https://github.com/RedTurtle/io-sanita-theme/issues/77)) ([f6b5bf4](https://github.com/RedTurtle/io-sanita-theme/commit/f6b5bf4c7f7b862c2b7ed06908ee6ac2c0be0413))
+* table template view taxonomy ([1175082](https://github.com/RedTurtle/io-sanita-theme/commit/11750828a8cbf7b414fbd8358204af9aa23e24d6))
+
 ## [2.11.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.10.0...2.11.0) (2025-03-25)
 
 ### Features

package/RELEASE.md

@@ -41,6 +41,15 @@
 - ...
  -->
 
+## Versione 2.11.1 (31/03/2025)
+
+### Fix
+
+- sistemato un problema di perdita di dati durante il caricamento di una nuova immagine nel form di inseriemento dati di un ct con i campi a blocchi.
+- sistemata la visualizzazione delle tassonomie nel template 'Tabella' del blocco elenco
+- sistemata l'accessibilità per il blocco Tabella
+- rimosso il flag di configurazione 'Mostra la form di iscrizione' nel footer.
+
 ## Versione 2.11.0 (25/03/2025)
 
 ### Novità

package/locales/de/LC_MESSAGES/volto.po

@@ -1077,6 +1077,11 @@ msgstr ""
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr ""
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1727,6 +1732,11 @@ msgstr ""
 msgid "delete"
 msgstr ""
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr ""
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/locales/en/LC_MESSAGES/volto.po

@@ -1072,6 +1072,11 @@ msgstr "Opening date"
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr ""
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1722,6 +1727,11 @@ msgstr "Start date"
 msgid "delete"
 msgstr ""
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr ""
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/locales/es/LC_MESSAGES/volto.po

@@ -1079,6 +1079,11 @@ msgstr ""
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr ""
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1729,6 +1734,11 @@ msgstr ""
 msgid "delete"
 msgstr ""
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr ""
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/locales/fr/LC_MESSAGES/volto.po

@@ -1079,6 +1079,11 @@ msgstr ""
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr ""
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1729,6 +1734,11 @@ msgstr ""
 msgid "delete"
 msgstr ""
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr ""
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/locales/it/LC_MESSAGES/volto.po

@@ -1072,6 +1072,11 @@ msgstr ""
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr "ordine crescente"
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1722,6 +1727,11 @@ msgstr ""
 msgid "delete"
 msgstr "elimina"
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr "ordine discendente"
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-03-25T11:31:34.827Z\n"
+"POT-Creation-Date: 2025-03-31T11:23:16.064Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -1074,6 +1074,11 @@ msgstr ""
 msgid "appStoreLink"
 msgstr ""
 
+#. Default: "ascending"
+#: overrideTranslations
+msgid "ascendingTableSort"
+msgstr ""
+
 #. Default: "Allegato"
 #: components/Cards/CardFile/CardFile
 msgid "attachment"
@@ -1724,6 +1729,11 @@ msgstr ""
 msgid "delete"
 msgstr ""
 
+#. Default: "descending"
+#: overrideTranslations
+msgid "descendingTableSort"
+msgstr ""
+
 #. Default: "Testo per il link al dettaglio"
 #: config/blocks/listing/ListingOptions/utils
 msgid "detail_link_label"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Blocks/Listing/Table/TableTemplate.jsx

@@ -42,9 +42,16 @@ const TableTemplate = (props) => {
   const ct_schemas = useSelector((state) => state.ct_schema?.subrequests);
 
   useEffect(() => {
-    (columns ?? []).forEach((c) => {
-      if (!ct_schemas[c.ct]) {
-        dispatch(getCTSchema(c.ct));
+    const cts = columns.reduce((acc, c) => {
+      if (acc.indexOf(c.ct) < 0) {
+        acc.push(c.ct);
+      }
+      return acc;
+    }, []);
+
+    cts.forEach((c) => {
+      if (!ct_schemas[c]) {
+        dispatch(getCTSchema(c));
       }
     });
   }, [columns]);
@@ -100,7 +107,9 @@ const TableTemplate = (props) => {
 
                     let Widget = views?.getWidget(field);
 
-                    let widget_props = {};
+                    let widget_props = {
+                      behavior: field_properties.behavior,
+                    };
                     switch (c.field) {
                       case 'apertura_bando':
                       case 'chiusura_procedimento_bando':
@@ -116,6 +125,7 @@ const TableTemplate = (props) => {
                       widget_props.vocabulary =
                         field_properties.vocabulary['@id'];
                     }
+
                     render_value = (
                       <Widget value={item[c.field]} {...widget_props} />
                     );

package/src/components/View/Widgets/SelectViewWidget.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import cx from 'classnames';
+import { render } from 'react-dom';
+
+const SelectWidget = ({ value, children, className, behavior }) => {
+  let render_value = children
+    ? children(value?.title || value?.token || value)
+    : value?.title || value?.token || value;
+  if (behavior?.startsWith('collective.taxonomy')) {
+    render_value = render_value.split('»').reverse()[0];
+  }
+  return value ? (
+    <span className={cx(className, 'select', 'widget')}>{render_value}</span>
+  ) : (
+    ''
+  );
+};
+export default SelectWidget;

package/src/components/View/commons/Attachments/Attachments.jsx

@@ -98,7 +98,7 @@ const Attachments = ({
     </RichTextSection>
   ) : (
     <div className="mb-5 mt-3">
-      {title && <h4 className="h5">{title}</h4>}
+      {title && <h3 className="h5">{title}</h3>}
       {attachments.length > 0 && attachments_view}
       {searchResults?.[key]?.loading && !searchResults?.[key]?.loaded && <></>}
     </div>

package/src/config/ioSanitaConfig.js

@@ -54,8 +54,8 @@ import { component } from 'design-react-kit/dist/types/Icon/assets/ItAndroidSqua
 export const AGGREGATION_PAGE_ARGOMENTO = '/argomento/';
 export const AGGREGATION_PAGE_TIPOLOGIA_UTENTE = '/tipologia-utente/';
 
-const ReleaseLog = loadable(() =>
-  import('io-sanita-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('io-sanita-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -223,7 +223,7 @@ export default function applyConfig(config) {
 
     'volto-editablefooter': {
       ...config.settings['volto-editablefooter'],
-      options: { socials: true, newsletterSubscribe: true },
+      options: { socials: true, newsletterSubscribe: false },
     },
 
     'volto-form-block-italia': {

package/src/config/widgets/widgets.js

@@ -49,7 +49,11 @@ const BlocksViewWidget = loadable(() =>
     /* webpackChunkName: "ISWidgetView" */ 'io-sanita-theme/components/View/Widgets/BlocksViewWidget'
   ),
 );
-
+const SelectViewWidget = loadable(() =>
+  import(
+    /* webpackChunkName: "ISWidgetView" */ 'io-sanita-theme/components/View/Widgets/SelectViewWidget'
+  ),
+);
 const PanelsWidget = loadable(() =>
   import(
     /* webpackChunkName: "ISManage" */ 'io-sanita-theme/components/manage/Widgets/PanelsWidget/PanelsWidget'
@@ -99,7 +103,12 @@ const getIoSanitaWidgets = (config) => {
     views: {
       ...config.widgets.views,
       id: { ...config.widgets.views.id, parliamo_di: ParliamoDiWidgetView },
-      widget: { ...config.widgets.views.widget, blocks: BlocksViewWidget },
+      widget: {
+        ...config.widgets.views.widget,
+        blocks: BlocksViewWidget,
+        choices: SelectViewWidget,
+      },
+      choices: SelectViewWidget,
     },
     type: {
       ...config.widgets.type,

package/src/customizations/@plone/volto-slate/blocks/Table/TableBlockView.jsx

@@ -0,0 +1,182 @@
+/**
+ * Slate Table block's View component.
+ * @module volto-slate/blocks/Table/View
+ * Customizations:
+ * - aggiunto aria-sort per indicare la direzione dell’ordinamento (ascending o descending). Se la colonna non è ordinata, usa aria-sort="none".
+ * - role="columnheader": Aggiunge il ruolo di intestazione di colonna.
+ * - Accessibilità tastiera (onKeyDown) per permette l’ordinamento con Enter o Spazio.
+ * - tabIndex={0} per rende la cella interattiva tramite tastiera.
+ */
+
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Table } from 'semantic-ui-react';
+import {
+  serializeNodes,
+  serializeNodesToText,
+} from '@plone/volto-slate/editor/render';
+import { Node } from 'slate';
+import { useIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  ascendingTableSort: {
+    id: 'ascendingTableSort',
+    defaultMessage: 'ascending',
+  },
+  descendingTableSort: {
+    id: 'descendingTableSort',
+    defaultMessage: 'descending',
+  },
+});
+
+/**
+ * Slate Table block's View class.
+ * @class View
+ * @param {object} data The table data to render as a table.
+ */
+const View = ({ data }) => {
+  const [state, setState] = useState({
+    column: null,
+    direction: null,
+  });
+
+  const intl = useIntl();
+
+  const { table } = data;
+  const {
+    rows,
+    fixed,
+    compact,
+    basic,
+    celled,
+    inverted,
+    striped,
+    sortable,
+    hideHeaders,
+  } = table;
+
+  const headers = useMemo(() => rows?.[0]?.cells || [], [rows]);
+  const rowsData = useMemo(() => {
+    return (
+      rows?.slice(1).map((row) =>
+        row.cells.map((cell) => ({
+          ...cell,
+          value:
+            cell.value && Node.string({ children: cell.value }).length > 0
+              ? serializeNodes(cell.value)
+              : '\u00A0',
+          valueText:
+            cell.value && Node.string({ children: cell.value }).length > 0
+              ? serializeNodesToText(cell.value)
+              : '\u00A0',
+        })),
+      ) || []
+    );
+  }, [rows]);
+
+  const sortedRows = useMemo(() => {
+    if (state.column === null) return rowsData;
+    return [...rowsData].sort((a, b) => {
+      const aText = a[state.column].valueText;
+      const bText = b[state.column].valueText;
+      const isAscending = state.direction === 'ascending';
+      if (isAscending ? aText < bText : aText > bText) return -1;
+      if (isAscending ? aText > bText : aText < bText) return 1;
+      return 0;
+    });
+  }, [state, rowsData]);
+
+  const handleSort = (index) => {
+    if (!sortable) return;
+    setState({
+      column: index,
+      direction:
+        state.column !== index
+          ? 'ascending'
+          : state.direction === 'ascending'
+            ? 'descending'
+            : 'ascending',
+      sortLabel:
+        state.column !== index
+          ? intl.formatMessage(messages.ascendingTableSort)
+          : state.direction === 'ascending'
+            ? intl.formatMessage(messages.descendingTableSort)
+            : intl.formatMessage(messages.ascendingTableSort),
+    });
+  };
+
+  return (
+    <>
+      {table && (
+        <Table
+          fixed={fixed}
+          compact={compact}
+          basic={basic ? 'very' : false}
+          celled={celled}
+          inverted={inverted}
+          striped={striped}
+          sortable={sortable}
+          className="slate-table-block"
+        >
+          {!hideHeaders && (
+            <Table.Header>
+              <Table.Row>
+                {headers.map((cell, index) => (
+                  <Table.HeaderCell
+                    key={index}
+                    textAlign="left"
+                    verticalAlign="middle"
+                    sorted={state.column === index ? state.direction : null}
+                    aria-sort={
+                      state.column === index ? state.sortLabel : 'none'
+                    }
+                    role="columnheader"
+                    onClick={() => handleSort(index)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        handleSort(index);
+                      }
+                    }}
+                    tabIndex={0}
+                  >
+                    {cell.value &&
+                    Node.string({ children: cell.value }).length > 0
+                      ? serializeNodes(cell.value)
+                      : '\u00A0'}
+                  </Table.HeaderCell>
+                ))}
+              </Table.Row>
+            </Table.Header>
+          )}
+          <Table.Body>
+            {sortedRows.map((row, rowIndex) => (
+              <Table.Row key={rowIndex}>
+                {row.map((cell, cellIndex) => (
+                  <Table.Cell
+                    key={cellIndex}
+                    textAlign="left"
+                    verticalAlign="middle"
+                  >
+                    {cell.value}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+      )}
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;

package/src/customizations/volto/components/manage/Widgets/ImageWidget.jsx

@@ -0,0 +1,343 @@
+/*
+customizations: backport of: https://github.com/plone/volto/pull/6879
+
+*/
+import React, { useEffect, useRef } from 'react';
+import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import loadable from '@loadable/component';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import useLinkEditor from '@plone/volto/components/manage/AnchorPlugin/useLinkEditor';
+import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+
+import {
+  flattenToAppURL,
+  getBaseUrl,
+  isInternalURL,
+} from '@plone/volto/helpers/Url/Url';
+import { validateFileUploadSize } from '@plone/volto/helpers/FormValidation/FormValidation';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+import { createContent } from '@plone/volto/actions/content/content';
+import { readAsDataURL } from 'promise-file-reader';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import linkSVG from '@plone/volto/icons/link.svg';
+import uploadSVG from '@plone/volto/icons/upload.svg';
+
+const Dropzone = loadable(() => import('react-dropzone'));
+
+export const ImageToolbar = ({ className, data, id, onChange, selected }) => (
+  <div className="image-upload-widget-toolbar">
+    <Button.Group>
+      <Button icon basic onClick={() => onChange(id, null)}>
+        <Icon className="circled" name={clearSVG} size="24px" color="#e40166" />
+      </Button>
+    </Button.Group>
+  </div>
+);
+
+const messages = defineMessages({
+  addImage: {
+    id: 'Browse the site, drop an image, or type a URL',
+    defaultMessage: 'Browse the site, drop an image, or use a URL',
+  },
+  pickAnImage: {
+    id: 'pickAnImage',
+    defaultMessage: 'Pick an existing image',
+  },
+  uploadAnImage: {
+    id: 'uploadAnImage',
+    defaultMessage: 'Upload an image from your computer',
+  },
+  linkAnImage: {
+    id: 'linkAnImage',
+    defaultMessage: 'Enter a URL to an image',
+  },
+  uploadingImage: {
+    id: 'Uploading image',
+    defaultMessage: 'Uploading image',
+  },
+});
+
+const UnconnectedImageInput = (props) => {
+  const {
+    id,
+    onChange,
+    onFocus,
+    openObjectBrowser,
+    value,
+    imageSize = 'teaser',
+    selected = true,
+    hideLinkPicker = false,
+    hideObjectBrowserPicker = false,
+    restrictFileUpload = false,
+    objectBrowserPickerType = 'image',
+    description,
+    placeholderLinkInput = '',
+    onSelectItem,
+  } = props;
+  const imageValue = value?.[0]?.['@id'] || value;
+
+  const intl = useIntl();
+  const linkEditor = useLinkEditor();
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const contextUrl = location.pathname;
+
+  const [uploading, setUploading] = React.useState(false);
+  const [dragging, setDragging] = React.useState(false);
+
+  const imageUploadInputRef = useRef(null);
+
+  const requestId = `image-upload-${id}`;
+
+  const loaded = props.request.loaded;
+  const { content } = props;
+  const imageId = content?.['@id'];
+  const image = content?.image;
+  let loading = false;
+
+  useEffect(() => {
+    if (uploading && loading && loaded) {
+      setUploading(false);
+      onChange(id, imageId, {
+        image_field: 'image',
+        image_scales: { image: [image] },
+      });
+    }
+  }, [loading, loaded, uploading, imageId, image, id, onChange]); // Explicitly list all dependencies
+
+  loading = usePrevious(props.request?.loading);
+
+  const handleUpload = React.useCallback(
+    (eventOrFile) => {
+      if (restrictFileUpload === true) return;
+      eventOrFile.target && eventOrFile.stopPropagation();
+
+      setUploading(true);
+      const file = eventOrFile.target
+        ? eventOrFile.target.files[0]
+        : eventOrFile[0];
+      if (!validateFileUploadSize(file, intl.formatMessage)) return;
+      readAsDataURL(file).then((fileData) => {
+        const fields = fileData.match(/^data:(.*);(.*),(.*)$/);
+        dispatch(
+          createContent(
+            getBaseUrl(contextUrl),
+            {
+              '@type': 'Image',
+              title: file.name,
+              image: {
+                data: fields[3],
+                encoding: fields[2],
+                'content-type': fields[1],
+                filename: file.name,
+              },
+            },
+            props.block || requestId,
+          ),
+        );
+      });
+    },
+    [
+      restrictFileUpload,
+      intl.formatMessage,
+      dispatch,
+      props,
+      contextUrl,
+      requestId,
+    ],
+  );
+
+  const onDragEnter = React.useCallback(() => {
+    if (restrictFileUpload === false) setDragging(true);
+  }, [restrictFileUpload]);
+  const onDragLeave = React.useCallback(() => setDragging(false), []);
+
+  return imageValue ? (
+    <div
+      className="image-upload-widget-image"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      {selected && <ImageToolbar {...props} />}
+      <img
+        className={props.className}
+        src={
+          isInternalURL(imageValue)
+            ? `${flattenToAppURL(imageValue)}/@@images/image/${imageSize}`
+            : imageValue
+        }
+        alt=""
+      />
+    </div>
+  ) : (
+    <div
+      className="image-upload-widget"
+      onClick={onFocus}
+      onKeyDown={onFocus}
+      role="toolbar"
+    >
+      <Dropzone
+        noClick
+        onDrop={handleUpload}
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        className="dropzone"
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <Message>
+              {dragging && <Dimmer active></Dimmer>}
+              {uploading && (
+                <Dimmer active>
+                  <Loader indeterminate>
+                    {intl.formatMessage(messages.uploadingImage)}
+                  </Loader>
+                </Dimmer>
+              )}
+              <img src={imageBlockSVG} alt="" className="placeholder" />
+              <p>{description || intl.formatMessage(messages.addImage)}</p>
+              <div className="toolbar-wrapper">
+                <div className="toolbar-inner" ref={linkEditor.anchorNode}>
+                  {hideObjectBrowserPicker === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.pickAnImage)}
+                        icon
+                        basic
+                        onClick={(e) => {
+                          onFocus && onFocus();
+                          e.preventDefault();
+                          openObjectBrowser({
+                            mode: objectBrowserPickerType,
+                            onSelectItem: onSelectItem
+                              ? onSelectItem
+                              : (url, { title, image_field, image_scales }) => {
+                                  onChange(props.id, flattenToAppURL(url), {
+                                    title,
+                                    image_field,
+                                    image_scales,
+                                  });
+                                },
+                            currentPath: contextUrl,
+                          });
+                        }}
+                        type="button"
+                      >
+                        <Icon name={navTreeSVG} size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                  {restrictFileUpload === false && (
+                    <Button.Group>
+                      <Button
+                        aria-label={intl.formatMessage(messages.uploadAnImage)}
+                        icon
+                        basic
+                        compact
+                        onClick={() => {
+                          imageUploadInputRef.current.click();
+                        }}
+                        type="button"
+                      >
+                        <Icon name={uploadSVG} size="24px" />
+                      </Button>
+                      <input
+                        {...getInputProps({
+                          type: 'file',
+                          ref: imageUploadInputRef,
+                          onChange: handleUpload,
+                          style: { display: 'none' },
+                        })}
+                      />
+                    </Button.Group>
+                  )}
+
+                  {hideLinkPicker === false && (
+                    <Button.Group>
+                      <Button
+                        icon
+                        basic
+                        aria-label={intl.formatMessage(messages.linkAnImage)}
+                        onClick={(e) => {
+                          !props.selected && onFocus && onFocus();
+                          linkEditor.show();
+                        }}
+                        type="button"
+                      >
+                        <Icon name={linkSVG} circled size="24px" />
+                      </Button>
+                    </Button.Group>
+                  )}
+                </div>
+                {linkEditor.anchorNode && (
+                  <linkEditor.LinkEditor
+                    value={imageValue}
+                    placeholder={
+                      placeholderLinkInput ||
+                      intl.formatMessage(messages.linkAnImage)
+                    }
+                    objectBrowserPickerType={objectBrowserPickerType}
+                    onChange={(_, e) =>
+                      onChange(
+                        props.id,
+                        isInternalURL(e) ? flattenToAppURL(e) : e,
+                        {},
+                      )
+                    }
+                    id={id}
+                  />
+                )}
+              </div>
+            </Message>
+          </div>
+        )}
+      </Dropzone>
+    </div>
+  );
+};
+
+export const ImageInput = compose(
+  connect(
+    (state, ownProps) => {
+      const requestId = `image-upload-${ownProps.id}`;
+      return {
+        request: state.content.subrequests[ownProps.block || requestId] || {},
+        content: state.content.subrequests[ownProps.block || requestId]?.data,
+      };
+    },
+    { createContent },
+  ),
+)(withObjectBrowser(UnconnectedImageInput));
+
+const ImageUploadWidget = (props) => {
+  const { fieldSet, id, title } = props;
+  return (
+    <FormFieldWrapper
+      {...props}
+      columns={1}
+      className="block image-upload-widget"
+    >
+      <div className="wrapper">
+        <label
+          id={`fieldset-${fieldSet}-field-label-${id}`}
+          htmlFor={`field-${id}`}
+        >
+          {title}
+        </label>
+      </div>
+      <ImageInput {...props} />
+    </FormFieldWrapper>
+  );
+};
+
+export default ImageUploadWidget;

package/src/overrideTranslations.jsx

@@ -170,4 +170,12 @@ defineMessages({
     id: 'mainMenu',
     defaultMessage: 'Menù principale',
   },
+  ascendingTableSort: {
+    id: 'ascendingTableSort',
+    defaultMessage: 'ascending',
+  },
+  descendingTableSort: {
+    id: 'descendingTableSort',
+    defaultMessage: 'descending',
+  },
 });