Skip to content

Commit 99b76fe

Browse files
fabiankaegyfabiankaegy
authored
Merge pull request #366 from 10up/fix/broken-types
Fix Typescript Builds
2 parents d6cd19b + b38b1cb commit 99b76fe

File tree

7 files changed

+145
-44
lines changed

7 files changed

+145
-44
lines changed

‎api/register-block-extension/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ function registerBlockExtension(
3737
}: BlockOptionOptions,
3838
): void {
3939
const isMultiBlock = Array.isArray(blockName);
40-
40+
4141
const shouldApplyBlockExtension = (blockType: string): boolean => {
4242
if (blockName === '*' || blockName === 'all') {
4343
return true;
4444
}
45-
45+
4646
if (isMultiBlock) {
4747
return blockName.includes(blockType);
4848
}
@@ -53,6 +53,7 @@ function registerBlockExtension(
5353
blockName = 'all';
5454
}
5555

56+
// @ts-expect-error isMultiBlock verifies if this is an Array and supports join or not.
5657
const blockNamespace = isMultiBlock ? blockName.join('-') : blockName;
5758

5859
const addAttributesToBlock = (settings: Record<string, any>, name: string) => {

‎components/color-settings/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ interface ColorSettingProps {
4949
/**
5050
* Callback called when a color is selected.
5151
*/
52-
onChange: (color: string) => void;
52+
onChange: (newColor?: string | undefined, index?: number | undefined) => void;
5353
}
5454

5555
interface Color {

‎components/repeater/index.js‎

Lines changed: 122 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// @ts-ignore
12
import { useBlockEditContext, store as blockEditorStore } from '@wordpress/block-editor';
23
import { store as blocksStore } from '@wordpress/blocks';
34
import { useSelect, dispatch } from '@wordpress/data';
@@ -25,14 +26,19 @@ import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
2526
import { CSS } from '@dnd-kit/utilities';
2627
import { DragHandle } from '../drag-handle';
2728

29+
/**
30+
* @typedef {object} IndexedItem
31+
* @property {string} id Identifier of the item
32+
*/
33+
2834
/**
2935
* The Sortable Item Component.
3036
*
3137
* @param {object} props React props
3238
* @param {Function} props.children Render prop to render the children.
3339
* @param {object} props.item The repeater item object.
34-
* @param {Function} props.setItem A function to set state of a repeater item.
35-
* @param {Function} props.removeItem A function to delete a repeater item.
40+
* @param {Function|null} props.setItem A function to set state of a repeater item.
41+
* @param {Function|null} props.removeItem A function to delete a repeater item.
3642
* @param {string} props.id A string identifier for a repeater item.
3743
* @returns {*} React JSX
3844
*/
@@ -73,11 +79,11 @@ const SortableItem = ({ children, item = {}, setItem = null, removeItem = null,
7379
*
7480
* @param {object} props React props
7581
* @param {Function} props.children Render prop to render the children.
76-
* @param {string} props.addButton render prop to customize the "Add item" button.
82+
* @param {Function|null} props.addButton render prop to customize the "Add item" button.
7783
* @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items.
7884
* @param {Function} props.onChange callback function to update the block attribute.
79-
* @param {Array} props.value array of Repeater items.
80-
* @param {Array} props.defaultValue array of default Repeater items.
85+
* @param {Array<IndexedItem>} props.value array of Repeater items.
86+
* @param {Array<IndexedItem>} props.defaultValue array of default Repeater items.
8187
* @returns {*} React JSX
8288
*/
8389
export const AbstractRepeater = ({
@@ -95,13 +101,24 @@ export const AbstractRepeater = ({
95101
}),
96102
);
97103

104+
/**
105+
* Handle drag event completion
106+
*
107+
* @param {import('@dnd-kit/core').DragEndEvent} event End of drag event
108+
*/
98109
function handleDragEnd(event) {
99110
const { active, over } = event;
100111

101-
if (active.id !== over.id) {
112+
if (active.id !== over?.id) {
113+
/**
114+
* Set of items to move.
115+
*
116+
* @param {Array<IndexedItem>} items Set of indexed items
117+
* @returns {Array<IndexedItem>} Changed set of items
118+
*/
102119
const moveArray = (items) => {
103120
const oldIndex = items.findIndex((item) => item.id === active.id);
104-
const newIndex = items.findIndex((item) => item.id === over.id);
121+
const newIndex = items.findIndex((item) => item.id === over?.id);
105122

106123
return arrayMove(items, oldIndex, newIndex);
107124
};
@@ -132,7 +149,7 @@ export const AbstractRepeater = ({
132149
/**
133150
* Updates the item currently being edited.
134151
*
135-
* @param {string|number|boolean} newValue The value that should be used to updated the item.
152+
* @param {object|string|number|boolean} newValue The value that should be used to updated the item.
136153
* @param {number} index The index at which the item should be updated.
137154
*/
138155
function setItem(newValue, index) {
@@ -158,6 +175,14 @@ export const AbstractRepeater = ({
158175
*/
159176
function removeItem(index) {
160177
const valueCopy = JSON.parse(JSON.stringify(value)).filter(
178+
/**
179+
* Filter out the item to remove.
180+
*
181+
* @param {IndexedItem} item Item to remove
182+
* @param {number} innerIndex Current index
183+
* @returns {boolean}
184+
*/
185+
// @ts-ignore
161186
(item, innerIndex) => index !== innerIndex,
162187
);
163188
onChange(valueCopy);
@@ -179,19 +204,44 @@ export const AbstractRepeater = ({
179204
return (
180205
<SortableItem
181206
item={item}
182-
setItem={(val) => setItem(val, key)}
207+
setItem={
208+
/**
209+
* Add/update callback
210+
*
211+
* @param {object|string|number|boolean} val Value to set
212+
* @returns {void}
213+
*/
214+
(val) => setItem(val, key)
215+
}
183216
removeItem={() => removeItem(key)}
184217
key={item.id}
185218
id={item.id}
186219
>
187-
{(item, id, setItem, removeItem) => {
188-
return children(
189-
item,
190-
id,
191-
(val) => setItem(val, key),
192-
() => removeItem(key),
193-
);
194-
}}
220+
{
221+
/**
222+
* Mapped set of sortable items
223+
*
224+
* @param {IndexedItem} item Current Item
225+
* @param {string} id Current Item ID
226+
* @param {Function} setItem Callback to add/update an item
227+
* @param {Function} removeItem Callback to remove an item
228+
* @returns {*} React JSX
229+
*/
230+
(item, id, setItem, removeItem) => {
231+
return children(
232+
item,
233+
id,
234+
/**
235+
* Add/update callback
236+
*
237+
* @param {object|string|number|boolean} val Value to set
238+
* @returns {void}
239+
*/
240+
(val) => setItem(val, key),
241+
() => removeItem(key),
242+
);
243+
}
244+
}
195245
</SortableItem>
196246
);
197247
})}
@@ -202,6 +252,12 @@ export const AbstractRepeater = ({
202252
return children(
203253
item,
204254
item.id,
255+
/**
256+
* Add/update callback
257+
*
258+
* @param {object|string|number|boolean} val Value to set
259+
* @returns {void}
260+
*/
205261
(val) => setItem(val, key),
206262
() => removeItem(key),
207263
);
@@ -218,6 +274,16 @@ export const AbstractRepeater = ({
218274
);
219275
};
220276

277+
/**
278+
* Attribute Repeater Component.
279+
*
280+
* @param {object} props React props
281+
* @param {Function} props.children Render prop to render the children.
282+
* @param {Function|null} props.addButton render prop to customize the "Add item" button.
283+
* @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items.
284+
* @param {string|null} props.attribute Attribute name.
285+
* @returns {*} React JSX
286+
*/
221287
export const AttributeRepeater = ({
222288
children,
223289
attribute = null,
@@ -227,24 +293,39 @@ export const AttributeRepeater = ({
227293
const { clientId, name } = useBlockEditContext();
228294
const { updateBlockAttributes } = dispatch(blockEditorStore);
229295

230-
const attributeValue = useSelect((select) => {
231-
const attributes = select(blockEditorStore).getBlockAttributes(clientId);
232-
return attributes[attribute] || [];
233-
});
296+
const attributeValue = useSelect(
297+
(select) => {
298+
// @ts-ignore
299+
const attributes = select(blockEditorStore).getBlockAttributes(clientId);
300+
return attributes[attribute] || [];
301+
},
302+
[attribute, clientId],
303+
);
234304

235-
const { defaultRepeaterData } = useSelect((select) => {
236-
return {
237-
defaultRepeaterData:
238-
select(blocksStore).getBlockType(name).attributes[attribute].default,
239-
};
240-
});
305+
const { defaultRepeaterData } = useSelect(
306+
(select) => {
307+
return {
308+
defaultRepeaterData:
309+
// @ts-ignore
310+
select(blocksStore).getBlockType(name).attributes[attribute].default,
311+
};
312+
},
313+
[attribute],
314+
);
241315

242316
if (defaultRepeaterData.length) {
243317
defaultRepeaterData[0].id = uuid();
244318
}
245319

320+
/**
321+
* Update a blocks attributes
322+
*
323+
* @param {string} value Attribute value
324+
*/
246325
const handleOnChange = (value) => {
247-
updateBlockAttributes(clientId, { [attribute]: value });
326+
if (attribute !== null) {
327+
updateBlockAttributes(clientId, { [attribute]: value });
328+
}
248329
};
249330

250331
return (
@@ -260,6 +341,19 @@ export const AttributeRepeater = ({
260341
);
261342
};
262343

344+
/**
345+
* Repeater Component.
346+
*
347+
* @param {object} props React props
348+
* @param {Function} props.children Render prop to render the children.
349+
* @param {Function|null} props.addButton render prop to customize the "Add item" button.
350+
* @param {boolean} props.allowReordering boolean to toggle reordering of Repeater items.
351+
* @param {Function} props.onChange callback function to update the block attribute.
352+
* @param {Array<IndexedItem>} props.value array of Repeater items.
353+
* @param {Array<IndexedItem>} props.defaultValue array of default Repeater items.
354+
* @param {string|null} props.attribute Attribute name.
355+
* @returns {*} React JSX
356+
*/
263357
export const Repeater = ({
264358
children,
265359
addButton = null,

‎cypress/e2e/ColorSettings.spec.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ context('ColorSettings', () => {
1616

1717
it('Allows the user to use a custom color and displays it', () => {
1818
cy.get('.components-color-palette__custom-color-button').first().click();
19-
cy.get('.components-input-control__input').focus().clear().type('ff9400');
19+
cy.get('[data-wp-component="ColorPicker"] .components-input-control__input').focus().clear().type('ff9400');
2020
cy.get('.components-color-palette__custom-color-name').first().should('have.text', 'Custom');
2121
cy.get('.components-color-palette__custom-color-value').first().should('have.text', '#ff9400');
2222
})
2323

2424
it('Allows the user to clear the color', () => {
2525
cy.get('.components-color-palette__custom-color-button').first().click();
26-
cy.get('.components-input-control__input').focus().clear().type('ff9400');
26+
cy.get('[data-wp-component="ColorPicker"] .components-input-control__input').focus().clear().type('ff9400');
2727
cy.get('.components-color-palette__custom-color-name').first().should('have.text', 'Custom');
2828
cy.get('.components-color-palette__custom-color-value').first().should('have.text', '#ff9400');
2929

‎cypress/e2e/Link.spec.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@ context('Link', () => {
1111
cy.insertBlock('Link Example');
1212

1313
// create the first link
14-
cy.get('.tenup-block-components-link__label').first().click();
14+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').first().click();
1515
cy.wait(50);
16-
cy.get('.tenup-block-components-link__label').first().scrollIntoView({offset: {top: 100}}).type('First Link Label', { delay: 50, waitForAnimations: true });
17-
cy.get('.components-input-control__input').first().type('https://10up.com/{enter}', { delay: 50, waitForAnimations: true });
18-
16+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').first().scrollIntoView({offset: {top: 100}}).type('First Link Label', { delay: 50, waitForAnimations: true });
17+
cy.get('[data-wp-component="Popover"] .components-input-control__input').first().type('https://10up.com/{enter}', { delay: 50, waitForAnimations: true });
18+
1919
// create the second link
20-
cy.get('.tenup-block-components-link__label').eq(1).click();
20+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').eq(1).click();
2121
cy.wait(50);
22-
cy.get('.tenup-block-components-link__label').eq(1).type('Second Link Label', { delay: 50, waitForAnimations: true });
23-
cy.get('.components-input-control__input').first().type('https://10up.com/our-work/{enter}', { delay: 50, waitForAnimations: true });
24-
22+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').eq(1).type('Second Link Label', { delay: 50, waitForAnimations: true });
23+
cy.get('[data-wp-component="Popover"] .components-input-control__input').first().type('https://10up.com/our-work/{enter}', { delay: 50, waitForAnimations: true });
24+
2525
cy.savePost();
2626

2727
// click on the View Post snackbar item
28-
cy.get('.components-snackbar a').click();
28+
cy.get('[data-testid="snackbar-list"] .components-snackbar a').click();
2929

3030
// check that all the links have rendered correctly
3131
cy.get('.wp-block-example-link-example a').first().should('contain', 'First Link Label');
@@ -37,8 +37,8 @@ context('Link', () => {
3737
cy.get('a').contains('Edit Page').click();
3838

3939
// ensure both links populated correctly
40-
cy.get('.tenup-block-components-link__label').first().should('contain', 'First Link Label');
41-
cy.get('.tenup-block-components-link__label').eq(1).should('contain', 'Second Link Label');
40+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').first().should('contain', 'First Link Label');
41+
cy.get('[data-type="example/link-example"] .tenup-block-components-link__label').eq(1).should('contain', 'Second Link Label');
4242
})
4343

4444
})

‎cypress/support/commands.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ Cypress.Commands.add('createPost', (options = {}) => {
6868
}
6969
});
7070

71+
// Disable the pre-publish sidebar
72+
cy.window().then((win) => {
73+
win.wp.data.dispatch('core/editor').disablePublishSidebar();
74+
});
75+
7176
cy.wait(100);
7277

7378
if (title !== '') {

‎hooks/use-request-data/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const useRequestData = (entity: string, kind: string, query: Record<strin
2727
return {
2828
// @ts-ignore-next-line - The type definitions for the data package are incomplete.
2929
data: select(coreStore)[functionToCall](entity, kind, query),
30+
// @ts-ignore-next-line - The type definitions for the data package are incomplete.
3031
isLoading: select('core/data').isResolving(coreStore, functionToCall, [
3132
entity,
3233
kind,

0 commit comments

Comments
 (0)