diff --git a/.changeset/tender-jobs-itch.md b/.changeset/tender-jobs-itch.md
new file mode 100644
index 00000000..512f89de
--- /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
+---
+
+refactor: Enforce `exactOptionalPropertyType` TypeScript rule
diff --git a/config/tsconfig.base.json b/config/tsconfig.base.json
index 676837b1..0b1a9664 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/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 9c53853f..1e0a3e7a 100644
--- a/packages/blocks/src/blocks/core-audio.tsx
+++ b/packages/blocks/src/blocks/core-audio.tsx
@@ -36,7 +36,10 @@ const CoreAudio: CoreAudioType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure className={ classNames } style={ styleObject }>
+		<figure
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<audio
 				controls
 				src={ src }
diff --git a/packages/blocks/src/blocks/core-button.tsx b/packages/blocks/src/blocks/core-button.tsx
index f65b1987..55a8461e 100644
--- a/packages/blocks/src/blocks/core-button.tsx
+++ b/packages/blocks/src/blocks/core-button.tsx
@@ -31,8 +31,8 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 
 	const classNames = cn( cssClassName );
 	const styleObject = getStylesFromAttributes( { style } );
-
 	const { homeUrl, nextUrl } = getConfig();
+
 	const commonProps = {
 		className: linkClassName ?? undefined,
 		style: styleObject,
@@ -56,12 +56,13 @@ const CoreButton: CoreButtonType = ( { attributes }: CoreButtonProps ) => {
 
 	if ( url ) {
 		const href = replaceHostUrl( url, homeUrl, nextUrl );
+
 		return (
 			<div className={ classNames }>
 				<Link
 					href={ href }
-					target={ linkTarget ?? undefined }
-					rel={ rel ?? undefined }
+					target={ linkTarget }
+					rel={ rel }
 					{ ...commonProps }
 				>
 					{ !! text && <Parse html={ text } /> }
diff --git a/packages/blocks/src/blocks/core-buttons.tsx b/packages/blocks/src/blocks/core-buttons.tsx
index 0d6d8e3d..3169d529 100644
--- a/packages/blocks/src/blocks/core-buttons.tsx
+++ b/packages/blocks/src/blocks/core-buttons.tsx
@@ -23,7 +23,10 @@ const CoreButtons: CoreButtonsType = ( {
 	const styleObject = getStylesFromAttributes( { style } );
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</div>
 	);
diff --git a/packages/blocks/src/blocks/core-code.tsx b/packages/blocks/src/blocks/core-code.tsx
index 0cc491be..2ff7f457 100644
--- a/packages/blocks/src/blocks/core-code.tsx
+++ b/packages/blocks/src/blocks/core-code.tsx
@@ -12,10 +12,14 @@ 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 className={ cssClassName || '' } style={ styleObject }>
+		<pre
+			{ ...( cssClassName && { className: cssClassName } ) }
+			{ ...( 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 5e1e9dc3..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.
@@ -22,7 +23,7 @@ const CoreColumn: CoreColumnType = ( {
 	const classNames = cn( cssClassName );
 	const styleObject = getStylesFromAttributes( { style } );
 
-	const combinedStyles: React.CSSProperties = {
+	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 bc88eff7..1667281b 100644
--- a/packages/blocks/src/blocks/core-columns.tsx
+++ b/packages/blocks/src/blocks/core-columns.tsx
@@ -23,7 +23,10 @@ const CoreColumns: CoreColumnsType = ( {
 	const classNames = cn( cssClassName );
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 		</div>
 	);
diff --git a/packages/blocks/src/blocks/core-cover.tsx b/packages/blocks/src/blocks/core-cover.tsx
index 35898e43..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;
 	}
diff --git a/packages/blocks/src/blocks/core-details.tsx b/packages/blocks/src/blocks/core-details.tsx
index 4d430b02..30e067ef 100644
--- a/packages/blocks/src/blocks/core-details.tsx
+++ b/packages/blocks/src/blocks/core-details.tsx
@@ -38,8 +38,8 @@ const CoreDetails: CoreDetailsType = ( {
 	return (
 		<details
 			className={ classNames }
-			style={ styleObject }
 			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 35863f8c..6d10e6dc 100644
--- a/packages/blocks/src/blocks/core-file.tsx
+++ b/packages/blocks/src/blocks/core-file.tsx
@@ -50,7 +50,10 @@ const CoreFile: CoreFileType = ( {
 	const downloadText = downloadButtonText || FALLBACK_DOWNLOAD_BUTTON_TEXT;
 
 	return (
-		<div className={ classNames } style={ styleObject }>
+		<div
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ displayPreview && (
 				<object
 					className="wp-block-file__embed"
@@ -65,9 +68,9 @@ const CoreFile: CoreFileType = ( {
 			) }
 			{ fileName && textLinkHref && (
 				<Link
-					id={ fileId || undefined }
+					id={ fileId }
 					href={ textLinkHref }
-					target={ textLinkTarget || undefined }
+					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 206e5a63..a9c9bbc3 100644
--- a/packages/blocks/src/blocks/core-gallery.tsx
+++ b/packages/blocks/src/blocks/core-gallery.tsx
@@ -36,7 +36,10 @@ const CoreGallery: CoreGalleryType = ( {
 	const className = cn( classNamesFromString ) || undefined;
 
 	return (
-		<figure className={ className } style={ styleObject }>
+		<figure
+			className={ className }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 			{ caption && (
 				<figcaption className="wp-element-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 fd4919d5..3f7a9dd5 100644
--- a/packages/blocks/src/blocks/core-heading.tsx
+++ b/packages/blocks/src/blocks/core-heading.tsx
@@ -25,8 +25,8 @@ const CoreHeading: CoreHeadingType = ( { attributes }: CoreHeadingProps ) => {
 
 	return (
 		<HeadingTag
-			style={ styleObject }
-			className={ cssClassName || undefined }
+			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 9a29eec1..52e77fea 100644
--- a/packages/blocks/src/blocks/core-image.tsx
+++ b/packages/blocks/src/blocks/core-image.tsx
@@ -56,7 +56,7 @@ const Figure = ( {
 					href={ href }
 					className={ linkClass }
 					target={ linkTarget }
-					{ ...( rel && { rel } ) }
+					rel={ rel }
 				>
 					{ children }
 				</Link>
@@ -198,9 +198,9 @@ const getImageProps = (
 	};
 
 	const imageProps: ComponentProps< typeof Image > = {
-		src: url,
-		alt,
 		title,
+		alt,
+		src: url,
 	};
 
 	if ( connectedMediaItem?.node ) {
@@ -269,7 +269,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-list-item.tsx b/packages/blocks/src/blocks/core-list-item.tsx
index cab13c16..a2d63b36 100644
--- a/packages/blocks/src/blocks/core-list-item.tsx
+++ b/packages/blocks/src/blocks/core-list-item.tsx
@@ -39,7 +39,10 @@ const CoreListItem: CoreListItemType = ( {
 	const firstLineContent = content ? content.split( '\n' )[ 0 ] : undefined;
 
 	return (
-		<li className={ classNames || undefined } style={ styleObject }>
+		<li
+			className={ classNames || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ 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 2bf840ea..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.
@@ -20,7 +21,7 @@ const CoreList: CoreListType = ( { attributes, children }: CoreListProps ) => {
 
 	const styleObject = getStylesFromAttributes( { style } );
 
-	const combinedStyles: React.CSSProperties = {
+	const combinedStyles: CSSProperties = {
 		...styleObject,
 		listStyleType: type ?? undefined,
 	};
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 9f2d3d89..6a969d39 100644
--- a/packages/blocks/src/blocks/core-preformatted.tsx
+++ b/packages/blocks/src/blocks/core-preformatted.tsx
@@ -36,7 +36,10 @@ const CorePreformatted: CorePreformattedType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre style={ styleObject } className={ classNames }>
+		<pre
+			className={ classNames }
+			{ ...( 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 4a41a929..a00383a8 100644
--- a/packages/blocks/src/blocks/core-pullquote.tsx
+++ b/packages/blocks/src/blocks/core-pullquote.tsx
@@ -36,7 +36,10 @@ const CorePullquote: CorePullquoteType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<figure style={ styleObject } className={ classNames }>
+		<figure
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<blockquote>
 				{ pullquoteValue && (
 					<p>
diff --git a/packages/blocks/src/blocks/core-quote.tsx b/packages/blocks/src/blocks/core-quote.tsx
index bbc40b16..7f5849d9 100644
--- a/packages/blocks/src/blocks/core-quote.tsx
+++ b/packages/blocks/src/blocks/core-quote.tsx
@@ -20,7 +20,10 @@ const CoreQuote: CoreQuoteType = ( {
 	const styleObject = getStylesFromAttributes( { style } );
 
 	return (
-		<blockquote className={ cssClassName || '' } style={ styleObject }>
+		<blockquote
+			className={ cssClassName || undefined }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			{ children }
 
 			{ !! citation && (
diff --git a/packages/blocks/src/blocks/core-verse.tsx b/packages/blocks/src/blocks/core-verse.tsx
index 882c1d6c..3dcca664 100644
--- a/packages/blocks/src/blocks/core-verse.tsx
+++ b/packages/blocks/src/blocks/core-verse.tsx
@@ -33,7 +33,10 @@ const CoreVerse: CoreVerseType = ( {
 	const classNames = cn( classNamesFromString );
 
 	return (
-		<pre className={ classNames } style={ styleObject }>
+		<pre
+			className={ classNames }
+			{ ...( 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 611c770f..d44de976 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;
 	}
@@ -96,7 +96,10 @@ const CoreVideo: CoreVideoType = ( {
 		.filter( ( track ): track is TrackProps => track !== null );
 
 	return (
-		<figure className={ classNames } style={ styleObject }>
+		<figure
+			className={ classNames }
+			{ ...( styleObject && { style: styleObject } ) }
+		>
 			<video
 				autoPlay={ autoplay || undefined }
 				controls={ controls || undefined }
diff --git a/packages/blocks/src/blocks/tests/core-audio.test.tsx b/packages/blocks/src/blocks/tests/core-audio.test.tsx
index badc842d..d9768343 100644
--- a/packages/blocks/src/blocks/tests/core-audio.test.tsx
+++ b/packages/blocks/src/blocks/tests/core-audio.test.tsx
@@ -69,6 +69,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 eac3a2a9..d94c135a 100644
--- a/packages/blocks/src/blocks/tests/core-button.test.tsx
+++ b/packages/blocks/src/blocks/tests/core-button.test.tsx
@@ -209,6 +209,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/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 27c80905..b6dc5d16 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -78,6 +78,7 @@ 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 -- These are the env variables we want to manage. */
 	nextUrl: process.env.NEXT_PUBLIC_URL,
@@ -233,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/props/index.ts b/packages/core/src/props/index.ts
index 672ec449..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;
-};
-
-export type ScriptModuleDependencyProps = {
+type ScriptModuleDependencyProps = {
 	importType?: string | null;
 	connectedScriptModule?: {
 		handle: string;
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 b50d841b..07a57fc9 100644
--- a/packages/core/src/utils/get-styles-from-attributes.ts
+++ b/packages/core/src/utils/get-styles-from-attributes.ts
@@ -1,23 +1,27 @@
 import { compileCSS } from '@wordpress/style-engine';
 import getStyleObjectFromString from './get-style-object-from-string';
+import type { CSSProperties } from 'react';
 
 interface AttributesWithStyle {
-	style?: string;
+	style?: string | undefined;
 }
 
 /**
  * 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/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', () => {
diff --git a/packages/next/src/components/image.tsx b/packages/next/src/components/image.tsx
index 535b82e2..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';
 }
@@ -151,7 +151,7 @@ export default function Image( {
 			className={ cn( className, imageProps?.fill && 'object-cover' ) }
 			src={ src }
 			alt={ altText }
-			priority={ priority }
+			{ ...( priority && { priority } ) }
 		/>
 	) : null;
 }
diff --git a/packages/next/src/components/link.tsx b/packages/next/src/components/link.tsx
index 4073ab29..261deaa8 100644
--- a/packages/next/src/components/link.tsx
+++ b/packages/next/src/components/link.tsx
@@ -5,10 +5,11 @@ import {
 } from 'react';
 import { replaceHostUrl } from '@snapwp/core';
 import { getConfig } from '@snapwp/core/config';
+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;
 }
@@ -31,7 +32,11 @@ export default function Link( {
 	children,
 	...props
 }: PropsWithChildren<
-	LinkInterface & ( LinkProps | AnchorHTMLAttributes< HTMLAnchorElement > )
+	LinkInterface &
+		(
+			| AnchorHTMLAttributes< HTMLAnchorElement >
+			| PartialWithUndefined< LinkProps >
+		)
 > ) {
 	const { homeUrl, nextUrl, graphqlEndpoint } = getConfig();
 
@@ -63,7 +68,8 @@ export default function Link( {
 
 	return (
 		<NextLink
-			{ ...props }
+			// LinkProps conflicts with exactOptionalPropertyTypes: https://github.com/vercel/next.js/issues/50561
+			{ ...( props as LinkProps ) }
 			className={ className }
 			href={ internalUri || '' }
 			style={ style }
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 267e0986..b5fb1ec2 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;
 }
 
 /**
@@ -66,7 +67,6 @@ export default function ScriptModule( {
 		return (
 			<Script
 				key={ depHandle || `${ handle }-dep-${ index }` }
-				id={ depHandle || undefined }
 				type="module"
 				src={ depSrc }
 				/*
@@ -74,6 +74,7 @@ export default function ScriptModule( {
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
 				 */
 				strategy="lazyOnload"
+				{ ...( depHandle && { id: depHandle } ) }
 				{ ...props }
 			/>
 		);
@@ -96,9 +97,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/components/script.tsx b/packages/next/src/components/script.tsx
index 8a37faf0..e90b9b4c 100644
--- a/packages/next/src/components/script.tsx
+++ b/packages/next/src/components/script.tsx
@@ -1,14 +1,14 @@
-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;
-	src?: string | 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/react-parser/options.tsx b/packages/next/src/react-parser/options.tsx
index 4bf781c9..a6bd6fd3 100644
--- a/packages/next/src/react-parser/options.tsx
+++ b/packages/next/src/react-parser/options.tsx
@@ -71,7 +71,7 @@ export const defaultOptions: HTMLReactParserOptions = {
 					<Image
 						{ ...attributes }
 						src={ attribs[ 'src' ] }
-						alt={ attribs[ 'alt' ] || '' }
+						alt={ attribs[ 'alt' ] }
 						height={ height }
 						width={ width }
 						className={ className }
diff --git a/packages/next/src/template-renderer/index.tsx b/packages/next/src/template-renderer/index.tsx
index 490e92ae..37cd7cc2 100644
--- a/packages/next/src/template-renderer/index.tsx
+++ b/packages/next/src/template-renderer/index.tsx
@@ -51,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-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.
diff --git a/packages/query/src/utils/parse-global-styles.ts b/packages/query/src/utils/parse-global-styles.ts
index 9e817831..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,
-		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..f5a959c0 100644
--- a/packages/query/src/utils/parse-template.ts
+++ b/packages/query/src/utils/parse-template.ts
@@ -97,8 +97,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 +142,13 @@ function parseEnqueuedStylesheets(
 	templateByUri?: GetCurrentTemplateQuery[ 'templateByUri' ]
 ): StyleSheetProps[] | undefined {
 	return templateByUri?.enqueuedStylesheets?.nodes?.map( ( stylesheet ) => ( {
-		before: stylesheet?.before?.join( '' ),
-		after: stylesheet?.after?.join( '' ),
-		src: stylesheet?.src?.startsWith( '/' )
-			? wordpressUrl + stylesheet.src
-			: stylesheet.src,
-		handle: stylesheet.handle,
+		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,
+			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;
-}
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;
 }
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;
 };
 
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 91bf7d9c..254c771f 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -1 +1,2 @@
 export * from './blocks';
+export * from './utils';
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;
+};