Image block: UI updates for the image lightbox (redo)

docs/reference-guides/core-blocks.md

@@ -2,10 +2,9 @@
 
 This page lists the blocks included in the block-library package.
 
--	Items marked with a strikeout (~~strikeout~~) are explicitly disabled.
--	Blocks marked with **Experimental:** true are only available when Gutenberg is active.
--	Blocks marked with **Experimental:** fse are only available in the Site Editor.
-
+-   Items marked with a strikeout (~~strikeout~~) are explicitly disabled.
+-   Blocks marked with **Experimental:** true are only available when Gutenberg is active.
+-   Blocks marked with **Experimental:** fse are only available in the Site Editor.
 
 <!-- START TOKEN Autogenerated - DO NOT EDIT -->
 
@@ -339,8 +338,8 @@ Insert an image to make a visual statement. ([Source](https://github.com/WordPre
 
 -	**Name:** core/image
 -	**Category:** media
--	**Supports:** anchor, behaviors (lightbox), color (~~background~~, ~~text~~), filter (duotone)
--	**Attributes:** align, alt, aspectRatio, caption, height, href, id, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
+-	**Supports:** anchor, color (~~background~~, ~~text~~), filter (duotone)
+-	**Attributes:** align, alt, aspectRatio, caption, height, href, id, lightbox, linkClass, linkDestination, linkTarget, rel, scale, sizeSlug, title, url, width
 
 ## Latest Comments
 

docs/reference-guides/theme-json-reference/theme-json-living.md

@@ -130,6 +130,17 @@ Settings related to layout.
 
 ---
 
+### lightbox
+
+Settings related to the lightbox.
+
+| Property  | Type   | Default | Props  |
+| ---       | ---    | ---    |---   |
+| enabled | boolean |  |  |
+| allowEditing | boolean |  |  |
+
+---
+
 ### position
 
 Settings related to position.
@@ -183,16 +194,6 @@ Settings related to typography.
 Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-key}: {value};`. `camelCased` keys are transformed to `kebab-case` as to follow the CSS property naming schema. Keys at different depth levels are separated by `--`, so keys should not include `--` in the name.
 
 
----
-
-### behaviors
-
-Settings related to behaviors.
-
-| Property  | Type   | Default | Props  |
-| ---       | ---    | ---    |---   |
-| lightbox | boolean | false |  |
-
 ---
 ## Styles
 

lib/block-supports/behaviors.php

@@ -2,6 +2,10 @@
 /**
  * Behaviors block support flag.
  *
+ * This file will NOT be backported to Core. It exists to provide a
+ * migration path for theme.json files that used the deprecated "behaviors".
+ * This file will be removed from Gutenberg in version 17.0.0.
+ *
  * @package gutenberg
  */
 
@@ -37,13 +41,23 @@ function gutenberg_register_behaviors_support( $block_type ) {
 
 /**
  * Add the directives and layout needed for the lightbox behavior.
- * This functions shouldn't be in this file. It should be moved to a package (or somewhere else), where all the behaviors logic is defined.
  *
  * @param  string $block_content Rendered block content.
  * @param  array  $block         Block object.
  * @return string                Filtered block content.
  */
 function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
+
+	// We've deprecated the lightbox implementation via behaviors.
+	// While we may continue to explore behaviors in the future, the lightbox
+	// logic seems very specific to the image and will likely never be a part
+	// of behaviors, even in the future. With that in mind, we've rewritten the lightbox
+	// to be a feature of the image block and will also soon remove the block_supports.
+	// *Note: This logic for generating the lightbox markup has been duplicated and moved
+	// to the image block's index.php.*
+	// See https://github.com/WordPress/gutenberg/issues/53403.
+	_deprecated_function( 'gutenberg_render_behaviors_support_lightbox', 'Gutenberg 17.0.0', '' );
+
 	$link_destination = isset( $block['attrs']['linkDestination'] ) ? $block['attrs']['linkDestination'] : 'none';
 	// Get the lightbox setting from the block attributes.
 	if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) {

lib/blocks.php

@@ -431,4 +431,33 @@ function gutenberg_legacy_wp_block_post_meta( $value, $object_id, $meta_key, $si
 
 	return $value;
 }
+
 add_filter( 'default_post_metadata', 'gutenberg_legacy_wp_block_post_meta', 10, 4 );
+
+/**
+ * Complements the lightbox implementation for the 'core/image' block.
+ *
+ * This function is INTENTIONALLY left out of core as it only provides
+ * backwards compatibility for the legacy lightbox syntax that was only
+ * introduced in Gutenberg. The legacy syntax was using the `behaviors` key in
+ * the block attrbutes and the `theme.json` file.
+ *
+ * @since 16.7.0
+ *
+ * @param array $block The block to check.
+ * @return array The block with the legacyLightboxSettings set if available.
+ */
+function gutenberg_should_render_lightbox( $block ) {
+
+	if ( 'core/image' !== $block['blockName'] ) {
+		return $block;
+	}
+
+	if ( isset( $block['attrs']['behaviors']['lightbox'] ) ) {
+		$block['legacyLightboxSettings'] = $block['attrs']['behaviors']['lightbox'];
+	}
+
+	return $block;
+}
+
+add_filter( 'render_block_data', 'gutenberg_should_render_lightbox', 15, 1 );

lib/class-wp-rest-global-styles-controller-gutenberg.php

@@ -302,7 +302,6 @@ public function update_item( $request ) {
 	 *
 	 * @since 5.9.0
 	 * @since 6.2.0 Added validation of styles.css property.
-	 * @since 6.4.0 Added validation of behaviors property.
 	 *
 	 * @param WP_REST_Request $request Request object.
 	 * @return stdClass|WP_Error Prepared item on success. WP_Error on when the custom CSS is not valid.
@@ -322,7 +321,7 @@ protected function prepare_item_for_database( $request ) {
 			}
 		}
 
-		if ( isset( $request['styles'] ) || isset( $request['settings'] ) || isset( $request['behaviors'] ) ) {
+		if ( isset( $request['styles'] ) || isset( $request['settings'] ) ) {
 			$config = array();
 			if ( isset( $request['styles'] ) ) {
 				if ( isset( $request['styles']['css'] ) ) {
@@ -340,11 +339,6 @@ protected function prepare_item_for_database( $request ) {
 			} elseif ( isset( $existing_config['settings'] ) ) {
 				$config['settings'] = $existing_config['settings'];
 			}
-			if ( isset( $request['behaviors'] ) ) {
-				$config['behaviors'] = $request['behaviors'];
-			} elseif ( isset( $existing_config['behaviors'] ) ) {
-				$config['behaviors'] = $existing_config['behaviors'];
-			}
 			$config['isGlobalStylesUserThemeJSON'] = true;
 			$config['version']                     = WP_Theme_JSON_Gutenberg::LATEST_SCHEMA;
 			$changes->post_content                 = wp_json_encode( $config );
@@ -367,7 +361,6 @@ protected function prepare_item_for_database( $request ) {
 	 *
 	 * @since 5.9.0
 	 * @since 6.2.0 Handling of style.css was added to WP_Theme_JSON.
-	 * @since 6.4.0 Added `behavior` field.
 	 *
 	 * @param WP_Post         $post    Global Styles post object.
 	 * @param WP_REST_Request $request Request object.
@@ -411,10 +404,6 @@ public function prepare_item_for_response( $post, $request ) { // phpcs:ignore V
 			$data['styles'] = ! empty( $config['styles'] ) && $is_global_styles_user_theme_json ? $config['styles'] : new stdClass();
 		}
 
-		if ( rest_is_field_included( 'behaviors', $fields ) ) {
-			$data['behaviors'] = ! empty( $config['behaviors'] ) && $is_global_styles_user_theme_json ? $config['behaviors'] : new stdClass();
-		}
-
 		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
 		$data    = $this->add_additional_fields_to_object( $data, $request );
 		$data    = $this->filter_response_by_context( $data, $context );
@@ -521,7 +510,6 @@ public function get_collection_params() {
 	 * Retrieves the global styles type' schema, conforming to JSON Schema.
 	 *
 	 * @since 5.9.0
-	 * @since 6.4.0 Added `behaviors` property.
 	 *
 	 * @return array Item schema data.
 	 */
@@ -535,28 +523,23 @@ public function get_item_schema() {
 			'title'      => $this->post_type,
 			'type'       => 'object',
 			'properties' => array(
-				'id'        => array(
+				'id'       => array(
 					'description' => __( 'ID of global styles config.', 'gutenberg' ),
 					'type'        => 'string',
 					'context'     => array( 'embed', 'view', 'edit' ),
 					'readonly'    => true,
 				),
-				'styles'    => array(
+				'styles'   => array(
 					'description' => __( 'Global styles.', 'gutenberg' ),
 					'type'        => array( 'object' ),
 					'context'     => array( 'view', 'edit' ),
 				),
-				'settings'  => array(
+				'settings' => array(
 					'description' => __( 'Global settings.', 'gutenberg' ),
 					'type'        => array( 'object' ),
 					'context'     => array( 'view', 'edit' ),
 				),
-				'behaviors' => array(
-					'description' => __( 'Global behaviors.', 'default' ),
-					'type'        => array( 'object' ),
-					'context'     => array( 'view', 'edit' ),
-				),
-				'title'     => array(
+				'title'    => array(
 					'description' => __( 'Title of the global styles variation.', 'gutenberg' ),
 					'type'        => array( 'object', 'string' ),
 					'default'     => '',
@@ -614,7 +597,6 @@ public function get_theme_item_permissions_check( $request ) { // phpcs:ignore V
 	 * Returns the given theme global styles config.
 	 *
 	 * @since 5.9.0
-	 * @since 6.4.0 Added value for `behaviors` rest field.
 	 *
 	 * @param WP_REST_Request $request The request instance.
 	 * @return WP_REST_Response|WP_Error
@@ -642,11 +624,6 @@ public function get_theme_item( $request ) {
 			$data['styles'] = isset( $raw_data['styles'] ) ? $raw_data['styles'] : array();
 		}
 
-		if ( rest_is_field_included( 'behaviors', $fields ) ) {
-			$raw_data          = $theme->get_raw_data();
-			$data['behaviors'] = isset( $raw_data['behaviors'] ) ? $raw_data['behaviors'] : array();
-		}
-
 		$context = ! empty( $request['context'] ) ? $request['context'] : 'view';
 		$data    = $this->add_additional_fields_to_object( $data, $request );
 		$data    = $this->filter_response_by_context( $data, $context );

lib/class-wp-theme-json-gutenberg.php

@@ -331,7 +331,6 @@ class WP_Theme_JSON_Gutenberg {
 		'templateParts',
 		'title',
 		'version',
-		'behaviors',
 	);
 
 	/**
@@ -347,6 +346,7 @@ class WP_Theme_JSON_Gutenberg {
 	 *              `position.fixed` and `position.sticky`.
 	 * @since 6.3.0 Removed `layout.definitions`. Added `typography.writingMode`.
 	 * @since 6.4.0 Added `layout.allowEditing`.
+	 * @since 6.4.0 Added `lightbox`.
 	 * @var array
 	 */
 	const VALID_SETTINGS = array(
@@ -387,6 +387,10 @@ class WP_Theme_JSON_Gutenberg {
 			'wideSize'     => null,
 			'allowEditing' => null,
 		),
+		'lightbox'                      => array(
+			'enabled'      => null,
+			'allowEditing' => null,
+		),
 		'position'                      => array(
 			'fixed'  => null,
 			'sticky' => null,
@@ -419,7 +423,6 @@ class WP_Theme_JSON_Gutenberg {
 			'textTransform'  => null,
 			'writingMode'    => null,
 		),
-		'behaviors'                     => null,
 	);
 
 	/**
@@ -618,7 +621,7 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) {
 			$origin = 'theme';
 		}
 
-		$this->theme_json    = WP_Theme_JSON_Schema::migrate( $theme_json );
+		$this->theme_json    = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json );
 		$registry            = WP_Block_Type_Registry::get_instance();
 		$valid_block_names   = array_keys( $registry->get_all_registered() );
 		$valid_element_names = array_keys( static::ELEMENTS );
@@ -2861,7 +2864,7 @@ protected static function filter_slugs( $node, $slugs ) {
 	public static function remove_insecure_properties( $theme_json ) {
 		$sanitized = array();
 
-		$theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+		$theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json );
 
 		$valid_block_names   = array_keys( static::get_blocks_metadata() );
 		$valid_element_names = array_keys( static::ELEMENTS );