Refactor separator for vlt8 (#698)

Author: sneridagh

frontend/cypress/support/index.ts

@@ -38,5 +38,6 @@ namespace Cypress {
       skipFailures?: boolean,
     ): Chainable<JQuery<HTMLElement>>;
     checkAccessibility(): Chainable<JQuery<HTMLElement>>;
+    getSlate(): Chainable<JQuery<HTMLElement>>;
   }
 }

frontend/cypress/tests/addons/button-block.cy.ts

@@ -0,0 +1,21 @@
+context('Block Acceptance Tests', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.viewport('macbook-16');
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'document',
+      contentTitle: 'Document',
+      path: '/',
+    });
+    cy.autologin();
+  });
+
+  it('As editor I can add a Button block', () => {
+    cy.visit('/document/edit');
+    cy.getSlate().click();
+    cy.get('.button .block-add-button').click({ force: true });
+    cy.get('.blocks-chooser .mostUsed').findByText('Button').click();
+    cy.get('#toolbar-save').click();
+  });
+});

frontend/cypress/tests/addons/separator-block.cy.ts

@@ -0,0 +1,23 @@
+context('Separator Block Acceptance Tests', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.viewport('macbook-16');
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'document',
+      contentTitle: 'Document',
+      path: '/',
+    });
+    cy.autologin();
+  });
+
+  it('As editor I can add a Separator block', () => {
+    cy.navigate('/document/edit');
+    cy.get('.block .slate-editor [contenteditable=true]').click();
+    cy.get('.button .block-add-button').click({ force: true });
+    cy.get('.blocks-chooser .mostUsed .button.separator').click({
+      force: true,
+    });
+    cy.get('#toolbar-save').click();
+  });
+});

…/cypress/tests/addons/slider/block.cy.ts …/cypress/tests/addons/slider-block.cy.tsfrontend/cypress/tests/addons/slider/block.cy.ts renamed to frontend/cypress/tests/addons/slider-block.cy.ts frontend/cypress/tests/addons/slider/block.cy.ts renamed to frontend/cypress/tests/addons/slider-block.cy.ts

@@ -1,4 +1,4 @@
-context('Block Acceptance Tests', () => {
+context('Slider Block Acceptance Tests', () => {
   beforeEach(() => {
     cy.visit('/');
     cy.viewport('macbook-16');

frontend/cypress/tests/core/blocks/block-anchors.js

@@ -85,7 +85,7 @@
     "package": "@kitconcept/volto-separator-block",
     "url": "git@github.com:kitconcept/volto-separator-block.git",
     "https": "https://github.com/kitconcept/volto-separator-block.git",
-    "tag": "4.2.1"
+    "tag": "5.0.0-alpha.0"
   },
   "volto-slider-block": {
     "develop": true,

frontend/mrs.developer.json

@@ -1,59 +1,7 @@
-import { defineMessages } from 'react-intl';
 import { defaultStylingSchema } from '../schema';
 
-const messages = defineMessages({
-  BlockWidth: {
-    id: 'Block Width',
-    defaultMessage: 'Block Width',
-  },
-  Alignment: {
-    id: 'Alignment',
-    defaultMessage: 'Alignment',
-  },
-  shortline: {
-    id: 'Short line',
-    defaultMessage: 'Short line',
-  },
-});
-
 export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
   defaultStylingSchema({ schema, formData, intl });
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'blockWidth:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
-    widget: 'blockWidth',
-    title: intl.formatMessage(messages.BlockWidth),
-    default: 'default',
-    filterActions: ['narrow', 'default'],
-  };
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'align:noprefix',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties['align:noprefix'] = {
-    widget: 'blockAlignment',
-    title: intl.formatMessage(messages.Alignment),
-    default: 'left',
-  };
-
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    'shortLine',
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-  ];
-
-  schema.properties.styles.schema.properties.shortLine = {
-    title: intl.formatMessage(messages.shortline),
-    type: 'boolean',
-  };
-
-  schema.properties.styles.schema.properties['align:noprefix'].disabled =
-    !formData?.styles?.shortLine;
-
   return schema;
 };

frontend/packages/volto-light-theme/src/components/Blocks/Separator/schema.js

@@ -401,10 +401,10 @@ export default function install(config: ConfigType) {
 
   // Check if the separator is present before enhancing it
   if (config.blocks.blocksConfig?.separator?.id) {
-    config.blocks.blocksConfig.separator = {
-      ...config.blocks.blocksConfig.separator,
-      schemaEnhancer: SeparatorStylingSchema,
-    };
+    config.blocks.blocksConfig.separator.schemaEnhancer = composeSchema(
+      config.blocks.blocksConfig.separator.schemaEnhancer,
+      SeparatorStylingSchema,
+    );
   }
 
   // TOC Block

frontend/packages/volto-light-theme/src/config/blocks.tsx

@@ -9,7 +9,7 @@
   "@kitconcept/volto-highlight-block": "^4.5.0",
   "@kitconcept/volto-introduction-block": "^1.1.0",
   "@kitconcept/volto-logos-block": "^3.0.0-alpha.2",
-  "@kitconcept/volto-separator-block": "^4.2.1",
+  "@kitconcept/volto-separator-block": "^5.0.0-alpha.0",
   "@kitconcept/volto-slider-block": "^7.0.0-alpha.0",
   "@plonegovbr/volto-social-media": "^2.0.0-alpha.10"
 }