@eeacms/volto-eea-website-policy 0.2.3 → 0.2.6

package/CHANGELOG.md

@@ -4,8 +4,36 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.6](https://github.com/eea/volto-eea-website-policy/compare/0.2.5...0.2.6)
+
+- Fix Cannot read properties of undefined (reading 'translations') [`8e7b8b8`](https://github.com/eea/volto-eea-website-policy/commit/8e7b8b8533b14f173d77783fe2d0b517c29c5937)
+- Customize Toolbar.jsx - copied unchanged from @plone/volto 16.0.0.alpha.11 [`b7add4f`](https://github.com/eea/volto-eea-website-policy/commit/b7add4faa8ef2dde7d77489fc8bc431cbb023314)
+
+#### [0.2.5](https://github.com/eea/volto-eea-website-policy/compare/0.2.4...0.2.5)
+
+> 23 June 2022
+
+- Rounded Card variation and disable ImageCards block [`#11`](https://github.com/eea/volto-eea-website-policy/pull/11)
+- Rounded card via style wrapper [`6728684`](https://github.com/eea/volto-eea-website-policy/commit/67286844b00902aa4c6b316b50be35db95c531f0)
+- Revert "Rounded Card variation - refs #148723" [`0168a86`](https://github.com/eea/volto-eea-website-policy/commit/0168a86fa644a9b848e37c7f5054eb4308c36784)
+- Disable Image Cards block [`3ed8dc3`](https://github.com/eea/volto-eea-website-policy/commit/3ed8dc311cad8e30a8c918ecec7b21cc99260c50)
+- Rounded Card variation - refs #148723 [`4b46731`](https://github.com/eea/volto-eea-website-policy/commit/4b46731e25962bbb6e7159d0db8a9a642a95eb53)
+
+#### [0.2.4](https://github.com/eea/volto-eea-website-policy/compare/0.2.3...0.2.4)
+
+> 13 June 2022
+
+- Release [`#10`](https://github.com/eea/volto-eea-website-policy/pull/10)
+- Fix listing block title: Listing (Content) [`cec2760`](https://github.com/eea/volto-eea-website-policy/commit/cec276082c3fc1b5486c996c3746a6958fb3a1a9)
+- Add theme to teaser stylewrapper [`60eeb28`](https://github.com/eea/volto-eea-website-policy/commit/60eeb28b7793708c59d0af73ffb09895e8f2c87d)
+- Fix className vs class warning [`fea1603`](https://github.com/eea/volto-eea-website-policy/commit/fea1603eefd628d57640a6b94ddbbb7edfb0d841)
+- Custom card view for teaser [`c8eded0`](https://github.com/eea/volto-eea-website-policy/commit/c8eded011b8317cce9f842526f5d86771f54797b)
+
 #### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3)
 
+> 10 June 2022
+
+- Add Item block [`#9`](https://github.com/eea/volto-eea-website-policy/pull/9)
 - prettier fix [`c2a6d2d`](https://github.com/eea/volto-eea-website-policy/commit/c2a6d2d3b12ce771b9b4413c5a6db157ccd9d1fc)
 - Update index.js [`fb73895`](https://github.com/eea/volto-eea-website-policy/commit/fb7389509bc7e207942762c5e02a93d0168a6fba)
 - removed change from commit 719e3778 [`29e636b`](https://github.com/eea/volto-eea-website-policy/commit/29e636b34ab02992c67cc5960f4dc6b21b1b4e71)
@@ -14,7 +42,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Move Item block un components folder [`9fb6ab2`](https://github.com/eea/volto-eea-website-policy/commit/9fb6ab2fb02cc5c1a7e25367de5ebe7109bd3dc4)
 - Set default sizes for image & icon in Item block [`af22ec7`](https://github.com/eea/volto-eea-website-policy/commit/af22ec78b2c6fd1d033dc1acfec5e64f8926cd77)
 - Add helpers functions [`353581c`](https://github.com/eea/volto-eea-website-policy/commit/353581cc6602b5e573eee93c74a67656203c0968)
-- Add Item block [`617bfe2`](https://github.com/eea/volto-eea-website-policy/commit/617bfe2b827708ddb2c5eecd8fe1cc6fee37f60a)
 - Add Teaser block folder's structure [`9457dd4`](https://github.com/eea/volto-eea-website-policy/commit/9457dd4ffaa2631eceb46bfd1ec2d201e8b3d7a8)
 
 #### [0.2.2](https://github.com/eea/volto-eea-website-policy/compare/0.2.1...0.2.2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "0.2.3",
+  "version": "0.2.6",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/Teaser/Card.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getTeaserImageURL } from './utils';
+import { MaybeWrap } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const TeaserCardTemplate = (props) => {
+  const { data, isEditMode } = props;
+  const intl = useIntl();
+  const href = data.href?.[0];
+  const image = data.preview_image?.[0];
+
+  return (
+    <>
+      {!href && isEditMode && (
+        <Message>
+          <div className="grid-teaser-item placeholder">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+          </div>
+        </Message>
+      )}
+      {href && (
+        <MaybeWrap
+          condition={!isEditMode}
+          as={UniversalLink}
+          href={href['@id']}
+          target={data.openLinkInNewTab ? '_blank' : null}
+        >
+          <div
+            className={cx(
+              'ui fluid card',
+              data?.styles?.theme,
+              data?.styles?.rounded ? 'rounded big' : '',
+            )}
+          >
+            {(href.hasPreviewImage || href.image_field || image) && (
+              <div className="image">
+                <img
+                  src={flattenToAppURL(getTeaserImageURL(href, image))}
+                  alt="a"
+                />
+              </div>
+            )}
+            <div className="content">
+              {data?.head_title && (
+                <div className="meta">{data?.head_title}</div>
+              )}
+              <div className="header">{data?.title}</div>
+              {!data.hide_description && (
+                <p className="description">{data?.description}</p>
+              )}
+            </div>
+          </div>
+        </MaybeWrap>
+      )}
+    </>
+  );
+};
+
+TeaserCardTemplate.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default TeaserCardTemplate;

package/src/components/Blocks/Teaser/Schema.js

@@ -0,0 +1,70 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  Type: {
+    id: 'Teaser',
+    defaultMessage: 'Teaser',
+  },
+  Theme: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
+  ThemeHelp: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
+  ThemeDefault: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  ThemePrimary: {
+    id: 'Primary',
+    defaultMessage: 'Primary',
+  },
+  ThemeSecondary: {
+    id: 'Secondary',
+    defaultMessage: 'Secondary',
+  },
+  ThemeTertiary: {
+    id: 'Tertiary',
+    defaultMessage: 'Tertiary',
+  },
+  Rounded: {
+    id: 'Rounded',
+    defaultMessage: 'Rounded',
+  },
+  RoundedHelp: {
+    id: 'Rounded Image',
+    defaultMessage: 'Rounded Image',
+  },
+});
+
+export const StylingSchema = ({ intl }) => ({
+  title: intl.formatMessage(messages.Type),
+  block: 'teaserGrid',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme', 'rounded'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: intl.formatMessage(messages.Theme),
+      description: intl.formatMessage(messages.ThemeHelp),
+      choices: [
+        ['', intl.formatMessage(messages.ThemeDefault)],
+        ['primary', intl.formatMessage(messages.ThemePrimary)],
+        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+      ],
+    },
+    rounded: {
+      title: intl.formatMessage(messages.Rounded),
+      description: intl.formatMessage(messages.RoundedHelp),
+      type: 'boolean',
+    },
+  },
+  required: [],
+});

package/src/components/Blocks/Teaser/index.js

@@ -0,0 +1,26 @@
+import TeaserCardTemplate from './Card';
+import { StylingSchema } from './Schema';
+
+export default (config) => {
+  // Teaser
+  if (config.blocks.blocksConfig.teaser) {
+    config.blocks.blocksConfig.teaser.variations = [
+      ...(config.blocks.blocksConfig.teaser.variations || []),
+      {
+        id: 'card',
+        isDefault: true,
+        title: 'Card (top image)',
+        template: TeaserCardTemplate,
+      },
+    ];
+    config.blocks.blocksConfig.teaser.enableStyling = true;
+    config.blocks.blocksConfig.teaser.stylesSchema = StylingSchema;
+  }
+
+  // Teaser Grid
+  if (config.blocks.blocksConfig.teaserGrid) {
+    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
+  }
+
+  return config;
+};

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

@@ -0,0 +1,18 @@
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+export function getTeaserImageURL(href, image) {
+  const imageScale =
+    config.blocks.blocksConfig['teaser'].imageScale || 'preview';
+  if (image) {
+    if (isInternalURL(image['@id'])) {
+      return `${image['@id']}/@@images/image/${imageScale}`;
+    } else {
+      return image['@id'];
+    }
+  } else {
+    return `${href['@id']}/@@images/${
+      href.image_field || 'preview_image'
+    }/${imageScale}`;
+  }
+}

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

@@ -0,0 +1,589 @@
+/**
+ * Toolbar component.
+ * @module components/manage/Toolbar/Toolbar
+ */
+
+import React, { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import { withCookies } from 'react-cookie';
+import { filter, find } from 'lodash';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+import More from '@plone/volto/components/manage/Toolbar/More';
+import PersonalTools from '@plone/volto/components/manage/Toolbar/PersonalTools';
+import Types from '@plone/volto/components/manage/Toolbar/Types';
+import PersonalInformation from '@plone/volto/components/manage/Preferences/PersonalInformation';
+import PersonalPreferences from '@plone/volto/components/manage/Preferences/PersonalPreferences';
+import StandardWrapper from '@plone/volto/components/manage/Toolbar/StandardWrapper';
+import {
+  getTypes,
+  listActions,
+  setExpandedToolbar,
+  unlockContent,
+} from '@plone/volto/actions';
+import { Icon } from '@plone/volto/components';
+import { BodyClass, getBaseUrl, getCookieOptions } from '@plone/volto/helpers';
+import { Pluggable } from '@plone/volto/components/manage/Pluggable';
+
+import penSVG from '@plone/volto/icons/pen.svg';
+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 clearSVG from '@plone/volto/icons/clear.svg';
+
+const messages = defineMessages({
+  edit: {
+    id: 'Edit',
+    defaultMessage: 'Edit',
+  },
+  contents: {
+    id: 'Contents',
+    defaultMessage: 'Contents',
+  },
+  add: {
+    id: 'Add',
+    defaultMessage: 'Add',
+  },
+  more: {
+    id: 'More',
+    defaultMessage: 'More',
+  },
+  personalTools: {
+    id: 'Personal tools',
+    defaultMessage: 'Personal tools',
+  },
+  shrinkToolbar: {
+    id: 'Shrink toolbar',
+    defaultMessage: 'Shrink toolbar',
+  },
+  personalInformation: {
+    id: 'Personal Information',
+    defaultMessage: 'Personal Information',
+  },
+  personalPreferences: {
+    id: 'Personal Preferences',
+    defaultMessage: 'Personal Preferences',
+  },
+  collection: {
+    id: 'Collection',
+    defaultMessage: 'Collection',
+  },
+  file: {
+    id: 'File',
+    defaultMessage: 'File',
+  },
+  link: {
+    id: 'Link',
+    defaultMessage: 'Link',
+  },
+  newsItem: {
+    id: 'News Item',
+    defaultMessage: 'News Item',
+  },
+  page: {
+    id: 'Page',
+    defaultMessage: 'Page',
+  },
+  back: {
+    id: 'Back',
+    defaultMessage: 'Back',
+  },
+  unlock: {
+    id: 'Unlock',
+    defaultMessage: 'Unlock',
+  },
+});
+
+const toolbarComponents = {
+  personalTools: { component: PersonalTools, wrapper: null },
+  more: { component: More, wrapper: null },
+  types: { component: Types, wrapper: null, contentAsProps: true },
+  profile: {
+    component: PersonalInformation,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalInformation,
+    hideToolbarBody: true,
+  },
+  preferences: {
+    component: PersonalPreferences,
+    wrapper: StandardWrapper,
+    wrapperTitle: messages.personalPreferences,
+    hideToolbarBody: true,
+  },
+};
+
+/**
+ * Toolbar container class.
+ * @class Toolbar
+ * @extends Component
+ */
+class Toolbar extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    actions: PropTypes.shape({
+      object: PropTypes.arrayOf(PropTypes.object),
+      object_buttons: PropTypes.arrayOf(PropTypes.object),
+      user: PropTypes.arrayOf(PropTypes.object),
+    }),
+    token: PropTypes.string,
+    userId: PropTypes.string,
+    pathname: PropTypes.string.isRequired,
+    content: PropTypes.shape({
+      '@type': PropTypes.string,
+      is_folderish: PropTypes.bool,
+      review_state: PropTypes.string,
+    }),
+    getTypes: PropTypes.func.isRequired,
+    types: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string,
+        addable: PropTypes.bool,
+        title: PropTypes.string,
+      }),
+    ),
+    listActions: PropTypes.func.isRequired,
+    unlockContent: PropTypes.func,
+    unlockRequest: PropTypes.objectOf(PropTypes.any),
+    inner: PropTypes.element.isRequired,
+    hideDefaultViewButtons: PropTypes.bool,
+  };
+
+  /**
+   * Default properties.
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    actions: null,
+    token: null,
+    userId: null,
+    content: null,
+    hideDefaultViewButtons: false,
+    types: [],
+  };
+
+  toolbarWindow = React.createRef();
+
+  constructor(props) {
+    super(props);
+    const { cookies } = props;
+    this.state = {
+      expanded: cookies.get('toolbar_expanded') !== 'false',
+      showMenu: false,
+      menuStyle: {},
+      menuComponents: [],
+      loadedComponents: [],
+      hideToolbarBody: false,
+    };
+  }
+
+  /**
+   * Component will mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.listActions(getBaseUrl(this.props.pathname));
+    this.props.getTypes(getBaseUrl(this.props.pathname));
+    this.props.setExpandedToolbar(this.state.expanded);
+    document.addEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+      this.props.getTypes(getBaseUrl(nextProps.pathname));
+    }
+
+    // Unlock
+    if (this.props.unlockRequest.loading && nextProps.unlockRequest.loaded) {
+      this.props.listActions(getBaseUrl(nextProps.pathname));
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside, false);
+  }
+
+  handleShrink = () => {
+    const { cookies } = this.props;
+    cookies.set('toolbar_expanded', !this.state.expanded, getCookieOptions());
+    this.setState(
+      (state) => ({ expanded: !state.expanded }),
+      () => this.props.setExpandedToolbar(this.state.expanded),
+    );
+  };
+
+  closeMenu = () =>
+    this.setState(() => ({ showMenu: false, loadedComponents: [] }));
+
+  loadComponent = (type) => {
+    const { loadedComponents } = this.state;
+    if (!this.state.loadedComponents.includes(type)) {
+      this.setState({
+        loadedComponents: [...loadedComponents, type],
+        hideToolbarBody: toolbarComponents[type].hideToolbarBody || false,
+      });
+    }
+  };
+
+  unloadComponent = () => {
+    this.setState((state) => ({
+      loadedComponents: state.loadedComponents.slice(0, -1),
+      hideToolbarBody:
+        toolbarComponents[
+          state.loadedComponents[state.loadedComponents.length - 2]
+        ].hideToolbarBody || false,
+    }));
+  };
+
+  toggleMenu = (e, selector) => {
+    if (this.state.showMenu) {
+      this.closeMenu();
+      return;
+    }
+    // PersonalTools always shows at bottom
+    if (selector === 'personalTools') {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { bottom: 0 },
+      }));
+    } else {
+      this.setState((state) => ({
+        showMenu: !state.showMenu,
+        menuStyle: { top: 0 },
+      }));
+    }
+    this.loadComponent(selector);
+  };
+
+  handleClickOutside = (e) => {
+    if (this.pusher && doesNodeContainClick(this.pusher, e)) return;
+    this.closeMenu();
+  };
+
+  unlock = (e) => {
+    this.props.unlockContent(getBaseUrl(this.props.pathname), true);
+  };
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const path = getBaseUrl(this.props.pathname);
+    const lock = this.props.content?.lock;
+    const unlockAction =
+      lock?.locked && lock?.stealable && lock?.creator !== this.props.userId;
+    const editAction =
+      !unlockAction && find(this.props.actions.object, { id: 'edit' });
+    const folderContentsAction = find(this.props.actions.object, {
+      id: 'folderContents',
+    });
+    const { expanded } = this.state;
+
+    return (
+      this.props.token && (
+        <>
+          <BodyClass
+            className={expanded ? 'has-toolbar' : 'has-toolbar-collapsed'}
+          />
+          <div
+            style={this.state.menuStyle}
+            className={
+              this.state.showMenu ? 'toolbar-content show' : 'toolbar-content'
+            }
+            ref={this.toolbarWindow}
+          >
+            {this.state.showMenu && (
+              // This sets the scroll locker in the body tag in mobile
+              <BodyClass className="has-toolbar-menu-open" />
+            )}
+            <div
+              className="pusher-puller"
+              ref={(node) => (this.pusher = node)}
+              style={{
+                transform: this.toolbarWindow.current
+                  ? `translateX(-${
+                      (this.state.loadedComponents.length - 1) *
+                      this.toolbarWindow.current.getBoundingClientRect().width
+                    }px)`
+                  : null,
+              }}
+            >
+              {this.state.loadedComponents.map((component, index) =>
+                (() => {
+                  const ToolbarComponent =
+                    toolbarComponents[component].component;
+                  const WrapperComponent = toolbarComponents[component].wrapper;
+                  const haveActions =
+                    toolbarComponents[component].hideToolbarBody;
+                  const title =
+                    toolbarComponents[component].wrapperTitle &&
+                    this.props.intl.formatMessage(
+                      toolbarComponents[component].wrapperTitle,
+                    );
+                  if (WrapperComponent) {
+                    return (
+                      <WrapperComponent
+                        componentName={component}
+                        componentTitle={title}
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        hasActions={haveActions}
+                      >
+                        <ToolbarComponent
+                          pathname={this.props.pathname}
+                          loadComponent={this.loadComponent}
+                          unloadComponent={this.unloadComponent}
+                          componentIndex={index}
+                          theToolbar={this.toolbarWindow}
+                          closeMenu={this.closeMenu}
+                          isToolbarEmbedded
+                        />
+                      </WrapperComponent>
+                    );
+                  } else {
+                    return (
+                      <ToolbarComponent
+                        pathname={this.props.pathname}
+                        loadComponent={this.loadComponent}
+                        unloadComponent={this.unloadComponent}
+                        componentIndex={index}
+                        theToolbar={this.toolbarWindow}
+                        key={`personalToolsComponent-${index}`}
+                        closeMenu={this.closeMenu}
+                        content={
+                          toolbarComponents[component].contentAsProps
+                            ? this.props.content
+                            : null
+                        }
+                      />
+                    );
+                  }
+                })(),
+              )}
+            </div>
+          </div>
+          <div className={this.state.expanded ? 'toolbar expanded' : 'toolbar'}>
+            <div className="toolbar-body">
+              <div className="toolbar-actions">
+                {this.props.hideDefaultViewButtons && this.props.inner && (
+                  <>{this.props.inner}</>
+                )}
+                {!this.props.hideDefaultViewButtons && (
+                  <>
+                    {unlockAction && (
+                      <button
+                        aria-label={this.props.intl.formatMessage(
+                          messages.unlock,
+                        )}
+                        className="unlock"
+                        onClick={(e) => this.unlock(e)}
+                        tabIndex={0}
+                      >
+                        <Icon
+                          name={unlockSVG}
+                          size="30px"
+                          className="unlock"
+                          title={this.props.intl.formatMessage(messages.unlock)}
+                        />
+                      </button>
+                    )}
+
+                    {editAction && (
+                      <Link
+                        aria-label={this.props.intl.formatMessage(
+                          messages.edit,
+                        )}
+                        className="edit"
+                        to={`${path}/edit`}
+                      >
+                        <Icon
+                          name={penSVG}
+                          size="30px"
+                          className="circled"
+                          title={this.props.intl.formatMessage(messages.edit)}
+                        />
+                      </Link>
+                    )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      !this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          aria-label={this.props.intl.formatMessage(
+                            messages.contents,
+                          )}
+                          to={`${path}/contents`}
+                        >
+                          <Icon
+                            name={folderSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(
+                              messages.contents,
+                            )}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      this.props.content.is_folderish &&
+                      folderContentsAction &&
+                      this.props.pathname.endsWith('/contents') && (
+                        <Link
+                          to={`${path}`}
+                          aria-label={this.props.intl.formatMessage(
+                            messages.back,
+                          )}
+                        >
+                          <Icon
+                            name={clearSVG}
+                            className="contents circled"
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.back)}
+                          />
+                        </Link>
+                      )}
+                    {this.props.content &&
+                      ((this.props.content.is_folderish &&
+                        this.props.types.length > 0) ||
+                        (config.settings.isMultilingual &&
+                          this.props.content['@components']?.translations)) && (
+                        <button
+                          className="add"
+                          aria-label={this.props.intl.formatMessage(
+                            messages.add,
+                          )}
+                          onClick={(e) => this.toggleMenu(e, 'types')}
+                          tabIndex={0}
+                          id="toolbar-add"
+                        >
+                          <Icon
+                            name={addSVG}
+                            size="30px"
+                            title={this.props.intl.formatMessage(messages.add)}
+                          />
+                        </button>
+                      )}
+                    <div className="toolbar-button-spacer" />
+                    <button
+                      className="more"
+                      aria-label={this.props.intl.formatMessage(messages.more)}
+                      onClick={(e) => this.toggleMenu(e, 'more')}
+                      tabIndex={0}
+                      id="toolbar-more"
+                    >
+                      <Icon
+                        className="mobile hidden"
+                        name={moreSVG}
+                        size="30px"
+                        title={this.props.intl.formatMessage(messages.more)}
+                      />
+                      {this.state.showMenu ? (
+                        <Icon
+                          className="mobile only"
+                          name={clearSVG}
+                          size="30px"
+                        />
+                      ) : (
+                        <Icon
+                          className="mobile only"
+                          name={moreSVG}
+                          size="30px"
+                        />
+                      )}
+                    </button>
+                  </>
+                )}
+              </div>
+              <div className="toolbar-bottom">
+                <Pluggable name="main.toolbar.bottom" />
+                {!this.props.hideDefaultViewButtons && (
+                  <button
+                    className="user"
+                    aria-label={this.props.intl.formatMessage(
+                      messages.personalTools,
+                    )}
+                    onClick={(e) => this.toggleMenu(e, 'personalTools')}
+                    tabIndex={0}
+                    id="toolbar-personal"
+                  >
+                    <Icon
+                      name={userSVG}
+                      size="30px"
+                      title={this.props.intl.formatMessage(
+                        messages.personalTools,
+                      )}
+                    />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="toolbar-handler">
+              <button
+                aria-label={this.props.intl.formatMessage(
+                  messages.shrinkToolbar,
+                )}
+                className={cx({
+                  [this.props.content?.review_state]: this.props.content
+                    ?.review_state,
+                })}
+                onClick={this.handleShrink}
+              />
+            </div>
+          </div>
+          <div className="pusher" />
+        </>
+      )
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  withCookies,
+  connect(
+    (state, props) => ({
+      actions: state.actions.actions,
+      token: state.userSession.token,
+      userId: state.userSession.token
+        ? jwtDecode(state.userSession.token).sub
+        : '',
+      content: state.content.data,
+      pathname: props.pathname,
+      types: filter(state.types.types, 'addable'),
+      unlockRequest: state.content.unlock,
+    }),
+    { getTypes, listActions, setExpandedToolbar, unlockContent },
+  ),
+)(Toolbar);

package/src/index.js

@@ -1,6 +1,7 @@
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from 'volto-slate/editor/plugins/Callout';
 import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
+import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -76,9 +77,6 @@ const applyConfig = (config) => {
   if (config.blocks.blocksConfig.teaser) {
     config.blocks.blocksConfig.teaser.restricted = true;
   }
-  if (config.blocks.blocksConfig.teaserGrid) {
-    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
-  }
 
   // Divider
   if (config.blocks.blocksConfig.dividerBlock) {
@@ -95,10 +93,23 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.columnsBlock.mostUsed = true;
   }
 
+  // Listing
+  if (config.blocks.blocksConfig.listing) {
+    config.blocks.blocksConfig.listing.title = 'Listing (Content)';
+  }
+
   // Custom blocks
-  config = [installItemBlock].reduce((acc, apply) => apply(acc), config);
+  config = [installItemBlock, customizeTeaserBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
   config.blocks.blocksConfig.item.mostUsed = true;
 
+  // Disable some blocks
+  if (config.blocks.blocksConfig.imagecards) {
+    config.blocks.blocksConfig.imagecards.restricted = true;
+  }
+
   // Done
   return config;
 };