From cf7e1de142c149bc9d4b53532be4f13359a26f4e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 13 Dec 2023 17:03:32 +0800 Subject: [PATCH 1/3] Use a single checkbox to turn on pattern overrides --- .../components/partial-syncing-controls.js | 72 ++++++++----------- 1 file changed, 31 insertions(+), 41 deletions(-) diff --git a/packages/patterns/src/components/partial-syncing-controls.js b/packages/patterns/src/components/partial-syncing-controls.js index 42c39ce69e87b..9efaa6aeef72e 100644 --- a/packages/patterns/src/components/partial-syncing-controls.js +++ b/packages/patterns/src/components/partial-syncing-controls.js @@ -18,22 +18,20 @@ import { PARTIAL_SYNCING_SUPPORTED_BLOCKS } from '../constants'; function PartialSyncingControls( { name, attributes, setAttributes } ) { const syncedAttributes = PARTIAL_SYNCING_SUPPORTED_BLOCKS[ name ]; - function updateConnections( attributeName, isChecked ) { + function updateConnections( isChecked ) { + let updatedConnections = { + ...attributes.connections, + attributes: { ...attributes.connections?.attributes }, + }; + if ( ! isChecked ) { - let updatedConnections = { - ...attributes.connections, - attributes: { - ...attributes.connections?.attributes, - [ attributeName ]: undefined, - }, - }; - if ( Object.keys( updatedConnections.attributes ).length === 1 ) { - updatedConnections.attributes = undefined; + for ( const attributeName of Object.keys( syncedAttributes ) ) { + delete updatedConnections.attributes[ attributeName ]; + } + if ( ! Object.keys( updatedConnections.attributes ).length ) { + delete updatedConnections.attributes; } - if ( - Object.keys( updatedConnections ).length === 1 && - updateConnections.attributes === undefined - ) { + if ( ! Object.keys( updatedConnections ).length ) { updatedConnections = undefined; } setAttributes( { @@ -42,15 +40,11 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) { return; } - const updatedConnections = { - ...attributes.connections, - attributes: { - ...attributes.connections?.attributes, - [ attributeName ]: { - source: 'pattern_attributes', - }, - }, - }; + for ( const attributeName of Object.keys( syncedAttributes ) ) { + updatedConnections.attributes[ attributeName ] = { + source: 'pattern_attributes', + }; + } if ( typeof attributes.metadata?.id === 'string' ) { setAttributes( { connections: updatedConnections } ); @@ -71,25 +65,21 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) { - { __( 'Synced attributes' ) } + { __( 'Pattern overrides' ) } - { Object.entries( syncedAttributes ).map( - ( [ attributeName, label ] ) => ( - { - updateConnections( attributeName, isChecked ); - } } - /> - ) - ) } + + attributes.connections?.attributes?.[ + attributeName + ]?.source === 'pattern_attributes' + ) } + onChange={ ( isChecked ) => { + updateConnections( isChecked ); + } } + /> ); From 4ed803cf48add606275faa552e813545dd96e4c9 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 19 Dec 2023 14:35:08 +0800 Subject: [PATCH 2/3] Add check before setting/unsetting connection source --- .../src/components/partial-syncing-controls.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/patterns/src/components/partial-syncing-controls.js b/packages/patterns/src/components/partial-syncing-controls.js index 9efaa6aeef72e..346cbd18b5679 100644 --- a/packages/patterns/src/components/partial-syncing-controls.js +++ b/packages/patterns/src/components/partial-syncing-controls.js @@ -26,7 +26,12 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) { if ( ! isChecked ) { for ( const attributeName of Object.keys( syncedAttributes ) ) { - delete updatedConnections.attributes[ attributeName ]; + if ( + updatedConnections.attributes[ attributeName ]?.source === + 'pattern_attributes' + ) { + delete updatedConnections.attributes[ attributeName ]; + } } if ( ! Object.keys( updatedConnections.attributes ).length ) { delete updatedConnections.attributes; @@ -41,9 +46,11 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) { } for ( const attributeName of Object.keys( syncedAttributes ) ) { - updatedConnections.attributes[ attributeName ] = { - source: 'pattern_attributes', - }; + if ( ! updatedConnections.attributes[ attributeName ] ) { + updatedConnections.attributes[ attributeName ] = { + source: 'pattern_attributes', + }; + } } if ( typeof attributes.metadata?.id === 'string' ) { From f6b59dba6a2dad7602dd069b85bea8ee331978e0 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 19 Dec 2023 15:35:33 +0800 Subject: [PATCH 3/3] Code review --- .../components/partial-syncing-controls.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/patterns/src/components/partial-syncing-controls.js b/packages/patterns/src/components/partial-syncing-controls.js index 346cbd18b5679..d20bd1d347012 100644 --- a/packages/patterns/src/components/partial-syncing-controls.js +++ b/packages/patterns/src/components/partial-syncing-controls.js @@ -17,6 +17,18 @@ import { PARTIAL_SYNCING_SUPPORTED_BLOCKS } from '../constants'; function PartialSyncingControls( { name, attributes, setAttributes } ) { const syncedAttributes = PARTIAL_SYNCING_SUPPORTED_BLOCKS[ name ]; + const attributeSources = Object.keys( syncedAttributes ).map( + ( attributeName ) => + attributes.connections?.attributes?.[ attributeName ]?.source + ); + const isConnectedToOtherSources = attributeSources.every( + ( source ) => source && source !== 'pattern_attributes' + ); + + // Render nothing if all supported attributes are connected to other sources. + if ( isConnectedToOtherSources ) { + return null; + } function updateConnections( isChecked ) { let updatedConnections = { @@ -77,11 +89,8 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) { - attributes.connections?.attributes?.[ - attributeName - ]?.source === 'pattern_attributes' + checked={ attributeSources.some( + ( source ) => source === 'pattern_attributes' ) } onChange={ ( isChecked ) => { updateConnections( isChecked );