Block Editor: Optimize 'Connections' inspector controls

WordPress · Nov 22, 2023 · ef07edc · ef07edc
1 parent 1694514
commit ef07edc
Showing 1 changed file with 68 additions and 65 deletions.
diff --git a/packages/block-editor/src/hooks/custom-fields.js b/packages/block-editor/src/hooks/custom-fields.js
@@ -34,6 +34,65 @@ function addAttribute( settings ) {
 	return settings;
 }
 
+function CustomFieldsControl( props ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	// 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';
+
+	return (
+		<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>
+	);
+}
+
 /**
  * Override the default edit UI to include a new block inspector control for
  * assigning a connection to blocks that has support for connections.
@@ -46,7 +105,6 @@ function addAttribute( settings ) {
  */
 const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 	return ( props ) => {
-		const blockEditingMode = useBlockEditingMode();
 		const hasCustomFieldsSupport = hasBlockSupport(
 			props.name,
 			'__experimentalConnections',
@@ -56,72 +114,17 @@ const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
 		// 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 } />;
+			return <BlockEdit key="edit" { ...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 } />;
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{ hasCustomFieldsSupport && props.isSelected && (
+					<CustomFieldsControl { ...props } />
+				) }
+			</>
+		);
 	};
 }, 'withCustomFieldsControls' );