If no value is set for the lightbox in the Global Styles, then the bl…

…ock editor UI should inherit the value from `theme.json`.

Likewise, if no value is set in the block attributes, the block editor UI should inherit the value from the Global Styles of the Image.

packages/block-editor/src/components/global-styles/image-settings-panel.js

@@ -15,6 +15,7 @@ export function useHasImageSettingsPanel( name, settings ) {
 export default function ImageSettingsPanel( {
 	onChange,
 	userSettings,
+	settings,
 	panelId,
 } ) {
 	const resetLightbox = () => {
@@ -43,10 +44,7 @@ export default function ImageSettingsPanel( {
 				>
 					<ToggleControl
 						label={ __( 'Expand on Click' ) }
-						// TODO: Figure out if we want to use the `userSettings` or the global
-						// settings. If we use the global settings, this means that the
-						// checkbox will be checked following the `theme.json` value.
-						checked={ !! userSettings?.lightbox?.enabled }
+						checked={ !! settings?.lightbox?.enabled }
 						onChange={ onChangeLightbox }
 					/>
 				</ToolsPanelItem>

packages/block-library/src/image/image.js

@@ -24,6 +24,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
+	useSetting,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
@@ -173,6 +174,7 @@ export default function Image( {
 			},
 			[ clientId ]
 		);
+
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -367,6 +369,18 @@ export default function Image( {
 		availableUnits: [ 'px' ],
 	} );
 
+	const lightboxSetting = useSetting( 'lightbox' );
+
+	const lightboxChecked = useMemo( () => {
+		// If the lightbox is set in the block attributes, use that.
+		if ( lightbox?.enabled ) return true;
+
+		// If the lightbox is NOT set in the block attributes AND it IS enabled in
+		// the settings, use that.
+		if ( ! lightbox && lightboxSetting?.enabled ) return true;
+		return false;
+	}, [ lightbox, lightboxSetting ] );
+
 	const controls = (
 		<>
 			<BlockControls group="block">
@@ -532,7 +546,7 @@ export default function Image( {
 					>
 						<ToggleControl
 							label={ __( 'Expand on Click' ) }
-							checked={ !! lightbox?.enabled }
+							checked={ lightboxChecked }
 							onChange={ ( newValue ) => {
 								setAttributes( {
 									lightbox: { enabled: newValue },

packages/edit-site/src/components/global-styles/screen-block.js

@@ -149,10 +149,25 @@ function ScreenBlock( { name, variation } ) {
 		}
 	};
 	const onChangeLightbox = ( newSetting ) => {
-		setSettings( {
-			...rawSettings,
-			lightbox: newSetting,
-		} );
+		// If the newSetting is undefined, this means that the user has deselected
+		// (reset) the lightbox setting.
+		if ( newSetting === undefined ) {
+			setSettings( {
+				...rawSettings,
+				lightbox: undefined,
+			} );
+
+			// Otherwise, we simply set the lightbox setting to the new value but
+			// taking care of not overriding the other lightbox settings.
+		} else {
+			setSettings( {
+				...rawSettings,
+				lightbox: {
+					...rawSettings.lightbox,
+					...newSetting,
+				},
+			} );
+		}
 	};
 	const onChangeBorders = ( newStyle ) => {
 		if ( ! newStyle?.border ) {
@@ -265,6 +280,7 @@ function ScreenBlock( { name, variation } ) {
 				<ImageSettingsPanel
 					onChange={ onChangeLightbox }
 					userSettings={ userSettings }
+					settings={ settings }
 				/>
 			) }