@eeacms/volto-hero-block 7.1.0 → 9.0.0

package/locales/it/LC_MESSAGES/volto.po

@@ -11,4 +11,122 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "A short hint that describes the expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "A short hint that describes the expected value within this block"
+msgstr ""
+
+#. Default: "Allow only the following blocks types"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Allow only the following blocks types"
+msgstr ""
+
+#. Default: "Default"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Default"
+msgstr ""
+
+#. Default: "Detailed expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Detailed expected value within this block"
+msgstr ""
+
+#. Default: "Disable creation of new blocks after this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable creation of new blocks after this block"
+msgstr ""
+
+#. Default: "Disable drag & drop on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable drag & drop on this block"
+msgstr ""
+
+#. Default: "Disable editing on hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero block settings"
+msgstr ""
+
+#. Default: "Disable editing on hero titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero titles"
+msgstr ""
+
+#. Default: "Disable editing on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on this block"
+msgstr ""
+
+#. Default: "Disable inner buttons"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable inner buttons"
+msgstr ""
+
+#. Default: "Disable new blocks"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable new blocks"
+msgstr ""
+
+#. Default: "Don't allow deletion of this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Don't allow deletion of this block"
+msgstr ""
 
+#. Default: "Fixed layout"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout"
+msgstr ""
+
+#. Default: "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+msgstr ""
+
+#. Default: "Fixed position"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed position"
+msgstr ""
+
+#. Default: "Helper text"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Helper text"
+msgstr ""
+
+#. Default: "Hero"
+#: components/Blocks/Hero/index
+msgid "Hero"
+msgstr ""
+
+#. Default: "Hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hero block settings"
+msgstr ""
+
+#. Default: "Hide all block related buttons within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hide all block related buttons within this block"
+msgstr ""
+
+#. Default: "Instructions"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Instructions"
+msgstr ""
+
+#. Default: "Read-only"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only"
+msgstr ""
+
+#. Default: "Read-only settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only settings"
+msgstr ""
+
+#. Default: "Read-only titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only titles"
+msgstr ""
+
+#. Default: "Required"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Required"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,4 +11,122 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#. Default: "A short hint that describes the expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "A short hint that describes the expected value within this block"
+msgstr ""
+
+#. Default: "Allow only the following blocks types"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Allow only the following blocks types"
+msgstr ""
+
+#. Default: "Default"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Default"
+msgstr ""
+
+#. Default: "Detailed expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Detailed expected value within this block"
+msgstr ""
+
+#. Default: "Disable creation of new blocks after this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable creation of new blocks after this block"
+msgstr ""
+
+#. Default: "Disable drag & drop on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable drag & drop on this block"
+msgstr ""
+
+#. Default: "Disable editing on hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero block settings"
+msgstr ""
+
+#. Default: "Disable editing on hero titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero titles"
+msgstr ""
+
+#. Default: "Disable editing on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on this block"
+msgstr ""
+
+#. Default: "Disable inner buttons"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable inner buttons"
+msgstr ""
+
+#. Default: "Disable new blocks"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable new blocks"
+msgstr ""
+
+#. Default: "Don't allow deletion of this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Don't allow deletion of this block"
+msgstr ""
 
+#. Default: "Fixed layout"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout"
+msgstr ""
+
+#. Default: "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+msgstr ""
+
+#. Default: "Fixed position"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed position"
+msgstr ""
+
+#. Default: "Helper text"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Helper text"
+msgstr ""
+
+#. Default: "Hero"
+#: components/Blocks/Hero/index
+msgid "Hero"
+msgstr ""
+
+#. Default: "Hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hero block settings"
+msgstr ""
+
+#. Default: "Hide all block related buttons within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hide all block related buttons within this block"
+msgstr ""
+
+#. Default: "Instructions"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Instructions"
+msgstr ""
+
+#. Default: "Read-only"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only"
+msgstr ""
+
+#. Default: "Read-only settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only settings"
+msgstr ""
+
+#. Default: "Read-only titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only titles"
+msgstr ""
+
+#. Default: "Required"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Required"
+msgstr ""

package/locales/volto.pot

