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,135 @@
+/**
+ * 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
+ ?.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

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