diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 3aac12eb99028..c7af8c3740180 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -115,8 +115,11 @@ export default {
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
-				: 'var( --wp--style--block-gap, 0.5em )'; // TODO: If there's a value set at the block level in theme.json, how do we ensure this value doesn't override that?
+				? `gap: ${ getGapCSSValue(
+						style?.spacing?.blockGap,
+						'0.5em'
+				  ) };`
+				: '';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -143,7 +146,7 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
+					${ hasBlockGapStylesSupport ? blockGapValue : 'gap: 0.5em;' }
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
index 82851cb015075..bd52f9d668de5 100644
--- a/packages/block-editor/src/layouts/flow.js
+++ b/packages/block-editor/src/layouts/flow.js
@@ -125,7 +125,7 @@ export default {
 			blockGapStyleValue?.top &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
 				? blockGapStyleValue?.top
-				: 'var( --wp--style--block-gap )';
+				: '';
 
 		let output =
 			!! contentSize || !! wideSize
@@ -165,12 +165,15 @@ export default {
 			}
 		`;
 
-		if ( hasBlockGapStylesSupport ) {
+		if ( hasBlockGapStylesSupport && blockGapValue ) {
 			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-block-start: 0;
 					margin-block-end: 0;
 				}
+			`;
+
+			output += `
 				${ appendSelectors( selector, '> * + *' ) } {
 					margin-block-start: ${ blockGapValue };
 				}
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index 80c6c25e1d64c..db628050f0b47 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -43,13 +43,8 @@ function useHasMargin( name ) {
 function useHasGap( name ) {
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ settings ] = useSetting( 'spacing.blockGap', name );
-	// Do not show the gap control panel for block-level global styles
-	// as they do not work on the frontend.
-	// See: https://github.com/WordPress/gutenberg/pull/39845.
-	// We can revert this condition when they're working again.
-	return !! name
-		? false
-		: settings && supports.includes( '--wp--style--block-gap' );
+
+	return settings && supports.includes( '--wp--style--block-gap' );
 }
 
 function filterValuesBySides( values, sides ) {
diff --git a/packages/edit-site/src/components/global-styles/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
index e477faa83a024..6806c2ab3b1d3 100644
--- a/packages/edit-site/src/components/global-styles/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/use-global-styles-output.js
@@ -29,7 +29,7 @@ import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress
 /**
  * Internal dependencies
  */
-import { PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
+import { LAYOUT_STYLES, PRESET_METADATA, ROOT_BLOCK_SELECTOR } from './utils';
 import { GlobalStylesContext } from './context';
 import { useSetting } from './hooks';
 
@@ -391,6 +391,21 @@ export const toStyles = ( tree, blockSelectors, hasBlockGapSupport ) => {
 				`${ duotoneSelector }{${ duotoneDeclarations.join( ';' ) };}`;
 		}
 
+		// Process blockGap styles.
+		if ( styles?.spacing?.blockGap ) {
+			const gapValue = styles.spacing.blockGap;
+			delete styles.spacing.blockGap;
+			Object.entries( LAYOUT_STYLES[ '--wp--style--block-gap' ] ).forEach(
+				( [ additionalSelector, cssProperty ] ) => {
+					const combinedSelector =
+						selector === ROOT_BLOCK_SELECTOR
+							? `${ selector } ${ additionalSelector }`
+							: `${ selector }${ additionalSelector }`;
+					ruleset += `${ combinedSelector } { ${ cssProperty }: ${ gapValue }; }`;
+				}
+			);
+		}
+
 		// Process the remaning block styles (they use either normal block class or __experimentalSelector).
 		const declarations = getStylesDeclarations( styles );
 		if ( declarations.length === 0 ) {
diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
index 50c412fc06cd5..a608f4e7ba292 100644
--- a/packages/edit-site/src/components/global-styles/utils.js
+++ b/packages/edit-site/src/components/global-styles/utils.js
@@ -21,6 +21,13 @@ export const ROOT_BLOCK_SUPPORTS = [
 	'padding',
 ];
 
+export const LAYOUT_STYLES = {
+	'--wp--style--block-gap': {
+		'.is-layout-flex': 'gap',
+		'.is-layout-flow > * + *': 'margin-top',
+	},
+};
+
 export const PRESET_METADATA = [
 	{
 		path: [ 'color', 'palette' ],