fix remainding components

api/register-block-extension/index.js → api/register-block-extension/index.tsx

@@ -1,40 +1,44 @@
-/* eslint-disable react/jsx-props-no-spreading */
-
 import { addFilter } from '@wordpress/hooks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import classnames from 'classnames';
+import { FC } from 'react';
+
+interface BlockEditProps {
+	name: string;
+	isSelected: boolean;
+	attributes: Record<string, any>;
+	setAttributes: (attributes: Record<string, any>) => void;
+	className: string;
+	style: Record<string, any>;
+	wrapperProps: {
+		[key: string]: any;
+	};
+	[key: string]: unknown;
+}
+
+interface BlockOptionOptions {
+	attributes: Record<string, any>;
+	classNameGenerator: (attributes: Record<string, unknown>) => string;
+	inlineStyleGenerator: (attributes: Record<string, unknown>) => Record<string, any>;
+	Edit: FC<BlockEditProps>;
+	extensionName: string;
+	order?: 'before' | 'after';
+}
 
-/**
- * registerBlockExtension
- *
- * A helper function that allows you to add custom settings to any block.
- * Under the hood it filters the blocks registerBlockType, BlockEdit, BlockListBlock
- * and getSaveContent.extraProps filters.
- *
- * @typedef BlockOptionOptions
- * @property {object}   attributes           object for new attributes that should get added to the block
- * @property {Function} classNameGenerator   function that gets passed the attributes and should return a string for the classname
- * @property {Function} inlineStyleGenerator function that gets passed the attributes and should return an object for the inline styles
- * @property {Function} Edit                 block edit extension function. Will only get rendered when the block is selected
- * @property {string}   extensionName        unique identifier used for the name of the addFilter calls
- * @property {string}   order                the order where the extension should be rendered. Can be 'before' or 'after'. Defaults to 'after'
- *
- * @param {string|string[]}    blockName name of the block or array of block names
- * @param {BlockOptionOptions} options   configuration options
- */
 function registerBlockExtension(
-	blockName,
-	{ attributes, classNameGenerator, inlineStyleGenerator, Edit, extensionName, order = 'after' },
-) {
+	blockName: string | string[],
+	{
+		attributes,
+		classNameGenerator,
+		inlineStyleGenerator,
+		Edit,
+		extensionName,
+		order = 'after',
+	}: BlockOptionOptions,
+): void {
 	const isMultiBlock = Array.isArray(blockName);
 
-	/**
-	 * shouldApplyBlockExtension
-	 *
-	 * @param {string} blockType name of the block
-	 * @returns {boolean} true if the block is the one we want to add the extension to
-	 */
-	const shouldApplyBlockExtension = (blockType) => {
+	const shouldApplyBlockExtension = (blockType: string): boolean => {
 		if (blockName === '*') {
 			return true;
 		}
@@ -47,20 +51,11 @@ function registerBlockExtension(
 
 	const blockNamespace = isMultiBlock ? blockName.join('-') : blockName;
 
-	/**
-	 * addAttributesToBlock
-	 *
-	 * @param {object} settings block settings
-	 * @param {string} name     block name
-	 * @returns {Array}
-	 */
-	const addAttributesToBlock = (settings, name) => {
-		// return early from the block modification
+	const addAttributesToBlock = (settings: Record<string, any>, name: string) => {
 		if (!shouldApplyBlockExtension(name)) {
 			return settings;
 		}
 
-		// modify block registration object
 		return {
 			...settings,
 			attributes: {
@@ -76,21 +71,16 @@ function registerBlockExtension(
 		addAttributesToBlock,
 	);
 
-	/**
-	 * addSettingsToBlock
-	 */
-	const addSettingsToBlock = createHigherOrderComponent((BlockEdit) => {
-		return (props) => {
+	const addSettingsToBlock = createHigherOrderComponent((BlockEdit: FC<any>) => {
+		return (props: any) => {
 			const { name, isSelected } = props;
 
-			// return early from the block modification
 			if (!shouldApplyBlockExtension(name)) {
 				return <BlockEdit {...props} />;
 			}
 
 			const shouldRenderBefore = order === 'before' && isSelected;
 			const shouldRenderAfter = order === 'after' && isSelected;
-
 			const shouldRenderFallback = !shouldRenderBefore && !shouldRenderAfter && isSelected;
 
 			return (
@@ -110,14 +100,10 @@ function registerBlockExtension(
 		addSettingsToBlock,
 	);
 
-	/**
-	 * addAdditionalPropertiesInEditor
-	 */
-	const addAdditionalPropertiesInEditor = createHigherOrderComponent((BlockList) => {
-		return (props) => {
-			const { name, attributes, className, style, wrapperProps } = props;
+	const addAdditionalPropertiesInEditor = createHigherOrderComponent((BlockList: FC<any>) => {
+		return (props: BlockEditProps) => {
+			const { name, attributes, className = '', style = {}, wrapperProps } = props;
 
-			// return early from the block modification
 			if (!shouldApplyBlockExtension(name)) {
 				return <BlockList {...props} />;
 			}
@@ -152,18 +138,13 @@ function registerBlockExtension(
 		addAdditionalPropertiesInEditor,
 	);
 
-	/**
-	 * addAdditionalPropertiesToSavedMarkup
-	 *
-	 * @param {object} props      block props
-	 * @param {object} block      block object
-	 * @param {object} attributes block attributes
-	 * @returns {object}
-	 */
-	const addAdditionalPropertiesToSavedMarkup = (props, block, attributes) => {
+	const addAdditionalPropertiesToSavedMarkup = (
+		props: BlockEditProps,
+		block: { name: string },
+		attributes: Record<string, any>,
+	) => {
 		const { className, style } = props;
 
-		// return early from the block modification
 		if (!shouldApplyBlockExtension(block.name)) {
 			return props;
 		}

api/register-icons/index.js → api/register-icons/index.ts

@@ -2,8 +2,9 @@ import { dispatch } from '@wordpress/data';
 import domReady from '@wordpress/dom-ready';
 
 import { iconStore } from '../../stores';
+import { IconSet } from '../../stores/icons/types';
 
-export function registerIcons(options) {
+export function registerIcons(options: IconSet) {
 	domReady(() => {
 		dispatch(iconStore).registerIconSet(options);
 	});

hooks/use-popover/index.js → hooks/use-popover/index.tsx

@@ -1,7 +1,12 @@
 import { Popover } from '@wordpress/components';
 import { useState, useCallback, useMemo } from '@wordpress/element';
+import type { FC } from 'react';
 import { useOnClickOutside } from '../use-on-click-outside';
 
+interface PopoverComponentProps {
+	children: React.ReactNode;
+}
+
 export const usePopover = () => {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -18,7 +23,8 @@ export const usePopover = () => {
 	};
 
 	const ref = useOnClickOutside(() => setIsVisible(false));
-	const PopoverComponent = useMemo(
+
+	const PopoverComponent: FC<PopoverComponentProps> = useMemo(
 		() =>
 			({ children }) => {
 				if (!isVisible) {

hooks/use-request-data/index.js → hooks/use-request-data/index.ts

@@ -7,7 +7,9 @@ import isObject from 'lodash/isObject';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+// @ts-ignore-next-line - The type definitions for the data package are incomplete.
+import { useSelect, useDispatch, store as dataStore } from '@wordpress/data';
 
 /**
  * Hook for retrieving data from the WordPress REST API.
@@ -17,22 +19,26 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * @param {object | number} [query] Optional. Query to pass to the geEntityRecords request. Defaults to an empty object. If a number is passed, it is used as the ID of the entity to retrieve via getEntityRecord.
  * @returns {Array} The data returned from the request.
  */
-export const useRequestData = (entity, kind, query = {}) => {
+export const useRequestData = (entity: string, kind: string, query: Record<string, any> = {}) => {
 	const functionToCall = isObject(query) ? 'getEntityRecords' : 'getEntityRecord';
 	const { invalidateResolution } = useDispatch('core/data');
-	const { data, isLoading } = useSelect((select) => {
-		return {
-			data: select('core')[functionToCall](entity, kind, query),
-			isLoading: select('core/data').isResolving('core', functionToCall, [
-				entity,
-				kind,
-				query,
-			]),
-		};
-	});
+	const { data, isLoading } = useSelect(
+		(select) => {
+			return {
+				// @ts-ignore-next-line - The type definitions for the data package are incomplete.
+				data: select(coreStore)[functionToCall](entity, kind, query),
+				isLoading: select(dataStore).isResolving(coreStore, functionToCall, [
+					entity,
+					kind,
+					query,
+				]),
+			};
+		},
+		[entity, kind, query],
+	);
 
 	const invalidateResolver = () => {
-		invalidateResolution('core', functionToCall, [entity, kind, query]);
+		invalidateResolution(coreStore, functionToCall, [entity, kind, query]);
 	};
 
 	return [data, isLoading, invalidateResolver];

package.json

@@ -67,6 +67,7 @@
 	"devDependencies": {
 		"@10up/cypress-wp-utils": "github:10up/cypress-wp-utils#build",
 		"@types/jest": "^29.5.12",
+		"@types/lodash": "^4.17.5",
 		"@types/react-window": "^1.8.8",
 		"@types/uuid": "^9.0.8",
 		"@types/wordpress__block-editor": "^11.5.14",

tsconfig.json

@@ -33,5 +33,7 @@
 		"cypress.config.js",
 		"**/*.test.ts",
 		"**/*.test.js",
+		"**/*.spec.ts",
+		"**/*.spec.js"
 	]
 }