feat: added inline styles logic for block gap

WordPress · Nov 25, 2024 · fc5c61d · fc5c61d
1 parent c5ebfd7
commit fc5c61d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git 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
@@ -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 ) {