Allow contents of Paragraph to be "connected" to a meta custom field

docs/reference-guides/core-blocks.md

@@ -479,8 +479,8 @@ Start with the basic building block of all narrative. ([Source](https://github.c
 
 -	**Name:** core/paragraph
 -	**Category:** text
--	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
--	**Attributes:** align, content, direction, dropCap, placeholder
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), connections, spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+-	**Attributes:** align, connections, content, direction, dropCap, placeholder
 
 ## Pattern placeholder
 

lib/experimental/blocks.php

@@ -121,3 +121,67 @@ function gutenberg_register_metadata_attribute( $args ) {
 	return $args;
 }
 add_filter( 'register_block_type_args', 'gutenberg_register_metadata_attribute' );
+
+
+$gutenberg_experiments = get_option( 'gutenberg-experiments' );
+if ( $gutenberg_experiments && array_key_exists( 'gutenberg-connections', $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_custom_sources( $block_content, $block, $block_instance ) {
+		$meta_custom_source = require __DIR__ . '/custom-sources/meta.php';
+		$block_type         = $block_instance->block_type;
+
+		// Whitelist of the block types that support custom sources
+		// Currently, we only allow the Paragraph and Image blocks to use custom sources.
+		if ( ! in_array( $block['blockName'], array( 'core/paragraph', 'core/image' ), true ) ) {
+			return $block_content;
+		}
+
+		if ( null === $block_type ) {
+			return $block_content;
+		}
+
+		if ( ! block_has_support( $block_type, array( 'connections' ), false ) ) {
+			return $block_content;
+		}
+
+		// Get all the attributes that have a connection.
+		$connected_attributes = _wp_array_get( $block['attrs'], array( 'connections', 'attributes' ), false );
+		if ( ! $connected_attributes ) {
+			return $block_content;
+		}
+
+		foreach ( $connected_attributes as $attribute_name => $attribute_value ) {
+			// If the source value is not meta, skip it because we only support meta
+			// sources for now.
+			if ( 'meta_fields' !== $attribute_value['source'] ) {
+				continue;
+			}
+
+			// If the attribute does not have a source, skip it.
+			if ( ! isset( $block_type->attributes[ $attribute_name ]['source'] ) ) {
+				continue;
+			}
+
+			// If the attribute does not specify the name of the custom field, skip it.
+			if ( ! isset( $attribute_value['value'] ) ) {
+				continue;
+			}
+
+			$block_content = $meta_custom_source['apply_source'](
+				$block_content,
+				$block_instance,
+				$attribute_value['value'],
+				$block_type->attributes[ $attribute_name ]
+			);
+		}
+
+		return $block_content;
+	}
+	add_filter( 'render_block', 'gutenberg_render_custom_sources', 10, 3 );
+}

lib/experimental/custom-sources/meta.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Meta Custom Source
+ *
+ * @package gutenberg
+ */
+
+return array(
+	'name'         => 'meta',
+	'apply_source' => function ( $block_content, $block_instance, $meta_field, $attribute_config ) {
+		// We should probably also check if the meta field exists but for now it's okay because
+		// if it doesn't, `get_post_meta()` will just return an empty string.
+		$meta_value = get_post_meta( $block_instance->context['postId'], $meta_field, true );
+		$p          = new WP_HTML_Tag_Processor( $block_content );
+		$found      = $p->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' => $attribute_config['selector'],
+			)
+		);
+		if ( ! $found ) {
+			return $block_content;
+		}
+		$tag_name = $p->get_tag();
+		$markup   = "<$tag_name>$meta_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 . '';
+	},
+);

lib/experimental/editor-settings.php

@@ -87,6 +87,10 @@ function gutenberg_enable_experiments() {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' );
 	}
 
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-connections', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalConnections = true', 'before' );
+	}
+
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' );
 	}

lib/experiments-page.php

