@plone/volto 19.0.0-alpha.9 → 19.1.0

package/src/reducers/diff/diff.test.js

@@ -1,5 +1,5 @@
-import diff from './diff';
 import { GET_DIFF } from '@plone/volto/constants/ActionTypes';
+import diff from './diff';
 
 describe('Diff reducer', () => {
   it('should return the initial state', () => {
@@ -24,15 +24,71 @@ describe('Diff reducer', () => {
     });
   });
 
-  it('should handle GET_DIFF_SUCCESS', () => {
+  it('should handle GET_DIFF_SUCCESS with array result with static behaviors', () => {
+    expect(
+      diff(undefined, {
+        type: `${GET_DIFF}_SUCCESS`,
+        result: [
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test page',
+            },
+          },
+          {
+            '@static_behaviors': [
+              'guillotina.behaviors.dublincore.IDublinCore',
+            ],
+            'guillotina.behaviors.dublincore.IDublinCore': {
+              title: 'test second page',
+            },
+          },
+        ],
+      }),
+    ).toEqual({
+      error: null,
+      data: [
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+
+          'guillotina.behaviors.dublincore.IDublinCore.title': 'test page',
+        },
+        {
+          '@static_behaviors': ['guillotina.behaviors.dublincore.IDublinCore'],
+          'guillotina.behaviors.dublincore.IDublinCore.title':
+            'test second page',
+        },
+      ],
+      loaded: true,
+      loading: false,
+    });
+  });
+
+  it('should handle GET_DIFF_SUCCESS with array result without static behaviors', () => {
+    const data = [
+      {
+        title: 'test page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test page',
+        },
+      },
+      {
+        title: 'test second page',
+        'guillotina.behaviors.dublincore.IDublinCore': {
+          title: 'test second page',
+        },
+      },
+    ];
     expect(
       diff(undefined, {
         type: `${GET_DIFF}_SUCCESS`,
-        result: 'result',
+        result: data,
       }),
     ).toEqual({
       error: null,
-      data: 'result',
+      data: data,
       loaded: true,
       loading: false,
     });

package/src/reducers/index.js

@@ -53,6 +53,7 @@ import upgrade from './upgrade/upgrade';
 import userschema from './userschema/userschema';
 import site from './site/site';
 import navroot from './navroot/navroot';
+import blockTypes from './blockTypes/blockTypes';
 
 /**
  * Root reducer.
@@ -111,6 +112,7 @@ const reducers = {
   userschema,
   site,
   navroot,
+  blockTypes,
 };
 
 export default reducers;

package/src/reducers/querystring/querystring.js

@@ -30,10 +30,17 @@ export default function querystring(state = initialState, action = {}) {
         loading: true,
       };
     case `${GET_QUERYSTRING}_SUCCESS`:
+      let indexes = action.result.indexes;
+      if (indexes?.path?.operations) {
+        //remove path operation, to remove unhandled 'Navigation path' option from QueryWidget
+        indexes.path.operations = indexes.path.operations.filter(
+          (o) => o !== 'plone.app.querystring.operation.string.path',
+        );
+      }
       return {
         ...state,
         error: null,
-        indexes: action.result.indexes,
+        indexes: indexes,
         sortable_indexes: action.result.sortable_indexes,
         loaded: true,
         loading: false,

package/src/reducers/users/users.js

@@ -117,7 +117,7 @@ export default function users(state = initialState, action = {}) {
     case `${LIST_USERS}_SUCCESS`:
       return {
         ...state,
-        users: action.result,
+        users: action.result.items ? action.result.items : action.result,
         [getRequestKey(action.type)]: {
           loading: false,
           loaded: true,

package/src/routes.js

@@ -51,6 +51,8 @@ import {
   UndoControlpanel,
   UpgradeControlPanel,
 } from '@plone/volto/components/manage/Controlpanels';
+import BlockTypesControlpanel from './components/manage/Controlpanels/BlockTypes';
+import BlockTypeControlpanel from './components/manage/Controlpanels/BlockType';
 
 import withClientSideContent from '@plone/volto/helpers/Content/withClientSideContent';
 
@@ -232,6 +234,14 @@ export const defaultRoutes = [
     path: '/controlpanel/relations',
     component: RelationsControlpanel,
   },
+  {
+    path: '/controlpanel/block-types/:id',
+    component: BlockTypeControlpanel,
+  },
+  {
+    path: '/controlpanel/block-types',
+    component: BlockTypesControlpanel,
+  },
   {
     path: '/controlpanel/:id',
     component: Controlpanel,

package/src/server.jsx

@@ -51,11 +51,13 @@ let locales = {};
 if (config.settings) {
   config.settings.supportedLanguages.forEach((lang) => {
     const langFileName = toGettextLang(lang);
-    import(
-      /* @vite-ignore */ '@root/../locales/' + langFileName + '.json'
-    ).then((locale) => {
-      locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
-    });
+    import(/* @vite-ignore */ '@root/../locales/' + langFileName + '.json')
+      .then((locale) => {
+        locales = { ...locales, [toReactIntlLang(lang)]: locale.default };
+      })
+      .catch((error) => {
+        // Error loading locale file
+      });
   });
 }
 
