Skip to content

Commit 53762a0

Browse files
sneridaghsneridagh
authored
Refactor widgets oct + refactor button block (#697)
1 parent b9a4910 commit 53762a0

20 files changed

Lines changed: 476 additions & 347 deletions

File tree

‎.github/workflows/cypress-no-only.yml‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: "Cypress check for .only in tests"
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
workflow_dispatch:
9+
10+
jobs:
11+
check-cypress-only:
12+
name: "Verify no focused Cypress tests"
13+
runs-on: ubuntu-latest
14+
15+
steps:
16+
- name: "Checkout repository"
17+
uses: actions/checkout@v4
18+
19+
- name: "Fail if Cypress tests contain .only"
20+
run: |
21+
set -euo pipefail
22+
matches=$(rg --line-number --color=never --glob '*.cy.*' --glob '*.spec.*' --fixed-strings '.only' frontend/cypress/tests || true)
23+
if [ -n "$matches" ]; then
24+
echo "Found focused Cypress tests (.only) in frontend/cypress/tests:"
25+
echo "$matches"
26+
exit 1
27+
fi

‎frontend/cypress/tests/core/blocks/blocks-teaser.js‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ context('Blocks Acceptance Tests', () => {
2929
cy.wait('@content');
3030
});
3131

32-
it.only('As editor I can add a (standalone) Teaser block', () => {
32+
it('As editor I can add a (standalone) Teaser block', () => {
3333
// GIVEN a Document with the title document and a Document to reference with the title Blue Orchids
3434
cy.createContent({
3535
contentType: 'Document',
@@ -45,17 +45,15 @@ context('Blocks Acceptance Tests', () => {
4545
cy.wait('@schema');
4646

4747
// WHEN I create a Teaser block
48-
cy.get('.block .slate-editor [contenteditable=true]').click();
49-
cy.get('.button .block-add-button').click({ force: true });
50-
cy.get('.blocks-chooser .mostUsed .button.teaser')
51-
.contains('Teaser')
52-
.click({ force: true });
48+
cy.addNewBlock('teaser');
5349
cy.get(
5450
'.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]',
5551
).click();
5652
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
5753
cy.wait(500);
58-
cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
54+
cy.get(
55+
'[class*="field-wrapper-align-"] .buttons button[aria-label="Center"]',
56+
).click();
5957
cy.get('#toolbar-save').click();
6058

6159
// THEN I can see the Teaser block
@@ -87,20 +85,18 @@ context('Blocks Acceptance Tests', () => {
8785
});
8886

8987
cy.navigate('/document/edit');
88+
cy.wait('@schema');
9089
// WHEN I create a Teaser block and change the data of the referenced object
91-
cy.get('.block .slate-editor [contenteditable=true]').click();
92-
cy.get('.button .block-add-button').click({ force: true });
93-
cy.get('.blocks-chooser .mostUsed .button.teaser')
94-
.contains('Teaser')
95-
.click({ force: true });
90+
cy.addNewBlock('teaser');
9691
cy.get(
9792
'.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]',
9893
).click();
9994
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
100-
cy.wait(500);
10195
cy.get('#toolbar-save').click();
96+
cy.wait('@content');
10297

103-
cy.visit('/document');
98+
cy.navigate('/document');
99+
cy.wait('@content');
104100
cy.get('.block.teaser .card-summary h2').contains('Blue Orchids');
105101
cy.get('.block.teaser .card-summary p').contains(
106102
'are growing on the mountain tops',
@@ -116,6 +112,7 @@ context('Blocks Acceptance Tests', () => {
116112
cy.get('.documentFirstHeading').contains('Blue Orchids and Tulips');
117113
// THEN I can see the updated content in the teaser
118114
cy.navigate('/document');
115+
cy.wait('@content');
119116
cy.get('.block.teaser .card-summary h2').contains(
120117
'Blue Orchids and Tulips',
121118
);
@@ -138,11 +135,7 @@ context('Blocks Acceptance Tests', () => {
138135
});
139136
cy.visit('/document/edit');
140137
// WHEN I create a Teaser block and change the data of the referenced object
141-
cy.get('.block .slate-editor [contenteditable=true]').click();
142-
cy.get('.button .block-add-button').click({ force: true });
143-
cy.get('.blocks-chooser .mostUsed .button.teaser')
144-
.contains('Teaser')
145-
.click({ force: true });
138+
cy.addNewBlock('teaser');
146139
cy.get(
147140
'.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]',
148141
).click();
@@ -183,11 +176,7 @@ context('Blocks Acceptance Tests', () => {
183176

184177
cy.navigate('/document/edit');
185178
// WHEN I create a Teaser block and change the data of the referenced object
186-
cy.get('.block .slate-editor [contenteditable=true]').click();
187-
cy.get('.button .block-add-button').click({ force: true });
188-
cy.get('.blocks-chooser .mostUsed .button.teaser')
189-
.contains('Teaser')
190-
.click({ force: true });
179+
cy.addNewBlock('teaser');
191180
cy.get(
192181
'.objectbrowser-field[aria-labelledby="fieldset-default-field-label-href"] button[aria-label="Open object browser"]',
193182
).click();

‎frontend/cypress/tests/main/blocks-slider-variant.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,12 @@ context('Blocks Acceptance Tests', () => {
7474
.uncheck({ force: true })
7575
.should('not.be.checked');
7676

77-
cy.get('.align-buttons button[aria-label="Right"]').click();
78-
cy.get('.align-buttons button[aria-label="Left"]').click();
77+
cy.get(
78+
'[class*="field-wrapper-flagAlign-"] .buttons button[aria-label="Right"]',
79+
).click();
80+
cy.get(
81+
'[class*="field-wrapper-flagAlign-"] .buttons button[aria-label="Left"]',
82+
).click();
7983

8084
// add 2nd slider block Override Title, Description Image.
8185
cy.get('.add-item-button-wrapper button').click();
@@ -164,8 +168,12 @@ context('Blocks Acceptance Tests', () => {
164168
.uncheck({ force: true })
165169
.should('not.be.checked');
166170

167-
cy.get('.align-buttons button[aria-label="Right"]').click();
168-
cy.get('.align-buttons button[aria-label="Left"]').click();
171+
cy.get(
172+
'[class*="field-wrapper-flagAlign-"] .buttons button[aria-label="Right"]',
173+
).click();
174+
cy.get(
175+
'[class*="field-wrapper-flagAlign-"] .buttons button[aria-label="Left"]',
176+
).click();
169177

170178
// add 2nd slider block Override Title, Description Image.
171179
cy.get('.add-item-button-wrapper button').click();

‎frontend/cypress/tests/main/blocks-teaser-types.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,9 @@ context('Blocks Acceptance Tests', () => {
5555
).click();
5656
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
5757
cy.wait(500);
58-
cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
58+
cy.get(
59+
'[class*="field-wrapper-align-"] .buttons button[aria-label="Center"]',
60+
).click();
5961
cy.get('#toolbar-save').click();
6062

6163
// THEN I can see the Teaser block
@@ -99,7 +101,9 @@ context('Blocks Acceptance Tests', () => {
99101
).click();
100102
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
101103
cy.wait(500);
102-
cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
104+
cy.get(
105+
'[class*="field-wrapper-align-"] .buttons button[aria-label="Center"]',
106+
).click();
103107
cy.get('#toolbar-save').click();
104108

105109
// THEN I can see the Teaser block
@@ -146,7 +150,9 @@ context('Blocks Acceptance Tests', () => {
146150
).click();
147151
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
148152
cy.wait(500);
149-
cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
153+
cy.get(
154+
'[class*="field-wrapper-align-"] .buttons button[aria-label="Center"]',
155+
).click();
150156
cy.get('#toolbar-save').click();
151157

152158
// THEN I can see the Teaser block
@@ -190,18 +196,21 @@ context('Blocks Acceptance Tests', () => {
190196
).click();
191197
cy.get('[aria-label="Select Blue Orchids"]').dblclick();
192198
cy.wait(500);
193-
cy.get('.align-buttons .ui.buttons button[aria-label="Center"]').click();
199+
cy.get(
200+
'[class*="field-wrapper-align-"] .buttons button[aria-label="Center"]',
201+
).click();
194202
cy.get('#toolbar-save').click();
195203

196204
// THEN I can see the Teaser block
197205
cy.visit('/document');
206+
cy.wait('@content');
198207
cy.get('.block.teaser').should('have.class', 'has--align--center');
199208

200209
// No preview_image in Files by default
201210
// cy.get('.block.teaser .image-wrapper img')
202211
// .should('have.attr', 'src')
203212
// .and('include', '/document/blue-orchids/@@images/preview_image-');
204-
cy.get('.headline').should('exist');
213+
// cy.get('.headline').should('exist');
205214
cy.get('.block.teaser .card-summary h2').contains('Blue Orchids');
206215
cy.get('.block.teaser .card-summary p').contains(
207216
'are growing on the mountain tops',

‎frontend/mrs.developer.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"package": "@kitconcept/volto-button-block",
3030
"url": "git@github.com:kitconcept/volto-button-block.git",
3131
"https": "https://github.com/kitconcept/volto-button-block.git",
32-
"tag": "4.0.0-alpha.0"
32+
"tag": "4.0.0-alpha.2"
3333
},
3434
"volto-carousel-block": {
3535
"develop": true,
@@ -93,14 +93,14 @@
9393
"package": "@kitconcept/volto-slider-block",
9494
"url": "git@github.com:kitconcept/volto-slider-block.git",
9595
"https": "https://github.com/kitconcept/volto-slider-block.git",
96-
"tag": "^7.0.0-alpha.0"
96+
"tag": "7.0.0-alpha.0"
9797
},
9898
"volto-social-media": {
9999
"develop": false,
100100
"output": "packages",
101101
"package": "@plonegovbr/volto-social-media",
102102
"url": "git@github.com:plonegovbr/social-media.git",
103103
"https": "https://github.com/plonegovbr/social-media.git",
104-
"branch": "^2.0.0-alpha.10"
104+
"branch": "2.0.0-alpha.10"
105105
}
106106
}

‎frontend/packages/volto-light-theme/news/697.feature‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Refactor `volto-button-block`, transfer all the customizations to the block. @sneridagh

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

Lines changed: 0 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,7 @@
1-
import { defineMessages } from 'react-intl';
21
import { defaultStylingSchema } from '../schema';
32

4-
const messages = defineMessages({
5-
BlockWidth: {
6-
id: 'Block Width',
7-
defaultMessage: 'Block Width',
8-
},
9-
Alignment: {
10-
id: 'Alignment',
11-
defaultMessage: 'Alignment',
12-
},
13-
});
14-
153
export const ButtonStylingSchema = ({ schema, formData, intl }) => {
164
defaultStylingSchema({ schema, formData, intl });
175

18-
schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
19-
(field) => field !== 'inneralign',
20-
);
21-
22-
delete schema.properties?.inneralign;
23-
24-
schema.properties.styles.schema.fieldsets[0].fields = [
25-
'blockWidth:noprefix',
26-
...schema.properties.styles.schema.fieldsets[0].fields,
27-
];
28-
29-
schema.properties.styles.schema.fieldsets[0].fields = [
30-
'align:noprefix',
31-
...schema.properties.styles.schema.fieldsets[0].fields,
32-
];
33-
34-
schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
35-
widget: 'blockWidth',
36-
title: intl.formatMessage(messages.BlockWidth),
37-
default: 'default',
38-
filterActions: ['narrow', 'default'],
39-
};
40-
41-
schema.properties.styles.schema.properties['align:noprefix'] = {
42-
widget: 'blockAlignment',
43-
title: intl.formatMessage(messages.Alignment),
44-
default: 'left',
45-
};
46-
476
return schema;
487
};

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,5 @@ import { defaultStylingSchema } from '../schema';
33
export const sliderBlockSchemaEnhancer = ({ formData, schema, intl }) => {
44
defaultStylingSchema({ schema, formData, intl });
55

6-
// Override flagAlign widget to inner_align
7-
// ToDo: Remove when backported to Volto 19
8-
schema.properties.slides.schema.properties.flagAlign.widget = 'inner_align';
9-
106
return schema;
117
};

‎frontend/packages/volto-light-theme/src/components/Widgets/AlignWidget.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import { defineMessages, useIntl } from 'react-intl';
3+
import ButtonsWidget, {
4+
type ActionInfo,
5+
type ButtonsWidgetProps,
6+
} from './Buttons';
7+
import imageLeftSVG from '@plone/volto/icons/image-left.svg';
8+
import imageRightSVG from '@plone/volto/icons/image-right.svg';
9+
import imageFitSVG from '@plone/volto/icons/image-fit.svg';
10+
import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
11+
import imageWideSVG from '@plone/volto/icons/image-wide.svg';
12+
import imageFullSVG from '@plone/volto/icons/image-full.svg';
13+
import type { IntlShape } from 'react-intl';
14+
15+
const messages = defineMessages({
16+
left: {
17+
id: 'Left',
18+
defaultMessage: 'Left',
19+
},
20+
right: {
21+
id: 'Right',
22+
defaultMessage: 'Right',
23+
},
24+
center: {
25+
id: 'Center',
26+
defaultMessage: 'Center',
27+
},
28+
narrow: {
29+
id: 'Narrow',
30+
defaultMessage: 'Narrow',
31+
},
32+
wide: {
33+
id: 'Wide',
34+
defaultMessage: 'Wide',
35+
},
36+
full: {
37+
id: 'Full',
38+
defaultMessage: 'Full',
39+
},
40+
});
41+
42+
export const defaultActionsInfo = ({
43+
intl,
44+
}: {
45+
intl: IntlShape;
46+
}): Record<string, ActionInfo> => ({
47+
left: [imageLeftSVG, intl.formatMessage(messages.left)],
48+
center: [imageFitSVG, intl.formatMessage(messages.center)],
49+
right: [imageRightSVG, intl.formatMessage(messages.right)],
50+
narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
51+
wide: [imageWideSVG, intl.formatMessage(messages.wide)],
52+
full: [imageFullSVG, intl.formatMessage(messages.full)],
53+
});
54+
55+
type AlignWidgetProps = ButtonsWidgetProps & {
56+
defaultAction?: string;
57+
};
58+
59+
const AlignWidget = (props: AlignWidgetProps) => {
60+
const intl = useIntl();
61+
62+
const {
63+
actions = ['left', 'center', 'right', 'full'],
64+
actionsInfoMap,
65+
default: defaultValue,
66+
defaultAction,
67+
} = props;
68+
69+
const actionsInfo = {
70+
...defaultActionsInfo({ intl }),
71+
...actionsInfoMap,
72+
};
73+
74+
return (
75+
<ButtonsWidget
76+
{...props}
77+
actions={actions}
78+
actionsInfoMap={actionsInfo}
79+
default={defaultValue ?? defaultAction ?? 'center'}
80+
/>
81+
);
82+
};
83+
84+
export default AlignWidget;

0 commit comments

Comments
 (0)