@@ -103,6 +103,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-custom-fields',
+		__( 'Connections', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Test Connections', 'gutenberg' ),
+			'id'    => 'gutenberg-connections',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/hooks/custom-fields.js

@@ -0,0 +1,136 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+
+/**
+ * Filters registered block settings, extending attributes to include `connections`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+export function addAttribute( settings ) {
+	if ( hasBlockSupport( settings, 'connections', true ) ) {
+		// Gracefully handle if settings.attributes is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			connections: {
+				type: 'object',
+			},
+		};
+	}
+
+	return settings;
+}
+
+/**
+ * Override the default edit UI to include a new block inspector control for
+ * assigning a connection to blocks that has support for connections.
+ * Currently, only the `core/paragraph` block is supported and there is only a relation
+ * between paragraph content and a custom field.
+ *
+ * @param {WPComponent} BlockEdit Original component.
+ *
+ * @return {WPComponent} Wrapped component.
+ */
+export const withInspectorControl = createHigherOrderComponent(
+	( BlockEdit ) => {
+		return ( props ) => {
+			const blockEditingMode = useBlockEditingMode();
+			const hasCustomFieldsSupport = hasBlockSupport(
+				props.name,
+				'connections',
+				false
+			);
+			// We prevent that the content is lost when the user removes the custom field.
+			// Editing the content in the paragraph block with a placeholder is not the best solution.
+			const prevContent = useRef( props.attributes?.content );
+			if ( ! prevContent.current ) {
+				prevContent.current = '';
+			}
+			if ( hasCustomFieldsSupport && props.isSelected ) {
+				return (
+					<>
+						<BlockEdit { ...props } />
+						{ blockEditingMode === 'default' && (
+							<InspectorControls>
+								<PanelBody
+									title={ __( 'Connections' ) }
+									initialOpen={ true }
+								>
+									<TextControl
+										__nextHasNoMarginBottom
+										autoComplete="off"
+										label={ __( 'Custom field meta_key' ) }
+										value={
+											props.attributes?.connections
+												?.attributes?.content?.value ||
+											''
+										}
+										onChange={ ( nextValue ) => {
+											if ( nextValue === '' ) {
+												props.setAttributes( {
+													connections: undefined,
+													content:
+														prevContent.current !==
+														''
+															? prevContent.current
+															: undefined,
+												} );
+											} else {
+												props.setAttributes( {
+													connections: {
+														attributes: {
+															// Content will be variable, could be content, href, src, etc.
+															content: {
+																// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+																// Could even be a custom source like a social media attribute.
+																source: 'meta_fields',
+																value: nextValue,
+															},
+														},
+													},
+													content: sprintf(
+														'This content will be replaced in the frontend by the custom field "%s" value.',
+														nextValue
+													),
+												} );
+											}
+										} }
+									/>
+								</PanelBody>
+							</InspectorControls>
+						) }
+					</>
+				);
+			}
+
+			return <BlockEdit { ...props } />;
+		};
+	},
+	'withInspectorControl'
+);
+if ( window.__experimentalConnections ) {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/connections/attribute',
+		addAttribute
+	);
+	addFilter(
+		'editor.BlockEdit',
+		'core/connections/with-inspector-control',
+		withInspectorControl
+	);
+}

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

@@ -21,6 +21,7 @@ import './content-lock-ui';
 import './metadata';
 import './metadata-name';
 import './behaviors';
+import './custom-fields';
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

packages/block-library/src/paragraph/block.json

@@ -7,6 +7,7 @@
 	"description": "Start with the basic building block of all narrative.",
 	"keywords": [ "text" ],
 	"textdomain": "default",
+	"usesContext": [ "postId" ],
 	"attributes": {
 		"align": {
 			"type": "string"
@@ -28,6 +29,14 @@
 		"direction": {
 			"type": "string",
 			"enum": [ "ltr", "rtl" ]
+		},
+		"connections": {
+			"type": "object",
+			"attributes": {
+				"content": {
+					"source": "meta_fields"
+				}
+			}
 		}
 	},
 	"supports": {
@@ -41,6 +50,7 @@
 				"text": true
 			}
 		},
+		"connections": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,