Add block bindings API basis and metadata source

lib/experimental/block-bindings-api/html-processing.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Define the mechanism to replpace the HTML depending on the block attributes.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'block_bindings_replace_html' ) ) {
+	/**
+	 * Depending on the block attributes, replace the proper HTML based on the value returned by the source.
+	 *
+	 * @param string $block_content Block Content.
+	 * @param string $block_name The name of the block to process.
+	 * @param string $block_attr The attribute of the block we want to process.
+	 * @param string $source_value The value used to replace the HTML.
+	 */
+	function block_bindings_replace_html( $block_content, $block_name, $block_attr, $source_value ) {
+		$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+		if ( null === $block_type ) {
+			return;
+		}
+
+		// Depending on the attribute source, the processing will be different.
+		// TODO: Get the type from the block attribute definition and modify/validate the value returned by the source if needed.
+		switch ( $block_type->attributes[ $block_attr ]['source'] ) {
+			case 'html':
+				$p = new WP_HTML_Tag_Processor( $block_content );
+				if ( ! $p->next_tag(
+					array(
+						// TODO: build the query from CSS selector.
+						'tag_name' => $block_type->attributes[ $block_attr ]['selector'],
+					)
+				) ) {
+					return $block_content;
+				}
+				// TODO: We should use a `set_inner_html` method once available.
+				$tag_name = $p->get_tag();
+				$markup   = "<$tag_name>" . esc_html( $source_value ) . "</$tag_name>";
+				$p2       = new WP_HTML_Tag_Processor( $markup );
+				$p2->next_tag();
+				$names = $p->get_attribute_names_with_prefix( '' );
+				foreach ( $names as $name ) {
+					$p2->set_attribute( $name, $p->get_attribute( $name ) );
+				}
+				return $p2->get_updated_html();
+				break;
+
+			case 'attribute':
+				$p = new WP_HTML_Tag_Processor( $block_content );
+				if ( ! $p->next_tag(
+					array(
+						// TODO: build the query from CSS selector.
+						'tag_name' => $block_type->attributes[ $block_attr ]['selector'],
+					)
+				) ) {
+					return $block_content;
+				}
+				$p->set_attribute( $block_type->attributes[ $block_attr ]['attribute'], esc_attr( $source_value ) );
+				return $p->get_updated_html();
+				break;
+
+			default:
+				return $block_content;
+				break;
+		}
+		return;
+	}
+}

lib/experimental/block-bindings-api/index.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Require the necessary files.
+ *
+ * @package gutenberg
+ */
+
+require_once __DIR__ . '/sources/index.php';
+require_once __DIR__ . '/html-processing.php';
+
+// Register the sources.
+$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+if ( $gutenberg_experiments ) {
+	if ( array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments ) ) {
+		require_once __DIR__ . '/sources/pattern.php';
+	}
+	if ( array_key_exists( 'gutenberg-connections', $gutenberg_experiments ) ) {
+		require_once __DIR__ . '/sources/metadata.php';
+	}
+}

lib/experimental/block-bindings-api/sources/index.php

@@ -0,0 +1,23 @@
+<?php
+/**
+ * Define the mechanism to add new sources available in the block bindings API.
+ *
+ * @package gutenberg
+ */
+
+global $block_bindings_sources;
+$block_bindings_sources = array();
+if ( ! function_exists( 'register_block_bindings_source' ) ) {
+	/**
+	 * Function to register a new source.
+	 *
+	 * @param string   $source_name The name of the source.
+	 * @param function $source_callback The callback executed when the source is processed in the server.
+	 */
+	function register_block_bindings_source( $source_name, $source_callback ) {
+		// We might want to add some validation here, for the name and for the apply_source callback.
+		// To ensure the register sources are valid.
+		global $block_bindings_sources;
+		$block_bindings_sources[ $source_name ] = array( 'apply_source' => $source_callback );
+	}
+}

lib/experimental/block-bindings-api/sources/metadata.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Add the metadata source to the block bindings API.
+ *
+ * @package gutenberg
+ */
+
+if ( function_exists( 'register_block_bindings_source' ) ) {
+	$metadata_source_callback = function ( $source_attrs, $block_content, $block, $block_instance ) {
+		// Use the postId attribute if available, otherwise use the context.
+		if ( isset( $source_attrs['postId'] ) ) {
+			$post_id = $source_attrs['postId'];
+		} else {
+			// I tried using $block_instance->context['postId'] but it wasn't available in the image block.
+			$post_id = get_the_ID();
+		}
+
+		// TODO: Add logic to handle other meta types.
+		if ( isset( $source_attrs['metaType'] ) ) {
+			$meta_type = $source_attrs['metaType'];
+		} else {
+			$meta_type = 'post';
+		}
+
+		// TODO: Add a filter/mechanism to limit the meta keys that can be used.
+		return get_metadata( $meta_type, $post_id, $source_attrs['value'], true );
+	};
+	register_block_bindings_source( 'metadata', $metadata_source_callback );
+}

