@plone/volto 16.0.0-alpha.35 → 16.0.0-alpha.37

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Change Log
 
+## 16.0.0-alpha.37 (2022-09-27)
+
+### Feature
+
+- Added resetOnCancel functionality in Form component @MdSahil-oss
+- volto-slate: introduce style-menu @nileshgulia1
+
+### Bugfix
+
+- Fix `listing` block in SSR, now that it is fully variations aware and the configuration is passed to the SSR `querystring` action. @sneridagh
+- Remove wrapping ul or ol when deselecting list style @robgietema
+
+## 16.0.0-alpha.36 (2022-09-26)
+
+### Bugfix
+
+- Fix number widget when the value is 0 @iRohitSingh
+- Fix the typo in change workflow status dialog in "de" @iRohitSingh
+- Show unauthorized message when accessing the diff view without permission @robgietema
+- Fix i18n in title of Aliases control panel @sneridagh
+- The styling schema is now applied before the block variations schema enhancers, to allow those enhancers a chance to tweak the styling schema @tiberiuichim
+
+### Documentation
+
+- Added controls for the `actions` property of the `AlignWidget` storybook @JeffersonBledsoe #3671
+- Generic Setup -> `GenericSetup`. @stevepiercy
+
 ## 16.0.0-alpha.35 (2022-09-21)
 
 ### Breaking
@@ -13,6 +40,7 @@
 - Fix selection error when pressing backspace @robgietema
 - Fix sidebarTab in Toc Block @iRohitSingh
 - Fix virtualization (windowing) when displaying options with long titles for select widgets. (The virtualization happen when the number of options is greater than 25). Add dynamic height aware options using `react-virtualized`. @sneridagh
+- Fix email validation to ensure all addresses are correctly validated @instification
 
 ### Documentation
 
@@ -30,6 +58,7 @@
 
 ### Bugfix
 
+- Fix Press Enter in some blocks does not focus on the text block below #3647 @dobri1408
 - Add `matchAllRoutes` to AsyncConnect so that it matches all configured `asyncPropsExtenders` @tiberiuichim
 - Fix acceptence test groups controlpanel @ksuess
 

package/locales/ca/LC_MESSAGES/volto.po

@@ -3092,6 +3092,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/de/LC_MESSAGES/volto.po

@@ -3089,6 +3089,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/en/LC_MESSAGES/volto.po

@@ -3083,6 +3083,7 @@ msgstr ""
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/es/LC_MESSAGES/volto.po

@@ -3093,6 +3093,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/eu/LC_MESSAGES/volto.po

@@ -3090,6 +3090,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/fr/LC_MESSAGES/volto.po

@@ -3100,6 +3100,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/it/LC_MESSAGES/volto.po

@@ -3083,6 +3083,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/ja/LC_MESSAGES/volto.po

@@ -3091,6 +3091,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/nl/LC_MESSAGES/volto.po

@@ -3102,6 +3102,7 @@ msgstr ""
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/pt/LC_MESSAGES/volto.po

@@ -3091,6 +3091,7 @@ msgstr ""
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/pt_BR/LC_MESSAGES/volto.po

@@ -3093,6 +3093,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/ro/LC_MESSAGES/volto.po

@@ -3083,6 +3083,7 @@ msgstr "UID"
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2022-09-16T10:33:59.942Z\n"
+"POT-Creation-Date: 2022-09-23T09:41:15.663Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -3085,6 +3085,7 @@ msgstr ""
 
 #: components/manage/Aliases/Aliases
 #: components/manage/Controlpanels/Aliases