@@ -1,16 +1,134 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2026-03-10T22:13:14.190Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
-"MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=1; plural=0;\n"
+"MIME-Version: 1.0\n"
 "Language-Code: en\n"
 "Language-Name: English\n"
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#. Default: "A short hint that describes the expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "A short hint that describes the expected value within this block"
+msgstr ""
+
+#. Default: "Allow only the following blocks types"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Allow only the following blocks types"
+msgstr ""
+
+#. Default: "Default"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Default"
+msgstr ""
+
+#. Default: "Detailed expected value within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Detailed expected value within this block"
+msgstr ""
+
+#. Default: "Disable creation of new blocks after this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable creation of new blocks after this block"
+msgstr ""
+
+#. Default: "Disable drag & drop on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable drag & drop on this block"
+msgstr ""
+
+#. Default: "Disable editing on hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero block settings"
+msgstr ""
+
+#. Default: "Disable editing on hero titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on hero titles"
+msgstr ""
+
+#. Default: "Disable editing on this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable editing on this block"
+msgstr ""
+
+#. Default: "Disable inner buttons"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable inner buttons"
+msgstr ""
+
+#. Default: "Disable new blocks"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Disable new blocks"
+msgstr ""
+
+#. Default: "Don't allow deletion of this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Don't allow deletion of this block"
+msgstr ""
+
+#. Default: "Fixed layout"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout"
+msgstr ""
+
+#. Default: "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed layout, New panes (tabs) created by Editor within this block will be ignored"
+msgstr ""
+
+#. Default: "Fixed position"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Fixed position"
+msgstr ""
+
+#. Default: "Helper text"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Helper text"
+msgstr ""
+
+#. Default: "Hero"
+#: components/Blocks/Hero/index
+msgid "Hero"
+msgstr ""
+
+#. Default: "Hero block settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hero block settings"
+msgstr ""
+
+#. Default: "Hide all block related buttons within this block"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Hide all block related buttons within this block"
+msgstr ""
+
+#. Default: "Instructions"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Instructions"
+msgstr ""
+
+#. Default: "Read-only"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only"
+msgstr ""
+
+#. Default: "Read-only settings"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only settings"
+msgstr ""
 
+#. Default: "Read-only titles"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Read-only titles"
+msgstr ""
+
+#. Default: "Required"
+#: components/Blocks/Hero/LayoutSchema
+msgid "Required"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "7.1.0",
+  "version": "9.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/Hero/Copyright.test.jsx

@@ -4,7 +4,7 @@ import { Icon } from 'semantic-ui-react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
 import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 
 import Copyright from './Copyright';
 

package/src/components/Blocks/Hero/Edit.jsx

@@ -4,7 +4,6 @@ import isFunction from 'lodash/isFunction';
 import { Icon } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 import { BlocksForm } from '@plone/volto/components';
-import EditBlockWrapper from '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper';
 import { v4 as uuid } from 'uuid';
 import '@eeacms/volto-hero-block/components/Blocks/Hero/edit.css';
 
@@ -15,8 +14,7 @@ import {
   UniversalLink,
 } from '@plone/volto/components';
 import { BodyClass } from '@plone/volto/helpers';
