@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -5,12 +5,7 @@ import { Provider } from 'react-intl-redux';
 import { waitFor } from '@testing-library/react';
 import RecurrenceWidget from './RecurrenceWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/RegistryImageWidget.test.jsx

@@ -82,10 +82,11 @@ describe('RegistryImageWidget', () => {
         const dropzone = container.querySelector('.file-widget-dropzone');
         const preview = container.querySelector('.image-preview');
         const filename = container.querySelector('.field-file-name');
+        const img = container.querySelector('img[src*="logo"]');
 
-        return dropzone && preview && filename;
+        return dropzone && preview && filename && img && img.complete;
       },
-      { timeout: 1000 },
+      { timeout: 2000 },
     );
 
     expect(container).toMatchSnapshot();

package/src/components/manage/Widgets/SchemaWidget.test.jsx

@@ -5,12 +5,7 @@ import { Provider } from 'react-intl-redux';
 
 import SchemaWidget from './SchemaWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SchemaWidgetFieldset.test.jsx

@@ -3,12 +3,7 @@ import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { render } from '@testing-library/react';
 import SchemaWidgetFieldsetComponent from './SchemaWidgetFieldset';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -105,6 +105,7 @@ class SelectAutoComplete extends Component {
     error: [],
     choices: [],
     value: null,
+    isMulti: true,
   };
 
   /**
@@ -127,10 +128,16 @@ class SelectAutoComplete extends Component {
   componentDidMount() {
     const { id, lang, value, choices } = this.props;
     if (value && value?.length > 0) {
-      const tokensQuery = convertValueToVocabQuery(
-        normalizeValue(choices, value, this.props.intl),
-      );
-
+      let tokensQuery;
+      if (typeof value === 'string') {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, [value], this.props.intl),
+        );
+      } else {
+        tokensQuery = convertValueToVocabQuery(
+          normalizeValue(choices, value, this.props.intl),
+        );
+      }
       this.props.getVocabularyTokenTitle({
         vocabNameOrURL: this.props.vocabBaseUrl,
         subrequest: `widget-${id}-${lang}`,
@@ -160,13 +167,22 @@ class SelectAutoComplete extends Component {
    * @returns {undefined}
    */
   handleChange(selectedOption) {
-    this.props.onChange(
-      this.props.id,
-      selectedOption ? selectedOption.map((item) => item.value) : null,
-    );
-    this.setState((state) => ({
-      termsPairsCache: [...state.termsPairsCache, ...selectedOption],
-    }));
+    if (!Array.isArray(selectedOption)) {
+      this.props.onChange(this.props.id, selectedOption?.value || null);
+      if (selectedOption) {
+        this.setState((state) => ({
+          termsPairsCache: [...state.termsPairsCache, selectedOption],
+        }));
+      }
+    } else {
+      this.props.onChange(
+        this.props.id,
+        selectedOption ? selectedOption.map((item) => item.value) : null,
+      );
+      this.setState((state) => ({
+        termsPairsCache: [...state.termsPairsCache, ...selectedOption],
+      }));
+    }
   }
 
   timeoutRef = React.createRef();
@@ -251,7 +267,8 @@ class SelectAutoComplete extends Component {
             this.props.intl.formatMessage(messages.select)
           }
           onChange={this.handleChange}
-          isMulti
+          isMulti={this.props.isMulti}
+          isClearable={!this.props.isMulti}
         />
       </FormFieldWrapper>
     );

package/src/components/manage/Widgets/SelectAutoComplete.test.jsx

@@ -6,12 +6,7 @@ import SelectAutoComplete from './SelectAutoComplete';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/SelectWidget.test.jsx

@@ -6,12 +6,7 @@ import SelectWidget from './SelectWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/Size.stories.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
+
+import Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+const meta: Meta<typeof Size> = {
+  title: 'Edit Widgets/Size',
+  component: Size,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Size widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Size>;
+
+type TemplateParameters = {
+  initialValue?: ButtonsWidgetProps['value'];
+};
+
+const Template: StoryFn<typeof Size> = (args, context) => {
+  const { initialValue } =
+    (context.parameters as TemplateParameters | undefined) ?? {};
+  const { value: _ignoredValue, onChange: argsOnChange, ...restArgs } = args;
+
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <FormUndoWrapper
+        initialState={{ value: initialValue ?? _ignoredValue }}
+        showControls
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <Size
+              {...(restArgs as ButtonsWidgetProps)}
+              value={state.value}
+              onChange={(id, nextValue) => {
+                argsOnChange?.(id, nextValue);
+                onChange({ value: nextValue });
+              }}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 2)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+};
+
+export const DefaultSize: Story = {
+  render: Template,
+  args: {
+    id: 'size',
+    title: 'Size',
+    block: 'block',
+    fieldSet: 'default',
+  },
+};

