diff --git a/packages/block-editor/src/hooks/behaviors.js b/packages/block-editor/src/hooks/behaviors.js index 706d3638e345ac..63230b6ee273f4 100644 --- a/packages/block-editor/src/hooks/behaviors.js +++ b/packages/block-editor/src/hooks/behaviors.js @@ -18,7 +18,12 @@ import { store as blockEditorStore } from '../store'; */ import merge from 'deepmerge'; -function BehaviorsControl( { blockName, blockBehaviors, onChange } ) { +function BehaviorsControl( { + blockName, + blockBehaviors, + onChange, + disabled = false, +} ) { const { settings, themeBehaviors } = useSelect( ( select ) => { const { getBehaviors, getSettings } = select( blockEditorStore ); @@ -61,6 +66,10 @@ function BehaviorsControl( { blockName, blockBehaviors, onChange } ) { const options = [ noBehaviorsOption, ...behaviorsOptions ]; + const helpText = disabled + ? __( 'The lightbox behavior is disabled for linked images.' ) + : __( 'Add behaviors.' ); + return ( ); @@ -95,7 +105,9 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => { if ( props.name !== 'core/image' ) { return blockEdit; } - + const blockHasLink = + typeof props.attributes?.linkDestination !== 'undefined' && + props.attributes?.linkDestination !== 'none'; return ( <> { blockEdit } @@ -111,6 +123,7 @@ export const withBehaviors = createHigherOrderComponent( ( BlockEdit ) => { }, } ); } } + disabled={ blockHasLink } /> ); diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js index 12be68b8f94793..519b6f8713e870 100644 --- a/test/e2e/specs/editor/various/behaviors.spec.js +++ b/test/e2e/specs/editor/various/behaviors.spec.js @@ -216,6 +216,43 @@ test.describe( 'Testing behaviors functionality', () => { await select.selectOption( { label: 'No behaviors' } ); await expect( select ).toHaveValue( '' ); } ); + + test( 'Lightbox behavior is disabled if the Image has a link', async ( { + admin, + editor, + requestUtils, + page, + behaviorUtils, + } ) => { + // In this theme, the default value for settings.behaviors.blocks.core/image.lightbox is `true`. + await requestUtils.activateTheme( 'behaviors-enabled' ); + await admin.createNewPost(); + const media = await behaviorUtils.createMedia(); + + await editor.insertBlock( { + name: 'core/image', + attributes: { + alt: filename, + id: media.id, + url: media.source_url, + linkDestination: 'custom', + }, + } ); + + await editor.openDocumentSettingsSidebar(); + const editorSettings = page.getByRole( 'region', { + name: 'Editor settings', + } ); + await editorSettings + .getByRole( 'button', { name: 'Advanced' } ) + .click(); + const select = editorSettings.getByRole( 'combobox', { + name: 'Behavior', + } ); + + // The behaviors dropdown should be present but disabled. + await expect( select ).toBeDisabled(); + } ); } ); class BehaviorUtils {