Skip to content

Commit

Permalink
Block Editor: Optimize 'Connections' inspector controls (#56443)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mamaduka
Mamaduka authored Nov 23, 2023
1 parent 6510154 commit c03a097
Showing 1 changed file with 68 additions and 65 deletions.
133 changes: 68 additions & 65 deletions packages/block-editor/src/hooks/custom-fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -46,7 +105,6 @@ function addAttribute( settings ) {
*/
const withCustomFieldsControls = createHigherOrderComponent( ( BlockEdit ) => {
return ( props ) => {
const blockEditingMode = useBlockEditingMode();
const hasCustomFieldsSupport = hasBlockSupport(
props.name,
'__experimentalConnections',
Expand All @@ -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' );

Expand Down

1 comment on commit c03a097

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in c03a097.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6967143442
📝 Reported issues:

Please sign in to comment.