package/src/components/manage/Widgets/Size.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import Size from './Size';
+import type { ButtonsWidgetProps } from './ButtonsWidget';
+
+const mockStore = configureStore();
+
+const renderWidget = (props: Partial<ButtonsWidgetProps> = {}) => {
+  const onChange = props.onChange ?? vi.fn();
+  const widgetProps: ButtonsWidgetProps = {
+    id: 'size',
+    title: 'Size',
+    fieldSet: 'default',
+    onChange,
+    value: undefined,
+    default: undefined,
+    disabled: false,
+    isDisabled: false,
+    ...props,
+  };
+
+  return {
+    onChange,
+    ...render(
+      <Provider
+        store={mockStore({
+          intl: {
+            locale: 'en',
+            messages: {},
+          },
+        })}
+      >
+        <Size {...widgetProps} />
+      </Provider>,
+    ),
+  };
+};
+
+describe('Size widget', () => {
+  it('renders the default size options', () => {
+    renderWidget();
+
+    expect(screen.getByRole('radio', { name: 'Small' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Medium' })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: 'Large' })).toBeInTheDocument();
+  });
+
+  it('returns the selected size name', () => {
+    const { onChange } = renderWidget();
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Medium' }));
+
+    expect(onChange).toHaveBeenCalledWith('size', 'm');
+  });
+});

package/src/components/manage/Widgets/Size.tsx

@@ -0,0 +1,78 @@
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  m: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  m: ['M', intl.formatMessage(messages.m)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    name: 's',
+    label: 'Small',
+    style: undefined,
+  },
+  {
+    name: 'm',
+    label: 'Medium',
+    style: undefined,
+  },
+  {
+    name: 'l',
+    label: 'Large',
+    style: undefined,
+  },
+];
+
+const SizeWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default SizeWidget;

package/src/components/manage/Widgets/TimeWidget.test.jsx

@@ -6,12 +6,7 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/TokenWidget.test.jsx

@@ -7,12 +7,7 @@ import TokenWidget from './TokenWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

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

@@ -105,6 +105,7 @@ export const UrlWidget = (props) => {
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
               aria-label="clearUrlBrowser"
@@ -120,6 +121,7 @@ export const UrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
               aria-label="openUrlBrowser"

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -4,17 +4,8 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/__mocks__/index.tsx

@@ -1,59 +1,41 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Widgets');
-
-Finally, remove this comment.
-*/
-
-export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
-export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
-export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
-export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
-export const FileWidget = jest.fn(() => <div id="FileWidget" />);
-export const IdWidget = jest.fn(() => <div id="IdWidget" />);
-export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
-export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
-export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
-export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
-export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
-export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
-export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
-export const TextWidget = jest.fn(() => <div id="TextWidget" />);
-export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
-export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
-export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
-export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
-export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
-export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
-export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
-export const RegistryImageWidget = jest.fn(() => (
+export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = vi.fn(() => <div id="FileWidget" />);
+export const IdWidget = vi.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = vi.fn(() => <div id="TextWidget" />);
+export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = vi.fn(() => (
   <div id="RegistryImageWidget" />
 ));
-export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
-export const ObjectBrowserWidget = jest.fn(() => (
+export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = vi.fn(() => (
   <div id="ObjectBrowserWidget" />
 ));
-export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
-export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
-export const VocabularyTermsWidget = jest.fn(() => (
+export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = vi.fn(() => (
   <div id="VocabularyTermsWidget" />
 ));
-export const SelectMetadataWidget = jest.fn(() => (
+export const SelectMetadataWidget = vi.fn(() => (
   <div id="SelectMetadataWidget" />
 ));
-export const SelectAutoComplete = jest.fn(() => (
-  <div id="SelectAutoComplete" />
-));
-export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
-export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
-export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
-export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);
+export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
+export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);

package/src/components/manage/Widgets/index.tsx

@@ -265,3 +265,24 @@ export const FormFieldWrapper = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
     ),
 );
+
+export const Size = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/Size'
+    ),
+);
+
+export const BlockAlignment = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockAlignment'
+    ),
+);
+
+export const BlockWidth = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockWidth'
+    ),
+);

package/src/components/manage/Workflow/Workflow.test.jsx

@@ -7,17 +7,8 @@ import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -1,4 +1,3 @@
-import config from '@plone/volto/registry';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { flattenToAppURL, toPublicURL } from '@plone/volto/helpers/Url/Url';
 
@@ -6,8 +5,7 @@ const AlternateHrefLangs = (props) => {
   const { content } = props;
   return (
     <Helmet>
-      {config.settings.isMultilingual &&
-        content['@components']?.translations?.items &&
+      {content['@components']?.translations?.items &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -13,7 +13,6 @@ const mockStore = configureStore();
 describe('AlternateHrefLangs', () => {
   beforeEach(() => {});
   it('non multilingual site, renders nothing', () => {
-    config.settings.isMultilingual = false;
     const content = {
       '@id': '/',
       '@components': {},
@@ -38,7 +37,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
 
     const content = {
@@ -85,7 +83,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {
@@ -139,7 +136,6 @@ describe('AlternateHrefLangs', () => {
 
   it('multilingual site, with all available translations - with server URL', () => {
     config.settings.publicURL = 'https://plone.org';
-    config.settings.isMultilingual = true;
     config.settings.supportedLanguages = ['en', 'es', 'eu'];
     const store = mockStore({
       intl: {

package/src/components/theme/App/App.jsx

@@ -45,6 +45,7 @@ import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRe
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
 import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 /**
  * @export
@@ -159,6 +160,7 @@ export class App extends Component {
             'public-ui': !isCmsUI,
           })}
         />
+        <SlotRenderer name="aboveApp" content={this.props.content} />
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />
@@ -235,7 +237,9 @@ export const fetchContent = async ({ store, location }) => {
 
   const visitor = ([id, data]) => {
     const blockType = data['@type'];
-    const { getAsyncData } = blocksConfig[blockType];
+    const block = blocksConfig[blockType];
+    if (!block) return;
+    const { getAsyncData } = block;
     if (getAsyncData) {
       const p = getAsyncData({
         store,

package/src/components/theme/App/App.test.jsx

@@ -51,6 +51,7 @@ describe('App', () => {
         locale: 'en',
         messages: {},
       },
+      site: { data: {} },
     });
     const component = renderer.create(
       <Provider store={store}>