+#: components/manage/Controlpanels/Controlpanels
 #: components/manage/Toolbar/More
 # defaultMessage: URL Management
 msgid "URL Management"

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "16.0.0-alpha.35",
+  "version": "16.0.0-alpha.37",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { useSlate } from 'slate-react';
+import { Dropdown } from 'semantic-ui-react';
+import { useIntl, defineMessages } from 'react-intl';
+import cx from 'classnames';
+import { isBlockStyleActive, isInlineStyleActive, toggleStyle } from './utils';
+import config from '@plone/volto/registry';
+import { ToolbarButton } from '@plone/volto-slate/editor/ui';
+import paintSVG from '@plone/volto/icons/paint.svg';
+
+const messages = defineMessages({
+  inlineStyle: {
+    id: 'Inline Style',
+    defaultMessage: 'Inline Style',
+  },
+  paragraphStyle: {
+    id: 'Paragraph Style',
+    defaultMessage: 'Paragraph Style',
+  },
+  additionalStyles: {
+    id: 'Additional Styles',
+    defaultMessage: 'Additional Styles',
+  },
+});
+
+const StyleMenuButton = ({ icon, active, ...props }) => (
+  <ToolbarButton {...props} icon={icon} active={active} />
+);
+
+const MenuOpts = ({ editor, toSelect, option }) => {
+  const isActive = toSelect.includes(option);
+  return (
+    <Dropdown.Item
+      as="span"
+      active={isActive}
+      className={cx({ active: isActive })}
+      {...option}
+      onClick={(event, selItem) => {
+        toggleStyle(editor, {
+          cssClass: selItem.value,
+          isBlock: selItem.isBlock,
+        });
+      }}
+    />
+  );
+};
+
+const StylingsButton = (props) => {
+  const editor = useSlate();
+  const intl = useIntl();
+
+  // Converting the settings to a format that is required by dropdowns.
+  const inlineOpts = [
+    ...config.settings.slate.styleMenu.inlineStyles.map((def) => {
+      return {
+        value: def.cssClass,
+        text: def.label,
+        icon: def.icon,
+        isBlock: false,
+      };
+    }),
+  ];
+  const blockOpts = [
+    ...config.settings.slate.styleMenu.blockStyles.map((def) => {
+      return {
+        value: def.cssClass,
+        text: def.label,
+        icon: def.icon,
+        isBlock: true,
+      };
+    }),
+  ];
+
+  // Calculating the initial selection.
+  const toSelect = [];
+  // block styles
+  for (const val of blockOpts) {
+    const ia = isBlockStyleActive(editor, val.value);
+    if (ia) {
+      toSelect.push(val);
+    }
+  }
+  // inline styles
+  for (const val of inlineOpts) {
+    const ia = isInlineStyleActive(editor, val.value);
+    if (ia) {
+      toSelect.push(val);
+    }
+  }
+
+  const menuItemProps = {
+    toSelect,
+    editor,
+  };
+  const showMenu = inlineOpts.length || blockOpts.length;
+  return showMenu ? (
+    <Dropdown
+      id="style-menu"
+      pointing=" top left"
+      multiple
+      value={toSelect}
+      disabled={config.settings.slate.styleMenu.disabled ?? false}
+      additionLabel={intl.formatMessage(messages.additionalStyles)}
+      trigger={
+        <StyleMenuButton
+          title={intl.formatMessage(messages.additionalStyles)}
+          icon={paintSVG}
+          active={toSelect.length > 0}
+        />
+      }
+    >
+      <Dropdown.Menu>
+        {inlineOpts.length && (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.inlineStyle)}
+            />
+            {inlineOpts.map((option) => (
+              <MenuOpts {...menuItemProps} option={option} />
+            ))}
+          </>
+        )}
+
+        {blockOpts.length && (
+          <>
+            <Dropdown.Header
+              content={intl.formatMessage(messages.paragraphStyle)}
+            />
+            {blockOpts.map((option) => (
+              <MenuOpts {...menuItemProps} option={option} />
+            ))}
+          </>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  ) : (
+    ''
+  );
+};
+
+export default StylingsButton;

package/packages/volto-slate/src/editor/plugins/StyleMenu/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import StyleMenu from './StyleMenu';
+import './style.less';
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.buttons.styleMenu = (props) => <StyleMenu {...props} title="Styles" />;
+
+  slate.toolbarButtons.push('styleMenu');
+  slate.expandedToolbarButtons.push('styleMenu');
+
+  slate.styleMenu = {
+    inlineStyles: [],
+    blockStyles: [],
+  };
+
+  return config;
+}

