diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts index 2c1b627c6d0c6..b36c211eaa546 100644 --- a/packages/edit-site/src/components/style-book/categories.ts +++ b/packages/edit-site/src/components/style-book/categories.ts @@ -1,6 +1,8 @@ /** * WordPress dependencies */ +// @wordpress/blocks imports are not typed. +// @ts-expect-error import { getCategories } from '@wordpress/blocks'; /** @@ -29,15 +31,19 @@ export function getExamplesByCategory( if ( ! categoryDefinition?.slug || ! examples?.length ) { return; } - - if ( categoryDefinition?.subcategories?.length ) { - return categoryDefinition.subcategories.reduce( + const categories: CategoryExamples[] = + categoryDefinition?.subcategories ?? []; + if ( categories.length ) { + return categories.reduce( ( acc, subcategoryDefinition ) => { const subcategoryExamples = getExamplesByCategory( subcategoryDefinition, examples ); if ( subcategoryExamples ) { + if ( ! acc.subcategories ) { + acc.subcategories = []; + } acc.subcategories = [ ...acc.subcategories, subcategoryExamples, @@ -48,7 +54,6 @@ export function getExamplesByCategory( { title: categoryDefinition.title, slug: categoryDefinition.slug, - subcategories: [], } ); } @@ -84,8 +89,9 @@ export function getTopLevelStyleBookCategories(): StyleBookCategory[] { ...STYLE_BOOK_THEME_SUBCATEGORIES, ...STYLE_BOOK_CATEGORIES, ].map( ( { slug } ) => slug ); - const extraCategories = getCategories().filter( + const extraCategories: StyleBookCategory[] = getCategories(); + const extraCategoriesFiltered = extraCategories.filter( ( { slug } ) => ! reservedCategories.includes( slug ) ); - return [ ...STYLE_BOOK_CATEGORIES, ...extraCategories ]; + return [ ...STYLE_BOOK_CATEGORIES, ...extraCategoriesFiltered ]; } diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx index bdc7bc7936bc1..032a3d92faa2b 100644 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -11,26 +11,21 @@ import { View } from '@wordpress/primitives'; import { getColorClassName, __experimentalGetGradientClass, + // @wordpress/block-editor imports are not typed. + // @ts-expect-error } from '@wordpress/block-editor'; /** * Internal dependencies */ -import type { Color, Gradient } from './types'; - -type Props = { - colors: Color[] | Gradient[]; - type: 'colors' | 'gradients'; - templateColumns?: string | number; - itemHeight?: string; -}; +import type { Color, Gradient, ColorExampleProps } from './types'; const ColorExamples = ( { colors, type, templateColumns = '1fr 1fr', itemHeight = '52px', -}: Props ): JSX.Element | null => { +}: ColorExampleProps ): JSX.Element | null => { if ( ! colors ) { return null; } diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx index 7ee90e61f1c6a..babba4328bcc2 100644 --- a/packages/edit-site/src/components/style-book/duotone-examples.tsx +++ b/packages/edit-site/src/components/style-book/duotone-examples.tsx @@ -9,7 +9,11 @@ import { View } from '@wordpress/primitives'; */ import type { Duotone } from './types'; -const DuotoneExamples = ( { duotones } ): JSX.Element | null => { +const DuotoneExamples = ( { + duotones, +}: { + duotones: Duotone[]; +} ): JSX.Element | null => { if ( ! duotones ) { return null; } diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index 81ae2d8089fa5..046f08524851e 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -7,16 +7,18 @@ import { getBlockTypes, getBlockFromExample, createBlock, + // @wordpress/blocks imports are not typed. + // @ts-expect-error } from '@wordpress/blocks'; /** * Internal dependencies */ import type { - Block, BlockExample, ColorOrigin, MultiOriginPalettes, + BlockType, } from './types'; import ColorExamples from './color-examples'; import DuotoneExamples from './duotone-examples'; @@ -37,11 +39,14 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { const examples: BlockExample[] = []; STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => { - const palette = colors[ group.type ].find( - ( origin: ColorOrigin ) => origin.slug === group.origin - ); + const palette = colors[ group.type as keyof MultiOriginPalettes ]; + const paletteFiltered = Array.isArray( palette ) + ? palette.find( + ( origin: ColorOrigin ) => origin.slug === group.origin + ) + : undefined; - if ( palette?.[ group.type ] ) { + if ( paletteFiltered?.[ group.type ] ) { const example: BlockExample = { name: group.slug, title: group.title, @@ -49,13 +54,15 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { }; if ( group.type === 'duotones' ) { example.content = ( - + ); examples.push( example ); } else { example.content = ( ); @@ -79,9 +86,11 @@ function getOverviewBlockExamples( const examples: BlockExample[] = []; // Get theme palette from colors if they exist. - const themePalette = colors?.colors.find( - ( origin: ColorOrigin ) => origin.slug === 'theme' - ); + const themePalette = Array.isArray( colors?.colors ) + ? colors.colors.find( + ( origin: ColorOrigin ) => origin.slug === 'theme' + ) + : undefined; if ( themePalette ) { const themeColorexample: BlockExample = { @@ -91,7 +100,7 @@ function getOverviewBlockExamples( content: ( @@ -102,7 +111,7 @@ function getOverviewBlockExamples( } // Get examples for typography blocks. - const typographyBlockExamples: Block[] = []; + const typographyBlockExamples: BlockType[] = []; if ( getBlockType( 'core/heading' ) ) { const headingBlock = createBlock( 'core/heading', { @@ -202,7 +211,7 @@ function getOverviewBlockExamples( */ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { const nonHeadingBlockExamples = getBlockTypes() - .filter( ( blockType ) => { + .filter( ( blockType: BlockType ) => { const { name, example, supports } = blockType; return ( name !== 'core/heading' && @@ -210,7 +219,7 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { supports?.inserter !== false ); } ) - .map( ( blockType ) => ( { + .map( ( blockType: BlockType ) => ( { name: blockType.name, title: blockType.title, category: blockType.category, diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index 9f65039121856..9a97c3aad7f79 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -32,7 +32,7 @@ export type StyleBookColorGroup = { origin: string; slug: string; title: string; - type: string; + type: 'colors' | 'gradients' | 'duotones'; }; export type Color = { slug: string }; @@ -42,6 +42,13 @@ export type Duotone = { slug: string; }; +export type ColorExampleProps = { + colors: Color[] | Gradient[]; + type: StyleBookColorGroup[ 'type' ]; + templateColumns?: string | number; + itemHeight?: string; +}; + export type ColorOrigin = { name: string; slug: string; @@ -58,3 +65,16 @@ export type MultiOriginPalettes = { duotones: Omit< ColorOrigin, 'colors' | 'gradients' >; gradients: Omit< ColorOrigin, 'colors' | 'duotones' >; }; + +/* + * Typing the items from getBlockTypes from '@wordpress/blocks' + * to appease the TS linter. + */ +export type BlockType = { + name: string; + title: string; + category: string; + example: BlockType; + attributes: Record< string, unknown >; + supports: Record< string, unknown >; +}; diff --git a/packages/edit-site/tsconfig.json b/packages/edit-site/tsconfig.json new file mode 100644 index 0000000000000..d6c82614bf534 --- /dev/null +++ b/packages/edit-site/tsconfig.json @@ -0,0 +1,53 @@ +{ + "$schema": "https://json.schemastore.org/tsconfig.json", + "extends": "../../tsconfig.base.json", + "references": [ + { "path": "../a11y" }, + { "path": "../api-fetch" }, + { "path": "../autop" }, + { "path": "../blob" }, + { "path": "../block-library" }, + { "path": "../block-editor" }, + { "path": "../components" }, + { "path": "../compose" }, + { "path": "../core-data" }, + { "path": "../data" }, + { "path": "../dataviews" }, + { "path": "../date" }, + { "path": "../deprecated" }, + { "path": "../dom" }, + { "path": "../editor" }, + { "path": "../element" }, + { "path": "../escape-html" }, + { "path": "../fields" }, + { "path": "../hooks" }, + { "path": "../html-entities" }, + { "path": "../i18n" }, + { "path": "../icons" }, + { "path": "../interactivity" }, + { "path": "../interactivity-router" }, + { "path": "../media-utils" }, + { "path": "../notices" }, + { "path": "../keycodes" }, + { "path": "../plugins" }, + { "path": "../primitives" }, + { "path": "../private-apis" }, + { "path": "../rich-text" }, + { "path": "../router" }, + { "path": "../style-engine" }, + { "path": "../url" }, + { "path": "../wordcount" } + ], + // NOTE: This package is being progressively typed. You are encouraged to + // expand this array with files which can be type-checked. At some point in + // the future, this can be simplified to an `includes` of `src/**/*`. + "files": [ + "src/components/style-book/categories.ts", + "src/components/style-book/constants.ts", + "src/components/style-book/types.ts", + "src/components/style-book/color-examples.tsx", + "src/components/style-book/duotone-examples.tsx", + "src/components/style-book/examples.tsx" + ], + "include": [] +} diff --git a/tsconfig.json b/tsconfig.json index 55759b5015bfd..d6bbcb27f0adb 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,6 +21,7 @@ { "path": "packages/dom" }, { "path": "packages/dom-ready" }, { "path": "packages/e2e-test-utils-playwright" }, + { "path": "packages/edit-site" }, { "path": "packages/editor" }, { "path": "packages/element" }, { "path": "packages/escape-html" },