@plone/volto 19.1.5 → 19.1.6

package/src/components/manage/Controlpanels/BlockTypes.test.ts

@@ -0,0 +1,132 @@
+import { createIntl, createIntlCache } from 'react-intl';
+import type { BlocksConfigData } from '@plone/types';
+import { sortConfigBlocks } from './BlockTypes';
+
+const intl = createIntl(
+  { locale: 'en', messages: { Teaser: 'Destaque' } },
+  createIntlCache(),
+);
+
+// `BlockConfigBase` types id and title as required, so a malformed entry
+// cannot be expressed through it. That mismatch between the type and the
+// configuration is the bug these tests cover, so the fixtures go around it.
+const asBlocksConfig = (config: Record<string, unknown>) =>
+  config as unknown as BlocksConfigData;
+
+describe('sortConfigBlocks', () => {
+  it('lists a registered block', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({ image: { id: 'image', title: 'Image' } }),
+      intl,
+    );
+
+    expect(blocks).toEqual([{ id: 'image', title: 'Image' }]);
+  });
+
+  it('translates the title', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({ teaser: { id: 'teaser', title: 'Teaser' } }),
+      intl,
+    );
+
+    expect(blocks[0].title).toEqual('Destaque');
+  });
+
+  it('sorts by the translated title, not by the config order', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({
+        zebra: { id: 'zebra', title: 'Zebra' },
+        apple: { id: 'apple', title: 'Apple' },
+        // 'Teaser' translates to 'Destaque', so it sorts before 'Zebra'.
+        teaser: { id: 'teaser', title: 'Teaser' },
+      }),
+      intl,
+    );
+
+    expect(blocks.map((block) => block.title)).toEqual([
+      'Apple',
+      'Destaque',
+      'Zebra',
+    ]);
+  });
+
+  it('keeps the rest of the block config', () => {
+    const blocks = sortConfigBlocks(
+      asBlocksConfig({
+        image: {
+          id: 'image',
+          title: 'Image',
+          icon: 'image.svg',
+          group: 'media',
+        },
+      }),
+      intl,
+    );
+
+    expect(blocks[0]).toMatchObject({ icon: 'image.svg', group: 'media' });
+  });
+
+  describe('entries that are not blocks', () => {
+    // An add-on that configures a block which was never registered leaves an
+    // entry behind carrying only what it set. Listing it would link to a block
+    // that does not exist, and a row with no id crashes the table.
+    it('drops an entry with neither an id nor a title', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({
+          image: { id: 'image', title: 'Image' },
+          accordion: { addPermission: [] },
+        }),
+        intl,
+      );
+
+      expect(blocks).toEqual([{ id: 'image', title: 'Image' }]);
+    });
+
+    it('drops an entry with an id but no title', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { id: 'accordion' } }),
+        intl,
+      );
+
+      expect(blocks).toEqual([]);
+    });
+
+    it('drops an entry with a title but no id', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { title: 'Accordion' } }),
+        intl,
+      );
+
+      expect(blocks).toEqual([]);
+    });
+
+    it('does not fall back to the config key for a missing id', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({ accordion: { title: 'Accordion' } }),
+        intl,
+      );
+
+      expect(blocks.map((block) => block.id)).not.toContain('accordion');
+    });
+
+    it('gives every listed block an id, so the table can key its rows', () => {
+      const blocks = sortConfigBlocks(
+        asBlocksConfig({
+          image: { id: 'image', title: 'Image' },
+          accordion: { addPermission: [] },
+          teaser: { id: 'teaser' },
+        }),
+        intl,
+      );
+
+      expect(blocks.length).toBeGreaterThan(0);
+      for (const block of blocks) {
+        expect(block.id).toBeTruthy();
+      }
+    });
+  });
+
+  it('returns nothing when no block is configured', () => {
+    expect(sortConfigBlocks(asBlocksConfig({}), intl)).toEqual([]);
+  });
+});

package/src/components/manage/Controlpanels/BlockTypes.tsx

@@ -5,6 +5,7 @@ import { useClient } from '@plone/volto/hooks';
 import config from '@plone/volto/registry';
 import { createPortal } from 'react-dom';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import type { IntlShape } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { useEffect } from 'react';
 import { getBlockTypes } from '@plone/volto/actions/blockTypes/blockTypes';
@@ -15,6 +16,7 @@ import UniversalLink from '@plone/volto/components/manage/UniversalLink/Universa
 
 import backSVG from '@plone/volto/icons/back.svg';
 import type { Location } from 'history';
