Experiment/add custom connections inspector control

docs/reference-guides/core-blocks.md

@@ -479,7 +479,7 @@ 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~~
+-	**Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), connections, spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
 -	**Attributes:** align, content, direction, dropCap, placeholder
 
 ## Pattern placeholder

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,143 @@
+/**
+ * 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';
+
+/**
+ * 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
+			);
+
+			// Check if the current block is a paragraph or image block.
+			// Currently, only these two blocks are supported.
+			if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) {
+				return <BlockEdit { ...props } />;
+			}
+
+			// If the block is a paragraph or image block, we need to know which
+			// attribute to use for the connection. Only the `content` attribute
+			// of the paragraph block and the `url` attribute of the image block are supported.
+			let attributeName;
+			if ( props.name === 'core/paragraph' ) attributeName = 'content';
+			if ( props.name === 'core/image' ) attributeName = 'url';
+
+			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?.[ attributeName ]
+												?.value || ''
+										}
+										onChange={ ( nextValue ) => {
+											if ( nextValue === '' ) {
+												props.setAttributes( {
+													connections: undefined,
+													[ attributeName ]:
+														undefined,
+													placeholder: undefined,
+												} );
+											} else {
+												props.setAttributes( {
+													connections: {
+														attributes: {
+															// The attributeName will be either `content` or `url`.
+															[ attributeName ]: {
+																// 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,
+															},
+														},
+													},
+													[ attributeName ]:
+														undefined,
+													placeholder: sprintf(
+														'This content will be replaced on the frontend by the value of "%s" custom field.',
+														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

@@ -41,6 +41,7 @@
 				"text": true
 			}
 		},
+		"connections": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,