-
-import { getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 import { HeroBlockSchema } from './schema';
 import Copyright from './Copyright';
 import Hero from './Hero';
@@ -117,7 +115,7 @@ export default function Edit(props) {
               allowedBlocks={'slate'}
               selectedBlock={selectedBlock}
               title={data.placeholder}
-              onSelectBlock={(s, e) => {
+              onSelectBlock={(s) => {
                 setSelectedBlock(s);
               }}
               onChangeFormData={(newFormData) => {
@@ -141,17 +139,7 @@ export default function Edit(props) {
                 }
               }}
               pathname={pathname}
-            >
-              {({ draginfo }, editBlock, blockProps) => (
-                <EditBlockWrapper
-                  draginfo={draginfo}
-                  blockProps={blockProps}
-                  disabled={data.disableInnerButtons}
-                >
-                  {editBlock}
-                </EditBlockWrapper>
-              )}
-            </BlocksForm>
+            />
           </Hero.Text>
           <Hero.Meta {...data}>
             <Metadata {...data} />

package/src/components/Blocks/Hero/Edit.test.jsx

@@ -1,21 +1,27 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
+import { IntlProvider } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import Edit from './Edit';
 import config from '@plone/volto/registry';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+
+// Mock uuid to avoid node:crypto import issues
+jest.mock('uuid', () => ({
+  v4: () => 'mock-uuid-' + Math.random().toString(36).substr(2, 9),
+}));
 
 const mockStore = configureStore([]);
 const observe = jest.fn();
 const unobserve = jest.fn();
+const disconnect = jest.fn();
 jest.mock('@plone/volto/components', () => {
   return {
     __esModule: true,
-    BlocksForm: ({ placeholder, children, onChange, onFocus }) => (
+    BlocksForm: ({ placeholder }) => (
       <div id="test">
         <div>{placeholder}</div>
-        {children}
       </div>
     ),
     SidebarPortal: ({ children }) => <div>{children}</div>,
@@ -34,9 +40,10 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-window.IntersectionObserver = jest.fn((callback) => ({
+window.IntersectionObserver = jest.fn(() => ({
   observe,
   unobserve,
+  disconnect,
 }));
 
 config.blocks = {
@@ -45,6 +52,7 @@ config.blocks = {
       copyrightPrefix: 'Test Prefix',
       schema: {
         title: 'Hero',
+        required: [],
       },
     },
   },
@@ -53,6 +61,7 @@ config.settings = {
   slate: {
     textblockExtensions: [],
   },
+  themeColors: [],
 };
 
 describe('Edit component', () => {
@@ -67,9 +76,11 @@ describe('Edit component', () => {
 
   it('renders without crashing', () => {
     const { container } = render(
-      <Provider store={store}>
-        <Edit onChangeBlock={() => {}} onSelectBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit onChangeBlock={() => {}} onSelectBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
     expect(container).toBeTruthy();
   });
@@ -89,9 +100,11 @@ describe('Edit component', () => {
     };
 
     const { container } = render(
-      <Provider store={store}>
-        <Edit data={data} onChangeBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit data={data} onChangeBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
 
     expect(container.querySelector('#test')).toBeInTheDocument();
@@ -103,15 +116,18 @@ describe('Edit component', () => {
         hero: {
           schema: () => ({
             title: 'Hero',
+            required: [],
           }),
         },
       },
     };
     const onSelectBlock = jest.fn();
     render(
-      <Provider store={store}>
-        <Edit onSelectBlock={onSelectBlock} onChangeBlock={() => {}} />
-      </Provider>,
+      <IntlProvider locale="en" messages={{}}>
+        <Provider store={store}>
+          <Edit onSelectBlock={onSelectBlock} onChangeBlock={() => {}} />
+        </Provider>
+      </IntlProvider>,
     );
   });
 });

package/src/components/Blocks/Hero/Hero.jsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import React, { useMemo, useRef } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import { isImageGif, getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { getImageScaleParams } from '@eeacms/volto-object-widget/helpers';
 import { useFirstVisited } from '@eeacms/volto-hero-block/hooks';
 
 Hero.propTypes = {
-  image: PropTypes.string,
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   fullWidth: PropTypes.bool,
   fullHeight: PropTypes.bool,
   alignContent: PropTypes.string,
@@ -18,46 +17,48 @@ Hero.propTypes = {
   textVariant: PropTypes.string,
 };
 
-function Hero({
-  overlay = true,
-  fullWidth = true,
-  fullHeight = true,
-  children,
-  spaced = false,
-  inverted = true,
-  styles,
-  height,
-  ...props
-}) {
-  const image = getFieldURL(props.image);
-  const isExternal = !isInternalURL(image);
+function Hero(props) {
+  const {
+    image,
+    fullWidth = false,
+    fullHeight = false,
+    height,
+    styles,
+    overlay = true,
+    children,
+    spaced = false,
+    inverted = false,
+  } = props;
+
+  const scaledImage = useMemo(
+    () => (image ? getImageScaleParams(image, 'huge') : null),
+    [image],
+  );
   const { alignContent = 'center', backgroundVariant = 'primary' } =
     styles || {};
-  const bgImgRef = React.useRef();
+  const bgImgRef = useRef();
   const onScreen = useFirstVisited(bgImgRef);
-  const containerCssStyles = React.useMemo(
+  const containerCssStyles = useMemo(
     () => ({
       ...(height && !fullHeight ? { height } : {}),
     }),
     [height, fullHeight],
   );
-
-  const backgroundImageStyle =
-    onScreen && image
-      ? {
-          backgroundImage: isExternal
-            ? `url(${image})`
-            : isImageGif(image)
-            ? `url(${image}/@@images/image)`
-            : `url(${image}/@@images/image/huge)`,
-        }
-      : {};
+  const backgroundImageStyle = useMemo(
+    () =>
+      onScreen && scaledImage
+        ? {
+            backgroundImage: `url(${scaledImage.download})`,
+          }
+        : {},
+    [onScreen, scaledImage],
+  );
 
   return (
     <div
       className={cx(
         'eea hero-block',
-        !image &&
+        !scaledImage &&
           backgroundVariant &&
           !fullWidth &&
           `color-bg-${backgroundVariant}`,
@@ -71,7 +72,7 @@ function Hero({
       <div
         className={cx(
           'hero-block-image-wrapper',
-          !image &&
+          !scaledImage &&
             backgroundVariant &&
             fullWidth &&
             `color-bg-${backgroundVariant}`,
@@ -86,7 +87,7 @@ function Hero({
           ref={bgImgRef}
           style={backgroundImageStyle}
         />
-        {image && overlay && (
+        {scaledImage && overlay && (
           <div className="hero-block-image-overlay dark-overlay-4"></div>
         )}
       </div>