From 166fb4f172ec27c86bd8f977c3b57a85200d3c46 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Fri, 21 Feb 2025 13:56:31 +0530
Subject: [PATCH 01/14] refactor: implement ts exactoptionalPropertyType rule

---
 config/tsconfig.base.json                     |  2 +-
 packages/blocks/src/blocks/core-audio.tsx     |  2 +-
 packages/blocks/src/blocks/core-button.tsx    |  4 +--
 packages/blocks/src/blocks/core-buttons.tsx   |  2 +-
 packages/blocks/src/blocks/core-code.tsx      |  2 +-
 packages/blocks/src/blocks/core-column.tsx    |  2 +-
 packages/blocks/src/blocks/core-columns.tsx   |  2 +-
 packages/blocks/src/blocks/core-cover.tsx     |  6 ++--
 packages/blocks/src/blocks/core-details.tsx   |  2 +-
 packages/blocks/src/blocks/core-file.tsx      |  5 +--
 packages/blocks/src/blocks/core-gallery.tsx   |  2 +-
 packages/blocks/src/blocks/core-group.tsx     |  2 +-
 packages/blocks/src/blocks/core-heading.tsx   |  2 +-
 packages/blocks/src/blocks/core-image.tsx     | 14 ++++++---
 packages/blocks/src/blocks/core-list-item.tsx |  2 +-
 packages/blocks/src/blocks/core-list.tsx      |  2 +-
 .../blocks/src/blocks/core-media-text.tsx     |  6 ++--
 packages/blocks/src/blocks/core-paragraph.tsx |  2 +-
 .../blocks/src/blocks/core-preformatted.tsx   |  2 +-
 packages/blocks/src/blocks/core-pullquote.tsx |  3 +-
 packages/blocks/src/blocks/core-quote.tsx     |  2 +-
 packages/blocks/src/blocks/core-spacer.tsx    |  2 +-
 packages/blocks/src/blocks/core-verse.tsx     |  2 +-
 packages/blocks/src/blocks/core-video.tsx     |  4 +--
 .../src/blocks/tests/core-audio.test.tsx      |  1 +
 .../src/blocks/tests/core-button.test.tsx     |  1 +
 .../core/src/config/snapwp-config-manager.ts  | 31 ++++++++++++++-----
 packages/next/src/components/image.tsx        |  2 +-
 packages/next/src/components/link.tsx         |  7 ++---
 .../next/src/components/script-module.tsx     |  4 +--
 packages/next/src/react-parser/options.tsx    | 12 +++----
 packages/next/src/template-renderer/index.tsx |  9 ++++--
 .../template-renderer/template-scripts.tsx    | 11 +++----
 .../query/src/utils/parse-global-styles.ts    |  6 ++--
 packages/query/src/utils/parse-template.ts    | 25 ++++++++-------
 35 files changed, 105 insertions(+), 80 deletions(-)

diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index 660b3dfc..72fa3a16 100644
--- a/config/tsconfig.base.json
+++ b/config/tsconfig.base.json
@@ -7,7 +7,7 @@
 		"allowSyntheticDefaultImports": true,
 		"allowUnreachableCode": false,
 		"allowUnusedLabels": false,
-		"exactOptionalPropertyTypes": false, // @todo Enable this.
+		"exactOptionalPropertyTypes": true, 
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitOverride": true,
 		"noImplicitReturns": true,
