From fc5c61da0f06a43e8cfcab7c4c68f2c7aed33fcb Mon Sep 17 00:00:00 2001
From: Mayank-Tripathi32 <mayank.tripathi@rtcamp.com>
Date: Mon, 25 Nov 2024 18:29:41 +0530
Subject: [PATCH] feat: added inline styles logic for block gap

---
 packages/block-library/src/media-text/edit.js | 31 ++++++++++++++++
 packages/block-library/src/media-text/save.js | 36 ++++++++++++++++++-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index a946a499b26f21..362c4a851eff4d 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -19,6 +19,7 @@ import {
 	store as blockEditorStore,
 	useBlockEditingMode,
 	privateApis as blockEditorPrivateApis,
+	__experimentalGetGapCSSValue as getGapCSSValue,
 } from '@wordpress/block-editor';
 import {
 	RangeControl,
@@ -245,6 +246,35 @@ function MediaTextEdit( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 		'is-image-fill-element': imageFill,
 	} );
+
+	const blockGap = attributes?.style?.spacing.blockGap;
+
+	const fallbackValue = 'var(--wp--style--block-gap)';
+
+	let gapStyle = { gap: fallbackValue };
+
+	if ( !! blockGap ) {
+		const row =
+			typeof blockGap === 'string'
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.top ) || fallbackValue;
+		const col =
+			typeof blockGap === 'string'
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.left ) || fallbackValue;
+
+		if ( col === row ) {
+			gapStyle = {
+				gap: col,
+			};
+		} else {
+			gapStyle = {
+				columnGap: col,
+				rowGap: row,
+			};
+		}
+	}
+
 	const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
 	const gridTemplateColumns =
 		'right' === mediaPosition
@@ -253,6 +283,7 @@ function MediaTextEdit( {
 	const style = {
 		gridTemplateColumns,
 		msGridColumns: gridTemplateColumns,
+		...gapStyle,
 	};
 	const onMediaAltChange = ( newMediaAlt ) => {
 		setAttributes( { mediaAlt: newMediaAlt } );
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 3e660d94e789ee..637cac634045b1 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/packages/block-library/src/media-text/save.js
@@ -6,7 +6,11 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+import {
+	useInnerBlocksProps,
+	useBlockProps,
+	__experimentalGetGapCSSValue as getGapCSSValue,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -86,8 +90,38 @@ export default function save( { attributes } ) {
 				? `auto ${ mediaWidth }%`
 				: `${ mediaWidth }% auto`;
 	}
+
+	const blockGap = attributes?.style?.spacing.blockGap;
+
+	const fallbackValue = 'var(--wp--style--block-gap)';
+
+	let gapStyle = { gap: fallbackValue };
+
+	if ( !! blockGap ) {
+		const row =
+			typeof blockGap === 'string'
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.top ) || fallbackValue;
+		const col =
+			typeof blockGap === 'string'
+				? getGapCSSValue( blockGap )
+				: getGapCSSValue( blockGap?.left ) || fallbackValue;
+
+		if ( col === row ) {
+			gapStyle = {
+				gap: col,
+			};
+		} else {
+			gapStyle = {
+				columnGap: col,
+				rowGap: row,
+			};
+		}
+	}
+
 	const style = {
 		gridTemplateColumns,
+		...gapStyle,
 	};
 
 	if ( 'right' === mediaPosition ) {