diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
index e558e4f9276dc..e387dc85d3ab8 100644
--- a/packages/block-library/src/gallery/gap-styles.js
+++ b/packages/block-library/src/gallery/gap-styles.js
@@ -1,15 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { BlockList } from '@wordpress/block-editor';
+import { BlockList, store as blockEditorStore } from '@wordpress/block-editor';
 import { useContext, createPortal } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 export default function GapStyles( { blockGap, clientId } ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings()?.supportsLayout;
+	}, [] );
 	const styleElement = useContext( BlockList.__unstableElementContext );
 
+	const gapFallback = themeSupportsLayout ? '0.5em' : '16px';
+	const backwardsCompatGap = ! themeSupportsLayout
+		? `; gap: ${ gapFallback }`
+		: '';
 	const gap = blockGap
 		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ blockGap } }`
-		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, 0.5em ) }`;
+		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, ${ gapFallback } ) ${ backwardsCompatGap }  }`;
 
 	const GapStyle = () => {
 		return <style>{ gap }</style>;
diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
index e3a95085a6711..a515af6c81802 100644
--- a/packages/block-library/src/gallery/index.php
+++ b/packages/block-library/src/gallery/index.php
@@ -57,15 +57,22 @@ function block_core_gallery_render( $attributes, $content ) {
 		$content,
 		1
 	);
-	$gap_value = $gap ? $gap : 'var( --wp--style--block-gap, 0.5em )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '}';
+	$gap_fallback = WP_Theme_JSON_Resolver::theme_has_support() ? '0.5em' : '16px';
+	$gap_value    = $gap ? $gap : 'var( --wp--style--block-gap, ' . $gap_fallback . ' )';
+	$style        = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '}';
+
+	$backwards_compat_style = '';
+	if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) {
+		$backwards_compat_style = '.' . $class . '.wp-block-gallery' . '{ gap: ' . $gap_value . '}';
+	}
+
 	// Ideally styles should be loaded in the head, but blocks may be parsed
 	// after that, so loading in the footer for now.
 	// See https://core.trac.wordpress.org/ticket/53494.
 	add_action(
 		'wp_footer',
-		function () use ( $style ) {
-			echo '<style> ' . $style . '</style>';
+		function () use ( $style, $backwards_compat_style ) {
+			echo '<style> ' . $style . ' ' . $backwards_compat_style . '</style>';
 		}
 	);
 	return $content;