diff --git a/packages/blocks/src/blocks/core-audio.tsx b/packages/blocks/src/blocks/core-audio.tsx
index 8fc64696..28ef6d10 100644
--- a/packages/blocks/src/blocks/core-audio.tsx
+++ b/packages/blocks/src/blocks/core-audio.tsx
@@ -25,7 +25,7 @@ const CoreAudio: CoreAudioType = ( {
 		return null;
 	}
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index c56674f1..726a7c1f 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -30,7 +30,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 	} = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const { homeUrl, nextUrl } = getConfig();
 	const commonProps = {
@@ -60,7 +60,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					target={ linkTarget ?? undefined }
+					{ ...( linkTarget ? { target: linkTarget } : {} ) }
 					rel={ rel ?? undefined }
 					{ ...commonProps }
 				>
diff --git a/packages/blocks/src/blocks/core-buttons.tsx b/packages/blocks/src/blocks/core-buttons.tsx
index d3af3184..9e90f050 100644
--- a/packages/blocks/src/blocks/core-buttons.tsx
+++ b/packages/blocks/src/blocks/core-buttons.tsx
@@ -21,7 +21,7 @@ const CoreButtons: CoreButtonsType = ( {
 	const { cssClassName, style } = attributes || {};
 	const classNames = cn( cssClassName );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<div className={ classNames } style={ styleObject }>
diff --git a/packages/blocks/src/blocks/core-code.tsx b/packages/blocks/src/blocks/core-code.tsx
index 736c8a10..6a96b2d3 100644
--- a/packages/blocks/src/blocks/core-code.tsx
+++ b/packages/blocks/src/blocks/core-code.tsx
@@ -13,7 +13,7 @@ import type { CoreCode as CoreCodeType, CoreCodeProps } from '@snapwp/types';
  */
 const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 	const { style, cssClassName, content } = attributes || {};
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<pre className={ cssClassName || '' } style={ styleObject }>
diff --git a/packages/blocks/src/blocks/core-column.tsx b/packages/blocks/src/blocks/core-column.tsx
index 8d9af039..d4fc4e00 100644
--- a/packages/blocks/src/blocks/core-column.tsx
+++ b/packages/blocks/src/blocks/core-column.tsx
@@ -21,7 +21,7 @@ const CoreColumn: CoreColumnType = ( {
 	const { cssClassName, style, width } = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const combinedStyles: React.CSSProperties = {
 		...styleObject,
diff --git a/packages/blocks/src/blocks/core-columns.tsx b/packages/blocks/src/blocks/core-columns.tsx
index 59a677cf..d3ea277c 100644
--- a/packages/blocks/src/blocks/core-columns.tsx
+++ b/packages/blocks/src/blocks/core-columns.tsx
@@ -20,7 +20,7 @@ const CoreColumns: CoreColumnsType = ( {
 }: CoreColumnsProps ) => {
 	const { cssClassName, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	const classNames = cn( cssClassName );
 
 	return (
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 992db7f4..1c606bfc 100644
--- a/packages/blocks/src/blocks/core-cover.tsx
+++ b/packages/blocks/src/blocks/core-cover.tsx
@@ -93,7 +93,7 @@ const CoreCover: CoreCoverType = ( {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const styleObject = {
-		...getStylesFromAttributes( { style } ),
+		...( style ? getStylesFromAttributes( { style } ) : {} ),
 		minHeight: minHeight || undefined,
 	};
 
@@ -146,11 +146,13 @@ const CoreCover: CoreCoverType = ( {
 					<Image
 						{ ...imageProps }
 						className={ imgClasses }
-						alt={ alt }
 						src={ url }
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
+						{ ...( imageProps?.alt
+							? { alt: imageProps.alt }
+							: {} ) }
 					/>
 				) : (
 					<div
diff --git a/packages/blocks/src/blocks/core-details.tsx b/packages/blocks/src/blocks/core-details.tsx
index 9ffeb2cc..1f99322c 100644
--- a/packages/blocks/src/blocks/core-details.tsx
+++ b/packages/blocks/src/blocks/core-details.tsx
@@ -25,7 +25,7 @@ const CoreDetails: CoreDetailsType = ( {
 	renderedHtml,
 }: CoreDetailsProps ) => {
 	const { style, showContent, summary } = attributes ?? {};
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index 68d93eb3..877a071e 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -45,7 +45,7 @@ const CoreFile: CoreFileType = ( {
 		: '';
 	const classNames = cn( classNamesFromString );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const ariaLabel = fileName || FALLBACK_ARIA_LABEL;
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
@@ -68,7 +68,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					id={ fileId || undefined }
 					href={ textLinkHref }
-					target={ textLinkTarget || undefined }
+					{ ...( textLinkTarget ? { target: textLinkTarget } : {} ) }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
 				>
 					{ !! fileName && <Parse html={ fileName } /> }
@@ -78,6 +78,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					href={ href }
 					className="wp-block-file__button wp-element-button"
+					//@ts-ignore todo: allow download prop in link
 					download
 					aria-describedby={ fileId || undefined }
 				>
diff --git a/packages/blocks/src/blocks/core-gallery.tsx b/packages/blocks/src/blocks/core-gallery.tsx
index c95f12aa..7f95c749 100644
--- a/packages/blocks/src/blocks/core-gallery.tsx
+++ b/packages/blocks/src/blocks/core-gallery.tsx
@@ -26,7 +26,7 @@ const CoreGallery: CoreGalleryType = ( {
 }: CoreGalleryProps ) => {
 	const { caption, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-group.tsx b/packages/blocks/src/blocks/core-group.tsx
index efe66bc9..12ef65d0 100644
--- a/packages/blocks/src/blocks/core-group.tsx
+++ b/packages/blocks/src/blocks/core-group.tsx
@@ -46,7 +46,7 @@ const CoreGroup: CoreGroupType = ( {
 }: CoreGroupProps ) => {
 	const { style, tagName } = attributes ?? {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-heading.tsx b/packages/blocks/src/blocks/core-heading.tsx
index 9c77fe26..b5d11c2f 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -17,7 +17,7 @@ import type {
 const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 	const { style, cssClassName, content, level } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const HeadingTag = level
 		? ( `h${ level }` as keyof JSX.IntrinsicElements )
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index d25de732..bf41c43c 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -55,7 +55,7 @@ const Figure = ( {
 				<Link
 					href={ href }
 					className={ linkClass }
-					target={ linkTarget }
+					{ ...( linkTarget && { target: linkTarget } ) }
 					{ ...( rel && { rel } ) }
 				>
 					{ children }
@@ -124,7 +124,7 @@ const CoreImage: CoreImageType = ( {
 
 	return (
 		<Figure
-			renderedHtml={ renderedHtml }
+			renderedHtml={ renderedHtml ?? null }
 			classNames={ classNames }
 			{ ...attributes }
 		>
@@ -189,7 +189,7 @@ const getImageProps = (
 		sizeSlug,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const imageStyles: CSSProperties = {
 		...styleObject,
@@ -198,10 +198,14 @@ const getImageProps = (
 	};
 
 	const imageProps: ComponentProps< typeof Image > = {
-		src: url,
-		alt,
 		title,
 	};
+	if ( url ) {
+		imageProps.src = url;
+	}
+	if ( alt ) {
+		imageProps.alt = alt;
+	}
 
 	if ( connectedMediaItem?.node ) {
 		imageProps.sizes = connectedMediaItem.node.sizes;
diff --git a/packages/blocks/src/blocks/core-list-item.tsx b/packages/blocks/src/blocks/core-list-item.tsx
index 599c4f4d..9a97334e 100644
--- a/packages/blocks/src/blocks/core-list-item.tsx
+++ b/packages/blocks/src/blocks/core-list-item.tsx
@@ -27,7 +27,7 @@ const CoreListItem: CoreListItemType = ( {
 }: CoreListItemProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-list.tsx b/packages/blocks/src/blocks/core-list.tsx
index 65860aab..02383096 100644
--- a/packages/blocks/src/blocks/core-list.tsx
+++ b/packages/blocks/src/blocks/core-list.tsx
@@ -19,7 +19,7 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const classNames = cn( cssClassName );
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const combinedStyles: React.CSSProperties = {
 		...styleObject,
diff --git a/packages/blocks/src/blocks/core-media-text.tsx b/packages/blocks/src/blocks/core-media-text.tsx
index 53fed709..dd09b232 100644
--- a/packages/blocks/src/blocks/core-media-text.tsx
+++ b/packages/blocks/src/blocks/core-media-text.tsx
@@ -110,7 +110,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		<Image
 			{ ...imageProps }
 			src={ mediaUrl }
-			alt={ mediaAlt }
+			{ ...( mediaAlt ? { alt: mediaAlt } : {} ) }
 			className={ imageClasses }
 			style={ positionStyles }
 		/>
@@ -121,7 +121,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 			<Link
 				className={ linkClass }
 				href={ href }
-				target={ linkTarget }
+				{ ...( linkTarget ? { target: linkTarget } : {} ) }
 				rel={ newRel }
 			>
 				{ image }
@@ -138,7 +138,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		? getClassNamesFromString( renderedHtml )
 		: '';
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
diff --git a/packages/blocks/src/blocks/core-paragraph.tsx b/packages/blocks/src/blocks/core-paragraph.tsx
index d9a01bf2..4ed42d62 100644
--- a/packages/blocks/src/blocks/core-paragraph.tsx
+++ b/packages/blocks/src/blocks/core-paragraph.tsx
@@ -28,7 +28,7 @@ const CoreParagraph: CoreParagraphType = ( {
 		textColor,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * Add missing styles to the style object
diff --git a/packages/blocks/src/blocks/core-preformatted.tsx b/packages/blocks/src/blocks/core-preformatted.tsx
index 61ecfe6c..61a3dd72 100644
--- a/packages/blocks/src/blocks/core-preformatted.tsx
+++ b/packages/blocks/src/blocks/core-preformatted.tsx
@@ -25,7 +25,7 @@ const CorePreformatted: CorePreformattedType = ( {
 }: CorePreformattedProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-pullquote.tsx b/packages/blocks/src/blocks/core-pullquote.tsx
index 14a77bc1..524d7aac 100644
--- a/packages/blocks/src/blocks/core-pullquote.tsx
+++ b/packages/blocks/src/blocks/core-pullquote.tsx
@@ -25,8 +25,7 @@ const CorePullquote: CorePullquoteType = ( {
 }: CorePullquoteProps ) => {
 	const { style, pullquoteValue, citation } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
-
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
diff --git a/packages/blocks/src/blocks/core-quote.tsx b/packages/blocks/src/blocks/core-quote.tsx
index b0fec182..41c45753 100644
--- a/packages/blocks/src/blocks/core-quote.tsx
+++ b/packages/blocks/src/blocks/core-quote.tsx
@@ -18,7 +18,7 @@ const CoreQuote: CoreQuoteType = ( {
 }: CoreQuoteProps ) => {
 	const { style, citation, cssClassName } = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
 		<blockquote className={ cssClassName || '' } style={ styleObject }>
diff --git a/packages/blocks/src/blocks/core-spacer.tsx b/packages/blocks/src/blocks/core-spacer.tsx
index cd5ddc36..2963ba85 100644
--- a/packages/blocks/src/blocks/core-spacer.tsx
+++ b/packages/blocks/src/blocks/core-spacer.tsx
@@ -31,7 +31,7 @@ const CoreSpacer: CoreSpacerType = ( {
 	const finalHeight =
 		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const classNamesFromString = renderedHtml
 		? getClassNamesFromString( renderedHtml )
diff --git a/packages/blocks/src/blocks/core-verse.tsx b/packages/blocks/src/blocks/core-verse.tsx
index cd650ee2..b87e3088 100644
--- a/packages/blocks/src/blocks/core-verse.tsx
+++ b/packages/blocks/src/blocks/core-verse.tsx
@@ -22,7 +22,7 @@ const CoreVerse: CoreVerseType = ( {
 }: CoreVerseProps ) => {
 	const { style, content } = attributes ?? {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-video.tsx b/packages/blocks/src/blocks/core-video.tsx
index 87114c2c..34c25db3 100644
--- a/packages/blocks/src/blocks/core-video.tsx
+++ b/packages/blocks/src/blocks/core-video.tsx
@@ -69,7 +69,7 @@ const CoreVideo: CoreVideoType = ( {
 		return null;
 	}
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
@@ -110,7 +110,7 @@ const CoreVideo: CoreVideoType = ( {
 				src={ src }
 				playsInline={ playsInline || undefined }
 			>
-				<Tracks tracks={ formattedTracks } />
+				<Tracks tracks={ formattedTracks || [] } />
 			</video>
 
 			{ caption && (
diff --git a/packages/blocks/src/blocks/tests/core-audio.test.tsx b/packages/blocks/src/blocks/tests/core-audio.test.tsx
index d982e2f9..11251110 100644
--- a/packages/blocks/src/blocks/tests/core-audio.test.tsx
+++ b/packages/blocks/src/blocks/tests/core-audio.test.tsx
@@ -70,6 +70,7 @@ describe( 'CoreAudio', () => {
 		};
 
 		const { container, asFragment } = render(
+			// @ts-ignore to test undefined props
 			<CoreAudio attributes={ attributesWithoutSrc } renderedHtml="" />
 		);
 		expect( container.firstChild ).toBeNull();
diff --git a/packages/blocks/src/blocks/tests/core-button.test.tsx b/packages/blocks/src/blocks/tests/core-button.test.tsx
index 0b9c57cb..7011b1e6 100644
--- a/packages/blocks/src/blocks/tests/core-button.test.tsx
+++ b/packages/blocks/src/blocks/tests/core-button.test.tsx
@@ -210,6 +210,7 @@ describe( 'CoreButton Component', () => {
 
 	test( 'renders with undefined attributes', () => {
 		const { asFragment, container } = render(
+			//@ts-ignore to test undefined props
 			<CoreButton attributes={ undefined } />
 		);
 		const linkElement = container.querySelector( 'a' );
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 77aeeac8..d6285595 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -59,10 +59,7 @@ type ConfigSchema< T > = {
 	};
 };
 
-/**
- * Default configuration.
- */
-const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
+const DEFAULTS = {
 	graphqlEndpoint: 'index.php?graphql',
 	uploadsDirectory: '/wp-content/uploads',
 	restUrlPrefix: '/wp-json',
@@ -71,6 +68,17 @@ const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
 	useCorsProxy: process.env.NODE_ENV === 'development',
 };
 
+/**
+ * Default configuration.
+ */
+const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
+	graphqlEndpoint: DEFAULTS.graphqlEndpoint,
+	uploadsDirectory: DEFAULTS.uploadsDirectory,
+	restUrlPrefix: DEFAULTS.restUrlPrefix,
+	corsProxyPrefix: DEFAULTS.corsProxyPrefix,
+	useCorsProxy: DEFAULTS.useCorsProxy,
+};
+
 /**
  * Get the configuration from environment variables.
  *
@@ -78,15 +86,22 @@ const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
  *
  * @return The configuration object.
  */
+//@ts-ignore - ignore check for nextUrl,homeUrl to run missing environment variable test.
 const envConfig = (): Partial< SnapWPEnv > => ( {
 	/* eslint-disable n/no-process-env */
 	nextUrl: process.env.NEXT_PUBLIC_URL,
 	homeUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
-	graphqlEndpoint: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
-	uploadsDirectory: process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH,
-	restUrlPrefix: process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX,
+	graphqlEndpoint:
+		process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || DEFAULTS.graphqlEndpoint,
+	uploadsDirectory:
+		process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH ||
+		DEFAULTS.uploadsDirectory,
+	restUrlPrefix:
+		process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX ||
+		DEFAULTS.restUrlPrefix,
 	useCorsProxy: process.env.NEXT_PUBLIC_USE_CORS_PROXY === 'true',
-	corsProxyPrefix: process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX,
+	corsProxyPrefix:
+		process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX || DEFAULTS.corsProxyPrefix,
 	/* eslint-enable n/no-process-env */
 } );
 
diff --git a/packages/next/src/components/image.tsx b/packages/next/src/components/image.tsx
index d32c8deb..4ca8ec01 100644
--- a/packages/next/src/components/image.tsx
+++ b/packages/next/src/components/image.tsx
@@ -151,7 +151,7 @@ export default function Image( {
 			className={ cn( className, imageProps?.fill && 'object-cover' ) }
 			src={ src }
 			alt={ altText }
-			priority={ priority }
+			priority={ priority ?? false }
 		/>
 	) : null;
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index ce13528e..6c258a8d 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -1,6 +1,6 @@
 import React, {
-	type AnchorHTMLAttributes,
 	type CSSProperties,
+	type HTMLAttributes,
 	type PropsWithChildren,
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
@@ -12,6 +12,7 @@ interface LinkInterface {
 	style?: CSSProperties | undefined;
 	className?: string | undefined;
 }
+interface NavLinkProps extends LinkProps, HTMLAttributes< HTMLAnchorElement > {}
 
 /**
  * Link component to handle internal and external links.
@@ -30,9 +31,7 @@ export default function Link( {
 	className,
 	children,
 	...props
-}: PropsWithChildren<
-	LinkInterface & ( LinkProps | AnchorHTMLAttributes< HTMLAnchorElement > )
-> ) {
+}: PropsWithChildren< LinkInterface & NavLinkProps > ) {
 	const { homeUrl, nextUrl, graphqlEndpoint } = getConfig();
 
 	const internalUri = href
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index afb7e920..36b43dd1 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -65,7 +65,6 @@ export default function ScriptModule( {
 		return (
 			<Script
 				key={ depHandle || `${ handle }-dep-${ index }` }
-				id={ depHandle || undefined }
 				type="module"
 				src={ depSrc }
 				/*
@@ -74,6 +73,7 @@ export default function ScriptModule( {
 				 */
 				strategy="lazyOnload"
 				{ ...props }
+				{ ...( depHandle ? { id: depHandle } : {} ) }
 			/>
 		);
 	} );
@@ -95,9 +95,9 @@ export default function ScriptModule( {
 		<Script
 			type="module"
 			src={ src }
-			id={ handle || undefined }
 			strategy="lazyOnload"
 			{ ...props }
+			{ ...( handle ? { id: handle } : {} ) }
 		/>
 	);
 
diff --git a/packages/next/src/react-parser/options.tsx b/packages/next/src/react-parser/options.tsx
index 21abee05..a77bf274 100644
--- a/packages/next/src/react-parser/options.tsx
+++ b/packages/next/src/react-parser/options.tsx
@@ -32,7 +32,7 @@ export const defaultOptions: HTMLReactParserOptions = {
 				return (
 					<Link
 						{ ...attributes }
-						href={ href }
+						href={ href || '' }
 						style={ styleObject }
 						className={ className }
 					>
@@ -70,13 +70,13 @@ export const defaultOptions: HTMLReactParserOptions = {
 				return (
 					<Image
 						{ ...attributes }
-						src={ attribs.src }
+						src={ attribs.src || '' }
 						alt={ attribs.alt || '' }
-						height={ height }
-						width={ width }
-						className={ className }
+						height={ height || 0 }
+						width={ width || 0 }
+						className={ className || '' }
 						fill={ shouldFill }
-						style={ styleObject }
+						style={ styleObject ?? {} }
 						image={ imageAttributes }
 					/>
 				);
diff --git a/packages/next/src/template-renderer/index.tsx b/packages/next/src/template-renderer/index.tsx
index cb671583..ada2faab 100644
--- a/packages/next/src/template-renderer/index.tsx
+++ b/packages/next/src/template-renderer/index.tsx
@@ -27,8 +27,13 @@ export async function TemplateRenderer( {
 	const headerList = await headers(); // headers() returns a Promise from NextJS 19.
 	const pathname = headerList.get( 'x-current-path' );
 
-	const { editorBlocks, bodyClasses, stylesheets, scripts, scriptModules } =
-		await getTemplateData( pathname || '/' );
+	const {
+		editorBlocks,
+		bodyClasses,
+		stylesheets = [],
+		scripts,
+		scriptModules,
+	} = await getTemplateData( pathname || '/' );
 
 	// @todo: Script modules should load before styles to handle ordering properly
 	return (
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 23ff1915..1c77b9d5 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -16,11 +16,7 @@ const ScriptMap = ( { scripts }: { scripts: EnqueuedScriptProps[] } ) => (
 	<>
 		{ scripts?.map( ( { handle, src, ...rest }, id ) => {
 			return (
-				<Script
-					key={ handle || id }
-					src={ src || undefined }
-					{ ...rest }
-				/>
+				<Script key={ handle || id } src={ src || '' } { ...rest } />
 			);
 		} ) }
 	</>
@@ -140,10 +136,11 @@ const ScriptModuleMap = ( {
 						! uniqueScriptModuleDependencies.has( handle! );
 
 					return (
+						// @ts-ignore fix this
 						<ScriptModule
 							key={ handle || id }
-							handle={ handle }
-							src={ shouldLoadMainScript ? src : undefined }
+							{ ...( handle ? { handle } : {} ) }
+							{ ...( shouldLoadMainScript ? { src } : {} ) }
 							extraData={ extraData }
 							dependencies={ dependencies }
 						/>
diff --git a/packages/query/src/utils/parse-global-styles.ts b/packages/query/src/utils/parse-global-styles.ts
index 9e817831..b0ef215e 100644
--- a/packages/query/src/utils/parse-global-styles.ts
+++ b/packages/query/src/utils/parse-global-styles.ts
@@ -31,8 +31,8 @@ export default function parseQueryResult(
 	const globalStyles = queryData.data?.globalStyles;
 
 	return {
-		customCss: globalStyles?.customCss,
-		globalStylesheet: globalStyles?.stylesheet,
-		renderedFontFaces: globalStyles?.renderedFontFaces,
+		customCss: globalStyles?.customCss ?? null,
+		globalStylesheet: globalStyles?.stylesheet ?? null,
+		renderedFontFaces: globalStyles?.renderedFontFaces ?? null,
 	};
 }
diff --git a/packages/query/src/utils/parse-template.ts b/packages/query/src/utils/parse-template.ts
index d8cbd21b..333041bb 100644
--- a/packages/query/src/utils/parse-template.ts
+++ b/packages/query/src/utils/parse-template.ts
@@ -46,11 +46,12 @@ export default function parseQueryResult(
 	const templateByUri = queryData.data?.templateByUri;
 
 	return {
-		stylesheets: parseEnqueuedStylesheets( wordpressUrl, templateByUri ),
-		editorBlocks: parseEditorBlocks( templateByUri ),
-		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ),
-		scriptModules: parseScriptModules( templateByUri, wordpressUrl ),
-		bodyClasses: parseBodyClasses( templateByUri ),
+		stylesheets:
+			parseEnqueuedStylesheets( wordpressUrl, templateByUri ) || [],
+		editorBlocks: parseEditorBlocks( templateByUri ) || [],
+		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ) || [],
+		scriptModules: parseScriptModules( templateByUri, wordpressUrl ) || [],
+		bodyClasses: parseBodyClasses( templateByUri ) || [],
 	};
 }
 
@@ -97,8 +98,8 @@ function parseEnqueuedScripts(
 				// Ensure the src is an absolute URL.
 				src: script?.src?.startsWith( '/' )
 					? wordpressUrl + script.src
-					: script.src,
-				handle: script.handle,
+					: script.src ?? null,
+				handle: script.handle ? script.handle : null,
 			};
 		}
 	);
@@ -142,12 +143,12 @@ function parseEnqueuedStylesheets(
 	templateByUri?: GetCurrentTemplateQuery[ 'templateByUri' ]
 ): StyleSheetProps[] | undefined {
 	return templateByUri?.enqueuedStylesheets?.nodes?.map( ( stylesheet ) => ( {
-		before: stylesheet?.before?.join( '' ),
-		after: stylesheet?.after?.join( '' ),
+		before: stylesheet?.before?.join( '' ) ?? null,
+		after: stylesheet?.after?.join( '' ) ?? null,
 		src: stylesheet?.src?.startsWith( '/' )
 			? wordpressUrl + stylesheet.src
-			: stylesheet.src,
-		handle: stylesheet.handle,
+			: stylesheet.src ?? null,
+		handle: stylesheet.handle ?? null,
 	} ) );
 }
 
@@ -169,7 +170,7 @@ function parseScriptModules(
 			src: script?.src?.startsWith( '/' )
 				? `${ wordpressUrl }${ script.src }`
 				: script?.src ?? null,
-			extraData: script?.extraData,
+			extraData: script?.extraData ?? null,
 			dependencies:
 				script?.dependencies
 					?.filter(

From fd98dcae8598a5b6c44c807df33ffa2cde76b04c Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Mon, 24 Feb 2025 22:12:18 +0530
Subject: [PATCH 02/14] refactor: add script module props chanegs

---
 config/tsconfig.base.json                                | 2 +-
 packages/blocks/src/blocks/core-file.tsx                 | 2 +-
 packages/next/src/template-renderer/template-scripts.tsx | 7 ++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index 72fa3a16..a86e1511 100644
--- a/config/tsconfig.base.json
+++ b/config/tsconfig.base.json
@@ -7,7 +7,7 @@
 		"allowSyntheticDefaultImports": true,
 		"allowUnreachableCode": false,
 		"allowUnusedLabels": false,
-		"exactOptionalPropertyTypes": true, 
+		"exactOptionalPropertyTypes": true,
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitOverride": true,
 		"noImplicitReturns": true,
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index 877a071e..aa213829 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -78,7 +78,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					href={ href }
 					className="wp-block-file__button wp-element-button"
-					//@ts-ignore todo: allow download prop in link
+					//@ts-ignore allowing download prop in link
 					download
 					aria-describedby={ fileId || undefined }
 				>
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 1c77b9d5..032575a7 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -136,13 +136,14 @@ const ScriptModuleMap = ( {
 						! uniqueScriptModuleDependencies.has( handle! );
 
 					return (
-						// @ts-ignore fix this
 						<ScriptModule
 							key={ handle || id }
 							{ ...( handle ? { handle } : {} ) }
 							{ ...( shouldLoadMainScript ? { src } : {} ) }
-							extraData={ extraData }
-							dependencies={ dependencies }
+							extraData={ extraData ? extraData : null }
+							{ ...( dependencies && dependencies.length > 0
+								? { dependencies }
+								: {} ) }
 						/>
 					);
 				}

From 7d8fe393adfedf4c819a051c4d5a21df9ecde14d Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Wed, 26 Feb 2025 15:04:26 +0530
Subject: [PATCH 03/14] refactor: update props parsing

---
 packages/blocks/src/blocks/core-audio.tsx     |  9 ++++--
 packages/blocks/src/blocks/core-button.tsx    |  7 +++--
 packages/blocks/src/blocks/core-buttons.tsx   |  7 +++--
 packages/blocks/src/blocks/core-code.tsx      |  6 ++--
 packages/blocks/src/blocks/core-column.tsx    |  3 +-
 packages/blocks/src/blocks/core-columns.tsx   |  6 ++--
 packages/blocks/src/blocks/core-cover.tsx     |  6 ++--
 packages/blocks/src/blocks/core-details.tsx   |  5 ++--
 packages/blocks/src/blocks/core-file.tsx      | 11 ++++---
 packages/blocks/src/blocks/core-gallery.tsx   |  9 ++++--
 packages/blocks/src/blocks/core-heading.tsx   |  6 ++--
 packages/blocks/src/blocks/core-image.tsx     |  4 +--
 packages/blocks/src/blocks/core-list-item.tsx |  9 ++++--
 packages/blocks/src/blocks/core-list.tsx      |  4 +--
 .../blocks/src/blocks/core-media-text.tsx     |  4 +--
 .../blocks/src/blocks/core-preformatted.tsx   |  9 ++++--
 packages/blocks/src/blocks/core-pullquote.tsx |  8 +++--
 packages/blocks/src/blocks/core-quote.tsx     |  9 ++++--
 packages/blocks/src/blocks/core-spacer.tsx    |  4 +--
 packages/blocks/src/blocks/core-verse.tsx     |  9 ++++--
 packages/blocks/src/blocks/core-video.tsx     |  9 ++++--
 .../core/src/config/snapwp-config-manager.ts  | 30 +++++--------------
 packages/next/src/components/link.tsx         |  8 +++--
 .../next/src/components/script-module.tsx     |  4 +--
 packages/next/src/react-parser/options.tsx    | 19 ++++++------
 packages/next/src/template-renderer/index.tsx | 11 ++-----
 .../template-renderer/template-scripts.tsx    |  8 ++---
 .../query/src/utils/parse-global-styles.ts    |  6 ++--
 packages/query/src/utils/parse-template.ts    | 11 ++++---
 29 files changed, 124 insertions(+), 117 deletions(-)

diff --git a/packages/blocks/src/blocks/core-audio.tsx b/packages/blocks/src/blocks/core-audio.tsx
index 28ef6d10..79885ebc 100644
--- a/packages/blocks/src/blocks/core-audio.tsx
+++ b/packages/blocks/src/blocks/core-audio.tsx
@@ -25,8 +25,6 @@ const CoreAudio: CoreAudioType = ( {
 		return null;
 	}
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -37,7 +35,12 @@ const CoreAudio: CoreAudioType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure className={ classNames } style={ styleObject }>
+		<figure
+			className={ classNames }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			<audio
 				controls
 				src={ src }
diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index 726a7c1f..af7727eb 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -30,12 +30,13 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 	} = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const { homeUrl, nextUrl } = getConfig();
 	const commonProps = {
 		className: linkClassName ?? undefined,
-		style: styleObject,
+		...( style && {
+			style: getStylesFromAttributes( { style } ),
+		} ),
 		title: title ?? undefined,
 	};
 
@@ -60,7 +61,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					{ ...( linkTarget ? { target: linkTarget } : {} ) }
+					{ ...( linkTarget && { target: linkTarget } ) }
 					rel={ rel ?? undefined }
 					{ ...commonProps }
 				>
diff --git a/packages/blocks/src/blocks/core-buttons.tsx b/packages/blocks/src/blocks/core-buttons.tsx
index 9e90f050..0d8fa275 100644
--- a/packages/blocks/src/blocks/core-buttons.tsx
+++ b/packages/blocks/src/blocks/core-buttons.tsx
@@ -21,10 +21,11 @@ const CoreButtons: CoreButtonsType = ( {
 	const { cssClassName, style } = attributes || {};
 	const classNames = cn( cssClassName );
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+		>
 			{ children }
 		</div>
 	);
diff --git a/packages/blocks/src/blocks/core-code.tsx b/packages/blocks/src/blocks/core-code.tsx
index 6a96b2d3..d22c2b25 100644
--- a/packages/blocks/src/blocks/core-code.tsx
+++ b/packages/blocks/src/blocks/core-code.tsx
@@ -13,10 +13,12 @@ import type { CoreCode as CoreCodeType, CoreCodeProps } from '@snapwp/types';
  */
 const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 	const { style, cssClassName, content } = attributes || {};
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	return (
-		<pre className={ cssClassName || '' } style={ styleObject }>
+		<pre
+			className={ cssClassName || '' }
+			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+		>
 			<code>{ !! content && <Parse html={ content } /> }</code>
 		</pre>
 	);
diff --git a/packages/blocks/src/blocks/core-column.tsx b/packages/blocks/src/blocks/core-column.tsx
index d4fc4e00..818d7a1a 100644
--- a/packages/blocks/src/blocks/core-column.tsx
+++ b/packages/blocks/src/blocks/core-column.tsx
@@ -21,10 +21,9 @@ const CoreColumn: CoreColumnType = ( {
 	const { cssClassName, style, width } = attributes || {};
 
 	const classNames = cn( cssClassName );
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	const combinedStyles: React.CSSProperties = {
-		...styleObject,
+		...{ ...( style && { style: getStylesFromAttributes( { style } ) } ) },
 		flexBasis: width ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-columns.tsx b/packages/blocks/src/blocks/core-columns.tsx
index d3ea277c..04bdff05 100644
--- a/packages/blocks/src/blocks/core-columns.tsx
+++ b/packages/blocks/src/blocks/core-columns.tsx
@@ -20,11 +20,13 @@ const CoreColumns: CoreColumnsType = ( {
 }: CoreColumnsProps ) => {
 	const { cssClassName, style } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	const classNames = cn( cssClassName );
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+		>
 			{ children }
 		</div>
 	);
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 1c606bfc..cb42aec9 100644
--- a/packages/blocks/src/blocks/core-cover.tsx
+++ b/packages/blocks/src/blocks/core-cover.tsx
@@ -93,7 +93,7 @@ const CoreCover: CoreCoverType = ( {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const styleObject = {
-		...( style ? getStylesFromAttributes( { style } ) : {} ),
+		...( style && getStylesFromAttributes( { style } ) ),
 		minHeight: minHeight || undefined,
 	};
 
@@ -150,9 +150,7 @@ const CoreCover: CoreCoverType = ( {
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
-						{ ...( imageProps?.alt
-							? { alt: imageProps.alt }
-							: {} ) }
+						{ ...( imageProps?.alt && { alt: imageProps.alt } ) }
 					/>
 				) : (
 					<div
diff --git a/packages/blocks/src/blocks/core-details.tsx b/packages/blocks/src/blocks/core-details.tsx
index 1f99322c..c1684630 100644
--- a/packages/blocks/src/blocks/core-details.tsx
+++ b/packages/blocks/src/blocks/core-details.tsx
@@ -25,7 +25,6 @@ const CoreDetails: CoreDetailsType = ( {
 	renderedHtml,
 }: CoreDetailsProps ) => {
 	const { style, showContent, summary } = attributes ?? {};
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
@@ -39,7 +38,9 @@ const CoreDetails: CoreDetailsType = ( {
 	return (
 		<details
 			className={ classNames }
-			style={ styleObject }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
 			open={ showContent }
 		>
 			<summary>{ summary }</summary>
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index aa213829..43dda73a 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -45,13 +45,16 @@ const CoreFile: CoreFileType = ( {
 		: '';
 	const classNames = cn( classNamesFromString );
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	const ariaLabel = fileName || FALLBACK_ARIA_LABEL;
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ displayPreview && (
 				<object
 					className="wp-block-file__embed"
@@ -68,7 +71,7 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					id={ fileId || undefined }
 					href={ textLinkHref }
-					{ ...( textLinkTarget ? { target: textLinkTarget } : {} ) }
+					{ ...( textLinkTarget && { target: textLinkTarget } ) }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
 				>
 					{ !! fileName && <Parse html={ fileName } /> }
diff --git a/packages/blocks/src/blocks/core-gallery.tsx b/packages/blocks/src/blocks/core-gallery.tsx
index 7f95c749..e3412946 100644
--- a/packages/blocks/src/blocks/core-gallery.tsx
+++ b/packages/blocks/src/blocks/core-gallery.tsx
@@ -26,8 +26,6 @@ const CoreGallery: CoreGalleryType = ( {
 }: CoreGalleryProps ) => {
 	const { caption, style } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -37,7 +35,12 @@ const CoreGallery: CoreGalleryType = ( {
 	const className = cn( classNamesFromString ) || undefined;
 
 	return (
-		<figure className={ className } style={ styleObject }>
+		<figure
+			className={ className }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ children }
 			{ caption && (
 				<figcaption className="wp-element-caption">
diff --git a/packages/blocks/src/blocks/core-heading.tsx b/packages/blocks/src/blocks/core-heading.tsx
index b5d11c2f..821985ac 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -17,15 +17,15 @@ import type {
 const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 	const { style, cssClassName, content, level } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	const HeadingTag = level
 		? ( `h${ level }` as keyof JSX.IntrinsicElements )
 		: 'div';
 
 	return (
 		<HeadingTag
-			style={ styleObject }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
 			className={ cssClassName || undefined }
 		>
 			{ !! content && <Parse html={ content } /> }
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index bf41c43c..c7346523 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -189,10 +189,8 @@ const getImageProps = (
 		sizeSlug,
 	} = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	const imageStyles: CSSProperties = {
-		...styleObject,
+		...( style && getStylesFromAttributes( { style } ) ),
 		aspectRatio,
 		objectFit: scale as CSSProperties[ 'objectFit' ],
 	};
diff --git a/packages/blocks/src/blocks/core-list-item.tsx b/packages/blocks/src/blocks/core-list-item.tsx
index 9a97334e..2e3e78dc 100644
--- a/packages/blocks/src/blocks/core-list-item.tsx
+++ b/packages/blocks/src/blocks/core-list-item.tsx
@@ -27,8 +27,6 @@ const CoreListItem: CoreListItemType = ( {
 }: CoreListItemProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -40,7 +38,12 @@ const CoreListItem: CoreListItemType = ( {
 	const firstLineContent = content ? content.split( '\n' )[ 0 ] : undefined;
 
 	return (
-		<li className={ classNames || undefined } style={ styleObject }>
+		<li
+			className={ classNames || undefined }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ firstLineContent && <Parse html={ firstLineContent } /> }
 			{ children }
 		</li>
diff --git a/packages/blocks/src/blocks/core-list.tsx b/packages/blocks/src/blocks/core-list.tsx
index 02383096..fb44d6b0 100644
--- a/packages/blocks/src/blocks/core-list.tsx
+++ b/packages/blocks/src/blocks/core-list.tsx
@@ -19,10 +19,8 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const classNames = cn( cssClassName );
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	const combinedStyles: React.CSSProperties = {
-		...styleObject,
+		...( style && getStylesFromAttributes( { style } ) ),
 		listStyleType: type ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-media-text.tsx b/packages/blocks/src/blocks/core-media-text.tsx
index dd09b232..bdae04f2 100644
--- a/packages/blocks/src/blocks/core-media-text.tsx
+++ b/packages/blocks/src/blocks/core-media-text.tsx
@@ -110,7 +110,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		<Image
 			{ ...imageProps }
 			src={ mediaUrl }
-			{ ...( mediaAlt ? { alt: mediaAlt } : {} ) }
+			{ ...( mediaAlt && { alt: mediaAlt } ) }
 			className={ imageClasses }
 			style={ positionStyles }
 		/>
@@ -121,7 +121,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 			<Link
 				className={ linkClass }
 				href={ href }
-				{ ...( linkTarget ? { target: linkTarget } : {} ) }
+				{ ...( linkTarget && { target: linkTarget } ) }
 				rel={ newRel }
 			>
 				{ image }
diff --git a/packages/blocks/src/blocks/core-preformatted.tsx b/packages/blocks/src/blocks/core-preformatted.tsx
index 61a3dd72..44e35734 100644
--- a/packages/blocks/src/blocks/core-preformatted.tsx
+++ b/packages/blocks/src/blocks/core-preformatted.tsx
@@ -25,8 +25,6 @@ const CorePreformatted: CorePreformattedType = ( {
 }: CorePreformattedProps ) => {
 	const { content, style } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -37,7 +35,12 @@ const CorePreformatted: CorePreformattedType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre style={ styleObject } className={ classNames }>
+		<pre
+			className={ classNames }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
 	);
diff --git a/packages/blocks/src/blocks/core-pullquote.tsx b/packages/blocks/src/blocks/core-pullquote.tsx
index 524d7aac..c1bf01e1 100644
--- a/packages/blocks/src/blocks/core-pullquote.tsx
+++ b/packages/blocks/src/blocks/core-pullquote.tsx
@@ -25,7 +25,6 @@ const CorePullquote: CorePullquoteType = ( {
 }: CorePullquoteProps ) => {
 	const { style, pullquoteValue, citation } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -36,7 +35,12 @@ const CorePullquote: CorePullquoteType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure style={ styleObject } className={ classNames }>
+		<figure
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+			className={ classNames }
+		>
 			<blockquote>
 				{ pullquoteValue && (
 					<p>
diff --git a/packages/blocks/src/blocks/core-quote.tsx b/packages/blocks/src/blocks/core-quote.tsx
index 41c45753..d767a922 100644
--- a/packages/blocks/src/blocks/core-quote.tsx
+++ b/packages/blocks/src/blocks/core-quote.tsx
@@ -18,10 +18,13 @@ const CoreQuote: CoreQuoteType = ( {
 }: CoreQuoteProps ) => {
 	const { style, citation, cssClassName } = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	return (
-		<blockquote className={ cssClassName || '' } style={ styleObject }>
+		<blockquote
+			className={ cssClassName || '' }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ children }
 
 			{ !! citation && (
diff --git a/packages/blocks/src/blocks/core-spacer.tsx b/packages/blocks/src/blocks/core-spacer.tsx
index 2963ba85..ab3d77cf 100644
--- a/packages/blocks/src/blocks/core-spacer.tsx
+++ b/packages/blocks/src/blocks/core-spacer.tsx
@@ -31,15 +31,13 @@ const CoreSpacer: CoreSpacerType = ( {
 	const finalHeight =
 		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	const classNamesFromString = renderedHtml
 		? getClassNamesFromString( renderedHtml )
 		: '';
 	const classNames = cn( classNamesFromString );
 
 	const combinedStyle = {
-		...styleObject,
+		...( style && getStylesFromAttributes( { style } ) ),
 		height: getSpacingPresetCssVar( finalHeight ),
 		width: getSpacingPresetCssVar( width ),
 	};
diff --git a/packages/blocks/src/blocks/core-verse.tsx b/packages/blocks/src/blocks/core-verse.tsx
index b87e3088..3da7345a 100644
--- a/packages/blocks/src/blocks/core-verse.tsx
+++ b/packages/blocks/src/blocks/core-verse.tsx
@@ -22,8 +22,6 @@ const CoreVerse: CoreVerseType = ( {
 }: CoreVerseProps ) => {
 	const { style, content } = attributes ?? {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -34,7 +32,12 @@ const CoreVerse: CoreVerseType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre className={ classNames } style={ styleObject }>
+		<pre
+			className={ classNames }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
 	);
diff --git a/packages/blocks/src/blocks/core-video.tsx b/packages/blocks/src/blocks/core-video.tsx
index 34c25db3..9fdf4232 100644
--- a/packages/blocks/src/blocks/core-video.tsx
+++ b/packages/blocks/src/blocks/core-video.tsx
@@ -69,8 +69,6 @@ const CoreVideo: CoreVideoType = ( {
 		return null;
 	}
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -97,7 +95,12 @@ const CoreVideo: CoreVideoType = ( {
 		.filter( ( track ): track is TrackProps => track !== null );
 
 	return (
-		<figure className={ classNames } style={ styleObject }>
+		<figure
+			className={ classNames }
+			{ ...( style && {
+				style: getStylesFromAttributes( { style } ),
+			} ) }
+		>
 			<video
 				autoPlay={ autoplay || undefined }
 				controls={ controls || undefined }
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 4d3113c9..5dd1f6d1 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -59,7 +59,10 @@ type ConfigSchema< T > = {
 	};
 };
 
-const DEFAULTS = {
+/**
+ * Default configuration.
+ */
+const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
 	graphqlEndpoint: 'index.php?graphql',
 	uploadsDirectory: '/wp-content/uploads',
 	restUrlPrefix: '/wp-json',
@@ -68,17 +71,6 @@ const DEFAULTS = {
 	useCorsProxy: process.env.NODE_ENV === 'development',
 };
 
-/**
- * Default configuration.
- */
-const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
-	graphqlEndpoint: DEFAULTS.graphqlEndpoint,
-	uploadsDirectory: DEFAULTS.uploadsDirectory,
-	restUrlPrefix: DEFAULTS.restUrlPrefix,
-	corsProxyPrefix: DEFAULTS.corsProxyPrefix,
-	useCorsProxy: DEFAULTS.useCorsProxy,
-};
-
 /**
  * Get the configuration from environment variables.
  *
@@ -91,17 +83,11 @@ const envConfig = (): Partial< SnapWPEnv > => ( {
 	/* eslint-disable n/no-process-env */
 	nextUrl: process.env.NEXT_PUBLIC_URL,
 	homeUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
-	graphqlEndpoint:
-		process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT || DEFAULTS.graphqlEndpoint,
-	uploadsDirectory:
-		process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH ||
-		DEFAULTS.uploadsDirectory,
-	restUrlPrefix:
-		process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX ||
-		DEFAULTS.restUrlPrefix,
+	graphqlEndpoint: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
+	uploadsDirectory: process.env.NEXT_PUBLIC_WORDPRESS_UPLOADS_PATH,
+	restUrlPrefix: process.env.NEXT_PUBLIC_WORDPRESS_REST_URL_PREFIX,
 	useCorsProxy: process.env.NEXT_PUBLIC_USE_CORS_PROXY === 'true',
-	corsProxyPrefix:
-		process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX || DEFAULTS.corsProxyPrefix,
+	corsProxyPrefix: process.env.NEXT_PUBLIC_CORS_PROXY_PREFIX,
 	/* eslint-enable n/no-process-env */
 } );
 
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index 6c258a8d..3d385e36 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -1,6 +1,6 @@
 import React, {
+	type AnchorHTMLAttributes,
 	type CSSProperties,
-	type HTMLAttributes,
 	type PropsWithChildren,
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
@@ -12,7 +12,6 @@ interface LinkInterface {
 	style?: CSSProperties | undefined;
 	className?: string | undefined;
 }
-interface NavLinkProps extends LinkProps, HTMLAttributes< HTMLAnchorElement > {}
 
 /**
  * Link component to handle internal and external links.
@@ -31,7 +30,9 @@ export default function Link( {
 	className,
 	children,
 	...props
-}: PropsWithChildren< LinkInterface & NavLinkProps > ) {
+}: PropsWithChildren<
+	LinkInterface & ( LinkProps | AnchorHTMLAttributes< HTMLAnchorElement > )
+> ) {
 	const { homeUrl, nextUrl, graphqlEndpoint } = getConfig();
 
 	const internalUri = href
@@ -61,6 +62,7 @@ export default function Link( {
 	}
 
 	return (
+		//@ts-ignore fix this
 		<NextLink
 			{ ...props }
 			className={ className }
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 6151adf4..728b7986 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -74,7 +74,7 @@ export default function ScriptModule( {
 				 */
 				strategy="lazyOnload"
 				{ ...props }
-				{ ...( depHandle ? { id: depHandle } : {} ) }
+				{ ...( depHandle && { id: depHandle } ) }
 			/>
 		);
 	} );
@@ -98,7 +98,7 @@ export default function ScriptModule( {
 			src={ src }
 			strategy="lazyOnload"
 			{ ...props }
-			{ ...( handle ? { id: handle } : {} ) }
+			{ ...( handle && { id: handle } ) }
 		/>
 	);
 
diff --git a/packages/next/src/react-parser/options.tsx b/packages/next/src/react-parser/options.tsx
index a77bf274..8968f8e5 100644
--- a/packages/next/src/react-parser/options.tsx
+++ b/packages/next/src/react-parser/options.tsx
@@ -24,16 +24,15 @@ export const defaultOptions: HTMLReactParserOptions = {
 			const { attribs, children, name, type } = domNode;
 			const { class: className, style, ...attributes } = attribs;
 			const { href } = attribs;
-			const styleObject = style
-				? getStyleObjectFromString( style )
-				: undefined;
 
 			if ( type === 'tag' && name === 'a' ) {
 				return (
 					<Link
 						{ ...attributes }
 						href={ href || '' }
-						style={ styleObject }
+						{ ...( style && {
+							style: getStyleObjectFromString( { style } ),
+						} ) }
 						className={ className }
 					>
 						{ domToReact( children as DOMNode[], defaultOptions ) }
@@ -70,13 +69,15 @@ export const defaultOptions: HTMLReactParserOptions = {
 				return (
 					<Image
 						{ ...attributes }
-						src={ attribs.src || '' }
-						alt={ attribs.alt || '' }
-						height={ height || 0 }
-						width={ width || 0 }
+						{ ...( attributes.alt && { alt: attributes.alt } ) }
+						{ ...( attributes.src && { src: attributes.src } ) }
+						{ ...( height && { height } ) }
+						{ ...( width && { width } ) }
 						className={ className || '' }
 						fill={ shouldFill }
-						style={ styleObject ?? {} }
+						{ ...( style && {
+							style: getStyleObjectFromString( { style } ),
+						} ) }
 						image={ imageAttributes }
 					/>
 				);
diff --git a/packages/next/src/template-renderer/index.tsx b/packages/next/src/template-renderer/index.tsx
index ada2faab..ee4b366c 100644
--- a/packages/next/src/template-renderer/index.tsx
+++ b/packages/next/src/template-renderer/index.tsx
@@ -27,18 +27,13 @@ export async function TemplateRenderer( {
 	const headerList = await headers(); // headers() returns a Promise from NextJS 19.
 	const pathname = headerList.get( 'x-current-path' );
 
-	const {
-		editorBlocks,
-		bodyClasses,
-		stylesheets = [],
-		scripts,
-		scriptModules,
-	} = await getTemplateData( pathname || '/' );
+	const { editorBlocks, bodyClasses, stylesheets, scripts, scriptModules } =
+		await getTemplateData( pathname || '/' );
 
 	// @todo: Script modules should load before styles to handle ordering properly
 	return (
 		<>
-			<TemplateHead stylesheets={ stylesheets } />
+			<TemplateHead { ...( stylesheets && { stylesheets } ) } />
 			<TemplateScripts
 				scripts={ scripts }
 				scriptModules={ scriptModules }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 032575a7..cb986b46 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -138,12 +138,10 @@ const ScriptModuleMap = ( {
 					return (
 						<ScriptModule
 							key={ handle || id }
-							{ ...( handle ? { handle } : {} ) }
-							{ ...( shouldLoadMainScript ? { src } : {} ) }
+							{ ...( handle && { handle } ) }
+							{ ...( shouldLoadMainScript && { src } ) }
 							extraData={ extraData ? extraData : null }
-							{ ...( dependencies && dependencies.length > 0
-								? { dependencies }
-								: {} ) }
+							{ ...( dependencies?.length && { dependencies } ) }
 						/>
 					);
 				}
diff --git a/packages/query/src/utils/parse-global-styles.ts b/packages/query/src/utils/parse-global-styles.ts
index b0ef215e..d01715aa 100644
--- a/packages/query/src/utils/parse-global-styles.ts
+++ b/packages/query/src/utils/parse-global-styles.ts
@@ -31,8 +31,8 @@ export default function parseQueryResult(
 	const globalStyles = queryData.data?.globalStyles;
 
 	return {
-		customCss: globalStyles?.customCss ?? null,
-		globalStylesheet: globalStyles?.stylesheet ?? null,
-		renderedFontFaces: globalStyles?.renderedFontFaces ?? null,
+		customCss: globalStyles?.customCss || null,
+		globalStylesheet: globalStyles?.stylesheet || null,
+		renderedFontFaces: globalStyles?.renderedFontFaces || null,
 	};
 }
diff --git a/packages/query/src/utils/parse-template.ts b/packages/query/src/utils/parse-template.ts
index 333041bb..4db4e8e7 100644
--- a/packages/query/src/utils/parse-template.ts
+++ b/packages/query/src/utils/parse-template.ts
@@ -46,12 +46,11 @@ export default function parseQueryResult(
 	const templateByUri = queryData.data?.templateByUri;
 
 	return {
-		stylesheets:
-			parseEnqueuedStylesheets( wordpressUrl, templateByUri ) || [],
-		editorBlocks: parseEditorBlocks( templateByUri ) || [],
-		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ) || [],
-		scriptModules: parseScriptModules( templateByUri, wordpressUrl ) || [],
-		bodyClasses: parseBodyClasses( templateByUri ) || [],
+		stylesheets: parseEnqueuedStylesheets( wordpressUrl, templateByUri ),
+		editorBlocks: parseEditorBlocks( templateByUri ),
+		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ),
+		scriptModules: parseScriptModules( templateByUri, wordpressUrl ),
+		bodyClasses: parseBodyClasses( templateByUri ),
 	};
 }
 

From 029b9ac0e99185d58b98343f5c2d0f67b91ee6b9 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Mon, 3 Mar 2025 13:18:02 +0530
Subject: [PATCH 04/14] refactor: WIP: fixing link default import issue

---
 packages/blocks/src/blocks/core-file.tsx |  1 -
 packages/core/tsconfig.json              |  9 ++-
 packages/next/src/components/link.tsx    |  3 +-
 packages/next/tsconfig.json              |  3 +-
 packages/types/src/global/link.ts        | 92 ++++++++++++++++++++++++
 packages/types/src/index.ts              |  1 +
 6 files changed, 103 insertions(+), 6 deletions(-)
 create mode 100644 packages/types/src/global/link.ts

diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index 43dda73a..06d112df 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -81,7 +81,6 @@ const CoreFile: CoreFileType = ( {
 				<Link
 					href={ href }
 					className="wp-block-file__button wp-element-button"
-					//@ts-ignore allowing download prop in link
 					download
 					aria-describedby={ fileId || undefined }
 				>
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index a526c599..71fe91f4 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -6,12 +6,17 @@
 		"outDir": "./dist",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": [ "./src/*" ]
+			"@/*": [ "./src/*" ],
+			"next/link": [ "../types/src/global/link.ts" ]
 		},
 		"types": [ "jest", "node" ],
 		"typeRoots": [ "../../node_modules/@types" ]
 	},
-	"include": [ "src/**/*", "../types/dist/types/global/env.d.ts" ],
+	"include": [
+		"src/**/*",
+		"../types/dist/types/global/env.d.ts",
+		"../types/dist/types/global/link.d.ts"
+	],
 	"exclude": [ "node_modules", "dist" ],
 	"references": [ { "path": "../types" } ]
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index 3d385e36..c8bd05d5 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -5,7 +5,7 @@ import React, {
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
 import { getConfig } from '@snapwp/core/config';
-import NextLink, { type LinkProps } from 'next/link';
+import { Link as NextLink, type LinkProps } from '@snapwp/types';
 
 interface LinkInterface {
 	href?: string;
@@ -62,7 +62,6 @@ export default function Link( {
 	}
 
 	return (
-		//@ts-ignore fix this
 		<NextLink
 			{ ...props }
 			className={ className }
diff --git a/packages/next/tsconfig.json b/packages/next/tsconfig.json
index 5d18b483..8f70202c 100644
--- a/packages/next/tsconfig.json
+++ b/packages/next/tsconfig.json
@@ -6,7 +6,8 @@
 		"outDir": "./dist",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": [ "./src/*" ]
+			"@/*": [ "./src/*" ],
+			"next/link": [ "../types/src/global/link.ts" ]
 		}
 	},
 	"include": [ "src/**/*" ],
diff --git a/packages/types/src/global/link.ts b/packages/types/src/global/link.ts
new file mode 100644
index 00000000..39438809
--- /dev/null
+++ b/packages/types/src/global/link.ts
@@ -0,0 +1,92 @@
+import type { UrlObject } from 'url';
+type Url = string | UrlObject;
+type InternalLinkProps = {
+	/**
+	 * The path or URL to navigate to. It can also be an object.
+	 *
+	 * @example https://nextjs.org/docs/api-reference/next/link#with-url-object
+	 */
+	href: Url | undefined;
+	/**
+	 * Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://github.com/vercel/next.js/blob/v9.5.2/docs/api-reference/next/link.md#dynamic-routes) to see how it worked. Note: when this path differs from the one provided in `href` the previous `href`/`as` behavior is used as shown in the [previous docs](https://github.com/vercel/next.js/blob/v9.5.2/docs/api-reference/next/link.md#dynamic-routes).
+	 */
+	as?: Url | undefined;
+	/**
+	 * Replace the current `history` state instead of adding a new url into the stack.
+	 *
+	 */
+	replace?: boolean | undefined;
+	/**
+	 * Whether to override the default scroll behavior
+	 *
+	 * @example https://nextjs.org/docs/api-reference/next/link#disable-scrolling-to-the-top-of-the-page
+	 */
+	scroll?: boolean | undefined;
+	/**
+	 * Update the path of the current page without rerunning [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props).
+	 *
+	 */
+	shallow?: boolean | undefined;
+	/**
+	 * Forces `Link` to send the `href` property to its child.
+	 *
+	 */
+	passHref?: boolean | undefined;
+	/**
+	 * Prefetch the page in the background.
+	 * Any `<Link />` that is in the viewport (initially or through scroll) will be prefetched.
+	 * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.
+	 *
+	 * In App Router:
+	 * - `null` (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.
+	 * - `true`: This will prefetch the full React Server Component data for all route segments, regardless of whether they contain a segment with `loading.js`.
+	 * - `false`: This will not prefetch any data, even on hover.
+	 *
+	 * In Pages Router:
+	 * - `true` (default): The full route & its data will be prefetched.
+	 * - `false`: Prefetching will not happen when entering the viewport, but will still happen on hover.
+	 */
+	prefetch?: boolean | null | undefined;
+	/**
+	 * The active locale is automatically prepended. `locale` allows for providing a different locale.
+	 * When `false` `href` has to include the locale as the default behavior is disabled.
+	 * Note: This is only available in the Pages Router.
+	 */
+	locale?: string | false | undefined;
+	/**
+	 * Enable legacy link behavior.
+	 * @see https://github.com/vercel/next.js/commit/489e65ed98544e69b0afd7e0cfc3f9f6c2b803b7
+	 */
+	legacyBehavior?: boolean | undefined;
+	/**
+	 * Optional event handler for when the mouse pointer is moved onto Link
+	 */
+	onMouseEnter?: React.MouseEventHandler< HTMLAnchorElement > | undefined;
+	/**
+	 * Optional event handler for when Link is touched.
+	 */
+	onTouchStart?: React.TouchEventHandler< HTMLAnchorElement > | undefined;
+	/**
+	 * Optional event handler for when Link is clicked.
+	 */
+	onClick?: React.MouseEventHandler< HTMLAnchorElement > | undefined;
+};
+export type LinkProps = InternalLinkProps;
+/**
+ * A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
+ * and client-side navigation between routes.
+ *
+ * It is the primary way to navigate between routes in Next.js.
+ *
+ * Read more: [Next.js docs: `<Link>`](https://nextjs.org/docs/app/api-reference/components/link)
+ */
+declare const Link: React.ForwardRefExoticComponent<
+	Omit<
+		React.AnchorHTMLAttributes< HTMLAnchorElement >,
+		keyof InternalLinkProps
+	> &
+		InternalLinkProps & {
+			children?: React.ReactNode | undefined;
+		} & React.RefAttributes< HTMLAnchorElement >
+>;
+export default Link;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 91bf7d9c..cefbc0a7 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1 +1,2 @@
 export * from './blocks';
+export { default as Link, type LinkProps } from './global/link';

From 7d15ba1ce187ce208c8d287059ff7f04e98dc523 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Tue, 4 Mar 2025 19:58:47 +0530
Subject: [PATCH 05/14] fix: Use generics to overcome next/link props issue

---
 packages/core/tsconfig.json                   |  9 +-
 packages/next/src/components/link.tsx         | 12 ++-
 packages/next/tsconfig.json                   |  3 +-
 packages/types/src/global/link.ts             | 92 -------------------
 packages/types/src/index.ts                   |  2 +-
 .../types/src/type-helpers/optional-props.ts  |  3 +
 6 files changed, 16 insertions(+), 105 deletions(-)
 delete mode 100644 packages/types/src/global/link.ts
 create mode 100644 packages/types/src/type-helpers/optional-props.ts

diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index 71fe91f4..a526c599 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -6,17 +6,12 @@
 		"outDir": "./dist",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": [ "./src/*" ],
-			"next/link": [ "../types/src/global/link.ts" ]
+			"@/*": [ "./src/*" ]
 		},
 		"types": [ "jest", "node" ],
 		"typeRoots": [ "../../node_modules/@types" ]
 	},
-	"include": [
-		"src/**/*",
-		"../types/dist/types/global/env.d.ts",
-		"../types/dist/types/global/link.d.ts"
-	],
+	"include": [ "src/**/*", "../types/dist/types/global/env.d.ts" ],
 	"exclude": [ "node_modules", "dist" ],
 	"references": [ { "path": "../types" } ]
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index c8bd05d5..bfd55618 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -5,7 +5,8 @@ import React, {
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
 import { getConfig } from '@snapwp/core/config';
-import { Link as NextLink, type LinkProps } from '@snapwp/types';
+import { type OptionalUndefinedType } from '@snapwp/types';
+import NextLink, { type LinkProps } from 'next/link';
 
 interface LinkInterface {
 	href?: string;
@@ -31,7 +32,11 @@ export default function Link( {
 	children,
 	...props
 }: PropsWithChildren<
-	LinkInterface & ( LinkProps | AnchorHTMLAttributes< HTMLAnchorElement > )
+	LinkInterface &
+		(
+			| OptionalUndefinedType< LinkProps >
+			| AnchorHTMLAttributes< HTMLAnchorElement >
+		)
 > ) {
 	const { homeUrl, nextUrl, graphqlEndpoint } = getConfig();
 
@@ -63,7 +68,8 @@ export default function Link( {
 
 	return (
 		<NextLink
-			{ ...props }
+			//to override the default ts props behavior of NextLink
+			{ ...( props as LinkProps ) }
 			className={ className }
 			href={ internalUri || '' }
 			style={ style }
diff --git a/packages/next/tsconfig.json b/packages/next/tsconfig.json
index 8f70202c..5d18b483 100644
--- a/packages/next/tsconfig.json
+++ b/packages/next/tsconfig.json
@@ -6,8 +6,7 @@
 		"outDir": "./dist",
 		"baseUrl": ".",
 		"paths": {
-			"@/*": [ "./src/*" ],
-			"next/link": [ "../types/src/global/link.ts" ]
+			"@/*": [ "./src/*" ]
 		}
 	},
 	"include": [ "src/**/*" ],
diff --git a/packages/types/src/global/link.ts b/packages/types/src/global/link.ts
deleted file mode 100644
index 39438809..00000000
--- a/packages/types/src/global/link.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { UrlObject } from 'url';
-type Url = string | UrlObject;
-type InternalLinkProps = {
-	/**
-	 * The path or URL to navigate to. It can also be an object.
-	 *
-	 * @example https://nextjs.org/docs/api-reference/next/link#with-url-object
-	 */
-	href: Url | undefined;
-	/**
-	 * Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our [previous docs](https://github.com/vercel/next.js/blob/v9.5.2/docs/api-reference/next/link.md#dynamic-routes) to see how it worked. Note: when this path differs from the one provided in `href` the previous `href`/`as` behavior is used as shown in the [previous docs](https://github.com/vercel/next.js/blob/v9.5.2/docs/api-reference/next/link.md#dynamic-routes).
-	 */
-	as?: Url | undefined;
-	/**
-	 * Replace the current `history` state instead of adding a new url into the stack.
-	 *
-	 */
-	replace?: boolean | undefined;
-	/**
-	 * Whether to override the default scroll behavior
-	 *
-	 * @example https://nextjs.org/docs/api-reference/next/link#disable-scrolling-to-the-top-of-the-page
-	 */
-	scroll?: boolean | undefined;
-	/**
-	 * Update the path of the current page without rerunning [`getStaticProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props), [`getServerSideProps`](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props) or [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props).
-	 *
-	 */
-	shallow?: boolean | undefined;
-	/**
-	 * Forces `Link` to send the `href` property to its child.
-	 *
-	 */
-	passHref?: boolean | undefined;
-	/**
-	 * Prefetch the page in the background.
-	 * Any `<Link />` that is in the viewport (initially or through scroll) will be prefetched.
-	 * Prefetch can be disabled by passing `prefetch={false}`. Prefetching is only enabled in production.
-	 *
-	 * In App Router:
-	 * - `null` (default): For statically generated pages, this will prefetch the full React Server Component data. For dynamic pages, this will prefetch up to the nearest route segment with a [`loading.js`](https://nextjs.org/docs/app/api-reference/file-conventions/loading) file. If there is no loading file, it will not fetch the full tree to avoid fetching too much data.
-	 * - `true`: This will prefetch the full React Server Component data for all route segments, regardless of whether they contain a segment with `loading.js`.
-	 * - `false`: This will not prefetch any data, even on hover.
-	 *
-	 * In Pages Router:
-	 * - `true` (default): The full route & its data will be prefetched.
-	 * - `false`: Prefetching will not happen when entering the viewport, but will still happen on hover.
-	 */
-	prefetch?: boolean | null | undefined;
-	/**
-	 * The active locale is automatically prepended. `locale` allows for providing a different locale.
-	 * When `false` `href` has to include the locale as the default behavior is disabled.
-	 * Note: This is only available in the Pages Router.
-	 */
-	locale?: string | false | undefined;
-	/**
-	 * Enable legacy link behavior.
-	 * @see https://github.com/vercel/next.js/commit/489e65ed98544e69b0afd7e0cfc3f9f6c2b803b7
-	 */
-	legacyBehavior?: boolean | undefined;
-	/**
-	 * Optional event handler for when the mouse pointer is moved onto Link
-	 */
-	onMouseEnter?: React.MouseEventHandler< HTMLAnchorElement > | undefined;
-	/**
-	 * Optional event handler for when Link is touched.
-	 */
-	onTouchStart?: React.TouchEventHandler< HTMLAnchorElement > | undefined;
-	/**
-	 * Optional event handler for when Link is clicked.
-	 */
-	onClick?: React.MouseEventHandler< HTMLAnchorElement > | undefined;
-};
-export type LinkProps = InternalLinkProps;
-/**
- * A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
- * and client-side navigation between routes.
- *
- * It is the primary way to navigate between routes in Next.js.
- *
- * Read more: [Next.js docs: `<Link>`](https://nextjs.org/docs/app/api-reference/components/link)
- */
-declare const Link: React.ForwardRefExoticComponent<
-	Omit<
-		React.AnchorHTMLAttributes< HTMLAnchorElement >,
-		keyof InternalLinkProps
-	> &
-		InternalLinkProps & {
-			children?: React.ReactNode | undefined;
-		} & React.RefAttributes< HTMLAnchorElement >
->;
-export default Link;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index cefbc0a7..28eed5ac 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,2 +1,2 @@
 export * from './blocks';
-export { default as Link, type LinkProps } from './global/link';
+export * from './type-helpers/optional-props';
diff --git a/packages/types/src/type-helpers/optional-props.ts b/packages/types/src/type-helpers/optional-props.ts
new file mode 100644
index 00000000..421cd5f9
--- /dev/null
+++ b/packages/types/src/type-helpers/optional-props.ts
@@ -0,0 +1,3 @@
+export type OptionalUndefinedType< T > = {
+	[ P in keyof T ]?: T[ P ] | undefined;
+};

From a263997578bd945b50b476ca3216159e16305168 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Wed, 5 Mar 2025 17:30:57 +0530
Subject: [PATCH 06/14] refactor: Implement PR changes for type fixes

---
 packages/blocks/src/blocks/core-list-item.tsx            | 2 +-
 packages/blocks/src/blocks/core-media-text.tsx           | 4 +---
 packages/blocks/src/blocks/core-video.tsx                | 4 +++-
 packages/core/src/config/snapwp-config-manager.ts        | 2 +-
 packages/next/src/components/image.tsx                   | 2 +-
 packages/next/src/components/link.tsx                    | 6 +++---
 packages/next/src/template-renderer/template-scripts.tsx | 2 +-
 packages/types/src/index.ts                              | 2 +-
 packages/types/src/type-helpers/optional-props.ts        | 3 ---
 packages/types/src/utils.ts                              | 8 ++++++++
 10 files changed, 20 insertions(+), 15 deletions(-)
 delete mode 100644 packages/types/src/type-helpers/optional-props.ts
 create mode 100644 packages/types/src/utils.ts

diff --git a/packages/blocks/src/blocks/core-list-item.tsx b/packages/blocks/src/blocks/core-list-item.tsx
index 2e3e78dc..ab74c7ae 100644
--- a/packages/blocks/src/blocks/core-list-item.tsx
+++ b/packages/blocks/src/blocks/core-list-item.tsx
@@ -39,7 +39,7 @@ const CoreListItem: CoreListItemType = ( {
 
 	return (
 		<li
-			className={ classNames || undefined }
+			{ ...( classNames && { className: classNames } ) }
 			{ ...( style && {
 				style: getStylesFromAttributes( { style } ),
 			} ) }
diff --git a/packages/blocks/src/blocks/core-media-text.tsx b/packages/blocks/src/blocks/core-media-text.tsx
index bdae04f2..e6f273e0 100644
--- a/packages/blocks/src/blocks/core-media-text.tsx
+++ b/packages/blocks/src/blocks/core-media-text.tsx
@@ -138,8 +138,6 @@ const CoreMediaText: CoreMediaTextType = ( {
 		? getClassNamesFromString( renderedHtml )
 		: '';
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
-
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
 		gridTemplateColumns =
@@ -149,7 +147,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 	}
 
 	const gridStyle = {
-		...styleObject,
+		...( style && { ...getStylesFromAttributes( { style } ) } ),
 		gridTemplateColumns,
 	};
 
diff --git a/packages/blocks/src/blocks/core-video.tsx b/packages/blocks/src/blocks/core-video.tsx
index 9fdf4232..74c078ac 100644
--- a/packages/blocks/src/blocks/core-video.tsx
+++ b/packages/blocks/src/blocks/core-video.tsx
@@ -113,7 +113,9 @@ const CoreVideo: CoreVideoType = ( {
 				src={ src }
 				playsInline={ playsInline || undefined }
 			>
-				<Tracks tracks={ formattedTracks || [] } />
+				<Tracks
+					{ ...( formattedTracks && { tracks: formattedTracks } ) }
+				/>
 			</video>
 
 			{ caption && (
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 7a641b9d..85869089 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -78,7 +78,7 @@ const defaultConfig: Partial< SnapWPEnv & SnapWPConfig > = {
  *
  * @return The configuration object.
  */
-//@ts-ignore - ignore check for nextUrl,homeUrl to run missing environment variable test.
+// @ts-ignore - ignore check for nextUrl,homeUrl to run missing environment variable test.
 const envConfig = (): Partial< SnapWPEnv > => ( {
 	/* eslint-disable n/no-process-env -- These are the env variables we want to manage. */
 	nextUrl: process.env.NEXT_PUBLIC_URL,
diff --git a/packages/next/src/components/image.tsx b/packages/next/src/components/image.tsx
index 4ca8ec01..966c7f89 100644
--- a/packages/next/src/components/image.tsx
+++ b/packages/next/src/components/image.tsx
@@ -151,7 +151,7 @@ export default function Image( {
 			className={ cn( className, imageProps?.fill && 'object-cover' ) }
 			src={ src }
 			alt={ altText }
-			priority={ priority ?? false }
+			{ ...( priority && { priority } ) }
 		/>
 	) : null;
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index bfd55618..e19c6fa9 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -5,7 +5,7 @@ import React, {
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
 import { getConfig } from '@snapwp/core/config';
-import { type OptionalUndefinedType } from '@snapwp/types';
+import { type PartialWithUndefined } from '@snapwp/types';
 import NextLink, { type LinkProps } from 'next/link';
 
 interface LinkInterface {
@@ -34,7 +34,7 @@ export default function Link( {
 }: PropsWithChildren<
 	LinkInterface &
 		(
-			| OptionalUndefinedType< LinkProps >
+			| PartialWithUndefined< LinkProps >
 			| AnchorHTMLAttributes< HTMLAnchorElement >
 		)
 > ) {
@@ -68,7 +68,7 @@ export default function Link( {
 
 	return (
 		<NextLink
-			//to override the default ts props behavior of NextLink
+			// LinkProps conflicts with exactOptionalPropertyTypes: https://github.com/vercel/next.js/issues/50561
 			{ ...( props as LinkProps ) }
 			className={ className }
 			href={ internalUri || '' }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 16ccec31..605d4122 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -140,7 +140,7 @@ const ScriptModuleMap = ( {
 							key={ handle || id }
 							{ ...( handle && { handle } ) }
 							{ ...( shouldLoadMainScript && { src } ) }
-							extraData={ extraData ? extraData : null }
+							{ ...( extraData && { extraData } ) }
 							{ ...( dependencies?.length && { dependencies } ) }
 						/>
 					);
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 28eed5ac..254c771f 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1,2 +1,2 @@
 export * from './blocks';
-export * from './type-helpers/optional-props';
+export * from './utils';
diff --git a/packages/types/src/type-helpers/optional-props.ts b/packages/types/src/type-helpers/optional-props.ts
deleted file mode 100644
index 421cd5f9..00000000
--- a/packages/types/src/type-helpers/optional-props.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type OptionalUndefinedType< T > = {
-	[ P in keyof T ]?: T[ P ] | undefined;
-};
diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
new file mode 100644
index 00000000..bfc76a6f
--- /dev/null
+++ b/packages/types/src/utils.ts
@@ -0,0 +1,8 @@
+/**
+ * A utility type that makes all properties of a given type `T` optional and allows them to be `undefined`.
+ *
+ * @template T - The type to be transformed.
+ */
+export type PartialWithUndefined< T > = {
+	[ P in keyof T ]?: T[ P ] | undefined;
+};

From fc6db149effae8c48ae6f402d5d88f072e2fad00 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Tue, 11 Mar 2025 11:55:18 +0530
Subject: [PATCH 07/14] fix: add undefined for our types

---
 packages/blocks/src/blocks/core-button.tsx           |  2 +-
 packages/blocks/src/blocks/core-code.tsx             |  2 +-
 packages/blocks/src/blocks/core-file.tsx             |  2 +-
 packages/blocks/src/blocks/core-group.tsx            |  2 +-
 packages/blocks/src/blocks/core-heading.tsx          |  2 +-
 packages/blocks/src/blocks/core-image.tsx            |  4 ++--
 packages/blocks/src/blocks/core-paragraph.tsx        |  2 +-
 packages/blocks/src/blocks/core-spacer.tsx           |  2 +-
 packages/blocks/src/blocks/core-video.tsx            |  2 +-
 .../core/src/utils/get-styles-from-attributes.ts     |  2 +-
 packages/next/src/components/script-module.tsx       |  9 +++++----
 packages/next/src/components/script.tsx              |  2 +-
 packages/next/src/react-parser/options.tsx           |  4 ++--
 .../next/src/template-renderer/template-scripts.tsx  | 12 ++++++++----
 packages/types/src/blocks/props/core-paragraph.ts    |  2 +-
 15 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index 03e9b5cf..3b4cc864 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -62,7 +62,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 				<Link
 					href={ href }
 					{ ...( linkTarget && { target: linkTarget } ) }
-					rel={ rel ?? undefined }
+					{ ...( rel && { rel } ) }
 					{ ...commonProps }
 				>
 					{ !! text && <Parse html={ text } /> }
diff --git a/packages/blocks/src/blocks/core-code.tsx b/packages/blocks/src/blocks/core-code.tsx
index 1ff33b2c..91ee3e05 100644
--- a/packages/blocks/src/blocks/core-code.tsx
+++ b/packages/blocks/src/blocks/core-code.tsx
@@ -15,7 +15,7 @@ const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 
 	return (
 		<pre
-			className={ cssClassName || '' }
+			{ ...( cssClassName && { className: cssClassName } ) }
 			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
 		>
 			<code>{ !! content && <Parse html={ content } /> }</code>
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index 82de89cb..6ac180c4 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -68,7 +68,7 @@ const CoreFile: CoreFileType = ( {
 			) }
 			{ fileName && textLinkHref && (
 				<Link
-					id={ fileId || undefined }
+					{ ...( fileId && { id: fileId } ) }
 					href={ textLinkHref }
 					{ ...( textLinkTarget && { target: textLinkTarget } ) }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
diff --git a/packages/blocks/src/blocks/core-group.tsx b/packages/blocks/src/blocks/core-group.tsx
index 5ba568f1..9b988863 100644
--- a/packages/blocks/src/blocks/core-group.tsx
+++ b/packages/blocks/src/blocks/core-group.tsx
@@ -46,7 +46,7 @@ const CoreGroup: CoreGroupType = ( {
 }: CoreGroupProps ) => {
 	const { style, tagName } = attributes ?? {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
+	const styleObject = getStylesFromAttributes( { style } );
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
diff --git a/packages/blocks/src/blocks/core-heading.tsx b/packages/blocks/src/blocks/core-heading.tsx
index 7b2c6e6d..c0f5766a 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -26,7 +26,7 @@ const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 			{ ...( style && {
 				style: getStylesFromAttributes( { style } ),
 			} ) }
-			className={ cssClassName || undefined }
+			{ ...( cssClassName && { className: cssClassName } ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</HeadingTag>
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index d26a04f9..f93c5835 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -124,7 +124,7 @@ const CoreImage: CoreImageType = ( {
 
 	return (
 		<Figure
-			renderedHtml={ renderedHtml ?? null }
+			{ ...( renderedHtml && { renderedHtml } ) }
 			classNames={ classNames }
 			{ ...attributes }
 		>
@@ -271,7 +271,7 @@ const isLightboxEnabled = ( lightbox?: string | null ) => {
  */
 const extractInteractivityAttributesForElement = (
 	element: string,
-	renderedHtml?: string | null
+	renderedHtml?: string | null | undefined
 ) => {
 	if ( ! renderedHtml ) {
 		return {};
diff --git a/packages/blocks/src/blocks/core-paragraph.tsx b/packages/blocks/src/blocks/core-paragraph.tsx
index b084c0f3..a776ce9c 100644
--- a/packages/blocks/src/blocks/core-paragraph.tsx
+++ b/packages/blocks/src/blocks/core-paragraph.tsx
@@ -27,7 +27,7 @@ const CoreParagraph: CoreParagraphType = ( {
 		textColor,
 	} = attributes || {};
 
-	const styleObject = style ? getStylesFromAttributes( { style } ) : {};
+	const styleObject = getStylesFromAttributes( { style } );
 
 	/**
 	 * Add missing styles to the style object
diff --git a/packages/blocks/src/blocks/core-spacer.tsx b/packages/blocks/src/blocks/core-spacer.tsx
index 968d2d90..410f033e 100644
--- a/packages/blocks/src/blocks/core-spacer.tsx
+++ b/packages/blocks/src/blocks/core-spacer.tsx
@@ -36,7 +36,7 @@ const CoreSpacer: CoreSpacerType = ( {
 	const classNames = cn( classNamesFromString );
 
 	const combinedStyle = {
-		...( style && getStylesFromAttributes( { style } ) ),
+		...getStylesFromAttributes( { style } ),
 		height: getSpacingPresetCssVar( finalHeight ),
 		width: getSpacingPresetCssVar( width ),
 	};
diff --git a/packages/blocks/src/blocks/core-video.tsx b/packages/blocks/src/blocks/core-video.tsx
index 85bae20b..dfb02cb3 100644
--- a/packages/blocks/src/blocks/core-video.tsx
+++ b/packages/blocks/src/blocks/core-video.tsx
@@ -18,7 +18,7 @@ import type {
  *
  * @return A list of `<track>` elements or `null` if no tracks are provided.
  */
-const Tracks = ( { tracks }: { tracks?: TrackProps[] } ) => {
+const Tracks = ( { tracks }: { tracks?: TrackProps[] | undefined } ) => {
 	if ( ! tracks || tracks.length === 0 ) {
 		return null;
 	}
diff --git a/packages/core/src/utils/get-styles-from-attributes.ts b/packages/core/src/utils/get-styles-from-attributes.ts
index b50d841b..a6567014 100644
--- a/packages/core/src/utils/get-styles-from-attributes.ts
+++ b/packages/core/src/utils/get-styles-from-attributes.ts
@@ -2,7 +2,7 @@ import { compileCSS } from '@wordpress/style-engine';
 import getStyleObjectFromString from './get-style-object-from-string';
 
 interface AttributesWithStyle {
-	style?: string;
+	style?: string | undefined;
 }
 
 /**
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 7ca6f56f..51b44723 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -9,8 +9,8 @@ import type { PropsWithoutRef } from 'react';
 import Script from 'next/script';
 
 interface ScriptModuleInterface {
-	handle?: string | null;
-	src?: string | null;
+	handle?: string | null | undefined;
+	src?: string | null | undefined;
 	dependencies?:
 		| {
 				importType?: string | null;
@@ -19,8 +19,9 @@ interface ScriptModuleInterface {
 					src: string;
 				} | null;
 		  }[]
-		| null;
-	extraData?: string | null;
+		| null
+		| undefined;
+	extraData?: string | null | undefined;
 }
 
 /**
diff --git a/packages/next/src/components/script.tsx b/packages/next/src/components/script.tsx
index 8a37faf0..85bcac59 100644
--- a/packages/next/src/components/script.tsx
+++ b/packages/next/src/components/script.tsx
@@ -8,7 +8,7 @@ interface ScriptInterface {
 	handle?: string | null;
 	loadingStrategy?: 'ASYNC' | 'DEFER' | null;
 	groupLocation?: 'HEADER' | 'FOOTER' | null;
-	src?: string | null;
+	src?: string | null | undefined;
 }
 
 /**
diff --git a/packages/next/src/react-parser/options.tsx b/packages/next/src/react-parser/options.tsx
index 927853f4..c1c746ee 100644
--- a/packages/next/src/react-parser/options.tsx
+++ b/packages/next/src/react-parser/options.tsx
@@ -28,7 +28,7 @@ export const defaultOptions: HTMLReactParserOptions = {
 				return (
 					<Link
 						{ ...attributes }
-						href={ href || '' }
+						{ ...( href && { href } ) }
 						{ ...( style && {
 							style: getStyleObjectFromString( { style } ),
 						} ) }
@@ -77,7 +77,7 @@ export const defaultOptions: HTMLReactParserOptions = {
 						} ) }
 						{ ...( height && { height } ) }
 						{ ...( width && { width } ) }
-						className={ className || '' }
+						{ ...( className && { className } ) }
 						fill={ shouldFill }
 						{ ...( style && {
 							style: getStyleObjectFromString( { style } ),
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index fe494ec1..74eab283 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -16,7 +16,11 @@ const ScriptMap = ( { scripts }: { scripts: EnqueuedScriptProps[] } ) => (
 	<>
 		{ scripts?.map( ( { handle, src, ...rest }, id ) => {
 			return (
-				<Script key={ handle || id } src={ src || '' } { ...rest } />
+				<Script
+					key={ handle || id }
+					{ ...( src && { src } ) }
+					{ ...rest }
+				/>
 			);
 		} ) }
 	</>
@@ -138,10 +142,10 @@ const ScriptModuleMap = ( {
 					return (
 						<ScriptModule
 							key={ handle || id }
-							{ ...( handle && { handle } ) }
+							handle={ handle }
 							{ ...( shouldLoadMainScript && { src } ) }
-							{ ...( extraData && { extraData } ) }
-							{ ...( dependencies?.length && { dependencies } ) }
+							extraData={ extraData }
+							dependencies={ dependencies }
 						/>
 					);
 				}
diff --git a/packages/types/src/blocks/props/core-paragraph.ts b/packages/types/src/blocks/props/core-paragraph.ts
index 4ef94d68..7832f5ea 100644
--- a/packages/types/src/blocks/props/core-paragraph.ts
+++ b/packages/types/src/blocks/props/core-paragraph.ts
@@ -7,7 +7,7 @@ export type CoreParagraphAttributes = BaseAttributes & {
 	direction?: string;
 	fontFamily?: string;
 	fontSize?: string;
-	style?: string;
+	style?: string | undefined;
 	textColor?: string;
 };
 

From a23df92bc33e7c1d08bdf7bfd3f76a06d2d8cbc3 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Fri, 14 Mar 2025 10:57:28 +0530
Subject: [PATCH 08/14] refactor: change props passing for our components

---
 packages/blocks/src/blocks/core-button.tsx    |  4 +--
 packages/blocks/src/blocks/core-column.tsx    |  2 +-
 packages/blocks/src/blocks/core-cover.tsx     |  2 +-
 packages/blocks/src/blocks/core-file.tsx      |  4 +--
 packages/blocks/src/blocks/core-heading.tsx   |  6 ++---
 packages/blocks/src/blocks/core-image.tsx     |  6 ++---
 .../blocks/src/blocks/core-media-text.tsx     |  6 ++---
 packages/next/src/components/image.tsx        | 12 ++++-----
 packages/next/src/components/link.tsx         |  2 +-
 .../next/src/components/script-module.tsx     |  2 +-
 packages/next/src/react-parser/options.tsx    | 27 ++++++++-----------
 .../template-renderer/template-scripts.tsx    |  2 +-
 packages/types/src/blocks/props/core-image.ts |  2 +-
 13 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index 3b4cc864..51a82f7d 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -61,8 +61,8 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					{ ...( linkTarget && { target: linkTarget } ) }
-					{ ...( rel && { rel } ) }
+					target={ linkTarget }
+					rel={ rel }
 					{ ...commonProps }
 				>
 					{ !! text && <Parse html={ text } /> }
diff --git a/packages/blocks/src/blocks/core-column.tsx b/packages/blocks/src/blocks/core-column.tsx
index 04b52d97..11450ae1 100644
--- a/packages/blocks/src/blocks/core-column.tsx
+++ b/packages/blocks/src/blocks/core-column.tsx
@@ -22,7 +22,7 @@ const CoreColumn: CoreColumnType = ( {
 	const classNames = cn( cssClassName );
 
 	const combinedStyles: React.CSSProperties = {
-		...{ ...( style && { style: getStylesFromAttributes( { style } ) } ) },
+		...getStylesFromAttributes( { style } ),
 		flexBasis: width ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 3911bf05..8c465440 100644
--- a/packages/blocks/src/blocks/core-cover.tsx
+++ b/packages/blocks/src/blocks/core-cover.tsx
@@ -150,7 +150,7 @@ const CoreCover: CoreCoverType = ( {
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
-						{ ...( imageProps?.alt && { alt: imageProps.alt } ) }
+						alt={ imageProps.alt }
 					/>
 				) : (
 					<div
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index 6ac180c4..c240c84e 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -68,9 +68,9 @@ const CoreFile: CoreFileType = ( {
 			) }
 			{ fileName && textLinkHref && (
 				<Link
-					{ ...( fileId && { id: fileId } ) }
+					id={ fileId }
 					href={ textLinkHref }
-					{ ...( textLinkTarget && { target: textLinkTarget } ) }
+					target={ textLinkTarget }
 					rel={ textLinkTarget ? 'noreferrer noopener' : undefined }
 				>
 					{ !! fileName && <Parse html={ fileName } /> }
diff --git a/packages/blocks/src/blocks/core-heading.tsx b/packages/blocks/src/blocks/core-heading.tsx
index c0f5766a..e579bf4e 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -23,10 +23,8 @@ const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 
 	return (
 		<HeadingTag
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
-			{ ...( cssClassName && { className: cssClassName } ) }
+			style={ getStylesFromAttributes( { style } ) }
+			className={ cssClassName }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</HeadingTag>
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index f93c5835..1b85af50 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -55,8 +55,8 @@ const Figure = ( {
 				<Link
 					href={ href }
 					className={ linkClass }
-					{ ...( linkTarget && { target: linkTarget } ) }
-					{ ...( rel && { rel } ) }
+					target={ linkTarget }
+					rel={ rel }
 				>
 					{ children }
 				</Link>
@@ -124,7 +124,7 @@ const CoreImage: CoreImageType = ( {
 
 	return (
 		<Figure
-			{ ...( renderedHtml && { renderedHtml } ) }
+			renderedHtml={ renderedHtml }
 			classNames={ classNames }
 			{ ...attributes }
 		>
diff --git a/packages/blocks/src/blocks/core-media-text.tsx b/packages/blocks/src/blocks/core-media-text.tsx
index 29bfad4e..0eaf7b82 100644
--- a/packages/blocks/src/blocks/core-media-text.tsx
+++ b/packages/blocks/src/blocks/core-media-text.tsx
@@ -110,7 +110,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 		<Image
 			{ ...imageProps }
 			src={ mediaUrl }
-			{ ...( mediaAlt && { alt: mediaAlt } ) }
+			alt={ mediaAlt }
 			className={ imageClasses }
 			style={ positionStyles }
 		/>
@@ -121,7 +121,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 			<Link
 				className={ linkClass }
 				href={ href }
-				{ ...( linkTarget && { target: linkTarget } ) }
+				target={ linkTarget }
 				rel={ newRel }
 			>
 				{ image }
@@ -147,7 +147,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 	}
 
 	const gridStyle = {
-		...( style && { ...getStylesFromAttributes( { style } ) } ),
+		...getStylesFromAttributes( { style } ),
 		gridTemplateColumns,
 	};
 
diff --git a/packages/next/src/components/image.tsx b/packages/next/src/components/image.tsx
index 5e44905d..75a1bd3e 100644
--- a/packages/next/src/components/image.tsx
+++ b/packages/next/src/components/image.tsx
@@ -16,16 +16,16 @@ interface MediaItem {
 }
 
 interface ImageInterface {
-	alt?: string;
-	className?: string;
+	alt?: string | undefined;
+	className?: string | undefined;
 	fill?: boolean;
-	height?: number;
+	height?: number | undefined;
 	image?: MediaItem;
 	priority?: boolean;
 	sizes?: string;
-	style?: CSSProperties;
-	width?: number;
-	src?: string;
+	style?: CSSProperties | undefined;
+	width?: number | undefined;
+	src?: string | undefined;
 	srcSet?: string;
 	fetchPriority?: 'high' | 'low' | 'auto';
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index d0ec40f7..ab6efd14 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -9,7 +9,7 @@ import { type PartialWithUndefined } from '@snapwp/types';
 import NextLink, { type LinkProps } from 'next/link';
 
 interface LinkInterface {
-	href?: string;
+	href: string | undefined;
 	style?: CSSProperties | undefined;
 	className?: string | undefined;
 }
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 51b44723..36b08ec4 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -68,6 +68,7 @@ export default function ScriptModule( {
 			<Script
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				type="module"
+				id={ depHandle }
 				src={ depSrc }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
@@ -75,7 +76,6 @@ export default function ScriptModule( {
 				 */
 				strategy="lazyOnload"
 				{ ...props }
-				{ ...( depHandle && { id: depHandle } ) }
 			/>
 		);
 	} );
diff --git a/packages/next/src/react-parser/options.tsx b/packages/next/src/react-parser/options.tsx
index c1c746ee..a6bd6fd3 100644
--- a/packages/next/src/react-parser/options.tsx
+++ b/packages/next/src/react-parser/options.tsx
@@ -23,15 +23,16 @@ export const defaultOptions: HTMLReactParserOptions = {
 			const { attribs, children, name, type } = domNode;
 			const { class: className, style, ...attributes } = attribs;
 			const { href } = attribs;
+			const styleObject = style
+				? getStyleObjectFromString( style )
+				: undefined;
 
 			if ( type === 'tag' && name === 'a' ) {
 				return (
 					<Link
 						{ ...attributes }
-						{ ...( href && { href } ) }
-						{ ...( style && {
-							style: getStyleObjectFromString( { style } ),
-						} ) }
+						href={ href }
+						style={ styleObject }
 						className={ className }
 					>
 						{ domToReact( children as DOMNode[], defaultOptions ) }
@@ -69,19 +70,13 @@ export const defaultOptions: HTMLReactParserOptions = {
 				return (
 					<Image
 						{ ...attributes }
-						{ ...( attributes[ 'alt' ] && {
-							alt: attributes[ 'alt' ],
-						} ) }
-						{ ...( attributes[ 'src' ] && {
-							src: attributes[ 'src' ],
-						} ) }
-						{ ...( height && { height } ) }
-						{ ...( width && { width } ) }
-						{ ...( className && { className } ) }
+						src={ attribs[ 'src' ] }
+						alt={ attribs[ 'alt' ] }
+						height={ height }
+						width={ width }
+						className={ className }
 						fill={ shouldFill }
-						{ ...( style && {
-							style: getStyleObjectFromString( { style } ),
-						} ) }
+						style={ styleObject }
 						image={ imageAttributes }
 					/>
 				);
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 74eab283..8839170d 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -18,7 +18,7 @@ const ScriptMap = ( { scripts }: { scripts: EnqueuedScriptProps[] } ) => (
 			return (
 				<Script
 					key={ handle || id }
-					{ ...( src && { src } ) }
+					src={ src || undefined }
 					{ ...rest }
 				/>
 			);
diff --git a/packages/types/src/blocks/props/core-image.ts b/packages/types/src/blocks/props/core-image.ts
index 0f687013..5908cf90 100644
--- a/packages/types/src/blocks/props/core-image.ts
+++ b/packages/types/src/blocks/props/core-image.ts
@@ -51,6 +51,6 @@ export interface LightBoxProp {
 }
 
 export interface FigureProps extends CoreImageAttributes, PropsWithChildren {
-	renderedHtml?: string | null;
+	renderedHtml?: string | null | undefined;
 	classNames?: string;
 }

From 90132f40c9b8081e0d1948b06166f03e44332dfd Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Mon, 17 Mar 2025 10:18:43 +0530
Subject: [PATCH 09/14] refactor: add style object changes

---
 packages/blocks/src/blocks/core-button.tsx    | 7 +++----
 packages/blocks/src/blocks/core-cover.tsx     | 4 ++--
 packages/blocks/src/blocks/core-image.tsx     | 2 +-
 packages/blocks/src/blocks/core-list.tsx      | 2 +-
 packages/core/src/props/index.ts              | 2 +-
 packages/next/src/template-renderer/index.tsx | 4 +---
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index 51a82f7d..424b2e0d 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -30,13 +30,12 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 	} = attributes || {};
 
 	const classNames = cn( cssClassName );
-
+	const styleObject = getStylesFromAttributes( { style } );
 	const { homeUrl, nextUrl } = getConfig();
+
 	const commonProps = {
 		className: linkClassName ?? undefined,
-		...( style && {
-			style: getStylesFromAttributes( { style } ),
-		} ),
+		style: styleObject,
 		title: title ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 8c465440..4b6cc409 100644
--- a/packages/blocks/src/blocks/core-cover.tsx
+++ b/packages/blocks/src/blocks/core-cover.tsx
@@ -93,7 +93,7 @@ const CoreCover: CoreCoverType = ( {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const styleObject = {
-		...( style && getStylesFromAttributes( { style } ) ),
+		...getStylesFromAttributes( { style } ),
 		minHeight: minHeight || undefined,
 	};
 
@@ -150,7 +150,7 @@ const CoreCover: CoreCoverType = ( {
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
-						alt={ imageProps.alt }
+						alt={ alt }
 					/>
 				) : (
 					<div
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index 1b85af50..962c218b 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -190,7 +190,7 @@ const getImageProps = (
 	} = attributes || {};
 
 	const imageStyles: CSSProperties = {
-		...( style && getStylesFromAttributes( { style } ) ),
+		...getStylesFromAttributes( { style } ),
 		aspectRatio,
 		objectFit: scale as CSSProperties[ 'objectFit' ],
 	};
diff --git a/packages/blocks/src/blocks/core-list.tsx b/packages/blocks/src/blocks/core-list.tsx
index 43df9355..fe7bc795 100644
--- a/packages/blocks/src/blocks/core-list.tsx
+++ b/packages/blocks/src/blocks/core-list.tsx
@@ -19,7 +19,7 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 	const classNames = cn( cssClassName );
 
 	const combinedStyles: React.CSSProperties = {
-		...( style && getStylesFromAttributes( { style } ) ),
+		...getStylesFromAttributes( { style } ),
 		listStyleType: type ?? undefined,
 	};
 
diff --git a/packages/core/src/props/index.ts b/packages/core/src/props/index.ts
index 672ec449..71ce43f9 100644
--- a/packages/core/src/props/index.ts
+++ b/packages/core/src/props/index.ts
@@ -1,5 +1,5 @@
 export type TemplateHeadProps = {
-	stylesheets?: StyleSheetProps[] | null;
+	stylesheets?: StyleSheetProps[] | null | undefined;
 };
 
 export type ScriptModuleDependencyProps = {
diff --git a/packages/next/src/template-renderer/index.tsx b/packages/next/src/template-renderer/index.tsx
index 6ae04241..99e907d9 100644
--- a/packages/next/src/template-renderer/index.tsx
+++ b/packages/next/src/template-renderer/index.tsx
@@ -26,14 +26,12 @@ export async function TemplateRenderer( {
 }: TemplateRendererProps ) {
 	const headerList = await headers(); // headers() returns a Promise from NextJS 19.
 	const pathname = headerList.get( 'x-current-path' );
-
 	const { editorBlocks, bodyClasses, stylesheets, scripts, scriptModules } =
 		await getTemplateData( pathname || '/' );
-
 	// @todo: Script modules should load before styles to handle ordering properly
 	return (
 		<>
-			<TemplateHead { ...( stylesheets && { stylesheets } ) } />
+			<TemplateHead stylesheets={ stylesheets } />
 			<TemplateScripts
 				scripts={ scripts }
 				scriptModules={ scriptModules }

From 8ad82fcc1e539506dc0c7c30b7d2f94e04cb9329 Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Tue, 18 Mar 2025 22:11:02 +0200
Subject: [PATCH 10/14] chore: cleanup [first pass]

---
 packages/blocks/src/block-manager/index.tsx   | 16 ++++++++--
 packages/blocks/src/blocks/core-audio.tsx     |  6 ++--
 packages/blocks/src/blocks/core-button.tsx    |  1 +
 packages/blocks/src/blocks/core-buttons.tsx   |  4 ++-
 packages/blocks/src/blocks/core-code.tsx      |  4 ++-
 packages/blocks/src/blocks/core-column.tsx    |  6 ++--
 packages/blocks/src/blocks/core-columns.tsx   |  3 +-
 packages/blocks/src/blocks/core-cover.tsx     |  6 ++--
 packages/blocks/src/blocks/core-details.tsx   |  5 ++--
 packages/blocks/src/blocks/core-file.tsx      |  6 ++--
 packages/blocks/src/blocks/core-gallery.tsx   |  6 ++--
 packages/blocks/src/blocks/core-group.tsx     | 29 ++++++++++++++-----
 packages/blocks/src/blocks/core-heading.tsx   |  4 ++-
 packages/blocks/src/blocks/core-image.tsx     | 12 ++++----
 packages/blocks/src/blocks/core-list-item.tsx |  8 ++---
 packages/blocks/src/blocks/core-list.tsx      |  7 +++--
 .../blocks/src/blocks/core-media-text.tsx     |  4 ++-
 packages/blocks/src/blocks/core-paragraph.tsx |  6 ++--
 .../blocks/src/blocks/core-preformatted.tsx   |  6 ++--
 packages/blocks/src/blocks/core-pullquote.tsx |  6 ++--
 packages/blocks/src/blocks/core-quote.tsx     |  8 ++---
 packages/blocks/src/blocks/core-spacer.tsx    |  4 ++-
 packages/blocks/src/blocks/core-verse.tsx     |  6 ++--
 packages/blocks/src/blocks/core-video.tsx     | 10 +++----
 .../src/editor-blocks-renderer/index.tsx      |  4 +--
 .../src/utils/flat-list-to-hierarchical.ts    |  5 ++++
 .../core/src/config/snapwp-config-manager.ts  | 11 ++++---
 .../utils/find-element-and-get-class-names.ts |  4 +--
 .../core/src/utils/get-color-class-name.ts    |  4 +--
 .../utils/get-image-size-from-attributes.ts   | 11 +++++--
 .../src/utils/get-style-object-from-string.ts | 11 +++++--
 .../src/utils/get-styles-from-attributes.ts   | 18 +++++++-----
 .../utils/parse-external-remote-patterns.ts   |  5 +++-
 packages/next/src/components/link.tsx         |  4 +--
 .../next/src/components/script-module.tsx     |  2 +-
 packages/next/src/components/script.tsx       | 14 ++++-----
 packages/next/src/config/with-snap-wp.ts      |  2 +-
 packages/next/src/template-renderer/index.tsx |  2 ++
 .../template-renderer/template-scripts.tsx    |  2 +-
 packages/query/src/utils/parse-template.ts    | 15 +++++-----
 packages/types/src/blocks/props/core-group.ts |  9 +-----
 41 files changed, 177 insertions(+), 119 deletions(-)

diff --git a/packages/blocks/src/block-manager/index.tsx b/packages/blocks/src/block-manager/index.tsx
index ec9392aa..ef075191 100644
--- a/packages/blocks/src/block-manager/index.tsx
+++ b/packages/blocks/src/block-manager/index.tsx
@@ -27,8 +27,12 @@ export default class BlockManager {
 	 * @return A tree of blocks.
 	 */
 	public static flatListToHierarchical(
-		blockList?: BlockData[] | null
+		blockList?: BlockData[] | null | undefined
 	): BlockTreeNode[] {
+		if ( ! blockList ) {
+			return [];
+		}
+
 		return flatListToHierarchical(
 			blockList as unknown as Record< string | number, unknown >[],
 			{
@@ -75,10 +79,18 @@ export default class BlockManager {
 	 * @return A tree of blocks with render functions.
 	 */
 	public static parseBlockForRendering(
-		blockList?: BlockData[] | null
+		blockList?: BlockData[] | null | undefined
 	): BlockTreeNode[] {
+		if ( ! blockList ) {
+			return [];
+		}
+
 		const BlockTreeNodeArray = this.flatListToHierarchical( blockList );
 
+		if ( ! BlockTreeNodeArray ) {
+			return [];
+		}
+
 		BlockTreeNodeArray.forEach( this.attachRendererToTreeNode );
 
 		return BlockTreeNodeArray;
diff --git a/packages/blocks/src/blocks/core-audio.tsx b/packages/blocks/src/blocks/core-audio.tsx
index f7bf4c9a..1e0a3e7a 100644
--- a/packages/blocks/src/blocks/core-audio.tsx
+++ b/packages/blocks/src/blocks/core-audio.tsx
@@ -24,6 +24,8 @@ const CoreAudio: CoreAudioType = ( {
 		return null;
 	}
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -36,9 +38,7 @@ const CoreAudio: CoreAudioType = ( {
 	return (
 		<figure
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<audio
 				controls
diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index 424b2e0d..55a8461e 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -56,6 +56,7 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 
 	if ( url ) {
 		const href = replaceHostUrl( url, homeUrl, nextUrl );
+
 		return (
 			<div className={ classNames }>
 				<Link
diff --git a/packages/blocks/src/blocks/core-buttons.tsx b/packages/blocks/src/blocks/core-buttons.tsx
index 2f55af80..3169d529 100644
--- a/packages/blocks/src/blocks/core-buttons.tsx
+++ b/packages/blocks/src/blocks/core-buttons.tsx
@@ -20,10 +20,12 @@ const CoreButtons: CoreButtonsType = ( {
 	const { cssClassName, style } = attributes || {};
 	const classNames = cn( cssClassName );
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	return (
 		<div
 			className={ classNames }
-			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ children }
 		</div>
diff --git a/packages/blocks/src/blocks/core-code.tsx b/packages/blocks/src/blocks/core-code.tsx
index 91ee3e05..2ff7f457 100644
--- a/packages/blocks/src/blocks/core-code.tsx
+++ b/packages/blocks/src/blocks/core-code.tsx
@@ -13,10 +13,12 @@ import type { CoreCode as CoreCodeType, CoreCodeProps } from '@snapwp/types';
 const CoreCode: CoreCodeType = ( { attributes }: CoreCodeProps ) => {
 	const { style, cssClassName, content } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	return (
 		<pre
 			{ ...( cssClassName && { className: cssClassName } ) }
-			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<code>{ !! content && <Parse html={ content } /> }</code>
 		</pre>
diff --git a/packages/blocks/src/blocks/core-column.tsx b/packages/blocks/src/blocks/core-column.tsx
index 11450ae1..be426da3 100644
--- a/packages/blocks/src/blocks/core-column.tsx
+++ b/packages/blocks/src/blocks/core-column.tsx
@@ -3,6 +3,7 @@ import type {
 	CoreColumn as CoreColumnType,
 	CoreColumnProps,
 } from '@snapwp/types';
+import type { CSSProperties } from 'react';
 
 /**
  * Renders the core/column block.
@@ -20,9 +21,10 @@ const CoreColumn: CoreColumnType = ( {
 	const { cssClassName, style, width } = attributes || {};
 
 	const classNames = cn( cssClassName );
+	const styleObject = getStylesFromAttributes( { style } );
 
-	const combinedStyles: React.CSSProperties = {
-		...getStylesFromAttributes( { style } ),
+	const combinedStyles: CSSProperties = {
+		...styleObject,
 		flexBasis: width ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-columns.tsx b/packages/blocks/src/blocks/core-columns.tsx
index d7321138..1667281b 100644
--- a/packages/blocks/src/blocks/core-columns.tsx
+++ b/packages/blocks/src/blocks/core-columns.tsx
@@ -19,12 +19,13 @@ const CoreColumns: CoreColumnsType = ( {
 }: CoreColumnsProps ) => {
 	const { cssClassName, style } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
 	const classNames = cn( cssClassName );
 
 	return (
 		<div
 			className={ classNames }
-			{ ...( style && { style: getStylesFromAttributes( { style } ) } ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ children }
 		</div>
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 4b6cc409..69507778 100644
--- a/packages/blocks/src/blocks/core-cover.tsx
+++ b/packages/blocks/src/blocks/core-cover.tsx
@@ -25,7 +25,9 @@ const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
  *
  * @return CSS position string or undefined if no focal point
  */
-const mediaPosition = ( focalPoint?: FocalPoint | null ): string => {
+const mediaPosition = (
+	focalPoint?: FocalPoint | null | undefined
+): string => {
 	if ( ! focalPoint ) {
 		focalPoint = DEFAULT_FOCAL_POINT;
 	}
@@ -146,11 +148,11 @@ const CoreCover: CoreCoverType = ( {
 					<Image
 						{ ...imageProps }
 						className={ imgClasses }
+						alt={ alt }
 						src={ url }
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
-						alt={ alt }
 					/>
 				) : (
 					<div
diff --git a/packages/blocks/src/blocks/core-details.tsx b/packages/blocks/src/blocks/core-details.tsx
index c8cd04db..30e067ef 100644
--- a/packages/blocks/src/blocks/core-details.tsx
+++ b/packages/blocks/src/blocks/core-details.tsx
@@ -24,6 +24,7 @@ const CoreDetails: CoreDetailsType = ( {
 	renderedHtml,
 }: CoreDetailsProps ) => {
 	const { style, showContent, summary } = attributes ?? {};
+	const styleObject = getStylesFromAttributes( { style } );
 
 	/**
 	 * @todo replace with cssClassName once it's supported.
@@ -37,10 +38,8 @@ const CoreDetails: CoreDetailsType = ( {
 	return (
 		<details
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
 			open={ showContent }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<summary>{ summary }</summary>
 			{ children }
diff --git a/packages/blocks/src/blocks/core-file.tsx b/packages/blocks/src/blocks/core-file.tsx
index c240c84e..6d10e6dc 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -44,15 +44,15 @@ const CoreFile: CoreFileType = ( {
 		: '';
 	const classNames = cn( classNamesFromString );
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	const ariaLabel = fileName || FALLBACK_ARIA_LABEL;
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
 
 	return (
 		<div
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ displayPreview && (
 				<object
diff --git a/packages/blocks/src/blocks/core-gallery.tsx b/packages/blocks/src/blocks/core-gallery.tsx
index b2c51809..a9c9bbc3 100644
--- a/packages/blocks/src/blocks/core-gallery.tsx
+++ b/packages/blocks/src/blocks/core-gallery.tsx
@@ -25,6 +25,8 @@ const CoreGallery: CoreGalleryType = ( {
 }: CoreGalleryProps ) => {
 	const { caption, style } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -36,9 +38,7 @@ const CoreGallery: CoreGalleryType = ( {
 	return (
 		<figure
 			className={ className }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ children }
 			{ caption && (
diff --git a/packages/blocks/src/blocks/core-group.tsx b/packages/blocks/src/blocks/core-group.tsx
index 9b988863..eb621726 100644
--- a/packages/blocks/src/blocks/core-group.tsx
+++ b/packages/blocks/src/blocks/core-group.tsx
@@ -1,14 +1,14 @@
-import { createElement } from 'react';
+import {
+	createElement,
+	type CSSProperties,
+	type PropsWithChildren,
+} from 'react';
 import {
 	cn,
 	getClassNamesFromString,
 	getStylesFromAttributes,
 } from '@snapwp/core';
-import type {
-	CoreGroup as CoreGroupType,
-	CoreGroupProps,
-	TagProps,
-} from '@snapwp/types';
+import type { CoreGroup as CoreGroupType, CoreGroupProps } from '@snapwp/types';
 
 /**
  * Renders an HTML element with the specified tag name.
@@ -21,7 +21,16 @@ import type {
  *
  * @return The rendered HTML element or the children if no tag name is provided.
  */
-const Tag = ( { name, className, style, children }: TagProps ) => {
+const Tag = ( {
+	name,
+	className,
+	style,
+	children,
+}: PropsWithChildren< {
+	name?: string;
+	className: string;
+	style?: CSSProperties;
+} > ) => {
 	if ( ! name ) {
 		return <>{ children }</>;
 	}
@@ -59,7 +68,11 @@ const CoreGroup: CoreGroupType = ( {
 	const tag = tagName || 'div';
 
 	return (
-		<Tag name={ tag } className={ classNames } style={ styleObject }>
+		<Tag
+			name={ tag }
+			className={ classNames }
+			{ ...( !! styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</Tag>
 	);
diff --git a/packages/blocks/src/blocks/core-heading.tsx b/packages/blocks/src/blocks/core-heading.tsx
index e579bf4e..3f7a9dd5 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -17,14 +17,16 @@ import type {
 const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 	const { style, cssClassName, content, level } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	const HeadingTag = level
 		? ( `h${ level }` as keyof JSX.IntrinsicElements )
 		: 'div';
 
 	return (
 		<HeadingTag
-			style={ getStylesFromAttributes( { style } ) }
 			className={ cssClassName }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</HeadingTag>
diff --git a/packages/blocks/src/blocks/core-image.tsx b/packages/blocks/src/blocks/core-image.tsx
index 962c218b..52e77fea 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -189,21 +189,19 @@ const getImageProps = (
 		sizeSlug,
 	} = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	const imageStyles: CSSProperties = {
-		...getStylesFromAttributes( { style } ),
+		...styleObject,
 		aspectRatio,
 		objectFit: scale as CSSProperties[ 'objectFit' ],
 	};
 
 	const imageProps: ComponentProps< typeof Image > = {
 		title,
+		alt,
+		src: url,
 	};
-	if ( url ) {
-		imageProps.src = url;
-	}
-	if ( alt ) {
-		imageProps.alt = alt;
-	}
 
 	if ( connectedMediaItem?.node ) {
 		imageProps.sizes = connectedMediaItem.node.sizes;
diff --git a/packages/blocks/src/blocks/core-list-item.tsx b/packages/blocks/src/blocks/core-list-item.tsx
index 781448e7..a2d63b36 100644
--- a/packages/blocks/src/blocks/core-list-item.tsx
+++ b/packages/blocks/src/blocks/core-list-item.tsx
@@ -26,6 +26,8 @@ const CoreListItem: CoreListItemType = ( {
 }: CoreListItemProps ) => {
 	const { content, style } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -38,10 +40,8 @@ const CoreListItem: CoreListItemType = ( {
 
 	return (
 		<li
-			{ ...( classNames && { className: classNames } ) }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			className={ classNames || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ firstLineContent && <Parse html={ firstLineContent } /> }
 			{ children }
diff --git a/packages/blocks/src/blocks/core-list.tsx b/packages/blocks/src/blocks/core-list.tsx
index fe7bc795..185ba618 100644
--- a/packages/blocks/src/blocks/core-list.tsx
+++ b/packages/blocks/src/blocks/core-list.tsx
@@ -1,5 +1,6 @@
 import { cn, getStylesFromAttributes } from '@snapwp/core';
 import type { CoreList as CoreListType, CoreListProps } from '@snapwp/types';
+import type { CSSProperties } from 'react';
 
 /**
  * Renders the core/list block.
@@ -18,8 +19,10 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const classNames = cn( cssClassName );
 
-	const combinedStyles: React.CSSProperties = {
-		...getStylesFromAttributes( { style } ),
+	const styleObject = getStylesFromAttributes( { style } );
+
+	const combinedStyles: CSSProperties = {
+		...styleObject,
 		listStyleType: type ?? undefined,
 	};
 
diff --git a/packages/blocks/src/blocks/core-media-text.tsx b/packages/blocks/src/blocks/core-media-text.tsx
index 0eaf7b82..09b41768 100644
--- a/packages/blocks/src/blocks/core-media-text.tsx
+++ b/packages/blocks/src/blocks/core-media-text.tsx
@@ -138,6 +138,8 @@ const CoreMediaText: CoreMediaTextType = ( {
 		? getClassNamesFromString( renderedHtml )
 		: '';
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	let gridTemplateColumns;
 	if ( mediaWidth !== DEFAULT_MEDIA_WIDTH ) {
 		gridTemplateColumns =
@@ -147,7 +149,7 @@ const CoreMediaText: CoreMediaTextType = ( {
 	}
 
 	const gridStyle = {
-		...getStylesFromAttributes( { style } ),
+		...styleObject,
 		gridTemplateColumns,
 	};
 
diff --git a/packages/blocks/src/blocks/core-paragraph.tsx b/packages/blocks/src/blocks/core-paragraph.tsx
index a776ce9c..4aff516c 100644
--- a/packages/blocks/src/blocks/core-paragraph.tsx
+++ b/packages/blocks/src/blocks/core-paragraph.tsx
@@ -27,7 +27,7 @@ const CoreParagraph: CoreParagraphType = ( {
 		textColor,
 	} = attributes || {};
 
-	const styleObject = getStylesFromAttributes( { style } );
+	const styleObject = getStylesFromAttributes( { style } ) || {};
 
 	/**
 	 * Add missing styles to the style object
@@ -50,8 +50,10 @@ const CoreParagraph: CoreParagraphType = ( {
 	return (
 		<p
 			className={ cssClassName || undefined }
-			style={ styleObject }
 			dir={ direction || undefined }
+			{ ...( Object.keys( styleObject ).length > 0 && {
+				style: styleObject,
+			} ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</p>
diff --git a/packages/blocks/src/blocks/core-preformatted.tsx b/packages/blocks/src/blocks/core-preformatted.tsx
index fbeaa0ef..6a969d39 100644
--- a/packages/blocks/src/blocks/core-preformatted.tsx
+++ b/packages/blocks/src/blocks/core-preformatted.tsx
@@ -24,6 +24,8 @@ const CorePreformatted: CorePreformattedType = ( {
 }: CorePreformattedProps ) => {
 	const { content, style } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -36,9 +38,7 @@ const CorePreformatted: CorePreformattedType = ( {
 	return (
 		<pre
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
diff --git a/packages/blocks/src/blocks/core-pullquote.tsx b/packages/blocks/src/blocks/core-pullquote.tsx
index f17893fa..a00383a8 100644
--- a/packages/blocks/src/blocks/core-pullquote.tsx
+++ b/packages/blocks/src/blocks/core-pullquote.tsx
@@ -24,6 +24,8 @@ const CorePullquote: CorePullquoteType = ( {
 }: CorePullquoteProps ) => {
 	const { style, pullquoteValue, citation } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -35,10 +37,8 @@ const CorePullquote: CorePullquoteType = ( {
 
 	return (
 		<figure
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
 			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<blockquote>
 				{ pullquoteValue && (
diff --git a/packages/blocks/src/blocks/core-quote.tsx b/packages/blocks/src/blocks/core-quote.tsx
index 7cd26278..7f5849d9 100644
--- a/packages/blocks/src/blocks/core-quote.tsx
+++ b/packages/blocks/src/blocks/core-quote.tsx
@@ -17,12 +17,12 @@ const CoreQuote: CoreQuoteType = ( {
 }: CoreQuoteProps ) => {
 	const { style, citation, cssClassName } = attributes || {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	return (
 		<blockquote
-			className={ cssClassName || '' }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			className={ cssClassName || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ children }
 
diff --git a/packages/blocks/src/blocks/core-spacer.tsx b/packages/blocks/src/blocks/core-spacer.tsx
index 410f033e..0a24183f 100644
--- a/packages/blocks/src/blocks/core-spacer.tsx
+++ b/packages/blocks/src/blocks/core-spacer.tsx
@@ -30,13 +30,15 @@ const CoreSpacer: CoreSpacerType = ( {
 	const finalHeight =
 		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	const classNamesFromString = renderedHtml
 		? getClassNamesFromString( renderedHtml )
 		: '';
 	const classNames = cn( classNamesFromString );
 
 	const combinedStyle = {
-		...getStylesFromAttributes( { style } ),
+		...styleObject,
 		height: getSpacingPresetCssVar( finalHeight ),
 		width: getSpacingPresetCssVar( width ),
 	};
diff --git a/packages/blocks/src/blocks/core-verse.tsx b/packages/blocks/src/blocks/core-verse.tsx
index 4a388d22..3dcca664 100644
--- a/packages/blocks/src/blocks/core-verse.tsx
+++ b/packages/blocks/src/blocks/core-verse.tsx
@@ -21,6 +21,8 @@ const CoreVerse: CoreVerseType = ( {
 }: CoreVerseProps ) => {
 	const { style, content } = attributes ?? {};
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -33,9 +35,7 @@ const CoreVerse: CoreVerseType = ( {
 	return (
 		<pre
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			{ !! content && <Parse html={ content } /> }
 		</pre>
diff --git a/packages/blocks/src/blocks/core-video.tsx b/packages/blocks/src/blocks/core-video.tsx
index dfb02cb3..d44de976 100644
--- a/packages/blocks/src/blocks/core-video.tsx
+++ b/packages/blocks/src/blocks/core-video.tsx
@@ -68,6 +68,8 @@ const CoreVideo: CoreVideoType = ( {
 		return null;
 	}
 
+	const styleObject = getStylesFromAttributes( { style } );
+
 	/**
 	 * @todo replace with cssClassName once it's supported.
 	 */
@@ -96,9 +98,7 @@ const CoreVideo: CoreVideoType = ( {
 	return (
 		<figure
 			className={ classNames }
-			{ ...( style && {
-				style: getStylesFromAttributes( { style } ),
-			} ) }
+			{ ...( styleObject && { style: styleObject } ) }
 		>
 			<video
 				autoPlay={ autoplay || undefined }
@@ -112,9 +112,7 @@ const CoreVideo: CoreVideoType = ( {
 				src={ src }
 				playsInline={ playsInline || undefined }
 			>
-				<Tracks
-					{ ...( formattedTracks && { tracks: formattedTracks } ) }
-				/>
+				<Tracks tracks={ formattedTracks } />
 			</video>
 
 			{ caption && (
diff --git a/packages/blocks/src/editor-blocks-renderer/index.tsx b/packages/blocks/src/editor-blocks-renderer/index.tsx
index 43b9dace..3c7e8d79 100644
--- a/packages/blocks/src/editor-blocks-renderer/index.tsx
+++ b/packages/blocks/src/editor-blocks-renderer/index.tsx
@@ -4,8 +4,8 @@ import { getConfig } from '@snapwp/core/config';
 import type { BlockData, BlockDefinitions, BlockTreeNode } from '@snapwp/types';
 
 type EditorBlocksRendererProps = {
-	editorBlocks?: BlockData[] | null;
-	blockDefinitions?: BlockDefinitions | null;
+	editorBlocks?: BlockData[] | null | undefined;
+	blockDefinitions?: BlockDefinitions | null | undefined;
 };
 
 /**
diff --git a/packages/blocks/src/utils/flat-list-to-hierarchical.ts b/packages/blocks/src/utils/flat-list-to-hierarchical.ts
index 814e897c..110faa2a 100644
--- a/packages/blocks/src/utils/flat-list-to-hierarchical.ts
+++ b/packages/blocks/src/utils/flat-list-to-hierarchical.ts
@@ -24,6 +24,11 @@ export default function flatListToHierarchical(
 		childrenKey = 'children',
 	}: Options = {}
 ): Data[] {
+	// Bail out if there is no data.
+	if ( ! data.length ) {
+		return [];
+	}
+
 	const tree: Data[] = [];
 	const childrenOf = new Map< string | number, Data[] >();
 
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 85869089..b6dc5d16 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -234,12 +234,11 @@ class SnapWPConfigManager {
 					( key === 'homeUrl' || key === 'nextUrl' ) &&
 					typeof cfg[ key ] === 'string'
 				) {
-					cfg[ key ] = ( cfg[ key ] as string ).endsWith( '/' )
-						? ( ( cfg[ key ] as string ).slice(
-								0,
-								-1
-						  ) as T[ keyof T ] )
-						: cfg[ key ];
+					const value = cfg[ key ] as string;
+
+					cfg[ key ] = ( value.endsWith( '/' )
+						? value.slice( 0, -1 )
+						: value ) as unknown as T[ keyof T ];
 				}
 			}
 		);
diff --git a/packages/core/src/utils/find-element-and-get-class-names.ts b/packages/core/src/utils/find-element-and-get-class-names.ts
index 6f21f1fb..25051dd0 100644
--- a/packages/core/src/utils/find-element-and-get-class-names.ts
+++ b/packages/core/src/utils/find-element-and-get-class-names.ts
@@ -9,8 +9,8 @@ import { getClassNamesFromString, cn } from '@/utils';
  * @return The extracted class names from the first occurrence of the specified element or an empty string if the element is not found.
  */
 export default function findElementAndGetClassNames(
-	renderedHtml?: string | null,
-	elementSelector?: string
+	renderedHtml?: string | null | undefined,
+	elementSelector?: string | undefined
 ): string {
 	if ( ! renderedHtml ) {
 		return '';
diff --git a/packages/core/src/utils/get-color-class-name.ts b/packages/core/src/utils/get-color-class-name.ts
index 687bdea4..5d7bcf09 100644
--- a/packages/core/src/utils/get-color-class-name.ts
+++ b/packages/core/src/utils/get-color-class-name.ts
@@ -6,8 +6,8 @@
  * @return The generated CSS class name or undefined if parameters are missing.
  */
 export default function getColorClassName(
-	colorContextName?: string,
-	colorSlug?: string
+	colorContextName?: string | undefined,
+	colorSlug?: string | undefined
 ) {
 	if ( ! colorContextName || ! colorSlug ) {
 		return undefined;
diff --git a/packages/core/src/utils/get-image-size-from-attributes.ts b/packages/core/src/utils/get-image-size-from-attributes.ts
index 541ee96f..84b777ca 100644
--- a/packages/core/src/utils/get-image-size-from-attributes.ts
+++ b/packages/core/src/utils/get-image-size-from-attributes.ts
@@ -3,11 +3,12 @@
 import getPxForSizeAttribute from './get-px-for-size-attribute';
 
 export type ImageSizeAttributes = {
-	sizeSlug?: string;
-	width?: string;
-	height?: string;
+	sizeSlug?: string | undefined;
+	width?: string | undefined;
+	height?: string | undefined;
 };
 
+// @todo These should be sourced from the theme.
 const imageSizeToWidth: {
 	[ key: string ]: number;
 } = {
@@ -41,18 +42,22 @@ export default function getImageSizeFromAttributes(
 	height: number | undefined;
 } {
 	const sizeSlug = attributes?.sizeSlug;
+
 	const widthPx = attributes?.width
 		? getPxForSizeAttribute( attributes?.width )
 		: undefined;
+
 	const heightPx = attributes?.height
 		? getPxForSizeAttribute( attributes?.height )
 		: undefined;
+
 	if ( sizeSlug ) {
 		return {
 			width: widthPx ?? imageSizeToWidth[ sizeSlug ],
 			height: heightPx ?? imageSizeToHeight[ sizeSlug ],
 		};
 	}
+
 	return {
 		width: widthPx ?? undefined, // return undefined if no width to image is provided.
 		height: heightPx ?? undefined, // return undefined if no height to image is provided.
diff --git a/packages/core/src/utils/get-style-object-from-string.ts b/packages/core/src/utils/get-style-object-from-string.ts
index 4978bf4d..e8b5f489 100644
--- a/packages/core/src/utils/get-style-object-from-string.ts
+++ b/packages/core/src/utils/get-style-object-from-string.ts
@@ -59,15 +59,20 @@ function cssToReactStyle( str: string ): CSSProperties {
  */
 export default function getStyleObjectFromString(
 	css: object | string
-): CSSProperties {
+): CSSProperties | undefined {
 	// If object is given, return object (could be react style object mistakenly provided)
 	if ( typeof css === 'object' ) {
+		// If it's an empty object, return undefined
+		if ( Object.keys( css ).length === 0 ) {
+			return undefined;
+		}
+
 		return css as CSSProperties;
 	}
 
 	// If falsy, then probably empty string or null, nothing to be done there
 	if ( ! css ) {
-		return {} as CSSProperties;
+		return undefined;
 	}
 
 	// Only accepts strings
@@ -75,7 +80,7 @@ export default function getStyleObjectFromString(
 		Logger.error(
 			`Unexpected type "${ typeof css }" when expecting string, with value "${ css }"`
 		);
-		return {} as CSSProperties;
+		return undefined;
 	}
 
 	const style = cssToReactStyle( css );
diff --git a/packages/core/src/utils/get-styles-from-attributes.ts b/packages/core/src/utils/get-styles-from-attributes.ts
index a6567014..07a57fc9 100644
--- a/packages/core/src/utils/get-styles-from-attributes.ts
+++ b/packages/core/src/utils/get-styles-from-attributes.ts
@@ -1,5 +1,6 @@
 import { compileCSS } from '@wordpress/style-engine';
 import getStyleObjectFromString from './get-style-object-from-string';
+import type { CSSProperties } from 'react';
 
 interface AttributesWithStyle {
 	style?: string | undefined;
@@ -9,15 +10,18 @@ interface AttributesWithStyle {
  * Extracts and compiles styles from attributes.
  *
  * @param attributes - Object containing a style string.
+ * @param attributes.style - The style string to compile.
+ *
  * @return Compiled styles as an object or an empty object if no styles exist.
  */
-export default function getStylesFromAttributes(
-	attributes: AttributesWithStyle
-) {
-	if ( ! attributes?.style ) {
-		return {};
+export default function getStylesFromAttributes( {
+	style,
+}: AttributesWithStyle ): CSSProperties | undefined {
+	if ( ! style ) {
+		return undefined;
 	}
 
-	const compiledStyles = compileCSS( JSON.parse( attributes.style ) );
-	return getStyleObjectFromString( compiledStyles ) || {};
+	const compiledStyles = compileCSS( JSON.parse( style ) );
+
+	return getStyleObjectFromString( compiledStyles ) || undefined;
 }
diff --git a/packages/core/src/utils/parse-external-remote-patterns.ts b/packages/core/src/utils/parse-external-remote-patterns.ts
index f1f8b3b0..5ee50599 100644
--- a/packages/core/src/utils/parse-external-remote-patterns.ts
+++ b/packages/core/src/utils/parse-external-remote-patterns.ts
@@ -5,7 +5,9 @@
  *
  * @internal
  */
-export default function parseExternalRemotePatterns( str?: string ) {
+export default function parseExternalRemotePatterns(
+	str?: string | undefined
+) {
 	if ( ! str ) {
 		return [
 			{
@@ -14,6 +16,7 @@ export default function parseExternalRemotePatterns( str?: string ) {
 			},
 		];
 	}
+
 	return str
 		.split( ',' )
 		.map( ( urlString ) => {
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index ab6efd14..261deaa8 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -5,7 +5,7 @@ import {
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
 import { getConfig } from '@snapwp/core/config';
-import { type PartialWithUndefined } from '@snapwp/types';
+import type { PartialWithUndefined } from '@snapwp/types';
 import NextLink, { type LinkProps } from 'next/link';
 
 interface LinkInterface {
@@ -34,8 +34,8 @@ export default function Link( {
 }: PropsWithChildren<
 	LinkInterface &
 		(
-			| PartialWithUndefined< LinkProps >
 			| AnchorHTMLAttributes< HTMLAnchorElement >
+			| PartialWithUndefined< LinkProps >
 		)
 > ) {
 	const { homeUrl, nextUrl, graphqlEndpoint } = getConfig();
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 36b08ec4..b5fb1ec2 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -68,13 +68,13 @@ export default function ScriptModule( {
 			<Script
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				type="module"
-				id={ depHandle }
 				src={ depSrc }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
 				 */
 				strategy="lazyOnload"
+				{ ...( depHandle && { id: depHandle } ) }
 				{ ...props }
 			/>
 		);
diff --git a/packages/next/src/components/script.tsx b/packages/next/src/components/script.tsx
index 85bcac59..e90b9b4c 100644
--- a/packages/next/src/components/script.tsx
+++ b/packages/next/src/components/script.tsx
@@ -1,13 +1,13 @@
-import type { PropsWithoutRef } from 'react';
 import NextScript, { type ScriptProps } from 'next/script';
+import type { PropsWithoutRef } from 'react';
 
 interface ScriptInterface {
-	after?: ( string | null )[] | null;
-	before?: ( string | null )[] | null;
-	extraData?: string | null;
-	handle?: string | null;
-	loadingStrategy?: 'ASYNC' | 'DEFER' | null;
-	groupLocation?: 'HEADER' | 'FOOTER' | null;
+	after?: ( string | null )[] | null | undefined;
+	before?: ( string | null )[] | null | undefined;
+	extraData?: string | null | undefined;
+	handle?: string | null | undefined;
+	loadingStrategy?: 'ASYNC' | 'DEFER' | null | undefined;
+	groupLocation?: 'HEADER' | 'FOOTER' | null | undefined;
 	src?: string | null | undefined;
 }
 
diff --git a/packages/next/src/config/with-snap-wp.ts b/packages/next/src/config/with-snap-wp.ts
index 6e44f7e9..ced0971d 100644
--- a/packages/next/src/config/with-snap-wp.ts
+++ b/packages/next/src/config/with-snap-wp.ts
@@ -77,7 +77,7 @@ const modifyWebpackConfig = ( snapWPConfigPath: string ) => {
  * @param nextConfig The Next.js configuration object.
  * @return The extended configuration object.
  */
-const withSnapWP = async ( nextConfig?: NextConfig ): Promise< NextConfig > => {
+const withSnapWP = async ( nextConfig: NextConfig ): Promise< NextConfig > => {
 	const possibleSnapWPConfigPaths = [
 		'snapwp.config.ts',
 		'snapwp.config.js',
diff --git a/packages/next/src/template-renderer/index.tsx b/packages/next/src/template-renderer/index.tsx
index bd3e3bce..37cd7cc2 100644
--- a/packages/next/src/template-renderer/index.tsx
+++ b/packages/next/src/template-renderer/index.tsx
@@ -26,6 +26,7 @@ export async function TemplateRenderer( {
 }: TemplateRendererProps ) {
 	const headerList = await headers(); // headers() returns a Promise from NextJS 19.
 	const pathname = headerList.get( 'x-current-path' );
+
 	const { editorBlocks, bodyClasses, stylesheets, scripts, scriptModules } =
 		await getTemplateData( pathname || '/' );
 
@@ -50,6 +51,7 @@ export async function TemplateRenderer( {
 				</main>
 			</TemplateScripts>
 			{ /* Hot Fix for adding classes to the body outside the root layout */ }
+
 			<Script
 				strategy="beforeInteractive"
 				dangerouslySetInnerHTML={ {
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 8839170d..fb1b39a4 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -143,7 +143,7 @@ const ScriptModuleMap = ( {
 						<ScriptModule
 							key={ handle || id }
 							handle={ handle }
-							{ ...( shouldLoadMainScript && { src } ) }
+							src={ shouldLoadMainScript ? src : undefined }
 							extraData={ extraData }
 							dependencies={ dependencies }
 						/>
diff --git a/packages/query/src/utils/parse-template.ts b/packages/query/src/utils/parse-template.ts
index 4db4e8e7..f5a959c0 100644
--- a/packages/query/src/utils/parse-template.ts
+++ b/packages/query/src/utils/parse-template.ts
@@ -142,12 +142,13 @@ function parseEnqueuedStylesheets(
 	templateByUri?: GetCurrentTemplateQuery[ 'templateByUri' ]
 ): StyleSheetProps[] | undefined {
 	return templateByUri?.enqueuedStylesheets?.nodes?.map( ( stylesheet ) => ( {
-		before: stylesheet?.before?.join( '' ) ?? null,
-		after: stylesheet?.after?.join( '' ) ?? null,
-		src: stylesheet?.src?.startsWith( '/' )
-			? wordpressUrl + stylesheet.src
-			: stylesheet.src ?? null,
-		handle: stylesheet.handle ?? null,
+		before: stylesheet?.before?.join( '' ) || null,
+		after: stylesheet?.after?.join( '' ) || null,
+		src:
+			( stylesheet?.src?.startsWith( '/' )
+				? wordpressUrl + stylesheet.src
+				: stylesheet?.src ) || null,
+		handle: stylesheet?.handle || null,
 	} ) );
 }
 
@@ -169,7 +170,7 @@ function parseScriptModules(
 			src: script?.src?.startsWith( '/' )
 				? `${ wordpressUrl }${ script.src }`
 				: script?.src ?? null,
-			extraData: script?.extraData ?? null,
+			extraData: script?.extraData || null,
 			dependencies:
 				script?.dependencies
 					?.filter(
diff --git a/packages/types/src/blocks/props/core-group.ts b/packages/types/src/blocks/props/core-group.ts
index b4296d89..1cc13c0e 100644
--- a/packages/types/src/blocks/props/core-group.ts
+++ b/packages/types/src/blocks/props/core-group.ts
@@ -1,4 +1,4 @@
-import type { PropsWithChildren, CSSProperties, ReactNode } from 'react';
+import type { PropsWithChildren } from 'react';
 import type { BaseAttributes, BaseProps } from '../base';
 
 export type CoreGroupAttributes = BaseAttributes & {
@@ -11,10 +11,3 @@ export type CoreGroupProps = PropsWithChildren<
 >;
 
 export type CoreGroup = React.ComponentType< CoreGroupProps >;
-
-export interface TagProps {
-	name?: string;
-	className: string;
-	style: CSSProperties;
-	children: ReactNode;
-}

From 16e3741adca915bbaec4606d29d29c7aa18410d8 Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Tue, 18 Mar 2025 22:27:49 +0200
Subject: [PATCH 11/14] dev: relocate `TemplateHeadProps` to `TemplateHead`
 component

---
 packages/core/src/props/index.ts                      | 6 +-----
 packages/next/src/template-renderer/template-head.tsx | 6 +++++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/props/index.ts b/packages/core/src/props/index.ts
index 71ce43f9..6a8211c9 100644
--- a/packages/core/src/props/index.ts
+++ b/packages/core/src/props/index.ts
@@ -1,8 +1,4 @@
-export type TemplateHeadProps = {
-	stylesheets?: StyleSheetProps[] | null | undefined;
-};
-
-export type ScriptModuleDependencyProps = {
+type ScriptModuleDependencyProps = {
 	importType?: string | null;
 	connectedScriptModule?: {
 		handle: string;
diff --git a/packages/next/src/template-renderer/template-head.tsx b/packages/next/src/template-renderer/template-head.tsx
index 63b512d0..31b72c4c 100644
--- a/packages/next/src/template-renderer/template-head.tsx
+++ b/packages/next/src/template-renderer/template-head.tsx
@@ -1,5 +1,9 @@
 import { Fragment } from 'react';
-import type { TemplateHeadProps } from '@snapwp/core';
+import type { StyleSheetProps } from '@snapwp/core';
+
+export interface TemplateHeadProps {
+	stylesheets?: StyleSheetProps[] | null | undefined;
+}
 
 /**
  * Renders the head section with additional stylesheets for a template.

From 1a9b53a4a1ef877d2d15cf78d32cfbca73f7e175 Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Tue, 18 Mar 2025 22:37:57 +0200
Subject: [PATCH 12/14] tests: update tests

---
 .../utils/tests/get-style-object-from-string.test.ts |  8 ++++----
 .../utils/tests/get-styles-from-attributes.test.ts   | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/utils/tests/get-style-object-from-string.test.ts b/packages/core/src/utils/tests/get-style-object-from-string.test.ts
index de9b5aca..1deb1a0b 100644
--- a/packages/core/src/utils/tests/get-style-object-from-string.test.ts
+++ b/packages/core/src/utils/tests/get-style-object-from-string.test.ts
@@ -1,9 +1,9 @@
 import getStyleObjectFromString from '../get-style-object-from-string';
 
 describe( 'getStyleObjectFromString', () => {
-	it( 'should return an empty object for an empty string', () => {
+	it( 'should return undefined for an empty string', () => {
 		const result = getStyleObjectFromString( '' );
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( undefined );
 	} );
 
 	it( 'should return the input object if an object is provided', () => {
@@ -26,9 +26,9 @@ describe( 'getStyleObjectFromString', () => {
 		expect( result ).toEqual( expected );
 	} );
 
-	it( 'should return an empty object if an invalid type is provided', () => {
+	it( 'should return undefined if an invalid type is provided', () => {
 		const cssString = 123 as unknown as string;
 		const result = getStyleObjectFromString( cssString );
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( undefined );
 	} );
 } );
diff --git a/packages/core/src/utils/tests/get-styles-from-attributes.test.ts b/packages/core/src/utils/tests/get-styles-from-attributes.test.ts
index ec701aa0..f6984a44 100644
--- a/packages/core/src/utils/tests/get-styles-from-attributes.test.ts
+++ b/packages/core/src/utils/tests/get-styles-from-attributes.test.ts
@@ -10,14 +10,14 @@ describe( 'getStylesFromAttributes', () => {
 		jest.clearAllMocks();
 	} );
 
-	it( 'should return an empty object if attributes have no style property', () => {
+	it( 'should return undefined if attributes have no style property', () => {
 		const result = getStylesFromAttributes( {} );
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( undefined );
 	} );
 
-	it( 'should return an empty object if the style string is empty', () => {
+	it( 'should return undefined if the style string is empty', () => {
 		const result = getStylesFromAttributes( { style: '' } );
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( undefined );
 	} );
 
 	it( 'should compile styles and convert them to a React style object', () => {
@@ -39,7 +39,7 @@ describe( 'getStylesFromAttributes', () => {
 		);
 	} );
 
-	it( 'should return an empty object if compiledStyles is undefined', () => {
+	it( 'should return undefined if compiledStyles is undefined', () => {
 		( compileCSS as jest.Mock ).mockReturnValue( undefined );
 
 		const attributes = {
@@ -49,7 +49,7 @@ describe( 'getStylesFromAttributes', () => {
 		};
 
 		const result = getStylesFromAttributes( attributes );
-		expect( result ).toEqual( {} );
+		expect( result ).toEqual( undefined );
 	} );
 
 	it( 'should handle complex styles and return the correct React style object', () => {

From b018ffcf1fa5bb7781cb6062c037e7d1ef3113a7 Mon Sep 17 00:00:00 2001
From: bhumik <bhumik.bm123@gmail.com>
Date: Wed, 19 Mar 2025 11:00:06 +0530
Subject: [PATCH 13/14] chore: add changesets

---
 .changeset/tender-jobs-itch.md | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 .changeset/tender-jobs-itch.md

diff --git a/.changeset/tender-jobs-itch.md b/.changeset/tender-jobs-itch.md
new file mode 100644
index 00000000..3f2de499
--- /dev/null
+++ b/.changeset/tender-jobs-itch.md
@@ -0,0 +1,9 @@
+---
+"@snapwp/blocks": patch
+"@snapwp/query": patch
+"@snapwp/types": patch
+"@snapwp/core": patch
+"@snapwp/next": patch
+---
+
+refctor: Add TS exactOptionalPropertyType rule

From 377f636b2b033feb89a6e6a5a7567d6b5edf9d3d Mon Sep 17 00:00:00 2001
From: Dovid Levine <justlevine@gmail.com>
Date: Wed, 19 Mar 2025 09:26:37 +0200
Subject: [PATCH 14/14] Update .changeset/tender-jobs-itch.md

---
 .changeset/tender-jobs-itch.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/tender-jobs-itch.md b/.changeset/tender-jobs-itch.md
index 3f2de499..512f89de 100644
--- a/.changeset/tender-jobs-itch.md
+++ b/.changeset/tender-jobs-itch.md
@@ -6,4 +6,4 @@
 "@snapwp/next": patch
 ---
 
-refctor: Add TS exactOptionalPropertyType rule
+refactor: Enforce `exactOptionalPropertyType` TypeScript rule