package/packages/volto-slate/src/editor/plugins/StyleMenu/style.less

@@ -0,0 +1,29 @@
+#style-menu.ui.dropdown .menu {
+  .item {
+    display: flex;
+    user-select: none;
+
+    span.text {
+      margin-top: auto;
+      line-height: normal;
+      vertical-align: middle;
+    }
+  }
+
+  .header {
+    color: rgb(153, 153, 153);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+
+  .active {
+    z-index: 1;
+    background: #68778d;
+    box-shadow: none;
+    color: #ffffff;
+    font-weight: 300;
+  }
+
+  overflow: auto;
+  max-height: 50vh;
+}

package/packages/volto-slate/src/editor/plugins/StyleMenu/utils.js

@@ -0,0 +1,159 @@
+/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
+import { Editor, Transforms } from 'slate';
+import { isBlockActive } from '@plone/volto-slate/utils';
+import config from '@plone/volto/registry';
+
+/**
+ * Toggles a style (e.g. in the StyleMenu plugin).
+ * @param {Editor} editor
+ * @param {object} options
+ * @param {boolean} options.isRequested Whether the given style is requested by
+ * the user. The style is only applied if it is requested and only removed if it
+ * is not requested.
+ */
+export const toggleStyle = (editor, { cssClass, isBlock, isRequested }) => {
+  if (isBlock) {
+    toggleBlockStyle(editor, cssClass);
+  } else {
+    toggleInlineStyle(editor, cssClass);
+  }
+};
+
+export const toggleBlockStyle = (editor, style) => {
+  // We have 6 boolean variables which need to be accounted for.
+  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
+  const { slate } = config.settings;
+
+  const isListItem = isBlockActive(editor, slate.listItemType);
+  const isActive = isBlockStyleActive(editor, style);
+  const wantsList = false;
+
+  if (isListItem && !wantsList) {
+    toggleBlockStyleAsListItem(editor, style);
+  } else if (isListItem && wantsList && !isActive) {
+    // switchListType(editor, format); // this will deconstruct to Volto blocks
+  } else if (!isListItem && wantsList) {
+    // changeBlockToList(editor, format);
+  } else if (!isListItem && !wantsList) {
+    internalToggleBlockStyle(editor, style);
+  } else {
+    console.warn('toggleBlockStyle case not covered, please examine:', {
+      wantsList,
+      isActive,
+      isListItem,
+    });
+  }
+};
+
+export const toggleInlineStyle = (editor, style) => {
+  // We have 6 boolean variables which need to be accounted for.
+  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
+  const { slate } = config.settings;
+
+  const isListItem = isBlockActive(editor, slate.listItemType);
+  const isActive = isInlineStyleActive(editor, style);
+  const wantsList = false;
+
+  if (isListItem && !wantsList) {
+    toggleInlineStyleAsListItem(editor, style);
+  } else if (isListItem && wantsList && !isActive) {
+    // switchListType(editor, format); // this will deconstruct to Volto blocks
+  } else if (!isListItem && wantsList) {
+    // changeBlockToList(editor, format);
+  } else if (!isListItem && !wantsList) {
+    internalToggleInlineStyle(editor, style);
+  } else {
+    console.warn('toggleInlineStyle case not covered, please examine:', {
+      wantsList,
+      isActive,
+      isListItem,
+    });
+  }
+};
+
+export const isBlockStyleActive = (editor, style) => {
+  const sn = Array.from(
+    Editor.nodes(editor, {
+      match: (n) => !Editor.isEditor(n) && typeof n.styleName === 'string',
+      mode: 'highest',
+    }),
+  );
+
+  for (const [n] of sn) {
+    if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+export const isInlineStyleActive = (editor, style) => {
+  const m = Editor.marks(editor);
+  const keyName = `style-${style}`;
+  if (m && m[keyName]) {
+    return true;
+  }
+  return false;
+};
+
+export const internalToggleBlockStyle = (editor, style) => {
+  toggleBlockStyleInSelection(editor, style);
+};
+
+export const internalToggleInlineStyle = (editor, style) => {
+  toggleInlineStyleInSelection(editor, style);
+};
+
+/*
+ * Applies a block format unto a list item. Will split the list and deconstruct the
+ * block
+ */
+export const toggleBlockStyleAsListItem = (editor, style) => {
+  toggleBlockStyleInSelection(editor, style);
+};
+
+/*
+ * Applies an inline style unto a list item.
+ */
+export const toggleInlineStyleAsListItem = (editor, style) => {
+  toggleInlineStyleInSelection(editor, style);
+};
+
+function toggleInlineStyleInSelection(editor, style) {
+  const m = Editor.marks(editor);
+  const keyName = 'style-' + style;
+
+  if (m && m[keyName]) {
+    Editor.removeMark(editor, keyName);
+  } else {
+    Editor.addMark(editor, keyName, true);
+  }
+}
+
+function toggleBlockStyleInSelection(editor, style) {
+  const sn = Array.from(
+    Editor.nodes(editor, {
+      mode: 'highest',
+      match: (n) => {
+        return !Editor.isEditor(n);
+      },
+    }),
+  );
+
+  for (const [n, p] of sn) {
+    let cn = n.styleName;
+    if (typeof n.styleName !== 'string') {
+      cn = style;
+    } else if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
+      cn = cn
+        .split(' ')
+        .filter((x) => x !== style)
+        .join(' ');
+    } else {
+      // the style is not set but other styles are set
+      cn = cn.split(' ').concat(style).join(' ');
+    }
+    Transforms.setNodes(editor, { styleName: cn }, { at: p });
+  }
+}

package/packages/volto-slate/src/editor/plugins/index.js

@@ -4,6 +4,7 @@ import installImage from './Image';
 import installLinkPlugin from './Link';
 import installMarkdown from './Markdown';
 import installTable from './Table';
+import installStyleMenu from './StyleMenu';
 
 export default function install(config) {
   return [
@@ -13,5 +14,6 @@ export default function install(config) {
     installMarkdown,
     installImage,
     installTable,
+    installStyleMenu,
   ].reduce((acc, apply) => apply(acc), config);
 }

package/packages/volto-slate/src/index.js

@@ -31,6 +31,7 @@ export default (config) => {
     'numbered-list',
     'bulleted-list',
     'blockquote',
+    'styleMenu',
   ];
 
   config.addonReducers = {

package/packages/volto-slate/src/utils/blocks.js

@@ -212,7 +212,6 @@ export const toggleBlock = (editor, format, allowedChildren) => {
   const isListItem = isBlockActive(editor, slate.listItemType);
   const isActive = isBlockActive(editor, format);
   const wantsList = listTypes.includes(format);
-  // console.log({ isListItem, isActive, wantsList, format });
 
   if (isListItem && !wantsList) {
     toggleFormatAsListItem(editor, format);
@@ -223,7 +222,7 @@ export const toggleBlock = (editor, format, allowedChildren) => {
   } else if (!isListItem && !wantsList) {
     toggleFormat(editor, format, allowedChildren);
   } else if (isListItem && wantsList && isActive) {
-    toggleFormatAsListItem(editor, slate.defaultBlockType);
+    clearFormatting(editor);
   } else {
     console.warn('toggleBlock case not covered, please examine:', {
       wantsList,

package/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -77,7 +77,7 @@ const BlocksForm = (props) => {
       e.preventDefault();
     }
     if (e.key === 'Enter' && !disableEnter) {
-      onAddBlock(config.settings.defaultBlockType, index + 1);
+      onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
       e.preventDefault();
     }
   };

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -1,13 +1,16 @@
 import { getQueryStringResults } from '@plone/volto/actions';
+import { resolveBlockExtensions } from '@plone/volto/helpers';
+
+export default ({ dispatch, data, path, blocksConfig }) => {
+  const { resolvedExtensions } = resolveBlockExtensions(data, blocksConfig);
 
-export default ({ dispatch, data, path }) => {
   return [
     dispatch(
       getQueryStringResults(
         path,
         {
           ...data.querystring,
-          ...(data.variation?.fullobjects
+          ...(resolvedExtensions?.variation?.fullobjects
             ? { fullobjects: 1 }
             : { metadata_fields: '_all' }),
         },

package/src/components/manage/Controlpanels/Controlpanels.jsx

@@ -78,6 +78,10 @@ const messages = defineMessages({
     id: 'User Group Membership',
     defaultMessage: 'User Group Membership',
   },
+  urlmanagement: {
+    id: 'URL Management',
+    defaultMessage: 'URL Management',
+  },
 });
 
 /**
@@ -175,8 +179,8 @@ class Controlpanels extends Component {
         },
         {
           '@id': '/aliases',
-          group: 'General',
-          title: 'URL Management',
+          group: this.props.intl.formatMessage(messages.general),
+          title: this.props.intl.formatMessage(messages.urlmanagement),
         },
         {
           '@id': '/moderate-comments',

package/src/components/manage/Diff/Diff.jsx

@@ -27,6 +27,7 @@ import {
   FormattedDate,
   Icon,
   Toolbar,
+  Unauthorized,
 } from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
@@ -66,6 +67,7 @@ class Diff extends Component {
     getSchema: PropTypes.func.isRequired,
     getHistory: PropTypes.func.isRequired,
     schema: PropTypes.objectOf(PropTypes.any),
+    error: PropTypes.objectOf(PropTypes.any),
     pathname: PropTypes.string.isRequired,
     one: PropTypes.string.isRequired,
     two: PropTypes.string.isRequired,
@@ -205,7 +207,9 @@ class Diff extends Component {
       }),
     );
 
-    return (
+    return this.props.error?.status === 401 ? (
+      <Unauthorized />
+    ) : (
       <Container id="page-diff">
         <Helmet title={this.props.intl.formatMessage(messages.diff)} />
         <h1>
@@ -363,12 +367,13 @@ export default compose(
       data: state.diff.data,
       historyEntries: state.history.entries,
       schema: state.schema.schema,
+      error: state.diff.error,
       pathname: props.location.pathname,
       one: qs.parse(props.location.search).one,
       two: qs.parse(props.location.search).two,
       view: qs.parse(props.location.search).view || 'split',
-      title: state.content.data.title,
-      type: state.content.data['@type'],
+      title: state.content.data?.title,
+      type: state.content.data?.['@type'],
     }),
     { getDiff, getSchema, getHistory },
   ),

package/src/components/manage/Form/BlockDataForm.jsx

@@ -6,8 +6,8 @@ import {
 } from '@plone/volto/helpers';
 
 const BlockDataForm = compose(
-  withVariationSchemaEnhancer,
   withStylingSchemaEnhancer,
+  withVariationSchemaEnhancer,
 )(InlineForm);
 
 export default BlockDataForm;

package/src/components/manage/Form/BlockDataForm.test.jsx

@@ -28,6 +28,7 @@ beforeAll(() => {
     },
     testBlock: {
       id: 'testBlock',
+      // enableStyling: true,
       variations: [
         {
           id: 'default',
@@ -143,4 +144,77 @@ describe('BlockDataForm', () => {
     // schema is cloned, not mutated in place
     expect(testSchema.fieldsets[0].fields).toStrictEqual([]);
   });
+
+  it('should add styling field to schema', () => {
+    config.blocks.blocksConfig.testBlock.enableStyling = true;
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <BlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should allow variations to enhance styling schema', () => {
+    config.blocks.blocksConfig.testBlock.enableStyling = true;
+    let finalSchema; // the schema is cloned during enhancing; we need it for tests because the ObjectWidget is not rendered properly in the test
+    config.blocks.blocksConfig.testBlock.variations[0].schemaEnhancer = ({
+      schema,
+    }) => {
+      const stylesSchema = schema.properties.styles.schema;
+      stylesSchema.properties.extraField = { title: 'Extra field' };
+      stylesSchema.fieldsets[0].fields.push('extraField');
+      finalSchema = schema;
+      return schema;
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const testSchema = {
+      fieldsets: [{ title: 'Default', id: 'default', fields: [] }],
+      properties: {},
+      required: [],
+    };
+    const formData = {
+      '@type': 'testBlock',
+    };
+    const { container } = render(
+      <Provider store={store}>
+        <BlockDataForm
+          formData={formData}
+          schema={testSchema}
+          onChangeField={(id, value) => {}}
+        />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+    expect(
+      finalSchema.properties.styles.schema.properties.extraField,
+    ).toStrictEqual({ title: 'Extra field' });
+    expect(
+      finalSchema.properties.styles.schema.fieldsets[0].fields,
+    ).toStrictEqual(['align', 'extraField']);
+  });
 });

package/src/components/manage/Form/Form.jsx

@@ -74,6 +74,7 @@ class Form extends Component {
     onCancel: PropTypes.func,
     submitLabel: PropTypes.string,
     resetAfterSubmit: PropTypes.bool,
+    resetOnCancel: PropTypes.bool,
     isEditForm: PropTypes.bool,
     isAdminForm: PropTypes.bool,
     title: PropTypes.string,
@@ -105,6 +106,7 @@ class Form extends Component {
     onCancel: null,
     submitLabel: null,
     resetAfterSubmit: false,
+    resetOnCancel: false,
     isEditForm: false,
     isAdminForm: false,
     title: null,
@@ -399,7 +401,7 @@ class Form extends Component {
     if (event) {
       event.preventDefault();
     }
-    if (this.props.resetAfterSubmit) {
+    if (this.props.resetOnCancel || this.props.resetAfterSubmit) {
       this.setState({
         formData: this.props.formData,
       });

package/src/components/manage/Widgets/AlignWidget.stories.jsx

@@ -18,5 +18,10 @@ export default {
       </div>
     ),
   ],
-  argTypes: {},
+  argTypes: {
+    actions: {
+      control: 'check',
+      options: ['left', 'right', 'center', 'wide', 'full'],
+    },
+  },
 };

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

@@ -44,7 +44,7 @@ const NumberWidget = (props) => {
         disabled={isDisabled}
         min={minimum || null}
         max={maximum || null}
-        value={value || defaultValue}
+        value={value ?? defaultValue}
         placeholder={placeholder}
         onChange={({ target }) =>
           onChange(id, target.value === '' ? undefined : target.value)

package/src/components/theme/App/App.jsx

@@ -223,6 +223,7 @@ export const fetchContent = async ({ store, location }) => {
         location,
         id,
         data,
+        blocksConfig,
       });
       if (!p?.length) {
         throw new Error(

package/src/helpers/Extensions/index.js

@@ -1,2 +1,5 @@
 export * from './withBlockSchemaEnhancer';
-export withBlockExtensions, { resolveExtension } from './withBlockExtensions';
+export withBlockExtensions, {
+  resolveExtension,
+  resolveBlockExtensions,
+} from './withBlockExtensions';

package/src/helpers/FormValidation/FormValidation.js

@@ -40,7 +40,9 @@ const isMinPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
 const widgetValidation = {
   email: {
     isValidEmail: (emailValue, emailObj, intlFunc) => {
-      const emailRegex = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+      // Email Regex taken from from WHATWG living standard:
+      // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
+      const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
       const isValid = emailRegex.test(emailValue);
       return !isValid ? intlFunc(messages.isValidEmail) : null;
     },

package/src/helpers/FormValidation/FormValidation.test.js

@@ -76,5 +76,16 @@ describe('FormValidation', () => {
         email: [messages.isValidEmail.defaultMessage],
       });
     });
+
+    it('validates correct email', () => {
+      formData.email = 'test@domain.name';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
   });
 });

package/src/helpers/index.js

@@ -93,6 +93,7 @@ export {
   withBlockExtensions,
   applySchemaEnhancer,
   resolveExtension,
+  resolveBlockExtensions,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
 export { userHasRoles } from './User/User';