@plone/volto 19.3.1 → 19.4.0

package/CHANGELOG.md

@@ -17,6 +17,17 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.4.0 (2026-09-03)
+
+### Feature
+
+- Added a `UserAvatar` component, used by the toolbar to render the signed-in user's avatar. Add-ons can now change that avatar by shadowing this one small component, instead of shadowing the whole `Toolbar`. @ericof [#8404](https://github.com/plone/volto/issues/8404)
+- Adding quanta support with semanticUI fallback for seach container. @TimoBroeskamp [#8411](https://github.com/plone/volto/issues/8411)
+
+### Bugfix
+
+- Fixed cursor position lost when clicking on a Slate block in edit, causing the cursor to jump to the start of the text. @wesleybl [#8402](https://github.com/plone/volto/issues/8402)
+
 ## 19.3.1 (2026-08-26)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.3.1",
+  "version": "19.4.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -175,10 +175,10 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
-    "@plone/components": "4.2.1",
-    "@plone/volto-slate": "19.0.4",
+    "@plone/registry": "3.0.1",
     "@plone/scripts": "4.0.1",
-    "@plone/registry": "3.0.1"
+    "@plone/components": "4.2.1",
+    "@plone/volto-slate": "19.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",
@@ -287,9 +287,9 @@
     "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
     "@plone/babel-preset-razzle": "^1.0.1",
+    "@plone/razzle": "1.0.1",
     "@plone/razzle-dev-utils": "1.0.0",
     "@plone/volto-coresandbox": "1.0.0",
-    "@plone/razzle": "1.0.1",
     "@plone/types": "2.0.1"
   },
   "scripts": {

package/src/components/manage/Toolbar/Toolbar.jsx

@@ -39,9 +39,9 @@ import unlockSVG from '@plone/volto/icons/unlock.svg';
 import folderSVG from '@plone/volto/icons/folder.svg';
 import addSVG from '@plone/volto/icons/add-document.svg';
 import moreSVG from '@plone/volto/icons/more.svg';
-import userSVG from '@plone/volto/icons/user.svg';
 import backSVG from '@plone/volto/icons/back.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import UserAvatar from './UserAvatar';
 
 const messages = defineMessages({
   edit: {
@@ -695,8 +695,7 @@ class Toolbar extends Component {
                     tabIndex={0}
                     id="toolbar-personal"
                   >
-                    <Icon
-                      name={userSVG}
+                    <UserAvatar
                       size="30px"
                       title={this.props.intl.formatMessage(
                         messages.personalTools,

package/src/components/manage/Toolbar/UserAvatar.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import cameraSVG from '@plone/volto/icons/camera.svg';
+
+import UserAvatar from './UserAvatar';
+
+const renderUserAvatar = (
+  props: React.ComponentProps<typeof UserAvatar> = {},
+) => render(<UserAvatar {...props} />);
+
+describe('UserAvatar', () => {
+  it('renders the default user icon', () => {
+    const { asFragment } = renderUserAvatar();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('defaults to the toolbar button size', () => {
+    const { container } = renderUserAvatar();
+    const svg = container.querySelector('svg');
+
+    expect(svg).not.toBeNull();
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveStyle({ height: '30px' });
+  });
+
+  it('renders at the given size', () => {
+    const { container } = renderUserAvatar({ size: '96px' });
+
+    expect(container.querySelector('svg')).toHaveStyle({ height: '96px' });
+  });
+
+  it('applies the given size to a custom icon too', () => {
+    const { container } = renderUserAvatar({ icon: cameraSVG, size: '96px' });
+
+    expect(container.querySelector('svg')).toHaveStyle({ height: '96px' });
+  });
+
+  it('exposes the title to assistive technology', () => {
+    const { container } = renderUserAvatar({ title: 'Personal tools' });
+
+    expect(container.querySelector('svg > title')?.textContent).toBe(
+      'Personal tools',
+    );
+  });
+
+  it('renders no title element when no title is given', () => {
+    const { container } = renderUserAvatar();
+
+    expect(container.querySelector('svg > title')).toBeNull();
+  });
+
+  it('renders the given icon instead of the default one', () => {
+    const { container: withDefault } = renderUserAvatar();
+    const { container: withCamera } = renderUserAvatar({ icon: cameraSVG });
+
+    expect(withCamera.querySelector('svg')?.innerHTML).not.toBe(
+      withDefault.querySelector('svg')?.innerHTML,
+    );
+    expect(withCamera.innerHTML).toMatchSnapshot();
+  });
+
+  it('keeps the title when a custom icon is given', () => {
+    const { container } = renderUserAvatar({
+      icon: cameraSVG,
+      title: 'Personal tools',
+    });
+
+    expect(container.querySelector('svg > title')?.textContent).toBe(
+      'Personal tools',
+    );
+  });
+});

package/src/components/manage/Toolbar/UserAvatar.tsx

@@ -0,0 +1,27 @@
+/**
+ * UserAvatar component.
+ * @module components/manage/Toolbar/UserAvatar
+ */
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import userSVG from '@plone/volto/icons/user.svg';
+
+export type UserAvatarProps = {
+  /** Title of the rendered icon (a11y). */
+  title?: string;
+  /** Icon to render in place of the default user glyph. */
+  icon?: typeof userSVG;
+  /** Size of the avatar (in px). Defaults to the toolbar button size. */
+  size?: string;
+};
+
+/**
+ * Avatar of the currently signed-in user, as shown in the toolbar.
+ *
+ * Extracted so that add-ons can shadow this component alone — rendering a
+ * portrait, initials or a gravatar — instead of shadowing the whole toolbar.
+ */
+const UserAvatar = ({ title, icon, size = '30px' }: UserAvatarProps) => {
+  return <Icon name={icon || userSVG} size={size} title={title} />;
+};
+
+export default UserAvatar;

package/src/components/theme/Search/Search.jsx

@@ -5,7 +5,12 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
 import { createPortal } from 'react-dom';
-import { Container, Pagination, Button, Header } from 'semantic-ui-react';
+import {
+  Container as SemanticContainer,
+  Pagination,
+  Button,
+  Header,
+} from 'semantic-ui-react';
 import qs from 'query-string';
 import classNames from 'classnames';
 import config from '@plone/volto/registry';
@@ -85,6 +90,9 @@ const Search = (props) => {
 
   const options = qs.parse(location.search);
 
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
   return (
     <Container id="page-search">
       <Helmet title={intl.formatMessage(messages.Search)} />

package/types/components/manage/Toolbar/UserAvatar.d.ts

@@ -0,0 +1,17 @@
+import userSVG from '@plone/volto/icons/user.svg';
+export type UserAvatarProps = {
+    /** Title of the rendered icon (a11y). */
+    title?: string;
+    /** Icon to render in place of the default user glyph. */
+    icon?: typeof userSVG;
+    /** Size of the avatar (in px). Defaults to the toolbar button size. */
+    size?: string;
+};
+/**
+ * Avatar of the currently signed-in user, as shown in the toolbar.
+ *
+ * Extracted so that add-ons can shadow this component alone — rendering a
+ * portrait, initials or a gravatar — instead of shadowing the whole toolbar.
+ */
+declare const UserAvatar: ({ title, icon, size }: UserAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default UserAvatar;