diff --git a/packages/block-editor/src/components/global-styles/image-settings-panel.js b/packages/block-editor/src/components/global-styles/image-settings-panel.js
index 9be951d721173..921593bd06e7e 100644
--- a/packages/block-editor/src/components/global-styles/image-settings-panel.js
+++ b/packages/block-editor/src/components/global-styles/image-settings-panel.js
@@ -15,7 +15,7 @@ export function useHasImageSettingsPanel( name, settings ) {
 export default function ImageSettingsPanel( {
 	onChange,
 	userSettings,
-	settings,
+	lightboxSettings,
 	panelId,
 } ) {
 	const resetLightbox = () => {
@@ -29,7 +29,7 @@ export default function ImageSettingsPanel( {
 	};
 
 	const lightboxChecked =
-		settings?.lightbox === true ? true : !! settings?.lightbox?.enabled;
+		lightboxSettings === true ? true : !! lightboxSettings?.enabled;
 
 	return (
 		<>
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 6d106fa5176fc..29733416d1db4 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -24,7 +24,6 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
-	useSetting,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
@@ -369,15 +368,44 @@ export default function Image( {
 		availableUnits: [ 'px' ],
 	} );
 
-	const lightboxSetting = useSetting( 'lightbox' );
+	const lightboxSettings = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		const blockSettings =
+			settings.__experimentalFeatures?.blocks?.[ 'core/image' ]?.lightbox;
+		const defaultsSetting = settings.__experimentalFeatures?.lightbox;
+
+		// By default, the theme.json lightbox 'enabled' property is
+		// undefined in theme.json, so we need to check the top-level
+		// settings to see if the lightbox has been enabled there.
+		if (
+			blockSettings &&
+			blockSettings !== true &&
+			! blockSettings.hasOwnProperty( 'enabled' ) &&
+			defaultsSetting
+		) {
+			if ( defaultsSetting === true ) {
+				return {
+					...blockSettings,
+					enabled: true,
+				};
+			} else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) {
+				return {
+					...blockSettings,
+					enabled: defaultsSetting.enabled,
+				};
+			}
+		}
+
+		return blockSettings ?? defaultsSetting;
+	}, [] );
 
 	const showLightboxToggle =
-		lightboxSetting === true || lightboxSetting?.allowEditing === true;
+		lightboxSettings === true || lightboxSettings?.allowEditing === true;
 
 	const lightboxChecked =
 		lightbox?.enabled ||
-		( ! lightbox && lightboxSetting === true ) ||
-		( ! lightbox && lightboxSetting?.enabled );
+		( ! lightbox && lightboxSettings === true ) ||
+		( ! lightbox && lightboxSettings?.enabled );
 
 	const controls = (
 		<>
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index ee81b629beab1..eed615440b7c9 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -219,6 +222,39 @@ function ScreenBlock( { name, variation } ) {
 		setStyle( { ...newStyle, border: { ...updatedBorder, radius } } );
 	};
 
+	const lightboxSettings = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+
+		const blockSettings =
+			editorSettings.__experimentalFeatures?.blocks?.[ 'core/image' ]
+				?.lightbox;
+		const defaultsSetting = editorSettings.__experimentalFeatures?.lightbox;
+
+		// By default, the theme.json lightbox 'enabled' property is
+		// undefined in theme.json, so we need to check the top-level
+		// settings to see if the lightbox has been enabled there.
+		if (
+			blockSettings &&
+			blockSettings !== true &&
+			! blockSettings.hasOwnProperty( 'enabled' ) &&
+			defaultsSetting
+		) {
+			if ( defaultsSetting === true ) {
+				return {
+					...blockSettings,
+					enabled: true,
+				};
+			} else if ( defaultsSetting.hasOwnProperty( 'enabled' ) ) {
+				return {
+					...blockSettings,
+					enabled: defaultsSetting.enabled,
+				};
+			}
+		}
+
+		return blockSettings ?? defaultsSetting;
+	}, [] );
+
 	return (
 		<>
 			<ScreenHeader
@@ -294,7 +330,7 @@ function ScreenBlock( { name, variation } ) {
 				<ImageSettingsPanel
 					onChange={ onChangeLightbox }
 					userSettings={ userSettings }
-					settings={ settings }
+					lightboxSettings={ lightboxSettings }
 				/>
 			) }