Add support for reading top-level 'lightbox' setting in editor

By default, we read the lightbox settings underneath the 'core/image'
in theme.json; however, the 'enabled' property there is undefined by default,
which means it should be possible to declare a top-level setting for the lightbox
that overrides an undefined block-level setting.

While this appeared to be working on the PHP side, the UI wasn't accurately
reflecting this inheritance structure, so this commit fixes that.

Users should now be able to define a top-level lightbox setting as either
'lightbox: true' or 'lightbox: { enabled: true }' that will be used
if the block-level lightbox setting for 'enabled' is undefined.

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 (
 		<>

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 = (
 		<>

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 }
 				/>
 			) }