@plone/volto 14.1.1 → 14.2.3

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log
 
+## 14.2.3 (2022-01-20)
+
+### Bugfix
+
+- Fix overflow table in Content view @giuliaghisini
+- Fixed url validation in FormValidation to admit ip addresses. @giuliaghisini
+
+## 14.2.2 (2022-01-13)
+
+### Bugfix
+
+- Fix home URL item in Navigation, which was evaluating as non-internal @sneridagh
+- Improve the request handling in `getAPIResourceWithAuth` and in `Api` helper. This fixes the "Cannot set headers once the content has being sent" @sneridagh
+- Fix when you remove the time from DatetimeWidget @iRohitSingh
+
+### Internal
+
+- Fix URL for Climate-Energy, a Volto website @tiberiuichim
+- Fix quirky Cypress test in "DX control panel schema" (see https://github.com/plone/volto/runs/4803206906?check_suite_focus=true) @sneridagh
+
+## 14.2.1 (2022-01-12)
+
+### Bugfix
+
+- Fix home URL item in Navigation, which was evaluating as non-internal
+
+### Internal
+
+- Use plone-backend docker images for Cypress tests @sneridagh
+- Upgrade `query-string` library so it supports Plone `:list` qs marker @sneridagh
+
+## 14.2.0 (2022-01-04)
+
+### Feature
+
+- Allow `creatable` prop to be passed to `ArrayWidgets`, in case they don't have a vocabulary @giuliaghisini
+- Added initialBlocksFocus to blocks config, to set default focus on non-first block. @giuliaghisini
+
 ## 14.1.1 (2022-01-03)
 
 ### Internal

package/README.md

@@ -76,20 +76,41 @@ follow the prompts questions, provide `myvoltoproject` as project name then, whe
 
 We recommend Plone as backend of choice for Volto.
 
-You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use:
+You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use. We recommend to use the Plone docker builds based in `pip` [plone/plone-backend](https://github.com/plone/plone-backend) image:
 
 ```shell
-docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e VERSIONS="plone.restapi=8.16.2 plone.app.iterate=4.0.2 plone.rest=2.0.0a1 plone.app.vocabularies=4.3.0" -e ADDONS="plone.volto" -e ZCML="plone.volto.cors" -e PROFILES="plone.volto:default-homepage" plone
+docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="plone.restapi==8.18.0 plone.app.iterate==4.0.2 plone.rest==2.0.0a1 plone.app.vocabularies==4.3.0 plone.volto==3.1.0a7" -e PROFILES="plone.volto:default-homepage" plone/plone-backend
 ```
 
 or as an alternative if you have experience with Plone and you have all the
-dependencies installed on your system, you can use the supplied buildout in the
+dependencies installed on your system, you can use the supplied convenience buildout in the
 `api` folder by issuing the command:
 
 ```shell
 make build-backend
 ```
 
+#### Recommended Plone version
+
+Volto is Plone 6 default UI, so it will work for all Plone 6 released versions.
+
+For the Plone 5 series latest released version (with Python 3) and above is recommended (at the time of writing 5.2.6).
+
+The following KGS (or above) are also recommended, for any Plone version used.
+
+#### KGS (known good versions) for backend packages
+
+Volto always works best with latest versions of the "Frontend stack" or at least the recommended ones (in parenthesis) which are:
+
+- plone.restapi (8.18.0)
+- plone.rest (2.0.0a1)
+- plone.volto (3.1.0a7)
+
+and the following core packages since some features require up to date versions:
+
+- plone.app.iterate (4.0.2)
+- plone.app.vocabularies (4.3.0)
+
 ### Start Volto
 
 ```shell
@@ -109,7 +130,7 @@ Volto is actively developed since 2017 and used in production since 2018 on the
 - [Excellence at Humboldt-Universität zu Berlin](https://www.alles-beginnt-mit-einer-frage.de) (Website for the excellence initiative of the [Humboldt University Berlin](https://hu-berlin.de), developed by [kitconcept GmbH](https://kitconcept.com), 2019)
 - [Forest Information System for Europe](https://forest.eea.europa.eu) (Thematic website focusing on European forests, developed by [Eau de Web](https://www.eaudeweb.ro), 2019)
 - [Industrial Emissions portal for Europe](https://industry.eea.europa.eu) (Thematic website focusing on European industrial emissions, developed by [Eau de Web](https://www.eaudeweb.ro), 2020)
-- [Energy Climate Union portal for Europe](https://demo-energy-union.eea.europa.eu) (Thematic website focusing on European strides towards mitigating climate change, developed by [Eau de Web](https://www.eaudeweb.ro), 2020)
+- [Energy Climate Union portal for Europe](https://climate-energy.eea.europa.eu/) (Thematic website focusing on European strides towards mitigating climate change, developed by [Eau de Web](https://www.eaudeweb.ro), 2020)
 - [Talke Carrer Website](https://karriere.talke.com/) (Carrer website for [Talke](https://www.talke.com), one of the leading a chemical and petrochemical logistics companies in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2020)
 - [Stradanove](http://www.stradanove.it/) (Website of the Department of Youth Policies of the Municipality of Modena, developed by [RedTurtle](https://redturtle.it), 2020)
 - [VisitModena](https://www.visitmodena.it/) (Tourist website of the Municipality of Modena, developed by [RedTurtle](https://redturtle.it), 2020)

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.1.1",
+  "version": "14.2.3",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -34,7 +34,7 @@
     "start-spa": "razzle start --type=spa",
     "build": "razzle build",
     "build-spa": "razzle build --type=spa",
-    "test": "razzle test --env=jest-environment-jsdom-sixteen",
+    "test": "razzle test --env=jest-environment-jsdom-sixteen --maxWorkers=50%",
     "test:ci": "CI=true razzle test --env=jest-environment-jsdom-sixteen",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
@@ -342,7 +342,7 @@
     "prismjs": "1.25.0",
     "promise-file-reader": "1.0.2",
     "prop-types": "15.7.2",
-    "query-string": "7.0.0",
+    "query-string": "7.1.0",
     "razzle": "3.4.5",
     "razzle-plugin-bundle-analyzer": "1.2.0",
     "rc-time-picker": "3.7.3",

package/src/components/manage/Add/Add.jsx

@@ -308,6 +308,7 @@ class Add extends Component {
             ref={this.form}
             key="translated-or-new-content-form"
             schema={this.props.schema}
+            type={this.props.type}
             formData={{
               ...(blocksFieldname && {
                 [blocksFieldname]:

package/src/components/manage/Contents/Contents.jsx

@@ -1491,236 +1491,241 @@ class Contents extends Component {
                           </Dropdown.Menu>
                         </Dropdown>
                       </Segment>
-                      <Table selectable compact singleLine attached>
-                        <Table.Header>
-                          <Table.Row>
-                            <Table.HeaderCell>
-                              <Dropdown
-                                item
-                                upward={false}
-                                className="sort-icon"
-                                aria-label={this.props.intl.formatMessage(
-                                  messages.sort,
-                                )}
-                                icon={
-                                  <Icon
-                                    name={configurationSVG}
-                                    size="24px"
-                                    color="#826a6a"
-                                    className="configuration-svg"
-                                  />
-                                }
-                              >
-                                <Dropdown.Menu>
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.rearrangeBy,
-                                    )}
-                                  />
-                                  {map(
-                                    [
-                                      'id',
-                                      'sortable_title',
-                                      'EffectiveDate',
-                                      'CreationDate',
-                                      'ModificationDate',
-                                      'portal_type',
-                                    ],
-                                    (index) => (
-                                      <Dropdown.Item
-                                        key={index}
-                                        className={`sort_${index} icon-align`}
-                                      >
-                                        <Icon name={downKeySVG} size="24px" />
-                                        <FormattedMessage
-                                          id={Indexes[index].label}
-                                        />
-                                        <Dropdown.Menu>
-                                          <Dropdown.Item
-                                            onClick={this.onSortItems}
-                                            value={`${Indexes[index].sort_on}|ascending`}
-                                            className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
-                                          >
-                                            <Icon
-                                              name={sortDownSVG}
-                                              size="24px"
-                                            />{' '}
-                                            <FormattedMessage
-                                              id="Ascending"
-                                              defaultMessage="Ascending"
-                                            />
-                                          </Dropdown.Item>
-                                          <Dropdown.Item
-                                            onClick={this.onSortItems}
-                                            value={`${Indexes[index].sort_on}|descending`}
-                                            className={`sort_${Indexes[index].sort_on}_descending icon-align`}
-                                          >
-                                            <Icon
-                                              name={sortUpSVG}
-                                              size="24px"
-                                            />{' '}
-                                            <FormattedMessage
-                                              id="Descending"
-                                              defaultMessage="Descending"
-                                            />
-                                          </Dropdown.Item>
-                                        </Dropdown.Menu>
-                                      </Dropdown.Item>
-                                    ),
+                      <div className="contents-table-wrapper">
+                        <Table selectable compact singleLine attached>
+                          <Table.Header>
+                            <Table.Row>
+                              <Table.HeaderCell>
+                                <Dropdown
+                                  item
+                                  upward={false}
+                                  className="sort-icon"
+                                  aria-label={this.props.intl.formatMessage(
+                                    messages.sort,
                                   )}
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </Table.HeaderCell>
-                            <Table.HeaderCell>
-                              <Dropdown
-                                upward={false}
-                                trigger={
-                                  <Icon
-                                    name={
-                                      this.state.selected.length === 0
-                                        ? checkboxUncheckedSVG
-                                        : this.state.selected.length ===
-                                          this.state.items.length
-                                        ? checkboxCheckedSVG
-                                        : checkboxIndeterminateSVG
-                                    }
-                                    color={
-                                      this.state.selected.length > 0
-                                        ? '#007eb1'
-                                        : '#826a6a'
-                                    }
-                                    size="24px"
-                                  />
-                                }
-                                icon={null}
-                              >
-                                <Dropdown.Menu>
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.select,
-                                    )}
-                                  />
-                                  <Dropdown.Item onClick={this.onSelectAll}>
+                                  icon={
                                     <Icon
-                                      name={checkboxCheckedSVG}
-                                      color="#007eb1"
+                                      name={configurationSVG}
                                       size="24px"
-                                    />{' '}
-                                    <FormattedMessage
-                                      id="All"
-                                      defaultMessage="All"
+                                      color="#826a6a"
+                                      className="configuration-svg"
                                     />
-                                  </Dropdown.Item>
-                                  <Dropdown.Item onClick={this.onSelectNone}>
+                                  }
+                                >
+                                  <Dropdown.Menu>
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.rearrangeBy,
+                                      )}
+                                    />
+                                    {map(
+                                      [
+                                        'id',
+                                        'sortable_title',
+                                        'EffectiveDate',
+                                        'CreationDate',
+                                        'ModificationDate',
+                                        'portal_type',
+                                      ],
+                                      (index) => (
+                                        <Dropdown.Item
+                                          key={index}
+                                          className={`sort_${index} icon-align`}
+                                        >
+                                          <Icon name={downKeySVG} size="24px" />
+                                          <FormattedMessage
+                                            id={Indexes[index].label}
+                                          />
+                                          <Dropdown.Menu>
+                                            <Dropdown.Item
+                                              onClick={this.onSortItems}
+                                              value={`${Indexes[index].sort_on}|ascending`}
+                                              className={`sort_${Indexes[index].sort_on}_ascending icon-align`}
+                                            >
+                                              <Icon
+                                                name={sortDownSVG}
+                                                size="24px"
+                                              />{' '}
+                                              <FormattedMessage
+                                                id="Ascending"
+                                                defaultMessage="Ascending"
+                                              />
+                                            </Dropdown.Item>
+                                            <Dropdown.Item
+                                              onClick={this.onSortItems}
+                                              value={`${Indexes[index].sort_on}|descending`}
+                                              className={`sort_${Indexes[index].sort_on}_descending icon-align`}
+                                            >
+                                              <Icon
+                                                name={sortUpSVG}
+                                                size="24px"
+                                              />{' '}
+                                              <FormattedMessage
+                                                id="Descending"
+                                                defaultMessage="Descending"
+                                              />
+                                            </Dropdown.Item>
+                                          </Dropdown.Menu>
+                                        </Dropdown.Item>
+                                      ),
+                                    )}
+                                  </Dropdown.Menu>
+                                </Dropdown>
+                              </Table.HeaderCell>
+                              <Table.HeaderCell>
+                                <Dropdown
+                                  upward={false}
+                                  trigger={
                                     <Icon
-                                      name={checkboxUncheckedSVG}
+                                      name={
+                                        this.state.selected.length === 0
+                                          ? checkboxUncheckedSVG
+                                          : this.state.selected.length ===
+                                            this.state.items.length
+                                          ? checkboxCheckedSVG
+                                          : checkboxIndeterminateSVG
+                                      }
+                                      color={
+                                        this.state.selected.length > 0
+                                          ? '#007eb1'
+                                          : '#826a6a'
+                                      }
                                       size="24px"
-                                    />{' '}
-                                    <FormattedMessage
-                                      id="None"
-                                      defaultMessage="None"
                                     />
-                                  </Dropdown.Item>
-                                  <Dropdown.Divider />
-                                  <Dropdown.Header
-                                    content={this.props.intl.formatMessage(
-                                      messages.selected,
-                                      { count: this.state.selected.length },
-                                    )}
-                                  />
-                                  <Input
-                                    icon={<Icon name={zoomSVG} size="24px" />}
-                                    iconPosition="left"
-                                    className="search"
-                                    placeholder={this.props.intl.formatMessage(
-                                      messages.filter,
-                                    )}
-                                    onChange={this.onChangeSelected}
-                                    onClick={(e) => {
-                                      e.preventDefault();
-                                      e.stopPropagation();
-                                    }}
-                                  />
-                                  <Dropdown.Menu scrolling>
-                                    {map(filteredItems, (item) => (
-                                      <Dropdown.Item
-                                        key={item}
-                                        value={item}
-                                        onClick={this.onDeselect}
-                                      >
-                                        <Icon
-                                          name={deleteSVG}
-                                          color="#e40166"
-                                          size="24px"
-                                        />{' '}
-                                        {this.getFieldById(item, 'title')}
-                                      </Dropdown.Item>
-                                    ))}
+                                  }
+                                  icon={null}
+                                >
+                                  <Dropdown.Menu>
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.select,
+                                      )}
+                                    />
+                                    <Dropdown.Item onClick={this.onSelectAll}>
+                                      <Icon
+                                        name={checkboxCheckedSVG}
+                                        color="#007eb1"
+                                        size="24px"
+                                      />{' '}
+                                      <FormattedMessage
+                                        id="All"
+                                        defaultMessage="All"
+                                      />
+                                    </Dropdown.Item>
+                                    <Dropdown.Item onClick={this.onSelectNone}>
+                                      <Icon
+                                        name={checkboxUncheckedSVG}
+                                        size="24px"
+                                      />{' '}
+                                      <FormattedMessage
+                                        id="None"
+                                        defaultMessage="None"
+                                      />
+                                    </Dropdown.Item>
+                                    <Dropdown.Divider />
+                                    <Dropdown.Header
+                                      content={this.props.intl.formatMessage(
+                                        messages.selected,
+                                        { count: this.state.selected.length },
+                                      )}
+                                    />
+                                    <Input
+                                      icon={<Icon name={zoomSVG} size="24px" />}
+                                      iconPosition="left"
+                                      className="search"
+                                      placeholder={this.props.intl.formatMessage(
+                                        messages.filter,
+                                      )}
+                                      onChange={this.onChangeSelected}
+                                      onClick={(e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                      }}
+                                    />
+                                    <Dropdown.Menu scrolling>
+                                      {map(filteredItems, (item) => (
+                                        <Dropdown.Item
+                                          key={item}
+                                          value={item}
+                                          onClick={this.onDeselect}
+                                        >
+                                          <Icon
+                                            name={deleteSVG}
+                                            color="#e40166"
+                                            size="24px"
+                                          />{' '}
+                                          {this.getFieldById(item, 'title')}
+                                        </Dropdown.Item>
+                                      ))}
+                                    </Dropdown.Menu>
                                   </Dropdown.Menu>
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </Table.HeaderCell>
-                            <Table.HeaderCell
-                              width={Math.ceil(
-                                16 / this.state.index.selectedCount,
+                                </Dropdown>
+                              </Table.HeaderCell>
+                              <Table.HeaderCell
+                                width={Math.ceil(
+                                  16 / this.state.index.selectedCount,
+                                )}
+                              >
+                                <FormattedMessage
+                                  id="Title"
+                                  defaultMessage="Title"
+                                />
+                              </Table.HeaderCell>
+                              {map(
+                                this.state.index.order,
+                                (index, order) =>
+                                  this.state.index.values[index].selected && (
+                                    <ContentsIndexHeader
+                                      key={index}
+                                      width={Math.ceil(
+                                        16 / this.state.index.selectedCount,
+                                      )}
+                                      label={
+                                        this.state.index.values[index].label
+                                      }
+                                      order={order}
+                                      onOrderIndex={this.onOrderIndex}
+                                    />
+                                  ),
                               )}
-                            >
-                              <FormattedMessage
-                                id="Title"
-                                defaultMessage="Title"
-                              />
-                            </Table.HeaderCell>
-                            {map(
-                              this.state.index.order,
-                              (index, order) =>
-                                this.state.index.values[index].selected && (
-                                  <ContentsIndexHeader
-                                    key={index}
-                                    width={Math.ceil(
-                                      16 / this.state.index.selectedCount,
-                                    )}
-                                    label={this.state.index.values[index].label}
-                                    order={order}
-                                    onOrderIndex={this.onOrderIndex}
-                                  />
-                                ),
-                            )}
-                            <Table.HeaderCell textAlign="right">
-                              <FormattedMessage
-                                id="Actions"
-                                defaultMessage="Actions"
+                              <Table.HeaderCell textAlign="right">
+                                <FormattedMessage
+                                  id="Actions"
+                                  defaultMessage="Actions"
+                                />
+                              </Table.HeaderCell>
+                            </Table.Row>
+                          </Table.Header>
+                          <Table.Body>
+                            {this.state.items.map((item, order) => (
+                              <ContentsItem
+                                key={item['@id']}
+                                item={item}
+                                order={order}
+                                selected={
+                                  indexOf(this.state.selected, item['@id']) !==
+                                  -1
+                                }
+                                onClick={this.onSelect}
+                                indexes={filter(
+                                  map(this.state.index.order, (index) => ({
+                                    id: index,
+                                    type: this.state.index.values[index].type,
+                                  })),
+                                  (index) =>
+                                    this.state.index.values[index.id].selected,
+                                )}
+                                onCut={this.cut}
+                                onCopy={this.copy}
+                                onDelete={this.delete}
+                                onOrderItem={this.onOrderItem}
+                                onMoveToTop={this.onMoveToTop}
+                                onMoveToBottom={this.onMoveToBottom}
                               />
-                            </Table.HeaderCell>
-                          </Table.Row>
-                        </Table.Header>
-                        <Table.Body>
-                          {this.state.items.map((item, order) => (
-                            <ContentsItem
-                              key={item['@id']}
-                              item={item}
-                              order={order}
-                              selected={
-                                indexOf(this.state.selected, item['@id']) !== -1
-                              }
-                              onClick={this.onSelect}
-                              indexes={filter(
-                                map(this.state.index.order, (index) => ({
-                                  id: index,
-                                  type: this.state.index.values[index].type,
-                                })),
-                                (index) =>
-                                  this.state.index.values[index.id].selected,
-                              )}
-                              onCut={this.cut}
-                              onCopy={this.copy}
-                              onDelete={this.delete}
-                              onOrderItem={this.onOrderItem}
-                              onMoveToTop={this.onMoveToTop}
-                              onMoveToBottom={this.onMoveToBottom}
-                            />
-                          ))}
-                        </Table.Body>
-                      </Table>
+                            ))}
+                          </Table.Body>
+                        </Table>
+                      </div>
 
                       <div className="contents-pagination">
                         <Pagination

package/src/components/manage/Edit/Edit.jsx

@@ -259,6 +259,7 @@ class Edit extends Component {
         isEditForm
         ref={this.form}
         schema={this.props.schema}
+        type={this.props.content?.['@type']}
         formData={this.props.content}
         requestError={this.state.error}
         onSubmit={this.onSubmit}

package/src/components/manage/Form/Form.jsx

@@ -172,15 +172,31 @@ class Form extends Component {
         };
       }
     }
+
+    let selectedBlock = null;
+    if (
+      formData.hasOwnProperty(blocksLayoutFieldname) &&
+      formData[blocksLayoutFieldname].items.length > 0
+    ) {
+      selectedBlock = formData[blocksLayoutFieldname].items[0];
+
+      if (config.blocks?.initialBlocksFocus?.[this.props.type]) {
+        //Default selected is not the first block, but the one from config.
+        Object.keys(formData[blocksFieldname]).forEach((b_key) => {
+          if (
+            formData[blocksFieldname][b_key]['@type'] ===
+            config.blocks?.initialBlocksFocus?.[this.props.type]
+          ) {
+            selectedBlock = b_key;
+          }
+        });
+      }
+    }
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),
       errors: {},
-      selected:
-        formData.hasOwnProperty(blocksLayoutFieldname) &&
-        formData[blocksLayoutFieldname].items.length > 0
-          ? formData[blocksLayoutFieldname].items[0]
-          : null,
+      selected: selectedBlock,
       multiSelected: [],
       isClient: false,
     };

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -106,6 +106,7 @@ const TranslationObject = ({
             key="translation-object-form"
             schema={schema}
             formData={translationObject}
+            type={translationObject['@type']}
             onSubmit={() => {
               /*do nothing*/
             }}

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -157,6 +157,7 @@ class ArrayWidget extends Component {
     ),
     onChange: PropTypes.func.isRequired,
     wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
   };
 
   /**
@@ -176,6 +177,7 @@ class ArrayWidget extends Component {
     error: [],
     choices: [],
     value: null,
+    creatable: false,
   };
 
   /**
@@ -242,7 +244,23 @@ class ArrayWidget extends Component {
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      this.props?.choices && !getVocabFromHint(this.props)
+      // It will be only createable if the named vocabulary is in the widget definition
+      // (hint) like:
+      // list_field_voc_unconstrained = schema.List(
+      //     title=u"List field with values from vocabulary but not constrained to them.",
+      //     description=u"zope.schema.List",
+      //     value_type=schema.TextLine(),
+      //     required=False,
+      //     missing_value=[],
+      // )
+      // directives.widget(
+      //     "list_field_voc_unconstrained",
+      //     AjaxSelectFieldWidget,
+      //     vocabulary="plone.app.vocabularies.PortalTypes",
+      // )
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
         ? SortableContainer(Select)
         : SortableContainer(CreatableSelect);
 

package/src/components/manage/Widgets/ArrayWidget.stories.jsx

@@ -119,6 +119,14 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Creatable = WidgetStory.bind({ widget: ArrayWidget });
+Creatable.args = {
+  id: 'field-creatable',
+  title: 'Field with creatable',
+  description: 'Allows creation of new terms',
+  creatable: true,
+};
+
 const getOptionsGenerator = (count) => {
   const options = [];
   for (let i = 0; i < count; i = i + 1) {

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -148,8 +148,8 @@ export class DatetimeWidgetComponent extends Component {
     const moment = this.props.moment.default;
     if (time) {
       const base = (this.getInternalValue() || moment()).set({
-        hours: time.hours(),
-        minutes: time.minutes(),
+        hours: time?.hours() ?? 0,
+        minutes: time?.minutes() ?? 0,
         seconds: 0,
       });
       const dateValue = base.toISOString();

package/src/components/theme/Anontools/Anontools.jsx

@@ -53,7 +53,7 @@ export class Anontools extends Component {
             <Link
               aria-label="login"
               to={`/login${
-                this.props.content
+                this.props.content?.['@id']
                   ? `?return_url=${this.props.content['@id'].replace(
                       settings.apiPath,
                       '',

package/src/components/theme/Navigation/NavItem.jsx

@@ -5,7 +5,9 @@ import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
   const { settings } = config;
-  if (isInternalURL(item.url)) {
+  // The item.url in the root is ''
+  // TODO: make more consistent it everywhere (eg. reducers to return '/' instead of '')
+  if (isInternalURL(item.url) || item.url === '') {
     return (
       <NavLink
         to={item.url === '' ? '/' : item.url}

package/src/config/Blocks.jsx

@@ -454,5 +454,12 @@ const blocksConfig = {
 const requiredBlocks = ['title'];
 
 const initialBlocks = {};
+const initialBlocksFocus = {}; //{Document:'title'}
 
-export { groupBlocksOrder, requiredBlocks, blocksConfig, initialBlocks };
+export {
+  groupBlocksOrder,
+  requiredBlocks,
+  blocksConfig,
+  initialBlocks,
+  initialBlocksFocus,
+};

package/src/config/index.js

@@ -26,6 +26,7 @@ import {
   requiredBlocks,
   blocksConfig,
   initialBlocks,
+  initialBlocksFocus,
 } from './Blocks';
 import { loadables } from './Loadables';
 
@@ -174,6 +175,7 @@ let config = {
     blocksConfig,
     groupBlocksOrder,
     initialBlocks,
+    initialBlocksFocus,
     showEditBlocksInBabelView: false,
   },
   addonRoutes: [],

package/src/express-middleware/files.js

@@ -4,7 +4,6 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
 function fileMiddleware(req, res, next) {
-  const { errorHandler } = req.app.locals;
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -14,8 +13,8 @@ function fileMiddleware(req, res, next) {
         }
       });
       res.send(resource.body);
-    }, errorHandler)
-    .catch(errorHandler);
+    })
+    .catch(next);
 }
 
 export default function () {

package/src/express-middleware/images.js

@@ -4,7 +4,6 @@ import { getAPIResourceWithAuth } from '@plone/volto/helpers';
 const HEADERS = ['content-type', 'content-disposition', 'cache-control'];
 
 function imageMiddleware(req, res, next) {
-  const { errorHandler } = req.app.locals;
   getAPIResourceWithAuth(req)
     .then((resource) => {
       // Just forward the headers that we need
@@ -13,10 +12,9 @@ function imageMiddleware(req, res, next) {
           res.set(header, resource.headers[header]);
         }
       });
-
       res.send(resource.body);
-    }, errorHandler)
-    .catch(errorHandler);
+    })
+    .catch(next);
 }
 
 export default function () {

package/src/helpers/Api/APIResourceWithAuth.js

@@ -34,11 +34,5 @@ export const getAPIResourceWithAuth = (req) =>
     if (authToken) {
       request.set('Authorization', `Bearer ${authToken}`);
     }
-    request.end((error, res = {}) => {
-      if (error) {
-        reject(error);
-      } else {
-        resolve(res);
-      }
-    });
+    request.then(resolve).catch(reject);
   });

package/src/helpers/FormValidation/FormValidation.js

@@ -61,7 +61,7 @@ const widgetValidation = {
   },
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
-      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/gm;
+      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
       const isValid = urlRegex.test(urlValue);
       return !isValid ? intlFunc(messages.isValidURL) : null;
     },

package/src/server.jsx

@@ -72,6 +72,34 @@ const middleware = (config.settings.expressMiddleware || []).filter((m) => m);
 server.all('*', setupServer);
 if (middleware.length) server.use('/', middleware);
 
+server.use(function (err, req, res, next) {
+  if (err) {
+    const { store } = req.app.locals;
+    const errorPage = (
+      <Provider store={store} onError={reactIntlErrorHandler}>
+        <StaticRouter context={{}} location={req.url}>
+          <ErrorPage message={err.message} />
+        </StaticRouter>
+      </Provider>
+    );
+
+    res.set({
+      'Cache-Control': 'public, max-age=60, no-transform',
+    });
+
+    /* Displays error in console
+     * TODO:
+     * - get ignored codes from Plone error_log
+     */
+    const ignoredErrors = [301, 302, 401, 404];
+    if (!ignoredErrors.includes(err.status)) console.error(err);
+
+    res
+      .status(err.status || 500) // If error happens in Volto code itself error status is undefined
+      .send(`<!doctype html> ${renderToString(errorPage)}`);
+  }
+});
+
 function setupServer(req, res, next) {
   const api = new Api(req);
 

package/theme/themes/pastanaga/extras/contents.less

@@ -78,6 +78,18 @@
     top: 3px;
   }
 
+  .contents-table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+
+    .ui.attached.table {
+      width: 100%;
+      max-width: 100%;
+
+      border: none;
+    }
+  }
+
   .ui.table .icon-align,
   .ui.dropdown .menu > .item.icon-align {
     display: flex;