@plone/volto 16.13.0 → 16.15.0

package/src/components/manage/Blocks/Teaser/schema.js

@@ -0,0 +1,103 @@
+import { defineMessages } from 'react-intl';
+import { addStyling } from '@plone/volto/helpers/Extensions/withBlockSchemaEnhancer';
+
+const messages = defineMessages({
+  Target: {
+    id: 'Target',
+    defaultMessage: 'Target',
+  },
+  imageOverride: {
+    id: 'Image override',
+    defaultMessage: 'Image override',
+  },
+  openLinkInNewTab: {
+    id: 'Open in a new tab',
+    defaultMessage: 'Open in a new tab',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  head_title: {
+    id: 'head_title',
+    defaultMessage: 'Head title',
+  },
+  teaser: {
+    id: 'Teaser',
+    defaultMessage: 'Teaser',
+  },
+  align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+});
+
+export const TeaserSchema = ({ intl }) => {
+  const schema = {
+    title: intl.formatMessage(messages.teaser),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['href', 'title', 'head_title', 'description', 'preview_image'],
+      },
+    ],
+
+    properties: {
+      href: {
+        title: intl.formatMessage(messages.Target),
+        widget: 'object_browser',
+        mode: 'link',
+        selectedItemAttrs: [
+          'Title',
+          'head_title',
+          'Description',
+          'hasPreviewImage',
+          'image_field',
+          'image_scales',
+          '@type',
+        ],
+        allowExternals: true,
+      },
+      title: {
+        title: intl.formatMessage(messages.title),
+      },
+      head_title: {
+        title: intl.formatMessage(messages.head_title),
+      },
+      description: {
+        title: intl.formatMessage(messages.description),
+        widget: 'textarea',
+      },
+      preview_image: {
+        title: intl.formatMessage(messages.imageOverride),
+        widget: 'object_browser',
+        mode: 'image',
+        allowExternals: true,
+        selectedItemAttrs: ['image_field', 'image_scales'],
+      },
+      openLinkInNewTab: {
+        title: intl.formatMessage(messages.openLinkInNewTab),
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+
+  addStyling({ schema, intl });
+
+  schema.properties.styles.schema.properties.align = {
+    widget: 'align',
+    title: intl.formatMessage(messages.align),
+    actions: ['left', 'right', 'center'],
+    default: 'left',
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = ['align'];
+
+  return schema;
+};

package/src/components/manage/Blocks/Teaser/utils.js

@@ -0,0 +1,44 @@
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+export function getTeaserImageURL({ href, image, align }) {
+  // The default scale used in teasers is the 'teaser' scale
+  // except if it's customized otherwise in the teaser block settings
+  // or if the teaser is center (top)
+  const imageScale =
+    align === 'center'
+      ? 'great'
+      : config.blocks.blocksConfig['teaser'].imageScale || 'teaser';
+
+  if (image) {
+    // If the image is overriden locally in the teaser block
+    if (isInternalURL(image['@id'])) {
+      // If it's internal check if image_scales catalog info is present
+      if (image?.image_scales?.[image?.image_field]) {
+        return `${image['@id']}/${
+          image.image_scales[image.image_field]?.[0].scales[imageScale]
+            ?.download || image.image_scales[image.image_field]?.[0].download
+        }`;
+      } else {
+        // If not, fallback to content scale URL shortcut
+        return `${image['@id']}/@@images/${image.image_field}/${imageScale}`;
+      }
+    } else {
+      // If it's external, return the plain URL
+      return image['@id'];
+    }
+  } else {
+    // If the image is not overriden
+    if (href?.image_scales?.[href?.image_field]) {
+      return `${href['@id']}/${
+        href.image_scales[href.image_field]?.[0].scales[imageScale]?.download ||
+        href.image_scales[href.image_field]?.[0].download
+      }`;
+    } else {
+      // If not, fallback to content scale URL shortcut
+      return `${href['@id']}/@@images/${
+        href.image_field || 'preview_image'
+      }/${imageScale}`;
+    }
+  }
+}

package/src/components/manage/Blocks/Teaser/utils.test.jsx

@@ -0,0 +1,229 @@
+import { getTeaserImageURL } from './utils';
+import config from '@plone/volto/registry';
+
+beforeAll(() => {
+  config.blocks.blocksConfig.teaser = {};
+  config.blocks.blocksConfig.teaser.imageScale = 'teaser';
+});
+
+describe('getTeaserImageURL tests', () => {
+  it('getTeaserImageURL internal URL - no overriden', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/teaser_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - no scale', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {},
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - no catalog image info', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {},
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/image/teaser',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - center', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              great: {
+                download: '@@images/great_scale_URL',
+              },
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/great_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - no overriden - center - no great scale', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = undefined;
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/@@images/default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': '/document/image',
+      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/overriden_image_default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/overriden_image_teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/image/@@images/overriden_image_teaser_scale_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden - center - no great scale', () => {
+    const align = 'center';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': '/document/image',
+      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/overriden_image_default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/overriden_image_teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      '/document/image/@@images/overriden_image_default_original_URL',
+    );
+  });
+
+  it('getTeaserImageURL internal URL - image overriden - external', () => {
+    const align = 'left';
+    const href = {
+      '@id': '/document',
+      image_field: 'preview_image',
+      image_scales: {
+        preview_image: [
+          {
+            download: '@@images/default_original_URL',
+            scales: {
+              teaser: {
+                download: '@@images/teaser_scale_URL',
+              },
+            },
+          },
+        ],
+      },
+    };
+    const image = {
+      '@id': 'https://plone.org/document/image.png',
+    };
+
+    expect(getTeaserImageURL({ href, image, align })).toBe(
+      'https://plone.org/document/image.png',
+    );
+  });
+});

package/src/components/manage/History/History.jsx

@@ -116,22 +116,37 @@ class History extends Component {
     this.props.revertHistory(getBaseUrl(this.props.pathname), value);
   }
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
+  processHistoryEntries = () => {
+    // Getting the history entries from the props
+    // No clue why the reverse(concat()) is necessary
     const entries = reverse(concat(this.props.entries));
     let title = entries.length > 0 ? entries[0].state_title : '';
     for (let x = 1; x < entries.length; x += 1) {
       entries[x].prev_state_title = title;
       title = entries[x].state_title || title;
     }
+    // We reverse them again
     reverse(entries);
+
+    // We identify the latest 'versioning' entry and mark it
+    const current_version = find(entries, (item) => item.type === 'versioning');
+    if (current_version) {
+      current_version.is_current = true;
+    }
+    return entries;
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
     const historyAction = find(this.props.objectActions, {
       id: 'history',
     });
+    const entries = this.processHistoryEntries();
+
     return !historyAction ? (
       <>
         {this.props.token ? (
@@ -266,18 +281,20 @@ class History extends Component {
                               />
                             </Link>
                           )}
-                          {'version' in entry && (
-                            <Dropdown.Item
-                              value={entry.version}
-                              onClick={this.onRevert}
-                            >
-                              <Icon name="undo" />{' '}
-                              <FormattedMessage
-                                id="Revert to this revision"
-                                defaultMessage="Revert to this revision"
-                              />
-                            </Dropdown.Item>
-                          )}
+                          {'version' in entry &&
+                            entry.may_revert &&
+                            !entry.is_current && (
+                              <Dropdown.Item
+                                value={entry.version}
+                                onClick={this.onRevert}
+                              >
+                                <Icon name="undo" />{' '}
+                                <FormattedMessage
+                                  id="Revert to this revision"
+                                  defaultMessage="Revert to this revision"
+                                />
+                              </Dropdown.Item>
+                            )}
                         </Dropdown.Menu>
                       </Dropdown>
                     )}

package/src/components/theme/View/EventView.jsx

@@ -43,7 +43,7 @@ const EventView = (props) => {
   const { content } = props;
 
   return (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper event-view">
       <Grid>
         <Grid.Column width={7} className="mobile hidden">
           {hasBlocksData(content) ? (

package/src/components/theme/View/NewsItemView.jsx

@@ -21,7 +21,7 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
  */
 const NewsItemView = ({ content }) =>
   hasBlocksData(content) ? (
-    <div id="page-document" className="ui container viewwrapper event-view">
+    <div id="page-document" className="ui container view-wrapper newsitem-view">
       <RenderBlocks content={content} />
     </div>
   ) : (

package/src/config/Blocks.jsx

@@ -42,6 +42,7 @@ import tableSVG from '@plone/volto/icons/table.svg';
 import listingBlockSVG from '@plone/volto/icons/content-listing.svg';
 import tocSVG from '@plone/volto/icons/list-bullet.svg';
 import searchSVG from '@plone/volto/icons/zoom.svg';
+import imagesSVG from '@plone/volto/icons/images.svg';
 
 import ImageGalleryListingBlockTemplate from '@plone/volto/components/manage/Blocks/Listing/ImageGallery';
 import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
@@ -73,6 +74,12 @@ import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/sche
 
 import ToCVariations from '@plone/volto/components/manage/Blocks/ToC/variations';
 
+import TeaserViewBlock from '@plone/volto/components/manage/Blocks/Teaser/View';
+import TeaserEditBlock from '@plone/volto/components/manage/Blocks/Teaser/Edit';
+import TeaserBlockDefaultBody from '@plone/volto/components/manage/Blocks/Teaser/DefaultBody';
+import { TeaserSchema } from '@plone/volto/components/manage/Blocks/Teaser/schema';
+import { TeaserBlockDataAdapter } from '@plone/volto/components/manage/Blocks/Teaser/adapter';
+
 defineMessages({
   title: {
     id: 'title',
@@ -451,6 +458,27 @@ const blocksConfig = {
       },
     },
   },
+  teaser: {
+    id: 'teaser',
+    title: 'Teaser',
+    icon: imagesSVG,
+    group: 'common',
+    view: TeaserViewBlock,
+    edit: TeaserEditBlock,
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    blockSchema: TeaserSchema,
+    dataAdapter: TeaserBlockDataAdapter,
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        template: TeaserBlockDefaultBody,
+      },
+    ],
+  },
 };
 
 const requiredBlocks = ['title'];

package/src/config/index.js

@@ -89,6 +89,7 @@ let config = {
     // https://6.docs.plone.org/volto/deploying/seamless-mode.html
     devProxyToApiPath:
       process.env.RAZZLE_DEV_PROXY_API_PATH ||
+      process.env.RAZZLE_INTERNAL_API_PATH ||
       process.env.RAZZLE_API_PATH ||
       'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
     // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite

package/src/express-middleware/devproxy.js

@@ -75,12 +75,14 @@ export default function () {
       const { apiPathURL, instancePath } = getEnv();
       const target =
         config.settings.proxyRewriteTarget ||
-        `/VirtualHostBase/http/${apiPathURL.hostname}:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
+        `/VirtualHostBase/${apiPathURL.protocol.slice(0, -1)}/${
+          apiPathURL.hostname
+        }:${apiPathURL.port}${instancePath}/++api++/VirtualHostRoot`;
 
       return `${target}${path.replace('/++api++', '')}`;
     },
     logLevel: process.env.DEBUG_HPM ? 'debug' : 'silent',
-    ...(config.settings?.proxyRewriteTarget?.startsWith('https') && {
+    ...(process.env.RAZZLE_DEV_PROXY_INSECURE && {
       changeOrigin: true,
       secure: false,
     }),

package/src/server.jsx

@@ -329,6 +329,7 @@ export const defaultReadCriticalCss = () => {
 // Exposed for the console bootstrap info messages
 server.apiPath = config.settings.apiPath;
 server.devProxyToApiPath = config.settings.devProxyToApiPath;
+server.proxyRewriteTarget = config.settings.proxyRewriteTarget;
 server.publicURL = config.settings.publicURL;
 
 export default server;

package/src/start-server.js

@@ -19,9 +19,11 @@ export default () => {
       } else {
         console.log(`API server (API_PATH) is set to: ${app.apiPath}`);
       }
-      if (__DEVELOPMENT__ && app.devProxyToApiPath)
+      if (app.devProxyToApiPath)
         console.log(
-          `Using internal proxy: ${app.publicURL} -> ${app.devProxyToApiPath}`,
+          `Proxying API requests from ${app.publicURL}/++api++ to ${
+            app.devProxyToApiPath
+          }${app.proxyRewriteTarget || ''}`,
         );
       console.log(`🎭 Volto started at ${bind_address}:${port} 🚀`);
 

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

@@ -1176,3 +1176,5 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
     }
   }
 }
+
+@import 'teaser';