@@ -266,7 +268,13 @@ server.get('/*', (req, res) => {
         ? initialLang
         : state.content.data?.language?.token || initialLang;
 
-      if (toBackendLang(initialLang) !== contentLang && url !== '/') {
+      const isMultilingual = state.site.data.features?.multilingual;
+
+      if (
+        toBackendLang(initialLang) !== contentLang &&
+        !/\/\.well-known\/.*$/.test(location.pathname) &&
+        !(isMultilingual && location.pathname === '/')
+      ) {
         const newLang = toReactIntlLang(
           new locale.Locales(contentLang).best(supported).toString(),
         );

package/src/start-client.jsx

@@ -4,7 +4,9 @@ import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl-redux';
+import { RouterProvider } from 'react-aria-components';
 import { ConnectedRouter } from 'connected-react-router';
+import { useHistory } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { ReduxAsyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { loadableReady } from '@loadable/component';
@@ -22,6 +24,20 @@ function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
 
+function ReactAriaRouterProvider({ children }) {
+  const history = useHistory();
+
+  const navigate = (to, options = {}) => {
+    if (options.replace) {
+      history.replace(to);
+    } else {
+      history.push(to);
+    }
+  };
+
+  return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+}
+
 export default function client() {
   const api = new Api();
 
@@ -73,9 +89,11 @@ export default function client() {
         <Provider store={store}>
           <IntlProvider onError={reactIntlErrorHandler}>
             <ConnectedRouter history={history}>
-              <ScrollToTop>
-                <ReduxAsyncConnect routes={routes} helpers={api} />
-              </ScrollToTop>
+              <ReactAriaRouterProvider>
+                <ScrollToTop>
+                  <ReduxAsyncConnect routes={routes} helpers={api} />
+                </ScrollToTop>
+              </ReactAriaRouterProvider>
             </ConnectedRouter>
           </IntlProvider>
         </Provider>

package/test-addons-loader.js

@@ -0,0 +1,3 @@
+export default function install(config) {
+  return config;
+}

package/test-setup-globals.js

@@ -1,12 +1,66 @@
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+
 global.__CLIENT__ = true;
 global.__DEVELOPMENT__ = false;
+global.__SERVER__ = false;
+global.__TEST__ = true;
 
 window.matchMedia =
   window.matchMedia ||
-  function () {
+  function (query) {
     return {
-      matches: false,
+      matches: query === '(min-width: 1024px)',
       addListener: function () {},
       removeListener: function () {},
     };
   };
+
+vi.stubGlobal(
+  'fetch',
+  vi.fn(() =>
+    Promise.resolve({
+      json: () => Promise.resolve({}),
+      text: () => Promise.resolve(''),
+    }),
+  ),
+);
+
+vi.stubGlobal('localStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});
+
+vi.stubGlobal('sessionStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+});
+
+global.jest = {
+  fn: vi.fn.bind(vi),
+};
+
+// Mock IntersectionObserver for Vitest
+const IntersectionObserverMock = vi.fn((callback, options = {}) => {
+  const instance = {
+    thresholds: Array.isArray(options.threshold)
+      ? options.threshold
+      : [options.threshold ?? 0],
+    root: options.root ?? null,
+    rootMargin: options.rootMargin ?? '',
+    observe: vi.fn(),
+    unobserve: vi.fn(),
+    disconnect: vi.fn(),
+    takeRecords: vi.fn(() => []),
+  };
+
+  return instance;
+});
+
+vi.stubGlobal('IntersectionObserver', IntersectionObserverMock);
+global.IntersectionObserver = IntersectionObserverMock;
+window.IntersectionObserver = IntersectionObserverMock;

package/theme/themes/default/elements/segment.variables

@@ -57,7 +57,6 @@
 @placeholderContentMaxWidth: 15rem;
 @placeholderContentInlineButtonMargin: 0px @5px 0px 0px;
 
-
 /* Piled */
 @piledZIndex: auto;
 @piledMargin: 3em;
@@ -86,12 +85,10 @@
 @loaderSize: 3em;
 @loaderLineZIndex: 101;
 
-
 /*******************************
             Variations
 *******************************/
 
-
 /* Raised */
 @raisedBoxShadow: @floatingShadow;
 
@@ -106,10 +103,7 @@
 @attachedWidth: calc(100% - (@attachedHorizontalOffset * 2));
 @attachedBoxShadow: none;
 @attachedBorder: @borderWidth solid @solidBorderColor;
-@attachedBottomBoxShadow:
-  @boxShadow,
-  @attachedBoxShadow
-;
+@attachedBottomBoxShadow: @boxShadow, @attachedBoxShadow;
 
 /* Inverted */
 @invertedBackground: @black;
@@ -130,25 +124,24 @@
 @secondaryBackground: @darkWhite;
 @secondaryColor: @mutedTextColor;
 
-@tertiaryBackground:  @midWhite;
+@tertiaryBackground: @midWhite;
 @tertiaryColor: @mutedTextColor;
 
 @secondaryInvertedLightness: 0.2;
-@secondaryInvertedBackground:
-  lighten(@black, (@secondaryInvertedLightness * 100))
+@secondaryInvertedBackground: lighten(
+    @black,
+    (@secondaryInvertedLightness * 100)
+  )
   linear-gradient(
     rgba(255, 255, 255, @secondaryInvertedLightness) 0%,
     rgba(255, 255, 255, @secondaryInvertedLightness) 100%
-  )
-;
+  );
 @secondaryInvertedColor: @invertedMutedTextColor;
 
 @tertiaryInvertedLightness: 0.35;
-@tertiaryInvertedBackground:
-  lighten(@black, (@tertiaryInvertedLightness * 100))
+@tertiaryInvertedBackground: lighten(@black, (@tertiaryInvertedLightness * 100))
   linear-gradient(
     rgba(255, 255, 255, @tertiaryInvertedLightness) 0%,
     rgba(255, 255, 255, @tertiaryInvertedLightness) 100%
-  )
-;
+  );
 @tertiaryInvertedColor: @invertedMutedTextColor;

package/theme/themes/default/globals/site.variables

@@ -82,8 +82,8 @@
 
 /* Input Text Color */
 @inputColor: @textColor;
-@inputPlaceholderColor: lighten(@inputColor, 75);
-@inputPlaceholderFocusColor: lighten(@inputColor, 45);
+@inputPlaceholderColor: lighten(@inputColor, 35);
+@inputPlaceholderFocusColor: lighten(@inputColor, 65);
 
 /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
 @inputLineHeight: unit((17 / 14), em);
@@ -970,4 +970,4 @@
 /*---  Light Tones  ---*/
 @whiteActive               : darken(@white, 5);
 @offWhiteActive            : darken(@offWhite, 5);
-@darkWhiteActive           : darken(@darkWhite, 5);
+@darkWhiteActive           : darken(@darkWhite, 5);

package/theme/themes/pastanaga/collections/form.overrides

@@ -25,12 +25,33 @@
 }
 
 .ui.form p.help {
-  color: #878f93;
+  color: @inputColor;
   font-size: @13px;
   font-weight: 300;
   line-height: initial;
 }
 
+// Restore visible focus for keyboard navigation — overrides Semantic UI's `outline: none` on form inputs
+.ui.form input:not([type]),
+.ui.form input[type='date'],
+.ui.form input[type='datetime-local'],
+.ui.form input[type='email'],
+.ui.form input[type='number'],
+.ui.form input[type='password'],
+.ui.form input[type='search'],
+.ui.form input[type='tel'],
+.ui.form input[type='time'],
+.ui.form input[type='text'],
+.ui.form input[type='file'],
+.ui.form input[type='url'],
+.ui.form textarea {
+  padding-left: 5px;
+
+  &:focus-visible {
+    outline: revert;
+  }
+}
+
 .ui.form .ui.input input:not([type]),
 .ui.form .ui.input input[type='date'],
 .ui.form .ui.input input[type='datetime-local'],

package/theme/themes/pastanaga/elements/button.overrides

@@ -27,7 +27,8 @@
 }
 
 #main,
-.slate-inline-toolbar.slate-toolbar {
+.slate-inline-toolbar.slate-toolbar,
+.contenttype-plone-site .ui.page.modals {
   .ui.basic.buttons .button,
   .ui.basic.button {
     -webkit-box-shadow: 0px 0px 0px @basicBorderSize transparent inset !important;
@@ -42,11 +43,16 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
 
+.ui.basic.buttons .button:focus-visible,
+.ui.basic.button:focus-visible {
+  outline: revert;
+}
+
 .ui.basic.primary.button,
 .ui.basic.secondary.button {
   box-shadow: none !important;
@@ -69,7 +75,7 @@
   cursor: pointer;
   text-align: initial;
 
-  &:focus {
+  &:focus:not(:focus-visible) {
     outline: none;
   }
 }
@@ -85,3 +91,24 @@
     margin: 0;
   }
 }
+
+.modals {
+  .modal {
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.5em;
+
+      .ui.basic.button {
+        display: flex;
+        justify-content: center;
+        padding: 0.3em;
+        margin: 0;
+
+        svg {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

package/theme/themes/pastanaga/elements/segment.variables

@@ -14,14 +14,12 @@
 
 @groupedSegmentDivider: none;
 
-
 /*-------------------
        Coupling
 --------------------*/
 
 /* Page Grid Segment */
 
-
 /*******************************
             States
 *******************************/
@@ -30,7 +28,6 @@
 
 /* Loading Spinner */
 
-
 /*******************************
             Variations
 *******************************/
@@ -61,4 +58,4 @@
 
 /* Ordinality */
 @secondaryBackground: @tealBackground;
-@secondaryColor: @teal;
+@secondaryColor: @textColor;

package/theme/themes/pastanaga/extras/block-types.less

@@ -0,0 +1,17 @@
+.react-aria-Table.cmsui-table {
+  --plone-table-cell-border-bottom: 1px solid var(--quanta-smoke);
+  --plone-table-header-border-bottom: 2px solid var(--quanta-silver);
+  width: 100%;
+  border-radius: 0;
+
+  .react-aria-Row {
+    --radius-top: 0px;
+    --radius-bottom: 0px;
+    border-bottom: none;
+  }
+
+  .react-aria-Column[data-key$='occurrences'],
+  .react-aria-Cell[data-key$=':occurrences'] {
+    text-align: right;
+  }
+}

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

@@ -187,10 +187,6 @@
 }
 
 #content-core {
-  .dragging-cell {
-    opacity: 0;
-  }
-
   .dragging-row {
     background: rgba(0, 0, 0, 0.05);
   }
@@ -267,3 +263,66 @@
   overflow: auto;
   max-height: 75vh;
 }
+
+.contents-dropzone {
+  position: relative;
+
+  &.drag-over {
+    overflow: hidden;
+  }
+}
+
+.dropzone-overlay {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 3px dashed black;
+  animation: fadeIn 0.3s ease-in;
+  backdrop-filter: blur(2px);
+  inset: 0;
+}
+
+.dropzone-content {
+  animation: scaleIn 0.3s ease-out;
+  color: black;
+  text-align: center;
+
+  h3 {
+    margin-top: 16px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 18px;
+  }
+
+  h3,
+  p {
+    color: black;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

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

@@ -363,6 +363,7 @@ button {
     margin-left: 8px;
 
     h4 {
+      display: inline;
       margin-bottom: 0;
       font-weight: @bold;
     }
@@ -394,8 +395,6 @@ button {
 }
 
 .users-control-panel .table {
-  overflow-x: scroll;
-
   &::-webkit-scrollbar {
     width: 3px;
     height: 3px; /* scrollbar height */
@@ -678,8 +677,19 @@ img.responsive {
   }
 }
 
-// Deprecated as per https://github.com/plone/volto/issues/1265
-// @import 'utils';
+.visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(1px, 1px, 1px, 1px); /* IE-style CSS for compatibility */
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
 @import (multiple) '../extras/fonts';
 @import 'toolbar';
 @import 'draftjs';
@@ -702,4 +712,6 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'block-types.less';
+@import 'videoembed.less';
 .loadUIOverrides();

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

@@ -129,10 +129,6 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .toolbar-handler {
-      .toolbar-handler-button {
-        opacity: 0.3;
-      }
-
       // State colors
       .published:before {
         background: @teal-blue;
@@ -259,6 +255,15 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
           height: 4px;
           background-color: red;
           content: '';
+          opacity: 0.65;
+        }
+
+        &:hover,
+        &:focus {
+          &::before {
+            opacity: 1;
+            transition: opacity 0.3s;
+          }
         }
       }
     }
@@ -714,7 +719,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .compare-languages {
-      @media (max-width: @largestMobileScreen - 1) {
+      @media (max-width: calc(@largestMobileScreen - 1px)) {
         position: fixed;
         top: 101px;
         left: 0;