@wordpress/edit-site 6.15.0 → 6.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.15.0",
+	"version": "6.16.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,46 +30,46 @@
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.15.0",
-		"@wordpress/api-fetch": "^7.15.0",
-		"@wordpress/blob": "^4.15.0",
-		"@wordpress/block-editor": "^14.10.0",
-		"@wordpress/block-library": "^9.15.0",
-		"@wordpress/blocks": "^14.4.0",
-		"@wordpress/commands": "^1.15.0",
-		"@wordpress/components": "^29.1.0",
-		"@wordpress/compose": "^7.15.0",
-		"@wordpress/core-commands": "^1.15.0",
-		"@wordpress/core-data": "^7.15.0",
-		"@wordpress/data": "^10.15.0",
-		"@wordpress/dataviews": "^4.11.0",
-		"@wordpress/date": "^5.15.0",
-		"@wordpress/deprecated": "^4.15.0",
-		"@wordpress/dom": "^4.15.0",
-		"@wordpress/editor": "^14.15.0",
-		"@wordpress/element": "^6.15.0",
-		"@wordpress/escape-html": "^3.15.0",
-		"@wordpress/fields": "^0.7.0",
-		"@wordpress/hooks": "^4.15.0",
-		"@wordpress/html-entities": "^4.15.0",
-		"@wordpress/i18n": "^5.15.0",
-		"@wordpress/icons": "^10.15.0",
-		"@wordpress/keyboard-shortcuts": "^5.15.0",
-		"@wordpress/keycodes": "^4.15.0",
-		"@wordpress/media-utils": "^5.15.0",
-		"@wordpress/notices": "^5.15.0",
-		"@wordpress/patterns": "^2.15.0",
-		"@wordpress/plugins": "^7.15.0",
-		"@wordpress/preferences": "^4.15.0",
-		"@wordpress/primitives": "^4.15.0",
-		"@wordpress/private-apis": "^1.15.0",
-		"@wordpress/reusable-blocks": "^5.15.0",
-		"@wordpress/router": "^1.15.0",
-		"@wordpress/style-engine": "^2.15.0",
-		"@wordpress/url": "^4.15.0",
-		"@wordpress/viewport": "^6.15.0",
-		"@wordpress/widgets": "^4.15.0",
-		"@wordpress/wordcount": "^4.15.0",
+		"@wordpress/a11y": "^4.16.0",
+		"@wordpress/api-fetch": "^7.16.0",
+		"@wordpress/blob": "^4.16.0",
+		"@wordpress/block-editor": "^14.11.0",
+		"@wordpress/block-library": "^9.16.0",
+		"@wordpress/blocks": "^14.5.0",
+		"@wordpress/commands": "^1.16.0",
+		"@wordpress/components": "^29.2.0",
+		"@wordpress/compose": "^7.16.0",
+		"@wordpress/core-commands": "^1.16.0",
+		"@wordpress/core-data": "^7.16.0",
+		"@wordpress/data": "^10.16.0",
+		"@wordpress/dataviews": "^4.12.0",
+		"@wordpress/date": "^5.16.0",
+		"@wordpress/deprecated": "^4.16.0",
+		"@wordpress/dom": "^4.16.0",
+		"@wordpress/editor": "^14.16.0",
+		"@wordpress/element": "^6.16.0",
+		"@wordpress/escape-html": "^3.16.0",
+		"@wordpress/fields": "^0.8.0",
+		"@wordpress/hooks": "^4.16.0",
+		"@wordpress/html-entities": "^4.16.0",
+		"@wordpress/i18n": "^5.16.0",
+		"@wordpress/icons": "^10.16.0",
+		"@wordpress/keyboard-shortcuts": "^5.16.0",
+		"@wordpress/keycodes": "^4.16.0",
+		"@wordpress/media-utils": "^5.16.0",
+		"@wordpress/notices": "^5.16.0",
+		"@wordpress/patterns": "^2.16.0",
+		"@wordpress/plugins": "^7.16.0",
+		"@wordpress/preferences": "^4.16.0",
+		"@wordpress/primitives": "^4.16.0",
+		"@wordpress/private-apis": "^1.16.0",
+		"@wordpress/reusable-blocks": "^5.16.0",
+		"@wordpress/router": "^1.16.0",
+		"@wordpress/style-engine": "^2.16.0",
+		"@wordpress/url": "^4.16.0",
+		"@wordpress/viewport": "^6.16.0",
+		"@wordpress/widgets": "^4.16.0",
+		"@wordpress/wordcount": "^4.16.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "75a65eb8ffc168a92042544052f46d080a71ea45"
+	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
 }

package/src/components/add-new-template/utils.js

@@ -36,7 +36,7 @@ const getValueFromObjectPath = ( object, path ) => {
  *
  * @param {Object[]} entities The array of entities.
  * @param {string}   path     The path to map a `name` property from the entity.
- * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ * @return {IHasNameAndId[]} An array of entities that now implement the `IHasNameAndId` interface.
  */
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {

package/src/components/global-styles/font-library-modal/utils/test/preview-styles.spec.js

@@ -201,7 +201,7 @@ describe( 'formatFontFaceName', () => {
 		);
 	} );
 
-	it( 'should ouput the font face name with quotes on Firefox', () => {
+	it( 'should output the font face name with quotes on Firefox', () => {
 		const mockUserAgent =
 			'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0';
 

package/src/components/global-styles/screen-root.js

@@ -93,7 +93,7 @@ function ScreenRoot() {
 					paddingTop={ 2 }
 					/*
 					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this instance and the Addtional CSS option below. Other options for matching the
+					 * This is an ad hoc override for this instance and the Additional CSS option below. Other options for matching the
 					 * the nav button inset should be looked at before reusing further.
 					 */
 					paddingX="13px"

package/src/components/maybe-editor/index.js

@@ -43,6 +43,9 @@ export function MaybeEditor( { showEditor = true } ) {
 				document
 					.getElementsByTagName( 'html' )[ 0 ]
 					.setAttribute( 'style', 'margin-top: 0 !important;' );
+				document
+					.getElementsByTagName( 'body' )[ 0 ]
+					.classList.remove( 'admin-bar' );
 				// Make interactive elements unclickable.
 				const interactiveElements = document.querySelectorAll(
 					'a, button, input, details, audio'

package/src/components/resizable-frame/index.js

@@ -86,7 +86,7 @@ function ResizableFrame( {
 	setIsOversized,
 	isReady,
 	children,
-	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
+	/** The default (unresized) width/height of the frame, based on the space available in the viewport. */
 	defaultSize,
 	innerContentStyle,
 } ) {

package/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js

@@ -42,7 +42,7 @@ function useDeleteNavigationMenu() {
 					type: 'snackbar',
 				}
 			);
-			history.navivate( '/navigation' );
+			history.navigate( '/navigation' );
 		} catch ( error ) {
 			createErrorNotice(
 				sprintf(

package/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 ];
 }

package/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;
 	}

package/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;
 	}

package/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 = (
-					<DuotoneExamples duotones={ palette[ group.type ] } />
+					<DuotoneExamples
+						duotones={ paletteFiltered[ group.type ] }
+					/>
 				);
 				examples.push( example );
 			} else {
 				example.content = (
 					<ColorExamples
-						colors={ palette[ group.type ] }
+						colors={ paletteFiltered[ group.type ] }
 						type={ group.type }
 					/>
 				);
@@ -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: (
 				<ColorExamples
 					colors={ themePalette.colors }
-					type={ colors }
+					type="colors"
 					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
 					itemHeight="32px"
 				/>
@@ -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,

package/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 >;
+};

package/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": []
+}