+import type { BlocksConfigData } from '@plone/types';
 
 const messages = defineMessages({
   back: {
@@ -53,6 +55,35 @@ type SelectorState = {
   blockTypes: BlockTypesState;
 };
 
+/**
+ * List the configured blocks, by title.
+ *
+ * An add-on can configure a block that was never registered — enhancing one
+ * that ships with another add-on, say — which leaves an entry behind that is
+ * not a block at all, with no id or no title. `BlockConfigBase` says both are
+ * always there, but the config disagrees, so drop those entries rather than
+ * list a block that does not exist.
+ * @function sortConfigBlocks
+ * @param {BlocksConfigData} blocksConfig The blocks configuration.
+ * @param {IntlShape} intl Used to translate each block title.
+ * @returns {Array} The configured blocks, sorted by translated title.
+ */
+export function sortConfigBlocks(
+  blocksConfig: BlocksConfigData,
+  intl: IntlShape,
+) {
+  return Object.entries(blocksConfig)
+    .filter(([, blockConfig]) => blockConfig.id && blockConfig.title)
+    .map(([, blockConfig]) => ({
+      ...blockConfig,
+      title: intl.formatMessage({
+        id: blockConfig.title,
+        defaultMessage: blockConfig.title,
+      }),
+    }))
+    .sort((a, b) => (a.title === b.title ? 0 : a.title > b.title ? 1 : -1));
+}
+
 const BlockTypesControlpanel = (props: RouteProps) => {
   const { location } = props;
   const intl = useIntl();
@@ -62,17 +93,7 @@ const BlockTypesControlpanel = (props: RouteProps) => {
   const pathname = location.pathname;
   const isClient = useClient();
 
-  const blocks = Object.entries(blocksConfig)
-    .map(([key, blockConfig]) => ({
-      ...blockConfig,
-      title: blockConfig.title
-        ? intl.formatMessage({
-            id: blockConfig.title,
-            defaultMessage: blockConfig.title,
-          })
-        : blockConfig.id ?? key,
-    }))
-    .sort((a, b) => (a.title === b.title ? 0 : a.title > b.title ? 1 : -1));
+  const blocks = sortConfigBlocks(blocksConfig, intl);
 
   useEffect(() => {
     dispatch(getBlockTypes());

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { Input, Segment, Breadcrumb } from 'semantic-ui-react';
 
+import debounce from 'lodash/debounce';
 import join from 'lodash/join';
 
 // These absolute imports (without using the corresponding centralized index.js) are required
@@ -159,6 +160,22 @@ class ObjectBrowserBody extends Component {
       view: this.props.mode === 'image' ? 'icons' : 'list',
     };
     this.searchInputRef = React.createRef();
+    // Debounce the live-search dispatch so rapid keystrokes do not produce a
+    // burst of overlapping requests whose responses may resolve out of order
+    // (an older, less-filtered response arriving after the latest one would
+    // visually "reset" the list to look unfiltered).
+    this.debouncedSearch = debounce(this.doSearch, 300);
+  }
+
+  /**
+   * Component will unmount
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.debouncedSearch) {
+      this.debouncedSearch.cancel();
+    }
   }
 
   /**
@@ -248,8 +265,7 @@ class ObjectBrowserBody extends Component {
       view: prevState.view === 'icons' ? 'list' : 'icons',
     }));
 
-  onSearch = (e) => {
-    const text = flattenToAppURL(e.target.value);
+  doSearch = (text) => {
     if (text.startsWith('/')) {
       this.setState({ currentFolder: text });
       this.props.searchContent(
@@ -286,6 +302,11 @@ class ObjectBrowserBody extends Component {
     }
   };
 
+  onSearch = (e) => {
+    const text = flattenToAppURL(e.target.value);
+    this.debouncedSearch(text);
+  };
+
   onSelectItem = (item) => {
     const url = item['@id'];
     const { block, data, mode, dataName, onChangeBlock } = this.props;

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

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import find from 'lodash/find';
+import { Dimmer, Loader } from 'semantic-ui-react';
 import { toast } from 'react-toastify';
 
 import Toast from '@plone/volto/components/manage/Toast/Toast';
@@ -103,6 +104,10 @@ const messages = defineMessages({
     id: 'workingCopyGenericError',
     defaultMessage: 'An error occurred while performing this operation.',
   },
+  Loading: {
+    id: 'Loading',
+    defaultMessage: 'Loading',
+  },
 });
 
 const More = (props) => {
@@ -123,6 +128,8 @@ const More = (props) => {
   const workingCopyApply = workingCopy?.apply.loading;
   const workingCopyCreate = workingCopy?.create.loading;
   const workingCopyRemove = workingCopy?.remove.loading;
+  const isWorkingCopyLoading =
+    workingCopyApply || workingCopyCreate || workingCopyRemove;
 
   const prevWorkingCopyApplyLoading = usePrevious(workingCopyApply);
   const prevWorkingCopyCreateLoading = usePrevious(workingCopyCreate);
@@ -216,6 +223,9 @@ const More = (props) => {
           : null,
       }}
     >
+      <Dimmer active={isWorkingCopyLoading} inverted>
+        <Loader>{intl.formatMessage(messages.Loading)}</Loader>
+      </Dimmer>
       <header>
         <h2>{content.title}</h2>
         <button
@@ -335,6 +345,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.CreateWorkingCopy)}
+              disabled={workingCopyCreate}
               onClick={() => {
                 dispatch(createWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(response['@id']));
@@ -354,6 +365,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.applyWorkingCopy)}
+              disabled={workingCopyApply}
               onClick={() => {
                 dispatch(applyWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));
@@ -395,6 +407,7 @@ const More = (props) => {
           <li>
             <button
               aria-label={intl.formatMessage(messages.removeWorkingCopy)}
+              disabled={workingCopyRemove}
               onClick={() => {
                 dispatch(removeWorkingCopy(path)).then((response) => {
                   history.push(flattenToAppURL(content.working_copy_of['@id']));

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

@@ -35,12 +35,14 @@ const messages = defineMessages({
     defaultMessage: 'Drop files here ...',
   },
   editFile: {
-    id: 'Drop a file here or click to replace the existing file',
-    defaultMessage: 'Drop a file here or click to replace the existing file',
+    id: 'Drop file here to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file.',
   },
   fileDrag: {
-    id: 'Drop a file here or click to upload',
-    defaultMessage: 'Drop a file here or click to upload',
+    id: 'Drop file here to upload a new file',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser.',
   },
   replaceFile: {
     id: 'Replace existing file',
@@ -60,8 +62,14 @@ const messages = defineMessages({
     defaultMessage: 'File is not of the accepted type {accept}',
   },
   dragAndDropActionA11y: {
-    id: 'File upload area. Press Enter to open the file browser',
-    defaultMessage: 'File upload area. Press Enter to open the file browser',
+    id: 'Press Enter to browse files from your computer.',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser.',
+  },
+  dragAndDropReplaceA11y: {
+    id: 'File upload area. Press Enter or click to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file.',
   },
   requiredField: {
     id: 'This field is required.',
@@ -180,9 +188,11 @@ const FileWidget = (props) => {
   };
 
   const statusTextA11y = [
-    intl.formatMessage(messages.dragAndDropActionA11y), // Interaction instructions
-    props.required && intl.formatMessage(messages.requiredField), // Required field status
-    value?.filename, // Current file name if a file is uploaded
+    value
+      ? intl.formatMessage(messages.dragAndDropReplaceA11y)
+      : intl.formatMessage(messages.dragAndDropActionA11y),
+    props.required && intl.formatMessage(messages.requiredField),
+    value?.filename,
   ]
     .filter(Boolean)
     .join('. ');

package/src/components/manage/Widgets/RegistryImageWidget.jsx

@@ -33,12 +33,14 @@ const messages = defineMessages({
     defaultMessage: 'Drop files here ...',
   },
   editFile: {
-    id: 'Drop a file here or click to replace the existing file',
-    defaultMessage: 'Drop a file here or click to replace the existing file',
+    id: 'Drop file here to replace the existing file',
+    defaultMessage:
+      'File upload area. Press Enter or click to replace the existing file.',
   },
   fileDrag: {
     id: 'Drop file here to upload a new file',
-    defaultMessage: 'Drop file here to upload a new file',
+    defaultMessage:
+      'File upload area. Press Enter or click to open the file browser.',
   },
   replaceFile: {
     id: 'Replace existing file',

package/theme/themes/pastanaga/extras/focus.less

@@ -0,0 +1,33 @@
+.universal-focus-style() {
+  box-shadow: 0 0 0 2px @innerFocusShadow !important;
+  outline: @outerFocusOutline auto 2px !important;
+  outline-offset: 2px;
+}
+
+// Global focus styles for all elements that support :focus-visible
+// Exclude contenteditable elements (slate editors, rich text inputs) — focus is
+// already implied by the text cursor; an outline ring is noisy and confusing.
+:focus-visible:not([contenteditable]):not([data-slate-editor]) {
+  .universal-focus-style();
+}
+
+//inputs modifications
+input:focus-visible {
+  border-color: @outerFocusOutline !important;
+}
+
+// Semantic UI checkbox focus styles
+.ui.checkbox input:focus-visible ~ label::before {
+  .universal-focus-style();
+  outline-offset: 4px;
+}
+
+.ui.checkbox input:focus-visible ~ label::before {
+  transition: none !important;
+}
+
+// Skiplinks focus styles
+.skiplinks-wrapper a:focus-visible {
+  border: 2px solid @linkColor;
+  outline: 3px solid @linkColor;
+}

package/theme/themes/pastanaga/extras/main.less

@@ -713,6 +713,7 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'focus.less';
 @import 'block-types.less';
 @import 'videoembed.less';
 .loadUIOverrides();

package/theme/themes/pastanaga/extras/skiplinks.less

@@ -12,9 +12,7 @@
       top: 10px;
       left: 10px;
       padding: 10px;
-      border: 2px solid @linkColor;
       background: #fff;
-      outline: 3px solid @linkColor;
     }
 
     &:hover {

package/theme/themes/pastanaga/globals/site.variables

@@ -362,3 +362,10 @@
 /*---  Dark Tones  ---*/
 
 /*---  Light Tones  ---*/
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+@innerFocusShadow: #fff;
+@outerFocusOutline: #000;

package/types/components/manage/Controlpanels/BlockTypes.d.ts

@@ -1,7 +1,55 @@
+import type { IntlShape } from 'react-intl';
 import type { Location } from 'history';
+import type { BlocksConfigData } from '@plone/types';
 type RouteProps = {
     history: History;
     location: Location;
 };
+/**
+ * List the configured blocks, by title.
+ *
+ * An add-on can configure a block that was never registered — enhancing one
+ * that ships with another add-on, say — which leaves an entry behind that is
+ * not a block at all, with no id or no title. `BlockConfigBase` says both are
+ * always there, but the config disagrees, so drop those entries rather than
+ * list a block that does not exist.
+ * @function sortConfigBlocks
+ * @param {BlocksConfigData} blocksConfig The blocks configuration.
+ * @param {IntlShape} intl Used to translate each block title.
+ * @returns {Array} The configured blocks, sorted by translated title.
+ */
+export declare function sortConfigBlocks(blocksConfig: BlocksConfigData, intl: IntlShape): {
+    title: string;
+    id: string;
+    icon: string;
+    group: string;
+    category?: string;
+    blockModel?: number;
+    view?: React.ComponentType<import("@plone/types").BlockViewProps>;
+    edit?: React.ComponentType<import("@plone/types").BlockEditProps>;
+    schema?: object;
+    blockSchema: import("@plone/types").JSONSchema | ((args?: import("@plone/types").BlockSchemaArgs) => import("@plone/types").JSONSchema);
+    dataAdapter?: ({ block, data, id, onChangeBlock, value, }: {
+        block: string;
+        data: import("@plone/types").BlocksFormData;
+        id: string;
+        onChangeBlock: (id: string, newData: any) => void;
+        value: any;
+    }) => void;
+    restricted: ((args: {
+        properties: import("@plone/types").Content;
+        block: import("@plone/types").BlockConfigBase;
+        navRoot: import("@plone/types").Content;
+        contentType: string;
+        user: import("@plone/types").User;
+    }) => boolean) | boolean;
+    mostUsed: boolean;
+    blockHasOwnFocusManagement?: boolean;
+    sidebarTab: boolean | 0 | 1;
+    schemaEnhancer?: (args: import("@plone/types").SchemaEnhancerArgs) => import("@plone/types").JSONSchema;
+    variations?: import("@plone/types").BlockExtension[];
+    extensions?: Record<string, import("@plone/types").BlockExtension>;
+    blocksConfig?: Partial<BlocksConfigData>;
+}[];
 declare const BlockTypesControlpanel: (props: RouteProps) => import("react/jsx-runtime").JSX.Element;
 export default BlockTypesControlpanel;