@eeacms/volto-hero-block 7.0.1 → 8.0.0

package/CHANGELOG.md

@@ -4,6 +4,52 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [8.0.0](https://github.com/eea/volto-hero-block/compare/7.1.0...8.0.0) - 28 July 2025
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`61b396a`](https://github.com/eea/volto-hero-block/commit/61b396a72309e7be8cab0d77e92d1159d93a4d70)]
+- chore(release): use * for volto-object-widget instead of develop branch [David Ichim - [`075da00`](https://github.com/eea/volto-hero-block/commit/075da00049b8afc17e200369e544a11d37497d51)]
+- chore: bump major version [Nilesh - [`df4edc7`](https://github.com/eea/volto-hero-block/commit/df4edc70703c74ae89dfcef6dfed28cb63835e02)]
+- style: Automated code fix [eea-jenkins - [`7de43a1`](https://github.com/eea/volto-hero-block/commit/7de43a1730c18530d67cee67b573835eb5457dfe)]
+- style: Automated code fix [eea-jenkins - [`34d6a07`](https://github.com/eea/volto-hero-block/commit/34d6a07ad2d2ef83ef2a4c8c12e5343ca34ac810)]
+
+#### :hammer_and_wrench: Others
+
+- rafactor: do not preload the image as the LCP improvement is negligible [nileshgulia1 - [`dd49a13`](https://github.com/eea/volto-hero-block/commit/dd49a13ddb538d18278631eb46134926e384963d)]
+- revert to background image with image preload [vladcalin-edw - [`34a9533`](https://github.com/eea/volto-hero-block/commit/34a953327e9778c4a34c8c1b587cfe179b0f05ff)]
+- passing tests [vladcalin-edw - [`840ad7b`](https://github.com/eea/volto-hero-block/commit/840ad7b05395c913d712bb90eb64cc3e129f8646)]
+- removed console [vladcalin-edw - [`b47d199`](https://github.com/eea/volto-hero-block/commit/b47d1994fce50a5715580c117775e365ac9ab16c)]
+- fix pipeline and removed alt [vladcalin-edw - [`2183529`](https://github.com/eea/volto-hero-block/commit/218352982b9d2280073ae4b291efb6c843a57ae8)]
+- fix pipeline [vladcalin-edw - [`6be0b71`](https://github.com/eea/volto-hero-block/commit/6be0b71d339c0ae8960b704faa10a9779c3705b0)]
+- conditional image and using Image from core [vladcalin-edw - [`9000d76`](https://github.com/eea/volto-hero-block/commit/9000d7653bc515ec20c1ba96ed78a975a1cd4990)]
+- cleanup [vladcalin-edw - [`167c2b7`](https://github.com/eea/volto-hero-block/commit/167c2b7775016a8247671319f41d654a5fe7d692)]
+- modified Makefile and pipeline pass [vladcalin-edw - [`b7f6d1d`](https://github.com/eea/volto-hero-block/commit/b7f6d1db006d70c45c1bfb00b906f416d8b48f1c)]
+- removed preload, added Image from core, lazy to eager [vladcalin-edw - [`39c4fd1`](https://github.com/eea/volto-hero-block/commit/39c4fd1c120130d65724916ed9e1419c9764d881)]
+- updated tests [vladcalin-edw - [`0a9f94d`](https://github.com/eea/volto-hero-block/commit/0a9f94da3c9089ddd7d3b8ebc60eaf54500b43e1)]
+- passing pipeline [vladcalin-edw - [`3cf0b98`](https://github.com/eea/volto-hero-block/commit/3cf0b988beadc1c7238bceb62cb4ae1328e9eb92)]
+- small fixes [vladcalin-edw - [`e45156f`](https://github.com/eea/volto-hero-block/commit/e45156f7592690b9f06113b799c87cd6d49f6316)]
+- switched to img [vladcalin-edw - [`51e9362`](https://github.com/eea/volto-hero-block/commit/51e9362d8cb04894be032fd602df270dcc2c441f)]
+- background image preload [vladcalin-edw - [`f5b2e20`](https://github.com/eea/volto-hero-block/commit/f5b2e205ae93d4d51b73fd2c6a05659184150f39)]
+### [7.1.0](https://github.com/eea/volto-hero-block/compare/7.0.1...7.1.0) - 28 June 2024
+
+#### :bug: Bug Fixes
+
+- fix(hero): default values for non boolean are set by default not defaultValue [David Ichim - [`608ec21`](https://github.com/eea/volto-hero-block/commit/608ec21f6a3c14ee0b5ec3dc6864650adc0c83bc)]
+
+#### :nail_care: Enhancements
+
+- change(hero): cache containerCssStyles and use it only on top level [David Ichim - [`cd666c8`](https://github.com/eea/volto-hero-block/commit/cd666c86d80d17a1acaca68fd37778976cbb607e)]
+
+#### :house: Internal changes
+
+- chore: package.json [alin - [`516b46f`](https://github.com/eea/volto-hero-block/commit/516b46fc82000ac4ccb4d08c6a71acd4c548385b)]
+
+#### :hammer_and_wrench: Others
+
+- Added back style to the divs as required by the other developers [David Ichim - [`56c6156`](https://github.com/eea/volto-hero-block/commit/56c61566a6338a0147ab7c439b21e7120d2e88e9)]
+- bump package version to 7.1.0 [David Ichim - [`9f4cf35`](https://github.com/eea/volto-hero-block/commit/9f4cf3571205c578aaefcb6ffc6779e3d557f07f)]
+- add height property [dorutrip - [`86b0f13`](https://github.com/eea/volto-hero-block/commit/86b0f13034d7ee3a2c21b5865250af8c5a39b3cc)]
 ### [7.0.1](https://github.com/eea/volto-hero-block/compare/7.0.0...7.0.1) - 13 May 2024
 
 #### :bug: Bug Fixes
@@ -20,7 +66,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`462fff7`](https://github.com/eea/volto-hero-block/commit/462fff7cc0d1898d17a73e4e4e38057642042524)]
 ### [6.0.1](https://github.com/eea/volto-hero-block/compare/6.0.0...6.0.1) - 5 April 2024
 
 #### :house: Internal changes
@@ -77,7 +122,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Allow multiline editing of hero block [Tiberiu Ichim - [`373d1a0`](https://github.com/eea/volto-hero-block/commit/373d1a0d243b8e0b3df31f2a51a3c5df62f48214)]
 - Allow multiline editing of hero block [Tiberiu Ichim - [`b674ca5`](https://github.com/eea/volto-hero-block/commit/b674ca589502a81aaf6abed75dbf8b83ac1731fb)]
 - fix ESlint [Teodor - [`1439495`](https://github.com/eea/volto-hero-block/commit/14394952ef587f71be8b2c762c7e19698d8a55e4)]
-- Add Sonarqube tag using insitu-frontend addons list [EEA Jenkins - [`f133e20`](https://github.com/eea/volto-hero-block/commit/f133e2017ff9c3f13e6c44ce3e6b7757a25b129f)]
 - test: Update jest,Jenkinsfile,lint to volto-addons-template PR30 [valentinab25 - [`de6a206`](https://github.com/eea/volto-hero-block/commit/de6a206bed9afd53d97f5e6d70e2391ccc01f0f1)]
 ### [5.4.6](https://github.com/eea/volto-hero-block/compare/5.4.5...5.4.6) - 27 November 2023
 
@@ -91,16 +135,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`df8242c`](https://github.com/eea/volto-hero-block/commit/df8242c62eb8c706c3854f6bb4a6984932463571)]
 
 #### :hammer_and_wrench: Others
 
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`4ea90f6`](https://github.com/eea/volto-hero-block/commit/4ea90f6a23c92fe631ee6025dbe5ee27ec030665)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`6e9d7f5`](https://github.com/eea/volto-hero-block/commit/6e9d7f593363e08f519ab8296aef229ed2682113)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`067fa27`](https://github.com/eea/volto-hero-block/commit/067fa27ee26d1d348d5ce1b089ea9931d9f32589)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`0f6a259`](https://github.com/eea/volto-hero-block/commit/0f6a259fc73db97a7a8af69a808421191b146629)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`c1c72f4`](https://github.com/eea/volto-hero-block/commit/c1c72f4b54a84521f200682b230bba60e6920a70)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`65744c9`](https://github.com/eea/volto-hero-block/commit/65744c9b2b0944d2aff90fc56485f10390810d1c)]
 ### [5.4.5](https://github.com/eea/volto-hero-block/compare/5.4.4...5.4.5) - 19 October 2023
 
 ### [5.4.4](https://github.com/eea/volto-hero-block/compare/5.4.3...5.4.4) - 19 October 2023
@@ -140,14 +177,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - test: add unit tests for Hero, Edit, helpers, hooks - refs #254313 [ana-oprea - [`89b39af`](https://github.com/eea/volto-hero-block/commit/89b39afe7ad5ce94d341482be91ab55e2c1a31ed)]
 - i18n: Add en [Alin Voinea - [`9cdb7f1`](https://github.com/eea/volto-hero-block/commit/9cdb7f1ff9d81dade3d91551b53cf7200f08937e)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`0fe0d91`](https://github.com/eea/volto-hero-block/commit/0fe0d91fe9c43d10574990e9b163ffc49fe5bee7)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`b1d1446`](https://github.com/eea/volto-hero-block/commit/b1d14467bcde28023b2831235928db1f328d6b0a)]
 ### [5.4.1](https://github.com/eea/volto-hero-block/compare/5.4.0...5.4.1) - 24 July 2023
 
 ### [5.4.0](https://github.com/eea/volto-hero-block/compare/5.3.1...5.4.0) - 12 June 2023
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Deprecate circularity website [valentinab25 - [`395db48`](https://github.com/eea/volto-hero-block/commit/395db484f73c2dd2c56233c120a9620340f17d0b)]
 
 #### :hammer_and_wrench: Others
 
@@ -168,7 +203,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - put return statement [Dobricean Ioan Dorian - [`8eff5fd`](https://github.com/eea/volto-hero-block/commit/8eff5fdf977fcbb8cc952d3f45b577b02ca59cb9)]
 - change name and refactor to be more efficent [Dobricean Ioan Dorian - [`ff24145`](https://github.com/eea/volto-hero-block/commit/ff2414542833998ef282376de3fbda8698287849)]
 - stop-image-disappear over and over [Dobricean Ioan Dorian - [`c5b6f54`](https://github.com/eea/volto-hero-block/commit/c5b6f545ac422d95b8d802349aa4cf27af820829)]
-- Add Sonarqube tag using industry-frontend addons list [EEA Jenkins - [`3d38dd0`](https://github.com/eea/volto-hero-block/commit/3d38dd09a36525bda448f67a6d218bc7690a4cc3)]
 ### [5.3.0](https://github.com/eea/volto-hero-block/compare/5.2.0...5.3.0) - 27 March 2023
 
 #### :rocket: New Features
@@ -207,11 +241,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix onScreen hook error #16 from eea/fix-onscreen-hook [ichim-david - [`9123541`](https://github.com/eea/volto-hero-block/commit/91235413f423d7e6c4788d70b687b3ed5d4884b4)]
 - no need for comments [andreiggr - [`a14f9c3`](https://github.com/eea/volto-hero-block/commit/a14f9c3bdddfa22e6b4bbc8318f0ca5bdc9c2d38)]
 - fix hook [andreiggr - [`f7fae73`](https://github.com/eea/volto-hero-block/commit/f7fae73007f79af2f06da1d9b72a53ad86fef4ac)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`6b78fc0`](https://github.com/eea/volto-hero-block/commit/6b78fc044a933ab9b4b4694901aa26628ef0a836)]
 - eslint [andreiggr - [`68451b7`](https://github.com/eea/volto-hero-block/commit/68451b725420015fbd5b695e97b8742988d49913)]
 - lazy load huge img on first 10px [andreiggr - [`67dc7d3`](https://github.com/eea/volto-hero-block/commit/67dc7d3475188d692e053032c2639dd1a585c029)]
 - lazy load huge bgimage wip [andreiggr - [`86e45ec`](https://github.com/eea/volto-hero-block/commit/86e45ece842f1cd7452920dffa3a9b4aea945f56)]
-- Add Sonarqube tag using ims-frontend addons list [EEA Jenkins - [`87cbb38`](https://github.com/eea/volto-hero-block/commit/87cbb383290a168f85703573670e17f4e1ed7747)]
 ## [4.0.0](https://github.com/eea/volto-hero-block/compare/3.0.1...4.0.0) - 7 February 2023
 
 #### :nail_care: Enhancements
@@ -237,7 +269,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`ab85c7b`](https://github.com/eea/volto-hero-block/commit/ab85c7bd5bd1e3aec95e02f9b4d026b1203d5739)]
 ## [3.0.0](https://github.com/eea/volto-hero-block/compare/2.1.0...3.0.0) - 22 December 2022
 
 #### :rocket: New Features
@@ -246,11 +277,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f06f58c`](https://github.com/eea/volto-hero-block/commit/f06f58c7cd4cfc15a03208e9c7a4e31fe2eba2f6)]
-- Add Sonarqube tag using climate-energy-frontend addons list [EEA Jenkins - [`20e5bcb`](https://github.com/eea/volto-hero-block/commit/20e5bcb3c4dd538595741928319c3204c5d18f8c)]
 - Cosmetics [Alin Voinea - [`9dac70c`](https://github.com/eea/volto-hero-block/commit/9dac70c0a3bea8e188ede9123f4f99de8e0f6987)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`2d4005f`](https://github.com/eea/volto-hero-block/commit/2d4005f0f31b121e1b7d2e94414f3dff92ec1a16)]
-- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`2931fcc`](https://github.com/eea/volto-hero-block/commit/2931fccbee5f8e117e5ae9095ba57e63e465ddb3)]
 ### [2.1.0](https://github.com/eea/volto-hero-block/compare/2.0.0...2.1.0) - 12 December 2022
 
 #### :bug: Bug Fixes
@@ -259,12 +287,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
-- Add Sonarqube tag using bise-frontend addons list [EEA Jenkins - [`93be4f9`](https://github.com/eea/volto-hero-block/commit/93be4f96fb72cacfc25f9b058cb379d80060ee13)]
-- yarn 3 [Alin Voinea - [`8e2dccd`](https://github.com/eea/volto-hero-block/commit/8e2dccd47cbef3c0871407baa376ce61c540c754)]
-- Add Sonarqube tag using marine-frontend addons list [EEA Jenkins - [`6bc3af3`](https://github.com/eea/volto-hero-block/commit/6bc3af35b4edf07971d1b0ce1648965e8d6e3bc0)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`d7dbbd2`](https://github.com/eea/volto-hero-block/commit/d7dbbd21277dd76bf59d91a4dc8e022b2a6ff99c)]
-- Add Sonarqube tag using demo-kitkat-frontend addons list [EEA Jenkins - [`3c1f0d6`](https://github.com/eea/volto-hero-block/commit/3c1f0d6e7f8e5318aee3413ec3687d8492376f9d)]
-- Add Sonarqube tag using forests-frontend addons list [EEA Jenkins - [`843017a`](https://github.com/eea/volto-hero-block/commit/843017aa7dbea71cc7888663496e352d287440b4)]
 ## [2.0.0](https://github.com/eea/volto-hero-block/compare/1.0.0...2.0.0) - 16 November 2022
 
 #### :nail_care: Enhancements
@@ -274,7 +296,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`b8f0971`](https://github.com/eea/volto-hero-block/commit/b8f0971b21a5334d40c1b8f5103cea61d9ffe6f1)]
-- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`581dedf`](https://github.com/eea/volto-hero-block/commit/581dedf07410ef2ca09e6ddaa05fbf176400adbb)]
 ## [1.0.0](https://github.com/eea/volto-hero-block/compare/0.2.0...1.0.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -286,7 +307,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Remove cypress.json [Alin Voinea - [`593bdf2`](https://github.com/eea/volto-hero-block/commit/593bdf207ca4fd3f2393117b6f64a44727881ad0)]
 - test(cypress): Upgrade to Cypress 10 / Razzle 4 [Alin Voinea - [`edd48a5`](https://github.com/eea/volto-hero-block/commit/edd48a5c13824bce5e03e46790f1890656b340d8)]
 - Cleanup [Alin Voinea - [`9d72ee7`](https://github.com/eea/volto-hero-block/commit/9d72ee7a06d1c6fed46586d30bb85eae39e670bf)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`95986d0`](https://github.com/eea/volto-hero-block/commit/95986d0b8fd5c3cbb9e6da9059f71e066a8e171b)]
 ### [0.2.0](https://github.com/eea/volto-hero-block/compare/0.1.4...0.2.0) - 6 July 2022
 
 #### :bug: Bug Fixes
@@ -325,7 +345,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update slate footnote support [Miu Razvan - [`c1522b4`](https://github.com/eea/volto-hero-block/commit/c1522b4164dbe6de01771d211d7e0bf3009f44d4)]
 - Use justify content for text and button as well [Miu Razvan - [`08599cc`](https://github.com/eea/volto-hero-block/commit/08599cc45546d9b349128c4f8ce9c01318385811)]
 - Add dependencies [Miu Razvan - [`30e2881`](https://github.com/eea/volto-hero-block/commit/30e2881a2a97a899e7f4cc614a0405c300ac6fee)]
-- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`b415422`](https://github.com/eea/volto-hero-block/commit/b41542285edd29440a324b101a4dbae9334830bf)]
 ### 0.1.0 - 10 June 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-hero-block",
-  "version": "7.0.1",
+  "version": "8.0.0",
   "description": "@eeacms/volto-hero-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -24,10 +24,10 @@
     "@eeacms/volto-widget-theme-picker": "*"
   },
   "devDependencies": {
-    "cypress": "13.1.0",
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

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

@@ -15,8 +15,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 +116,7 @@ export default function Edit(props) {
               allowedBlocks={'slate'}
               selectedBlock={selectedBlock}
               title={data.placeholder}
-              onSelectBlock={(s, e) => {
+              onSelectBlock={(s) => {
                 setSelectedBlock(s);
               }}
               onChangeFormData={(newFormData) => {

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

@@ -1,21 +1,30 @@
 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';
 
+// 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 }) => (
       <div id="test">
         <div>{placeholder}</div>
-        {children}
+        {typeof children === 'function'
+          ? children({}, <div>Mock Edit Block</div>, {})
+          : children}
       </div>
     ),
     SidebarPortal: ({ children }) => <div>{children}</div>,
@@ -24,6 +33,15 @@ jest.mock('@plone/volto/components', () => {
     RenderBlocks: () => <div></div>,
   };
 });
+
+jest.mock(
+  '@plone/volto/components/manage/Blocks/Block/EditBlockWrapper',
+  () => {
+    return ({ children }) => (
+      <div className="edit-block-wrapper">{children}</div>
+    );
+  },
+);
 jest.mock('react-router-dom', () => ({
   useLocation: jest.fn().mockReturnValue({
     pathname: '/test-jest',
@@ -34,9 +52,10 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-window.IntersectionObserver = jest.fn((callback) => ({
+window.IntersectionObserver = jest.fn(() => ({
   observe,
   unobserve,
+  disconnect,
 }));
 
 config.blocks = {
@@ -45,6 +64,7 @@ config.blocks = {
       copyrightPrefix: 'Test Prefix',
       schema: {
         title: 'Hero',
+        required: [],
       },
     },
   },
@@ -53,6 +73,7 @@ config.settings = {
   slate: {
     textblockExtensions: [],
   },
+  themeColors: [],
 };
 
 describe('Edit component', () => {
@@ -67,9 +88,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 +112,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 +128,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,29 +17,48 @@ Hero.propTypes = {
   textVariant: PropTypes.string,
 };
 
-function Hero({
-  overlay = true,
-  fullWidth = true,
-  fullHeight = true,
-  children,
-  spaced = false,
-  inverted = true,
-  styles,
-  ...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 = useMemo(
+    () => ({
+      ...(height && !fullHeight ? { height } : {}),
+    }),
+    [height, fullHeight],
+  );
+  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}`,
@@ -54,7 +72,7 @@ function Hero({
       <div
         className={cx(
           'hero-block-image-wrapper',
-          !image &&
+          !scaledImage &&
             backgroundVariant &&
             fullWidth &&
             `color-bg-${backgroundVariant}`,
@@ -62,23 +80,14 @@ function Hero({
             'full-width': fullWidth,
           },
         )}
+        style={containerCssStyles}
       >
         <div
           className={cx('hero-block-image', styles?.bg)}
           ref={bgImgRef}
-          style={
-            image && onScreen
-              ? {
-                  backgroundImage: isExternal
-                    ? `url(${image})`
-                    : isImageGif(image)
-                    ? `url(${image}/@@images/image)`
-                    : `url(${image}/@@images/image/huge)`,
-                }
-              : {}
-          }
+          style={backgroundImageStyle}
         />
-        {image && overlay && (
+        {scaledImage && overlay && (
           <div className="hero-block-image-overlay dark-overlay-4"></div>
         )}
       </div>
@@ -87,6 +96,7 @@ function Hero({
           'hero-block-inner-wrapper d-flex',
           `flex-items-${alignContent}`,
         )}
+        style={containerCssStyles}
       >
         <div className="hero-block-body">{children}</div>
       </div>

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

@@ -103,7 +103,7 @@ describe('Hero block', () => {
     const { container } = render(
       <Provider store={store}>
         <Hero
-          image={{ '@type': 'URL', url: 'url_url', href: 'href_url' }}
+          image={[{ '@type': 'URL', url: 'url_url', href: 'href_url' }]}
           overlay={true}
           fullWidth={false}
           fullHeight={true}
@@ -122,10 +122,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
     expect(container.querySelector('.hero-block-image')).toHaveStyle({
       backgroundImage: 'url(url_url)',
     });
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {
@@ -157,10 +157,10 @@ describe('Hero block', () => {
       </Provider>,
     );
 
-    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
     expect(container.querySelector('.hero-block-image')).toHaveStyle({
       backgroundImage: 'url(/foo/bar/@@images/image/huge)',
     });
+    expect(container.querySelector('.eea.hero-block')).toBeInTheDocument();
   });
 
   it('renders a hero component', () => {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import cx from 'classnames';
 import { Icon } from 'semantic-ui-react';
 import { UniversalLink, RenderBlocks } from '@plone/volto/components';
@@ -6,7 +6,8 @@ import { BodyClass } from '@plone/volto/helpers';
 import { useLocation } from 'react-router-dom';
 import Hero from './Hero';
 import Copyright from './Copyright';
-import { serializeText, getFieldURL } from '@eeacms/volto-hero-block/helpers';
+import { serializeText } from '@eeacms/volto-hero-block/helpers';
+import { getFieldURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 const Metadata = ({ buttonLabel, inverted, styles, ...props }) => {
@@ -29,6 +30,7 @@ const View = (props) => {
   const location = useLocation();
   const { data = {} } = props;
   const { text, copyright, copyrightIcon, copyrightPosition } = data;
+  const serializedText = useMemo(() => serializeText(text), [text]);
 
   const metadata = props.metadata || props.properties;
   const copyrightPrefix = config.blocks.blocksConfig.hero.copyrightPrefix || '';
@@ -44,7 +46,7 @@ const View = (props) => {
               content={data?.data || {}}
             />
           ) : (
-            serializeText(text)
+            serializedText
           )}
         </Hero.Text>
         <Hero.Meta {...data}>

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

@@ -5,9 +5,11 @@ import View from './View';
 
 const observe = jest.fn();
 const unobserve = jest.fn();
-window.IntersectionObserver = jest.fn((callback) => ({
+const disconnect = jest.fn();
+window.IntersectionObserver = jest.fn(() => ({
   observe,
   unobserve,
+  disconnect,
 }));
 jest.mock('@plone/volto/components', () => {
   return {
@@ -46,7 +48,7 @@ describe('View Component', () => {
       text: 'Hello, World!',
       copyright: 'Copyright 2023',
       copyrightIcon: 'copyright-icon-class',
-      copyrightPosition: 'bottom',
+      copyrightPosition: 'left',
     };
     render(<View data={data} />);
   });

package/src/components/Blocks/Hero/schema.js

@@ -13,7 +13,7 @@ const ALIGN_INFO_MAP = {
   '': [clearSVG, 'None'],
 };
 
-export const HeroBlockSchema = () => {
+export const HeroBlockSchema = ({ data = {} }) => {
   return {
     title: 'Hero',
     fieldsets: [
@@ -23,6 +23,7 @@ export const HeroBlockSchema = () => {
         fields: [
           'fullWidth',
           'fullHeight',
+          ...(!data?.fullHeight ? ['height'] : []),
           'quoted',
           'spaced',
           'inverted',
@@ -42,27 +43,27 @@ export const HeroBlockSchema = () => {
       fullWidth: {
         title: 'Full width',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       fullHeight: {
         title: 'Full height',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       quoted: {
         title: 'Quoted',
         type: 'boolean',
-        defaultValue: false,
+        default: false,
       },
       spaced: {
         title: 'Spaced',
         type: 'boolean',
-        defaultValue: false,
+        default: false,
       },
       inverted: {
         title: 'Inverted',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       buttonLabel: {
         title: 'Button label',
@@ -75,11 +76,12 @@ export const HeroBlockSchema = () => {
       overlay: {
         title: 'Image darken overlay',
         type: 'boolean',
-        defaultValue: true,
+        default: true,
       },
       image: {
         title: 'Image',
         widget: 'attachedimage',
+        selectedItemAttrs: ['image_field', 'image_scales'],
       },
       copyright: {
         title: 'Text',
@@ -100,7 +102,13 @@ export const HeroBlockSchema = () => {
         title: 'Align',
         widget: 'align',
         actions: ['left', 'right'],
-        defaultValue: 'left',
+        default: 'left',
+      },
+      height: {
+        title: 'Height',
+        description:
+          'Use CSS numeric dimmension (ex: 100px or 20vh). ' +
+          'Images cannnot be made smaller than min-height.',
       },
     },
     required: [],
@@ -133,7 +141,7 @@ export const stylingSchema = (props) => {
         widget: 'align',
         actions: Object.keys(ALIGN_INFO_MAP),
         actionsInfoMap: ALIGN_INFO_MAP,
-        defaultValue: 'has--bg--center',
+        default: 'has--bg--center',
       },
       backgroundVariant: {
         title: 'Background theme',
@@ -155,12 +163,13 @@ export const stylingSchema = (props) => {
           ['center', 'Center'],
           ['end', 'Bottom'],
         ],
+        default: 'center',
       },
       textAlign: {
         title: 'Text align',
         widget: 'align',
         actions: ['left', 'center', 'right'],
-        defaultValue: 'left',
+        default: 'left',
       },
       textVariant: {
         title: 'Text theme',
@@ -192,7 +201,7 @@ export const stylingSchema = (props) => {
         title: 'Button align',
         widget: 'align',
         actions: ['left', 'center', 'right'],
-        defaultValue: 'left',
+        default: 'left',
       },
     },
     required: [],

package/src/components/Blocks/Hero/schema.test.js

@@ -0,0 +1,66 @@
+import { stylingSchema, HeroBlockSchema } from './schema';
+import config from '@plone/volto/registry';
+
+jest.mock('@plone/volto/helpers', () => ({
+  addStyling: jest.fn((schema) => schema),
+}));
+
+export const EMPTY_STYLES_SCHEMA = {
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+  properties: {
+    styles: {},
+  },
+  required: [],
+};
+
+describe('stylingSchema', () => {
+  it('returns the enhanced stylesSchema', () => {
+    const schema = EMPTY_STYLES_SCHEMA;
+    expect(stylingSchema(schema)).not.toBe({});
+  });
+  it('checks if the stylesSchema has desired fields', () => {
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.fieldsets[0].fields,
+    ).toHaveLength(7);
+  });
+
+  it('checks if the backgroundVariant styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.backgroundVariant.colors,
+    ).toHaveLength(1);
+  });
+  it('checks if the Text styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.textVariant.colors,
+    ).toHaveLength(1);
+  });
+  it('checks if the button styles has value', () => {
+    config.settings.themeColors = [{ value: 'primary', title: 'Primary' }];
+    const schema = EMPTY_STYLES_SCHEMA;
+    const stylesSchema = stylingSchema(schema);
+    expect(
+      stylesSchema.properties.styles.schema.properties.buttonVariant.colors,
+    ).toHaveLength(1);
+  });
+});
+
+describe('HeroBlockSchema', () => {
+  it('checks if the hero block schema is valid', () => {
+    const schema = HeroBlockSchema({ data: {} });
+    expect(schema.fieldsets).toHaveLength(2);
+  });
+});

package/src/helpers.js

@@ -1,23 +1,4 @@
 import { serializeNodes } from '@plone/volto-slate/editor/render';
-import isArray from 'lodash/isArray';
-import isObject from 'lodash/isObject';
-import isString from 'lodash/isString';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-export const getFieldURL = (data) => {
-  let url = data;
-  const _isObject = data && isObject(data) && !isArray(data);
-  if (_isObject && data['@type'] === 'URL') {
-    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
-  } else if (_isObject) {
-    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
-  }
-  if (isArray(data)) {
-    url = data.map((item) => getFieldURL(item));
-  }
-  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
-  return url;
-};
 
 const createEmptyHeader = () => {
   return {
@@ -27,13 +8,9 @@ const createEmptyHeader = () => {
 };
 
 export const createSlateHeader = (text) => {
-  return isArray(text) ? text : [createEmptyHeader()];
+  return Array.isArray(text) ? text : [createEmptyHeader()];
 };
 
 export const serializeText = (text) => {
-  return isArray(text) ? serializeNodes(text) : text;
-};
-
-export const isImageGif = (image) => {
-  return image?.endsWith?.('.gif');
+  return Array.isArray(text) ? serializeNodes(text) : text;
 };

package/src/helpers.test.js

@@ -1,9 +1,4 @@
-import {
-  getFieldURL,
-  createSlateHeader,
-  serializeText,
-  isImageGif,
-} from './helpers';
+import { createSlateHeader, serializeText } from './helpers';
 import { isArray } from 'lodash';
 import { serializeNodes } from '@plone/volto-slate/editor/render';
 
@@ -11,94 +6,6 @@ jest.mock('@plone/volto-slate/editor/render', () => ({
   serializeNodes: jest.fn(),
 }));
 
-describe('getFieldURL', () => {
-  it('handles a URL type object with type and value', () => {
-    const data = {
-      '@type': 'URL',
-      value: 'value_url',
-      url: 'url_url',
-      href: 'href_url',
-    };
-    expect(getFieldURL(data)).toEqual('value_url');
-  });
-
-  it('handles an object with type and url', () => {
-    const data = {
-      '@type': 'URL',
-      url: 'url_url',
-      href: 'href_url',
-    };
-    expect(getFieldURL(data)).toEqual('url_url');
-  });
-
-  it('handles an object with type and href', () => {
-    const data = {
-      '@type': 'URL',
-      href: 'href_url',
-    };
-    expect(getFieldURL(data)).toEqual('href_url');
-  });
-
-  it('handles an object with type and no value, url and href', () => {
-    const data = {
-      '@type': 'URL',
-    };
-    expect(getFieldURL(data)).toEqual({ '@type': 'URL' });
-  });
-
-  it('handles an object without a specific type and url', () => {
-    const data = {
-      url: 'url_url',
-      href: 'href_url',
-    };
-    expect(getFieldURL(data)).toEqual('url_url');
-  });
-
-  it('handles an object without a specific type and href', () => {
-    const data = {
-      href: 'href_url',
-    };
-    expect(getFieldURL(data)).toEqual('href_url');
-  });
-
-  it('handles an object without a specific type and no id, url, href', () => {
-    const data = {
-      test: 'test_url',
-    };
-    expect(getFieldURL(data)).toEqual({
-      test: 'test_url',
-    });
-  });
-
-  it('handles an array', () => {
-    const data = [
-      {
-        '@type': 'URL',
-        value: 'value_url',
-        url: 'url_url',
-        href: 'href_url',
-      },
-      {
-        '@id': 'id_url',
-        url: 'url_url',
-        href: 'href_url',
-      },
-    ];
-    expect(getFieldURL(data)).toEqual(['value_url', 'id_url']);
-  });
-
-  it('handles a string', () => {
-    const data = '/some/url';
-    expect(getFieldURL(data)).toEqual('/some/url');
-  });
-
-  it('returns the data unchanged for non-object/non-array/non-string inputs', () => {
-    expect(getFieldURL(42)).toEqual(42);
-    expect(getFieldURL(undefined)).toEqual(undefined);
-    expect(getFieldURL(null)).toEqual(null);
-  });
-});
-
 describe('createSlateHeader', () => {
   it('should return the text if it is an array', () => {
     const text = ['some', 'text'];
@@ -133,27 +40,3 @@ describe('serializeText', () => {
     expect(serializeNodes).toHaveBeenCalledWith(text);
   });
 });
-
-describe('isImageGif', () => {
-  it('should return true when input is a gif image', () => {
-    const input = 'image.gif';
-    const result = isImageGif(input);
-    expect(result).toBeTruthy();
-  });
-
-  it('should return false when input is not a gif image', () => {
-    const input = 'image.jpg';
-    const result = isImageGif(input);
-    expect(result).toBeFalsy();
-  });
-
-  it('should return false when input is null or undefined', () => {
-    let input;
-    let result = isImageGif(input);
-    expect(result).toBeFalsy();
-
-    input = null;
-    result = isImageGif(input);
-    expect(result).toBeFalsy();
-  });
-});

package/src/hooks.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, act } from '@testing-library/react';
 import { useFirstVisited } from './hooks';
 
 let observerCallback;
@@ -16,6 +16,12 @@ window.IntersectionObserver = jest.fn((callback) => {
 });
 
 describe('useFirstVisited', () => {
+  beforeEach(() => {
+    observeMock.mockClear();
+    unobserveMock.mockClear();
+    disconnectMock.mockClear();
+  });
+
   it('should observe and unobserve the ref element', () => {
     const ref = { current: {} };
     const rootMargin = '10px';
@@ -31,7 +37,9 @@ describe('useFirstVisited', () => {
     expect(container.textContent).toBe('Not Intersected');
 
     // Simulate the element becoming visible in the viewport
-    observerCallback([{ isIntersecting: true }]);
+    act(() => {
+      observerCallback([{ isIntersecting: true }]);
+    });
 
     // Re-render: Intersected
     expect(container.textContent).toBe('Intersected');
@@ -44,7 +52,7 @@ describe('useFirstVisited', () => {
     expect(disconnectMock).toHaveBeenCalled();
   });
 
-  it('should not observe when intersected is true', () => {
+  it('should stay intersected once it becomes true', () => {
     const ref = { current: {} };
 
     const TestComponent = () => {
@@ -58,17 +66,15 @@ describe('useFirstVisited', () => {
     expect(container.textContent).toBe('Not Intersected');
 
     // Simulate the element becoming visible in the viewport
-    observerCallback([{ isIntersecting: true }]);
+    act(() => {
+      observerCallback([{ isIntersecting: true }]);
+    });
 
     // Re-render: Intersected
     expect(container.textContent).toBe('Intersected');
 
-    // Simulate another render
-    // Intersected should stay true and not observe again
-    observerCallback([{ isIntersecting: false }]);
-
-    // Re-render: Intersected
-    expect(container.textContent).toBe('Not Intersected');
-    // expect(observeMock).not.toHaveBeenCalled();
+    // Once intersected is true, it should stay true regardless of further callbacks
+    // The hook should not set up a new observer when intersected is already true
+    expect(container.textContent).toBe('Intersected');
   });
 });