Use behaviors.blocks.core/image.lightbox

lib/theme.json

@@ -1,7 +1,11 @@
 {
 	"version": 2,
 	"behaviors": {
-		"lightbox": false
+		"blocks": {
+			"core/image": {
+				"lightbox": false
+			}
+		}
 	},
 	"settings": {
 		"appearanceTools": false,

packages/block-editor/package.json

@@ -65,6 +65,7 @@
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",

packages/block-editor/src/hooks/behaviors.js

@@ -13,6 +13,11 @@ import { select } from '@wordpress/data';
 import { InspectorControls } from '../components';
 import { store as blockEditorStore } from '../store';
 
+/**
+ * External dependencies
+ */
+import merge from 'deepmerge';
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning behaviors to blocks if behaviors are enabled in the theme.json.
@@ -44,12 +49,12 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => {
 
 		const { behaviors: blockBehaviors } = props.attributes;
 
-		// Get the theme behaviors from the theme.json.
-		const themeBehaviors = select( blockEditorStore ).getBehaviors();
+		// Get the theme behaviors for the block from the theme.json.
+		const themeBehaviors =
+			select( blockEditorStore ).getBehaviors()?.blocks?.[ props.name ];
 
-		// By default, use the block behaviors.
-		// If the theme has behaviors, but the block does not, use the theme behaviors.
-		const behaviors = blockBehaviors || themeBehaviors || {};
+		// Block behaviors take precedence over theme behaviors.
+		const behaviors = merge( themeBehaviors, blockBehaviors || {} );
 
 		return (
 			<>

test/e2e/specs/editor/various/behaviors.spec.js

@@ -129,7 +129,7 @@ test.describe( 'Testing behaviors functionality', () => {
 		requestUtils,
 		page,
 	} ) => {
-		// In this theme, the default value for settings.behaviors.lightbox is `true`.
+		// In this theme, the default value for settings.behaviors.blocks.core/image.lightbox is `true`.
 		await requestUtils.activateTheme( 'behaviors-enabled' );
 		const media = await createMedia( { admin, requestUtils } );
 

test/gutenberg-test-themes/behaviors-enabled/theme.json

@@ -1,6 +1,10 @@
 {
 	"version": 2,
 	"behaviors": {
-		"lightbox": true
+		"blocks": {
+			"core/image": {
+				"lightbox": true
+			}
+		}
 	}
 }