@plone/volto 18.0.0-alpha.4 → 18.0.0-alpha.6

package/.eslintignore

@@ -0,0 +1 @@
+types/

package/.release-it.json

@@ -15,6 +15,7 @@
     "publish": false
   },
   "git": {
+    "commitArgs": ["--no-verify"],
     "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
     "requireUpstream": false,
     "requireCleanWorkingDir": false

package/CHANGELOG.md

@@ -17,6 +17,61 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.6 (2024-01-02)
+
+### Feature
+
+- Added support for custom CSS properties in the `StyleWrapper`. @sneridagh [#5581](https://github.com/plone/volto/issues/5581)
+
+### Bugfix
+
+- Use a textarea in the form for editing an existing comment. @Ravi-kumar9347 [#5265](https://github.com/plone/volto/issues/5265)
+- The hamburger icon to open the mobile/tablet navigation is now hidden if there are no navigation items. @Aarav238 [#5353](https://github.com/plone/volto/issues/5353)
+- Fix preview image component @steffenri [#5379](https://github.com/plone/volto/issues/5379)
+- Fix autopopulated value of facet when settings the value for another one. @iFlameing [#5432](https://github.com/plone/volto/issues/5432)
+- Fix sitemap for multilingual sites
+  [erral] [#5501](https://github.com/plone/volto/issues/5501)
+- Replace createRef with useRef in SidebarPopup
+  [razvanMiu] [#5519](https://github.com/plone/volto/issues/5519)
+- Fixed the project generator's ESLint configuration, added code quality checks to the CI to ensure a generated project can run these checks, and added documentation for how to reconfigure ESLint in projects. @sneridagh [#5530](https://github.com/plone/volto/issues/5530)
+- Fixed edge case error in Unauthorised page and Login route behavior @sneridagh [#5536](https://github.com/plone/volto/issues/5536)
+- changed typo of pnp to pnpm. @ujjwaleee26 [#5537](https://github.com/plone/volto/issues/5537)
+
+### Internal
+
+- Added Cypress tests to verify that the modal dialog for deleting linked items pops up correctly. @Molochem [#5529](https://github.com/plone/volto/issues/5529)
+- Fix stylelint violations @sneridagh [#5544](https://github.com/plone/volto/issues/5544)
+- Update Plone to 6.0.9 @sneridagh [#5562](https://github.com/plone/volto/issues/5562)
+
+### Documentation
+
+- Removed outdated acceptance tests docs @sneridagh [#5533](https://github.com/plone/volto/issues/5533)
+- Add `how-to-restrict-blocks` to `recipes/index.md`, avoiding Sphinx warning. @stevepiercy [#5546](https://github.com/plone/volto/issues/5546)
+- Point developers to correct installation documentation, replaced yarn commands with pnpm, and correct some misspellings. We also now use includes to keep instructions consistent within Volto and in the main Plone 6 documentation. Finally the `NVM_VERSION` substitution now works. @ujjwaleee26 @stevepiercy [#5556](https://github.com/plone/volto/issues/5556)
+- Fix redirects. @stevepiercy [#5563](https://github.com/plone/volto/issues/5563)
+- Fix redirect for `nvm.fish`. @stevepiercy [#5569](https://github.com/plone/volto/issues/5569)
+
+## 18.0.0-alpha.5 (2023-12-13)
+
+### Feature
+
+- Added conditional variations support. @sneridagh @robgietema [#5424](https://github.com/plone/volto/issues/5424)
+- Added `navRoot` and `contentType` to `restricted` key in blocks configuration. @sneridagh [#5517](https://github.com/plone/volto/issues/5517)
+- Add support for `preview_image_link` behavior in Volto Image component @sneridagh [#5523](https://github.com/plone/volto/issues/5523)
+
+### Internal
+
+- Add missing dependency on jsdom @sneridagh [#5490](https://github.com/plone/volto/issues/5490)
+- Fix cypress artifacts path in acceptance tests. @davisagli [#5498](https://github.com/plone/volto/issues/5498)
+- Make sure that the dependencies are built and available on all processes @sneridagh [#5514](https://github.com/plone/volto/issues/5514)
+
+### Documentation
+
+- Less comment blocks must have `*` as the first character on the second and subsequent lines, else the Pygments lexer fails. @stevepiercy [#5500](https://github.com/plone/volto/issues/5500)
+- Revert #5500. See #5499 for actual cause of Pygments failure. @stevepiercy [#5504](https://github.com/plone/volto/issues/5504)
+- Clarified where to run Make commands for building documentation. @stevepiercy [#5505](https://github.com/plone/volto/issues/5505)
+- Changed installation of Vale from manual to automatic via `make docs-vale`. @stevepiercy [#5508](https://github.com/plone/volto/issues/5508)
+
 ## 18.0.0-alpha.4 (2023-12-02)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.4",
+  "version": "18.0.0-alpha.6",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -189,7 +189,7 @@
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
     "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -312,9 +312,9 @@
     "webpack-node-externals": "3.0.0",
     "xmlrpc": "1.3.2",
     "yarnhook": "0.5.1",
-    "@plone/registry": "1.0.1",
-    "@plone/scripts": "3.1.0",
-    "@plone/volto-slate": "18.0.0-alpha.4"
+    "@plone/registry": "1.2.0",
+    "@plone/volto-slate": "18.0.0-alpha.5",
+    "@plone/scripts": "3.1.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
@@ -344,6 +344,7 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
+    "jsdom": "^16.7.0",
     "jsonwebtoken": "9.0.0",
     "react-error-overlay": "6.0.9",
     "react-is": "^16.13.1",
@@ -374,11 +375,13 @@
     "start:prod": "NODE_ENV=production node build/server.js",
     "prettier": "./node_modules/.bin/prettier --single-quote --check '{src,cypress}/**/*.{js,jsx,ts,tsx}' --check '*.js'",
     "prettier:fix": "./node_modules/.bin/prettier --single-quote --write '{src,cypress}/**/*.{js,jsx,ts,tsx}' --write '*.js'",
+    "prettier:husky": "prettier --single-quote --write",
     "stylelint": "./node_modules/.bin/stylelint 'theme/**/*.{css,less}' 'src/**/*.{css,less}'",
     "stylelint:overrides": "./node_modules/.bin/stylelint 'theme/**/*.overrides' 'src/**/*.overrides'",
     "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
     "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
     "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:husky": "eslint --max-warnings=0 --fix",
     "i18n": "rm -rf build/messages && NODE_ENV=production i18n",
     "i18n:ci": "pnpm i18n && git diff -G'^[^\"POT]' --exit-code",
     "typecheck": "tsc --project tsconfig.json --noEmit",

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

@@ -315,6 +315,9 @@ class Add extends Component {
           <Form
             ref={this.form}
             key="translated-or-new-content-form"
+            navRoot={
+              this.props.content?.['@components']?.navroot?.navroot || {}
+            }
             schema={this.props.schema}
             type={this.props.type}
             formData={{
@@ -334,6 +337,9 @@ class Add extends Component {
               // Copy the Language Independent Fields values from the to-be translated content
               // into the default values of the translated content Add form.
               ...lifData(),
+              parent: {
+                '@id': this.props.content?.['@id'] || '',
+              },
             }}
             requestError={this.state.error}
             onSubmit={this.onSubmit}

package/src/components/manage/BlockChooser/BlockChooser.jsx

@@ -31,6 +31,8 @@ const BlockChooser = ({
   blocksConfig = config.blocks.blocksConfig,
   blockChooserRef,
   properties = {},
+  navRoot,
+  contentType,
 }) => {
   const intl = useIntl();
   const hasAllowedBlocks = !isEmpty(allowedBlocks);
@@ -55,7 +57,7 @@ const BlockChooser = ({
         // depending on this function, given properties (current present blocks) and the
         // block being evaluated
         return typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
+          ? !item.restricted({ properties, block: item, navRoot, contentType })
           : !item.restricted;
       }
     }

package/src/components/manage/BlockChooser/BlockChooserButton.jsx

@@ -54,7 +54,10 @@ const BlockChooserButton = (props) => {
     blocksConfig,
     buttonComponent,
     properties,
+    navRoot,
+    contentType,
   } = props;
+
   const { disableNewBlocks } = data;
   const [addNewBlockOpened, setAddNewBlockOpened] = React.useState(false);
 
@@ -142,6 +145,8 @@ const BlockChooserButton = (props) => {
               properties={properties}
               showRestricted={showRestricted}
               ref={blockChooserRef}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           </div>
         </Portal>

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -28,6 +28,8 @@ const BlocksForm = (props) => {
     pathname,
     onChangeField,
     properties,
+    type,
+    navRoot,
     onChangeFormData,
     selectedBlock,
     multiSelected,
@@ -260,6 +262,8 @@ const BlocksForm = (props) => {
               pathname,
               metadata,
               properties,
+              contentType: type,
+              navRoot,
               blocksConfig,
               selected: selectedBlock === childId,
               multiSelected: multiSelected?.includes(childId),

package/src/components/manage/Blocks/Block/DefaultEdit.jsx

@@ -7,7 +7,7 @@ import DefaultBlockView from './DefaultView';
 
 const DefaultBlockEdit = (props) => {
   const { blocksConfig = config.blocks.blocksConfig } = props;
-  const { data, onChangeBlock, block, selected } = props;
+  const { data, onChangeBlock, block, selected, navRoot, contentType } = props;
   const intl = useIntl();
   const blockSchema = blocksConfig?.[data['@type']]?.blockSchema;
   const schema =
@@ -32,6 +32,8 @@ const DefaultBlockEdit = (props) => {
               });
             }}
             formData={data}
+            navRoot={navRoot}
+            contentType={contentType}
           />
         </SidebarPortal>
       ) : (

package/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -3,6 +3,7 @@ import { Icon } from '@plone/volto/components';
 import {
   blockHasValue,
   buildStyleClassNamesFromData,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
@@ -47,14 +48,18 @@ const EditBlockWrapper = (props) => {
     editable,
     properties,
     showBlockChooser,
+    navRoot,
+    contentType,
   } = blockProps;
+
   const visible = selected && !hideHandler(data);
 
   const required = isBoolean(data.required)
     ? data.required
     : includes(config.blocks.requiredBlocks, type);
 
-  const styles = buildStyleClassNamesFromData(data.styles);
+  const classNames = buildStyleClassNamesFromData(data.styles);
+  const style = buildStyleObjectFromData(data.styles);
 
   return (
     <div
@@ -63,9 +68,10 @@ const EditBlockWrapper = (props) => {
       // Right now, we can have the alignment information in the styles property or in the
       // block data root, we inject the classname here for having control over the whole
       // Block Edit wrapper
-      className={cx(`block-editor-${data['@type']}`, styles, {
+      className={cx(`block-editor-${data['@type']}`, classNames, {
         [data.align]: data.align,
       })}
+      style={style}
     >
       <div style={{ position: 'relative' }}>
         <div
@@ -107,6 +113,8 @@ const EditBlockWrapper = (props) => {
               blocksConfig={blocksConfig}
               size="24px"
               properties={properties}
+              navRoot={navRoot}
+              contentType={contentType}
             />
           )}
         </div>

package/src/components/manage/Blocks/Block/Settings.jsx

@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
 
-const Settings = ({ data, block, onChangeBlock, schema }) => {
+const Settings = ({
+  data,
+  block,
+  onChangeBlock,
+  schema,
+  navRoot,
+  contentType,
+}) => {
   return (
     <BlockDataForm
       schema={schema}
@@ -17,6 +24,8 @@ const Settings = ({ data, block, onChangeBlock, schema }) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       applySchemaEnhancers={false}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Block/StyleWrapper.jsx

@@ -3,10 +3,12 @@ import cx from 'classnames';
 import {
   buildStyleClassNamesFromData,
   buildStyleClassNamesExtenders,
+  buildStyleObjectFromData,
 } from '@plone/volto/helpers';
 
 const StyleWrapper = (props) => {
-  let classNames = [];
+  let classNames,
+    style = [];
   const { children, content, data = {}, block } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
@@ -16,11 +18,15 @@ const StyleWrapper = (props) => {
     data,
     classNames,
   });
+
+  style = buildStyleObjectFromData(data.styles);
+
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
         className: cx([child.props.className, ...classNames]),
+        style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);
     }

package/src/components/manage/Blocks/Container/Data.jsx

@@ -2,7 +2,8 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 const ContainerData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const schema = blocksConfig[data['@type']].blockSchema({ intl });
@@ -25,6 +26,8 @@ const ContainerData = (props) => {
       block={block}
       onChangeBlock={onChangeBlock}
       blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Grid/View.jsx

@@ -5,7 +5,7 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const GridBlockView = (props) => {
-  const { data, path, className } = props;
+  const { data, path, className, style } = props;
   const metadata = props.metadata || props.properties;
   const columns = data.blocks_layout.items;
   const blocksConfig =
@@ -22,6 +22,7 @@ const GridBlockView = (props) => {
         three: columns?.length === 3,
         four: columns?.length === 4,
       })}
+      style={style}
     >
       {data.headline && <h2 className="headline">{data.headline}</h2>}
 

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -4,7 +4,7 @@ import schemaHero from './schema.js';
 import { BlockDataForm } from '@plone/volto/components';
 
 const HeroImageLeftBlockData = (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { block, data, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = schemaHero({ ...props, intl });
   return (
@@ -20,6 +20,8 @@ const HeroImageLeftBlockData = (props) => {
       onChangeBlock={onChangeBlock}
       formData={data}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Image/ImageSidebar.jsx

@@ -9,7 +9,8 @@ import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
 
 const ImageSidebar = (props) => {
-  const { blocksConfig, data, block, onChangeBlock } = props;
+  const { blocksConfig, data, block, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = ImageSchema({ formData: data, intl });
   return (
@@ -94,6 +95,8 @@ const ImageSidebar = (props) => {
         formData={data}
         block={block}
         blocksConfig={blocksConfig}
+        navRoot={navRoot}
+        contentType={contentType}
       />
     </>
   );

package/src/components/manage/Blocks/Image/View.jsx

@@ -9,7 +9,7 @@ import {
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-export const View = ({ className, data, detached, properties }) => {
+export const View = ({ className, data, detached, properties, style }) => {
   const href = data?.href?.[0]?.['@id'] || '';
 
   const Image = config.getComponent({ name: 'Image' }).component;
@@ -25,6 +25,7 @@ export const View = ({ className, data, detached, properties }) => {
         data.align,
         className,
       )}
+      style={style}
     >
       {data.url && (
         <>

package/src/components/manage/Blocks/Listing/ListingData.jsx

@@ -4,7 +4,8 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 const ListingData = (props) => {
-  const { data, block, blocksConfig, onChangeBlock } = props;
+  const { data, block, blocksConfig, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
   const schema = blocksConfig.listing.blockSchema({
     ...props,
@@ -25,6 +26,8 @@ const ListingData = (props) => {
       formData={data}
       blocksConfig={blocksConfig}
       block={block}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Listing/View.jsx

@@ -6,11 +6,12 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import { ListingBlockBody as ListingBody } from '@plone/volto/components';
 
 const View = (props) => {
-  const { data, path, pathname, className } = props;
+  const { data, path, pathname, className, style } = props;
 
   return (
     <div
       className={cx('block listing', data.variation || 'default', className)}
+      style={style}
     >
       <ListingBody {...props} path={path ?? pathname} />
     </div>

package/src/components/manage/Blocks/Maps/MapsSidebar.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const MapsSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = MapsSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const MapsSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

package/src/components/manage/Blocks/Search/SearchBlockEdit.jsx

@@ -26,6 +26,8 @@ const SearchBlockEdit = (props) => {
     data,
     selected,
     intl,
+    navRoot,
+    contentType,
     onTriggerSearch,
     querystring = {},
   } = props;
@@ -83,6 +85,8 @@ const SearchBlockEdit = (props) => {
           }}
           onChangeBlock={onChangeBlock}
           formData={data}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       </SidebarPortal>
     </>

package/src/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -96,9 +96,21 @@ function normalizeState({
   const { types: facetWidgetTypes } =
     config.blocks.blocksConfig.search.extensions.facetWidgets;
 
+  // Here, we are removing the QueryString of the Listing ones, which is present in the Facet
+  // because we already initialize the facet with those values.
+  const configuredFacets = facetSettings
+    ? facetSettings.map((facet) => facet?.field?.value)
+    : [];
+
+  let copyOfQuery = query.query ? [...query.query] : [];
+
+  const queryWithoutFacet = copyOfQuery.filter((query) => {
+    return !configuredFacets.includes(query.i);
+  });
+
   const params = {
     query: [
-      ...(query.query || []),
+      ...(queryWithoutFacet || []),
       ...(facetSettings || []).map((facet) => {
         if (!facet?.field) return null;
 
@@ -261,14 +273,34 @@ const withSearch = (options) => (WrappedComponent) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const configuredFacets =
       data.facets?.map((facet) => facet?.field?.value) || [];
+
+    // Here we are getting the initial value of the facet if Listing Query contains the same criteria as
+    // facet.
+    const queryData = data?.query?.query
+      ? deserializeQuery(JSON.stringify(data?.query?.query))
+      : [];
+
+    let intializeFacetWithQueryValue = [];
+
+    for (let value of configuredFacets) {
+      const queryString = queryData.find((item) => item.i === value);
+      if (queryString) {
+        intializeFacetWithQueryValue = [
+          ...intializeFacetWithQueryValue,
+          { [queryString.i]: queryString.v },
+        ];
+      }
+    }
+
     const multiFacets = data.facets
       ?.filter((facet) => facet?.multiple)
       .map((facet) => facet?.field?.value);
     const [facets, setFacets] = React.useState(
       Object.assign(
         {},
-        ...urlQuery.map(({ i, v }) => ({ [i]: v })), // TODO: the 'o' should be kept. This would be a major refactoring of the facets
-
+        ...urlQuery.map(({ i, v }) => ({ [i]: v })),
+        // TODO: the 'o' should be kept. This would be a major refactoring of the facets
+        ...intializeFacetWithQueryValue,
         // support for simple filters like ?Subject=something
         // TODO: since the move to hash params this is no longer working.
         // We'd have to treat the location.search and manage it just like the
@@ -288,8 +320,17 @@ const withSearch = (options) => (WrappedComponent) => {
     );
     const previousUrlQuery = usePrevious(urlQuery);
 
+    // During first render the previousUrlQuery is undefined and urlQuery
+    // is empty so it ressetting the facet when you are navigating but during reload we have urlQuery and we need
+    // to set the facet at first render.
+    const preventOverrideOfFacetState =
+      previousUrlQuery === undefined && urlQuery.length === 0;
+
     React.useEffect(() => {
-      if (!isEqual(urlQuery, previousUrlQuery)) {
+      if (
+        !isEqual(urlQuery, previousUrlQuery) &&
+        !preventOverrideOfFacetState
+      ) {
         setFacets(
           Object.assign(
             {},
@@ -319,6 +360,7 @@ const withSearch = (options) => (WrappedComponent) => {
       locationSearchData,
       multiFacets,
       previousUrlQuery,
+      preventOverrideOfFacetState,
     ]);
 
     const [sortOn, setSortOn] = React.useState(data?.query?.sort_on);

package/src/components/manage/Blocks/Teaser/Data.jsx

@@ -14,7 +14,8 @@ const messages = defineMessages({
 });
 
 const TeaserData = (props) => {
-  const { block, blocksConfig, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock, navRoot, contentType } =
+    props;
   const intl = useIntl();
 
   const reset = () => {
@@ -64,6 +65,8 @@ const TeaserData = (props) => {
       block={block}
       blocksConfig={blocksConfig}
       headerActions={HeaderActions}
+      navRoot={navRoot}
+      contentType={contentType}
     />
   );
 };

package/src/components/manage/Blocks/Teaser/DefaultBody.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const TeaserDefaultTemplate = (props) => {
-  const { className, data, isEditMode } = props;
+  const { className, data, isEditMode, style } = props;
   const intl = useIntl();
   const href = data.href?.[0];
   const image = data.preview_image?.[0];
@@ -27,7 +27,7 @@ const TeaserDefaultTemplate = (props) => {
   const { openExternalLinkInNewTab } = config.settings;
 
   return (
-    <div className={cx('block teaser', className)}>
+    <div className={cx('block teaser', className)} style={style}>
       <>
         {!href && isEditMode && (
           <Message>

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

@@ -27,6 +27,8 @@ class Edit extends Component {
             onChangeBlock={this.props.onChangeBlock}
             formData={this.props.data}
             block={this.props.block}
+            navRoot={this.props.navRoot}
+            contentType={this.props.contentType}
           />
         </SidebarPortal>
       </>

package/src/components/manage/Blocks/Video/VideoSidebar.jsx

@@ -18,7 +18,7 @@ const messages = defineMessages({
 });
 
 const VideoSidebar = (props) => {
-  const { data, block, onChangeBlock } = props;
+  const { data, block, onChangeBlock, navRoot, contentType } = props;
   const intl = useIntl();
   const schema = VideoBlockSchema({ ...props, intl });
 
@@ -42,6 +42,8 @@ const VideoSidebar = (props) => {
           onChangeBlock={onChangeBlock}
           formData={data}
           block={block}
+          navRoot={navRoot}
+          contentType={contentType}
         />
       )}
     </>

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

@@ -286,6 +286,7 @@ class Edit extends Component {
       <Form
         isEditForm
         ref={this.form}
+        navRoot={this.props.content?.['@components']?.navroot?.navroot || {}}
         schema={this.props.schema}
         type={this.props.content?.['@type']}
         formData={this.props.content}