Release: 1.19.0

.eslintignore

@@ -1,3 +1,7 @@
 example
 cypress
-**/*.test.js
+**/*.test.js
+**/*.test.ts
+**/*.test.txs
+dist/
+cypress.config.js

.eslintrc

@@ -1,10 +1,14 @@
 {
-    "extends": ["@10up/eslint-config/react"],
-    "rules": {
-        "import/no-unresolved": 0,
-        "import/no-extraneous-dependencies": 0,
-        "react/jsx-props-no-spreading": 0,
-        "jsdoc/check-tag-names": 0,
-		"import/extensions": 0
-    }
+	"parser": "@typescript-eslint/parser",
+	"extends": [
+		"@10up/eslint-config/react"
+	],
+	"rules": {
+		"import/no-unresolved": 0,
+		"import/no-extraneous-dependencies": 0,
+		"react/jsx-props-no-spreading": 0,
+		"jsdoc/check-tag-names": 0,
+		"import/extensions": 0,
+		"react/prop-types": 0
+	}
 }

.github/workflows/compressed-size.yml

@@ -8,10 +8,10 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v2.2.0
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 20.x
     - uses: preactjs/compressed-size-action@v2
       with:
         repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/e2e-tests.yml

@@ -8,9 +8,9 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
       - name: Run Cypress E2E Tests

.github/workflows/linting.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: reviewdog/[email protected]
         with:
           github_token: ${{secrets.GITHUB_TOKEN}}

.github/workflows/release-next-npm-version.yml

@@ -12,10 +12,10 @@ jobs:
     if: github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'
       - name: Install all npm packages
         run: npm ci

.github/workflows/release-npm-version.yml

@@ -20,8 +20,8 @@ jobs:
     if: github.ref == 'refs/heads/trunk'
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/release-testing-npm-version.yml

@@ -8,8 +8,8 @@ jobs:
     environment: testing
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/unit-tests.yml

@@ -8,7 +8,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Install NPM Dependencies
         run: npm ci
       - name: Run Unit Tests

.nvmrc

@@ -1 +1 @@
-16
+20

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

@@ -1,41 +1,44 @@
-/* eslint-disable react/prop-types */
-/* 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;
 		}
@@ -48,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: {
@@ -77,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 (
@@ -111,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} />;
 			}
@@ -153,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);
 	});

components/author/context.ts

@@ -0,0 +1,35 @@
+import { createContext, useContext } from '@wordpress/element';
+
+export type Author = {
+	avatar_urls: Record<string, string>;
+	description: string;
+	email: string;
+	first_name: string;
+	id: number;
+	last_name: string;
+	link: string;
+	name: string;
+	nickname: string;
+	registered_date: string;
+	slug: string;
+	url: string;
+};
+
+export const AuthorContext = createContext<Author>({
+	avatar_urls: {},
+	description: '',
+	email: '',
+	first_name: '',
+	id: 0,
+	last_name: '',
+	link: '',
+	name: '',
+	nickname: '',
+	registered_date: '',
+	slug: '',
+	url: '',
+});
+
+export const useAuthor = () => {
+	return useContext(AuthorContext);
+};