From 77047c3549f120904d7bccfb54f2f2fa28bac744 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 1 Aug 2023 11:29:26 +0200 Subject: [PATCH 01/13] Add custom fields experimental setting --- lib/experimental/editor-settings.php | 4 ++++ lib/experiments-page.php | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 9c7f66a587a3aa..987d1cfd87c22b 100644 --- a/lib/experimental/editor-settings.php +++ b/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-custom-fields', $gutenberg_experiments ) ) { + wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomFields = true', 'before' ); + } + if ( gutenberg_is_experiment_enabled( 'gutenberg-no-tinymce' ) ) { wp_add_inline_script( 'wp-block-library', 'window.__experimentalDisableTinymce = true', 'before' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 3f468d0cbd12db..70362aca7518fa 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -103,6 +103,18 @@ function gutenberg_initialize_experiments_settings() { ) ); + add_settings_field( + 'gutenberg-custom-fields', + __( 'Custom Fields', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Test Custom Fields', 'gutenberg' ), + 'id' => 'gutenberg-custom-fields', + ) + ); + register_setting( 'gutenberg-experiments', 'gutenberg-experiments' From ff1224810b17d296492377991d1fb9ad41fdc7a3 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Tue, 1 Aug 2023 18:12:43 +0200 Subject: [PATCH 02/13] Add connections experimental setting, block inspector control and block attributes --- docs/reference-guides/core-blocks.md | 2 +- lib/experimental/editor-settings.php | 4 +- lib/experiments-page.php | 6 +- .../block-editor/src/hooks/custom-fields.js | 133 ++++++++++++++++++ packages/block-editor/src/hooks/index.js | 1 + .../block-library/src/paragraph/block.json | 1 + 6 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 packages/block-editor/src/hooks/custom-fields.js diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 51813220e58240..347165330b10c4 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 987d1cfd87c22b..2059f3db5c5366 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -87,8 +87,8 @@ function gutenberg_enable_experiments() { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' ); } - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-custom-fields', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalCustomFields = 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' ) ) { diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 70362aca7518fa..9405cb344010ec 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -105,13 +105,13 @@ function gutenberg_initialize_experiments_settings() { add_settings_field( 'gutenberg-custom-fields', - __( 'Custom Fields', 'gutenberg' ), + __( 'Connections', 'gutenberg' ), 'gutenberg_display_experiment_field', 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test Custom Fields', 'gutenberg' ), - 'id' => 'gutenberg-custom-fields', + 'label' => __( 'Test Connections', 'gutenberg' ), + 'id' => 'gutenberg-connections', ) ); diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js new file mode 100644 index 00000000000000..5f7f96808146fc --- /dev/null +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -0,0 +1,133 @@ +/** + * 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 ( + <> + + { blockEditingMode === 'default' && ( + + + { + if ( nextValue === '' ) { + props.setAttributes( { + connections: undefined, + content: + prevContent.current !== + '' + ? prevContent.current + : undefined, + } ); + } else { + props.setAttributes( { + connections: { + // 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 + ), + } ); + } + } } + /> + + + ) } + + ); + } + + return ; + }; + }, + 'withInspectorControl' +); +if ( window.__experimentalConnections ) { + addFilter( + 'blocks.registerBlockType', + 'core/connections/attribute', + addAttribute + ); + addFilter( + 'editor.BlockEdit', + 'core/connections/with-inspector-control', + withInspectorControl + ); +} diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index a66aa0a73ed411..6834d859d25453 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/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'; diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 7e13b13dc4feb9..d8fa3ac19af83f 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -41,6 +41,7 @@ "text": true } }, + "connections": true, "spacing": { "margin": true, "padding": true, From 7575b404a65d93044bc96b3100e529ea1490d7a1 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Wed, 2 Aug 2023 14:16:20 +0100 Subject: [PATCH 03/13] Updated the 'connections' property to include 'attributes' --- packages/block-editor/src/hooks/custom-fields.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 5f7f96808146fc..47a75484c91540 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -91,12 +91,14 @@ export const withInspectorControl = createHigherOrderComponent( } else { props.setAttributes( { connections: { - // 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, + 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( From fa042cabb86134d6d537dd63a0107205dcf98372 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Wed, 2 Aug 2023 14:49:54 +0100 Subject: [PATCH 04/13] Add `attributes` to TextControl value --- packages/block-editor/src/hooks/custom-fields.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 47a75484c91540..89677d1bf556a8 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -76,7 +76,8 @@ export const withInspectorControl = createHigherOrderComponent( label={ __( 'Custom field meta_key' ) } value={ props.attributes?.connections - ?.content?.value || '' + ?.attributes?.content?.value || + '' } onChange={ ( nextValue ) => { if ( nextValue === '' ) { From 9f0d8510374064b3189ef7e5fb0480da91b8f06e Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 2 Aug 2023 18:57:06 +0200 Subject: [PATCH 05/13] Update comment --- packages/block-editor/src/hooks/custom-fields.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 89677d1bf556a8..33fd3e5046cbb5 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -56,6 +56,7 @@ export const withInspectorControl = createHigherOrderComponent( ); // 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. + // As this is a temporary solution, that will be removed soon, we can live with it. const prevContent = useRef( props.attributes?.content ); if ( ! prevContent.current ) { prevContent.current = ''; From 1c65e748ef7e39501009ef99706c79a80c6e7652 Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 2 Aug 2023 19:16:41 +0200 Subject: [PATCH 06/13] Clear the paragraph if meta value is cleared --- packages/block-editor/src/hooks/custom-fields.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 33fd3e5046cbb5..c1b8037a1c0cdb 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -6,7 +6,6 @@ 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 @@ -54,13 +53,6 @@ export const withInspectorControl = createHigherOrderComponent( '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. - // As this is a temporary solution, that will be removed soon, we can live with it. - const prevContent = useRef( props.attributes?.content ); - if ( ! prevContent.current ) { - prevContent.current = ''; - } if ( hasCustomFieldsSupport && props.isSelected ) { return ( <> @@ -84,11 +76,7 @@ export const withInspectorControl = createHigherOrderComponent( if ( nextValue === '' ) { props.setAttributes( { connections: undefined, - content: - prevContent.current !== - '' - ? prevContent.current - : undefined, + content: undefined, } ); } else { props.setAttributes( { From 8638dff966ebf4e049733e72da355e52ceca1d7b Mon Sep 17 00:00:00 2001 From: Carlos Bravo Date: Wed, 2 Aug 2023 19:19:16 +0200 Subject: [PATCH 07/13] Use placeholders instead of content --- packages/block-editor/src/hooks/custom-fields.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index c1b8037a1c0cdb..f3d562e019d1ed 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -77,6 +77,7 @@ export const withInspectorControl = createHigherOrderComponent( props.setAttributes( { connections: undefined, content: undefined, + placeholder: undefined, } ); } else { props.setAttributes( { @@ -91,7 +92,8 @@ export const withInspectorControl = createHigherOrderComponent( }, }, }, - content: sprintf( + content: undefined, + placeholder: sprintf( 'This content will be replaced in the frontend by the custom field "%s" value.', nextValue ), From 713c6df868d924475b36c092a6e49ca47b578a21 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 3 Aug 2023 17:09:54 +0100 Subject: [PATCH 08/13] Rephrase the placeholder comment --- packages/block-editor/src/hooks/custom-fields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index f3d562e019d1ed..4325d33987f645 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -94,7 +94,7 @@ export const withInspectorControl = createHigherOrderComponent( }, content: undefined, placeholder: sprintf( - 'This content will be replaced in the frontend by the custom field "%s" value.', + 'This content will be replaced on the frontend by the value of "%s" custom field.', nextValue ), } ); From e80effea1bd585cbf1f44aec0f6a918df68a5cda Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 3 Aug 2023 17:13:39 +0100 Subject: [PATCH 09/13] Check if current block is a paragraph or image --- packages/block-editor/src/hooks/custom-fields.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 4325d33987f645..789f543c9de189 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -53,6 +53,12 @@ export const withInspectorControl = createHigherOrderComponent( 'connections', false ); + + // Check if the current block is a paragraph or image block. + if ( ! [ 'core/paragraph', 'core/image' ].includes( props.name ) ) { + return ; + } + if ( hasCustomFieldsSupport && props.isSelected ) { return ( <> From 7640a60d1aee41d46b47f8b9842ebeac0e9c03fd Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Thu, 3 Aug 2023 17:40:23 +0100 Subject: [PATCH 10/13] Abstract the attribute name to use for the connection --- .../block-editor/src/hooks/custom-fields.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 789f543c9de189..63821a15b2873e 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -55,10 +55,18 @@ export const withInspectorControl = createHigherOrderComponent( ); // 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 ; } + // 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 ( <> @@ -75,22 +83,23 @@ export const withInspectorControl = createHigherOrderComponent( label={ __( 'Custom field meta_key' ) } value={ props.attributes?.connections - ?.attributes?.content?.value || - '' + ?.attributes?.[ attributeName ] + ?.value || '' } onChange={ ( nextValue ) => { if ( nextValue === '' ) { props.setAttributes( { connections: undefined, - content: undefined, + [ attributeName ]: + undefined, placeholder: undefined, } ); } else { props.setAttributes( { connections: { attributes: { - // Content will be variable, could be content, href, src, etc. - content: { + // 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', @@ -98,7 +107,8 @@ export const withInspectorControl = createHigherOrderComponent( }, }, }, - content: undefined, + [ attributeName ]: + undefined, placeholder: sprintf( 'This content will be replaced on the frontend by the value of "%s" custom field.', nextValue From f0bcb0fb04f9412fb67303f12c101c073a7bc0c6 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 7 Aug 2023 12:26:35 +0100 Subject: [PATCH 11/13] rename `connections` to `__experimentalConnections` --- docs/reference-guides/core-blocks.md | 2 +- packages/block-editor/src/hooks/custom-fields.js | 8 ++++---- packages/block-library/src/paragraph/block.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 347165330b10c4..51813220e58240 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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), connections, spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~ +- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~ - **Attributes:** align, content, direction, dropCap, placeholder ## Pattern placeholder diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 63821a15b2873e..6df76f8a085a18 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -14,18 +14,18 @@ import { InspectorControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; /** - * Filters registered block settings, extending attributes to include `connections`. + * Filters registered block settings, extending attributes to include `__experimentalConnections`. * * @param {Object} settings Original block settings. * * @return {Object} Filtered block settings. */ export function addAttribute( settings ) { - if ( hasBlockSupport( settings, 'connections', true ) ) { + if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) { // Gracefully handle if settings.attributes is undefined. settings.attributes = { ...settings.attributes, - connections: { + __experimentalConnections: { type: 'object', }, }; @@ -50,7 +50,7 @@ export const withInspectorControl = createHigherOrderComponent( const blockEditingMode = useBlockEditingMode(); const hasCustomFieldsSupport = hasBlockSupport( props.name, - 'connections', + '__experimentalConnections', false ); diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index d8fa3ac19af83f..db30d95db84756 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -41,7 +41,7 @@ "text": true } }, - "connections": true, + "__experimentalConnections": true, "spacing": { "margin": true, "padding": true, From 6a2785f6e51674a1ff0b9fe275ed00103cbc5321 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 7 Aug 2023 14:58:18 +0100 Subject: [PATCH 12/13] Do not export `addAttribute()` or `withInspectorControl()` --- .../block-editor/src/hooks/custom-fields.js | 156 +++++++++--------- 1 file changed, 76 insertions(+), 80 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 6df76f8a085a18..03f286386d27a1 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -20,7 +20,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode'; * * @return {Object} Filtered block settings. */ -export function addAttribute( settings ) { +function addAttribute( settings ) { if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) { // Gracefully handle if settings.attributes is undefined. settings.attributes = { @@ -44,91 +44,87 @@ export function addAttribute( settings ) { * * @return {WPComponent} Wrapped component. */ -export const withInspectorControl = createHigherOrderComponent( - ( BlockEdit ) => { - return ( props ) => { - const blockEditingMode = useBlockEditingMode(); - const hasCustomFieldsSupport = hasBlockSupport( - props.name, - '__experimentalConnections', - false - ); +const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) => { + return ( props ) => { + const blockEditingMode = useBlockEditingMode(); + const hasCustomFieldsSupport = hasBlockSupport( + props.name, + '__experimentalConnections', + 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 ; - } + // 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 ; + } - // 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 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 ( - <> - - { blockEditingMode === 'default' && ( - - - { - 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, - }, + if ( hasCustomFieldsSupport && props.isSelected ) { + return ( + <> + + { blockEditingMode === 'default' && ( + + + { + 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 - ), - } ); - } - } } - /> - - - ) } - - ); - } + }, + [ attributeName ]: undefined, + placeholder: sprintf( + 'This content will be replaced on the frontend by the value of "%s" custom field.', + nextValue + ), + } ); + } + } } + /> + + + ) } + + ); + } + + return ; + }; +}, 'withInspectorControl' ); - return ; - }; - }, - 'withInspectorControl' -); if ( window.__experimentalConnections ) { addFilter( 'blocks.registerBlockType', From 6d00a9bb35388e59e6d10901ebaefac9c5f69d4e Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Mon, 7 Aug 2023 16:14:05 +0100 Subject: [PATCH 13/13] Renamed '__experimentalConnections' to 'connections' in block settings --- packages/block-editor/src/hooks/custom-fields.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js index 03f286386d27a1..dbc8c3ec2c089f 100644 --- a/packages/block-editor/src/hooks/custom-fields.js +++ b/packages/block-editor/src/hooks/custom-fields.js @@ -14,7 +14,7 @@ import { InspectorControls } from '../components'; import { useBlockEditingMode } from '../components/block-editing-mode'; /** - * Filters registered block settings, extending attributes to include `__experimentalConnections`. + * Filters registered block settings, extending attributes to include `connections`. * * @param {Object} settings Original block settings. * @@ -22,10 +22,10 @@ import { useBlockEditingMode } from '../components/block-editing-mode'; */ function addAttribute( settings ) { if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) { - // Gracefully handle if settings.attributes is undefined. + // Gracefully handle if settings.attributes.connections is undefined. settings.attributes = { ...settings.attributes, - __experimentalConnections: { + connections: { type: 'object', }, };