@plone/volto 18.16.0 → 18.17.0

package/CHANGELOG.md

@@ -17,6 +17,12 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.17.0 (2025-05-06)
+
+### Feature
+
+- Added `contained` class if `isContainer` prop is passed (from containers). @sneridagh [#7043](https://github.com/plone/volto/issues/7043)
+
 ## 18.16.0 (2025-05-01)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.16.0",
+  "version": "18.17.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -237,8 +237,8 @@
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^8.3.2",
     "@plone/registry": "2.5.3",
-    "@plone/scripts": "3.9.0",
-    "@plone/volto-slate": "18.3.0"
+    "@plone/volto-slate": "18.3.0",
+    "@plone/scripts": "3.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

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

@@ -359,6 +359,7 @@ const BlocksForm = (props) => {
                 editable,
                 showBlockChooser: selectedBlock === childId,
                 detached: isContainer,
+                isContainer,
                 // Properties to pass to the BlocksForm to match the View ones
                 content: properties,
                 history,

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

@@ -122,7 +122,7 @@ export class Edit extends Component {
    */
   render() {
     const { blocksConfig = config.blocks.blocksConfig } = this.props;
-    const { editable, type } = this.props;
+    const { editable, type, isContainer: parentIsContainer } = this.props;
 
     const disableNewBlocks = this.props.data?.disableNewBlocks;
 
@@ -198,6 +198,7 @@ export class Edit extends Component {
               {...this.props}
               blockNode={this.blockNode}
               data={this.props.data}
+              className={cx({ contained: parentIsContainer })}
             />
             {this.props.manage && (
               <SidebarPortal

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

@@ -9,7 +9,13 @@ import {
 const StyleWrapper = (props) => {
   let classNames,
     style = [];
-  const { block, children, content, data = {}, isContainer } = props;
+  const {
+    block,
+    children,
+    content,
+    data = {},
+    isContainer: parentIsContainer,
+  } = props;
   classNames = buildStyleClassNamesFromData(data.styles);
 
   classNames = buildStyleClassNamesExtenders({
@@ -24,14 +30,16 @@ const StyleWrapper = (props) => {
     '',
     // If we are rendering blocks inside a container, then pass also the data from the container
     // This is needed in order to calculate properly the styles for the blocks inside the container
-    isContainer && content.blocks ? content : {},
+    parentIsContainer && content.blocks ? content : {},
   );
 
   const rewrittenChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const childProps = {
         ...props,
-        className: cx([child.props.className, ...classNames]),
+        className: cx([child.props.className, ...classNames], {
+          contained: parentIsContainer,
+        }),
         style: { ...child.props.style, ...style },
       };
       return React.cloneElement(child, childProps);