Lightbox: allow deactivating from third-party plugins

[jeherve]

What problem does this address?

Image blocks offer an option to "expand on click", via the Lightbox feature developed here:
#51132

Since many other plugins already offer lightbox functionality, it would be useful if those third-party plugins could:

• detect whether Core's Lightbox feature is available so they can deactivate their own implementation in favor of Core;
• deactivate the Lightbox feature and its UI when needed (e.g. when said plugin offers a different lightbox solution that may conflict with Core, yet offer more options).

What is your proposed solution?

I do not have a solution today, unfortunately.

• It is possible to disable the option in the theme, via theme.json. That's not an option in plugins though.

	"settings": {
		"blocks": {
			"core/image": {
				"lightbox": {
					"enabled": false,
					"allowEditing": false
				}
			}
		},
	}

• Hooking into render_block_core/image isn't enough because the UI remains in the block editor.

• Hooking into blocks.registerBlockType like so doesn't seem to work:

/**
 * WordPress dependencies
 */
import { addFilter } from https://github.com/WordPress/gutenberg/tree/master/packages/hooks;

function removeLightbox( settings, name ) {
	if ( name !== 'core/image' ) {
		return settings;
	}

	return {
		...settings,
		lightbox: {
			allowEditing: false,
		},
	};
}

addFilter(
	'blocks.registerBlockType',
	'test/lightbox/remove',
	removeLightbox,
	50 // Adjust the priority to run after any other filters that might override this.
);

• Hooking into block_type_metadata_settings doesn't work either:

function filter_metadata_registration( $settings, $metadata ) {
	if ($metadata['name'] === 'core/image') {
		 return array_merge($metadata, array(
        	"lightbox" => array(
            	"allowEditing" => false
        	)
    	));
	}
    return $metadata;
};

add_filter( 'block_type_metadata_settings', 'filter_metadata_registration', 5, 2 );

[annezazu]

Thanks so much for opening this. Tagging in @gziolo as I personally ran into this on a site using Jetpack and found myself confused about what was going on.

[michalczaplinski]

Thanks for opening the issue! I believe that adding a filter in PHP or in JS like outlined in the opening message should be enough to disable the Lightbox. This might be a bug in the implementation, but I would have to dig a bit to confirm.

Also pinging @artemiomorales

[gziolo]

@ndiego or @justintadlock, do you know how plugin authors could disable the Lightbox for the Image block in a way that overrides the settings from the theme?

[t-hamano]

lightbox.allowEditing is not defined with block support, so it appears that no blocks.registerBlockType JS filter, or block_type_metadata_settings PHP filter are available. Additionally, there is an issue where this feature cannot be disabled at the top level.

• Image lightbox: configure lightbox settings in theme.json at the top-level #54858

Therefore, I think it is necessary to disable support at the block level in the default theme.json using a hook like the one below.

function custom_wp_theme_json_default( $theme_json ) {
	$new_data = array(
		'version'  => 2,
		'settings' => array(
			'blocks' => array(
				'core/image' => array(
					'lightbox' => array(
						'allowEditing' => false,
					),
				),
			),
		),
	);
	return $theme_json->update_with( $new_data );
}
add_filter( 'wp_theme_json_data_default', 'custom_wp_theme_json_default' );

[justintadlock]

I would think you'd use the wp_theme_json_data_theme hook or even wp_theme_json_data_user instead of wp_theme_json_data_default to ensure you're overwriting the theme or user's JSON settings, but what @t-hamano shared above should work. Basically, just filter the theme.json data and you can override how Lightbox works.

[jeherve]

Thank you all!

I've tried with all 3 filters to set allowEditing (and enabled) to false; they do allow you to modify the theme data. However, that doesn't appear to have any impact on the UI in the editor or the functionality on the frontend: the lightbox feature is still available.

Am I missing something obvious here? Does the code snippet above work for you?

[justintadlock]

It looks like the filter itself works. However, the implementation in the editor might be broken. I'm testing against WP 6.5 RC2.

This combination isn't disallowing editing:

• allowEditing: false
• enabled: true

With those two settings, I'm still able to change the lightbox status of an existing Image block and a newly-added Image block in the editor.

Tested with filter:

add_filter(
	'wp_theme_json_data_theme',
	fn($theme_json) => $theme_json->update_with([
		'version' => 2,
		'settings' => [
			'blocks' => [
				'core/image' => [
					'lightbox' => [
						'allowEditing' => false,
						'enabled'      => true
					]
				]
			]
		]
	])
);

I also tested this without the filter but setting it in theme.json:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"blocks": {
			"core/image": {
				"lightbox": {
					"allowEditing": false,
					"enabled": true
				}
			}
		}
	}
}

CC: @artemiomorales

This is a change in previous behavior from WordPress 6.4 and seems to be a regression and bug to me. I don't know if it's related to a change in the Lightbox toggle in the sidebar to the new location in the Link dropdown. #57608 Or something else altogether.

[t-hamano]

"allowEditing": false,
"enabled": true

This means that the lightbox is enabled by default but does not display any UI. In WP6.4 it was working as expected.

It's probably a regression caused by #57608. When deciding whether to display the UI, it only relies on enabled and does not consider whether allowEditing is false or not.

gutenberg/packages/block-editor/src/components/url-popover/image-url-input-ui.js

Line 344 in dc648e5

{ ! url && ! isEditingLink && lightboxEnabled && (

In other words, the problem this time is not that there is no way to completely disable lightbox, but that it is no longer possible to realize the requirement that lightbox be enabled by default, but that the UI should not be displayed.

[artemiomorales]

I believe this issue should be fixed by #59890, and that using the filter should disable the lightbox.
@jeherve Can you give this a shot to confirm?

[jeherve]

This seems to work well for me, thank you!

[artemiomorales]

This seems to work well for me, thank you!

Great, thanks for taking a look!

[gziolo]

This fix was released in WordPress 6.5.2.