lib/experimental/block-bindings-api/sources/pattern.php

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Add the metadata source to the block bindings API.
+ *
+ * @package gutenberg
+ */
+
+if ( function_exists( 'register_block_bindings_source' ) ) {
+	$pattern_source_callback = function ( $source_attrs, $block_content, $block, $block_instance ) {
+		if ( ! _wp_array_get( $block_instance->attributes, array( 'metadata', 'id' ), false ) ) {
+			return;
+		}
+		$block_id = $block_instance->attributes['metadata']['id'];
+		return _wp_array_get( $block_instance->context, array( 'pattern/overrides', $block_id ), false );
+	};
+	register_block_bindings_source( 'pattern_attributes', $pattern_source_callback );
+}

lib/experimental/blocks.php

@@ -78,123 +78,85 @@ function wp_enqueue_block_view_script( $block_name, $args ) {
 	}
 }
 
-
-
-
 $gutenberg_experiments = get_option( 'gutenberg-experiments' );
 if ( $gutenberg_experiments && (
 	array_key_exists( 'gutenberg-connections', $gutenberg_experiments ) ||
 	array_key_exists( 'gutenberg-pattern-partial-syncing', $gutenberg_experiments )
 ) ) {
-	/**
-	 * Renders the block meta attributes.
-	 *
-	 * @param string   $block_content Block Content.
-	 * @param array    $block Block attributes.
-	 * @param WP_Block $block_instance The block instance.
-	 */
-	function gutenberg_render_block_connections( $block_content, $block, $block_instance ) {
-		$connection_sources = require __DIR__ . '/connection-sources/index.php';
-		$block_type         = $block_instance->block_type;
-
-		// Allowlist of blocks that support block connections.
-		// Currently, we only allow the following blocks and attributes:
-		// - Paragraph: content.
-		// - Image: url.
-		$blocks_attributes_allowlist = array(
-			'core/paragraph' => array( 'content' ),
-			'core/image'     => array( 'url' ),
-		);
-
-		// Whitelist of the block types that support block connections.
-		// Currently, we only allow the Paragraph and Image blocks to use block connections.
-		if ( ! in_array( $block['blockName'], array_keys( $blocks_attributes_allowlist ), true ) ) {
-			return $block_content;
-		}
-
-		// If for some reason, the block type is not found, skip it.
-		if ( null === $block_type ) {
-			return $block_content;
-		}
-
-		// If the block does not have support for block connections, skip it.
-		if ( ! block_has_support( $block_type, array( '__experimentalConnections' ), false ) ) {
-			return $block_content;
-		}
-
-		// Get all the attributes that have a connection.
-		$connected_attributes = $block['attrs']['connections']['attributes'] ?? false;
-		if ( ! $connected_attributes ) {
-			return $block_content;
-		}
-
-		foreach ( $connected_attributes as $attribute_name => $attribute_value ) {
-
-			// If the attribute is not in the allowlist, skip it.
-			if ( ! in_array( $attribute_name, $blocks_attributes_allowlist[ $block['blockName'] ], true ) ) {
-				continue;
-			}
 
-			// Skip if the source value is not "meta_fields" or "pattern_attributes".
-			if ( 'meta_fields' !== $attribute_value['source'] && 'pattern_attributes' !== $attribute_value['source'] ) {
-				continue;
-			}
-
-			// If the attribute does not have a source, skip it.
-			if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) {
-				continue;
+	require_once __DIR__ . '/block-bindings-api/index.php';
+	// Whitelist of blocks that support block bindings.
+	// We should look for a mechanism to opt-in for this. Maybe adding a property to block attributes?
+	global $block_bindings_whitelist;
+	$block_bindings_whitelist = array(
+		'core/paragraph' => array( 'content' ),
+		'core/heading'   => array( 'content' ),
+		'core/image'     => array( 'url', 'title' ),
+		'core/button'    => array( 'url', 'text' ),
+	);
+	if ( ! function_exists( 'process_block_bindings' ) ) {
+		/**
+		 * Process the block bindings attribute.
+		 *
+		 * @param string   $block_content Block Content.
+		 * @param array    $block Block attributes.
+		 * @param WP_Block $block_instance The block instance.
+		 */
+		function process_block_bindings( $block_content, $block, $block_instance ) {
+			// If the block doesn't have the bindings property, return.
+			if ( ! isset( $block['attrs']['metadata']['bindings'] ) ) {
+				return $block_content;
 			}
 
-			if ( 'pattern_attributes' === $attribute_value['source'] ) {
-				if ( ! _wp_array_get( $block_instance->attributes, array( 'metadata', 'id' ), false ) ) {
+			// TODO: Review the bindings syntax.
+			// Assuming the following format for the bindings property of the "metadata" attribute:
+			//
+			// "bindings": {
+			// "title": {
+			// "source": {
+			// "id": "metadata",
+			// "params": { "value": "text_custom_field" }
+			// }
+			// },
+			// "url": {
+			// "source": {
+			// "id": "metadata",
+			// "params": { "value": "text_custom_field" }
+			// }
+			// }
+			// },
+			// .
+			global $block_bindings_whitelist;
+			global $block_bindings_sources;
+			$modified_block_content = $block_content;
+			foreach ( $block['attrs']['metadata']['bindings'] as $binding_attribute => $binding_source ) {
+				if ( ! isset( $block_bindings_whitelist[ $block['blockName'] ] ) ) {
 					continue;
 				}
-
-				$custom_value = $connection_sources[ $attribute_value['source'] ]( $block_instance );
-			} else {
-				// If the attribute does not specify the name of the custom field, skip it.
-				if ( ! isset( $attribute_value['value'] ) ) {
+				if ( ! in_array( $binding_attribute, $block_bindings_whitelist[ $block['blockName'] ], true ) ) {
 					continue;
 				}
 
-				// Get the content from the connection source.
-				$custom_value = $connection_sources[ $attribute_value['source'] ](
-					$block_instance,
-					$attribute_value['value']
-				);
-			}
-
-			if ( false === $custom_value ) {
-				continue;
-			}
-
-			$tags  = new WP_HTML_Tag_Processor( $block_content );
-			$found = $tags->next_tag(
-				array(
-					// TODO: In the future, when blocks other than Paragraph and Image are
-					// supported, we should build the full query from CSS selector.
-					'tag_name' => $block_type->attributes[ $attribute_name ]['selector'],
-				)
-			);
-			if ( ! $found ) {
-				return $block_content;
-			}
-			$tag_name     = $tags->get_tag();
-			$markup       = "<$tag_name>$custom_value</$tag_name>";
-			$updated_tags = new WP_HTML_Tag_Processor( $markup );
-			$updated_tags->next_tag();
+				// Get the value based on the source.
+				// We might want to move this to its own function if it gets more complex.
+				// We pass $block_content, $block, $block_instance to the source callback in case sources want to use them.
+				if ( ! isset( $block_bindings_sources[ $binding_source['source']['id'] ]['apply_source'] ) ) {
+					return $block_content;
+				}
+				$source_value = $block_bindings_sources[ $binding_source['source']['id'] ]['apply_source']( $binding_source['source']['params'], $block_content, $block, $block_instance );
+				if ( false === $source_value ) {
+					return $block_content;
+				}
 
-			// Get all the attributes from the original block and add them to the new markup.
-			$names = $tags->get_attribute_names_with_prefix( '' );
-			foreach ( $names as $name ) {
-				$updated_tags->set_attribute( $name, $tags->get_attribute( $name ) );
+				// Process the HTML based on the block and the attribute.
+				$modified_block_content = block_bindings_replace_html( $modified_block_content, $block['blockName'], $binding_attribute, $source_value );
 			}
-
-			return $updated_tags->get_updated_html();
+			return $modified_block_content;
 		}
 
-		return $block_content;
+		// Add filter only to the blocks in the whitelist.
+		foreach ( $block_bindings_whitelist as $block_name => $attributes ) {
+			add_filter( 'render_block_' . $block_name, 'process_block_bindings', 20, 3 );
+		}
 	}
-
-	add_filter( 'render_block', 'gutenberg_render_block_connections', 10, 3 );
 }

packages/block-editor/README.md

@@ -810,6 +810,18 @@ _Properties_
 
 Ensures that the text selection keeps the same vertical distance from the viewport during keyboard events within this component. The vertical distance can vary. It is the last clicked or scrolled to position.
 
+### updateBlockBindingsAttribute
+
+Helper to update the bindings attribute used by the Block Bindings API.
+
+_Parameters_
+
+-   _blockAttributes_ `Object`: - The original block attributes.
+-   _setAttributes_ `Function`: - setAttributes function to modify the bindings property.
+-   _updatingAttribute_ `string`: - The attribute in the bindings object to update.
+-   _sourceName_ `string`: - The source name added to the bindings property.
+-   _sourceParams_ `string`: - The source params added to the bindings property.
+
 ### URLInput
 
 _Related_

packages/block-editor/src/utils/index.js

@@ -1,3 +1,4 @@
 export { default as transformStyles } from './transform-styles';
 export * from './block-variation-transforms';
 export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
+export * from './update-bindings';