@plone/volto 18.15.1 → 18.17.0

package/CHANGELOG.md

@@ -17,6 +17,23 @@ 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
+
+- Rename `vitest.config.ts` to `vitest.config.mjs` for allowing it to be loaded from add-ons. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+
+### Bugfix
+
+- Added missing dependency for `sgvo`. Fixed `svgo` library loading in `./vite-plugins/svg.js`. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+- Rename `./vite-plugins/svg.js` to proper extension `vite-plugins/svg.mjs`. @sneridagh [#7035](https://github.com/plone/volto/issues/7035)
+
 ## 18.15.1 (2025-04-30)
 
 ### Internal

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.15.1",
+  "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",
@@ -349,6 +349,7 @@
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-prettier": "5.0.0",
     "svg-loader": "0.0.2",
+    "svgo": "^3.0.0",
     "svgo-loader": "3.0.3",
     "terser-webpack-plugin": "5.3.6",
     "tmp": "0.2.1",

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);

package/vite-plugins/{svg.js → svg.mjs}

@@ -52,7 +52,7 @@ export function svgLoader(options = {}) {
 
       const match = content.match(/<svg([^>]+)+>([\s\S]+)<\/svg>/i);
       let attrs = {};
-      // console.log(content);
+
       if (match) {
         attrs = match[1];
         if (attrs) {

package/{vitest.config.ts → vitest.config.mjs}

@@ -1,7 +1,16 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import path from 'path';
-import { svgLoader } from './vite-plugins/svg.js';
+import { svgLoader } from './vite-plugins/svg.mjs';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const projectRoot = path.resolve(__dirname);
 
 export default defineConfig({
   plugins: [
@@ -10,12 +19,19 @@ export default defineConfig({
       svgoConfig: {
         plugins: [
           {
-            name: 'removeViewBox',
-            active: false,
+            name: 'preset-default',
+            params: {
+              overrides: {
+                convertPathData: false,
+                removeViewBox: false,
+              },
+            },
           },
+          'removeTitle',
+          'removeUselessStrokeAndFill',
         ],
       },
-    }) as any,
+    }),
   ],
   resolve: {
     alias: {
@@ -36,12 +52,12 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: [
-      './test-setup-globals-vitest.js',
-      './test-setup-config.jsx',
-      './jest-setup-afterenv.js',
-      './jest-addons-loader.js',
+      `${projectRoot}/test-setup-globals-vitest.js`,
+      `${projectRoot}/test-setup-config.jsx`,
+      `${projectRoot}/jest-setup-afterenv.js`,
+      `${projectRoot}/jest-addons-loader.js`,
     ],
-    globalSetup: './global-test-setup.js',
+    globalSetup: `${projectRoot}/global-test-setup.js`,
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],

package/src/components/manage/Widgets/FileWidget.test.jsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-intl-redux';
-import { render, waitFor } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-import FileWidget from './FileWidget';
-
-vi.spyOn(global.Date, 'now').mockImplementation(() => 1234567890);
-
-const mockStore = configureStore();
-
-const createStore = () =>
-  mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-
-describe('FileWidget', () => {
-  beforeEach(() => {
-    vi.clearAllTimers();
-    Object.defineProperty(global.Image.prototype, 'complete', {
-      get() {
-        return true;
-      },
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  test('renders an empty file widget component', async () => {
-    const store = createStore();
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-        />
-      </Provider>,
-    );
-
-    await waitFor(
-      () => {
-        expect(container.querySelector('.file-widget-dropzone')).toBeTruthy();
-      },
-      { timeout: 1000 },
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('renders a file widget component with value', async () => {
-    const store = createStore();
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            download: 'http://myfile',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: '',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(
-      () => {
-        const dropzone = container.querySelector('.file-widget-dropzone');
-        const preview = container.querySelector('.image-preview');
-        const filename = container.querySelector('.field-file-name');
-
-        return dropzone && preview && filename;
-      },
-      { timeout: 1000 },
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-
-  test('renders a file widget component with value in raw data', async () => {
-    const store = createStore();
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            data: 'oiweurtksdgfjaslfqw9523563456',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: 'base64',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(
-      () => {
-        const dropzone = container.querySelector('.file-widget-dropzone');
-        const filename = container.querySelector('.field-file-name');
-
-        return dropzone && filename;
-      },
-      { timeout: 1000 },
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});