@wordpress/patterns 1.9.0 → 1.10.0

package/src/components/duplicate-pattern-modal.js

@@ -29,11 +29,7 @@ function getTermLabels( pattern, categories ) {
 		.map( ( category ) => category.label );
 }
 
-export default function DuplicatePatternModal( {
-	pattern,
-	onClose,
-	onSuccess,
-} ) {
+export function useDuplicatePatternProps( { pattern, onSuccess } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const categories = useSelect( ( select ) => {
 		const { getUserPatternCategories, getBlockPatternCategories } =
@@ -44,12 +40,10 @@ export default function DuplicatePatternModal( {
 			user: getUserPatternCategories(),
 		};
 	} );
-
 	if ( ! pattern ) {
 		return null;
 	}
-
-	const duplicatedProps = {
+	return {
 		content: pattern.content,
 		defaultCategories: getTermLabels( pattern, categories ),
 		defaultSyncType:
@@ -63,31 +57,39 @@ export default function DuplicatePatternModal( {
 				? pattern.title
 				: pattern.title.raw
 		),
-	};
+		onSuccess: ( { pattern: newPattern } ) => {
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
+					__( '"%s" duplicated.' ),
+					newPattern.title.raw
+				),
+				{
+					type: 'snackbar',
+					id: 'patterns-create',
+				}
+			);
 
-	function handleOnSuccess( { pattern: newPattern } ) {
-		createSuccessNotice(
-			sprintf(
-				// translators: %s: The new pattern's title e.g. 'Call to action (copy)'.
-				__( '"%s" duplicated.' ),
-				newPattern.title.raw
-			),
-			{
-				type: 'snackbar',
-				id: 'patterns-create',
-			}
-		);
+			onSuccess?.( { pattern: newPattern } );
+		},
+	};
+}
 
-		onSuccess?.( { pattern: newPattern } );
+export default function DuplicatePatternModal( {
+	pattern,
+	onClose,
+	onSuccess,
+} ) {
+	const duplicatedProps = useDuplicatePatternProps( { pattern, onSuccess } );
+	if ( ! pattern ) {
+		return null;
 	}
-
 	return (
 		<CreatePatternModal
 			modalTitle={ __( 'Duplicate pattern' ) }
 			confirmLabel={ __( 'Duplicate' ) }
 			onClose={ onClose }
 			onError={ onClose }
-			onSuccess={ handleOnSuccess }
 			{ ...duplicatedProps }
 		/>
 	);

package/src/components/partial-syncing-controls.js

@@ -17,23 +17,38 @@ 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 = {
+			...attributes.connections,
+			attributes: { ...attributes.connections?.attributes },
+		};
 
-	function updateConnections( attributeName, isChecked ) {
 		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 ) ) {
+				if (
+					updatedConnections.attributes[ attributeName ]?.source ===
+					'pattern_attributes'
+				) {
+					delete updatedConnections.attributes[ attributeName ];
+				}
 			}
-			if (
-				Object.keys( updatedConnections ).length === 1 &&
-				updateConnections.attributes === undefined
-			) {
+			if ( ! Object.keys( updatedConnections.attributes ).length ) {
+				delete updatedConnections.attributes;
+			}
+			if ( ! Object.keys( updatedConnections ).length ) {
 				updatedConnections = undefined;
 			}
 			setAttributes( {
@@ -42,15 +57,13 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) {
 			return;
 		}
 
-		const updatedConnections = {
-			...attributes.connections,
-			attributes: {
-				...attributes.connections?.attributes,
-				[ attributeName ]: {
+		for ( const attributeName of Object.keys( syncedAttributes ) ) {
+			if ( ! updatedConnections.attributes[ attributeName ] ) {
+				updatedConnections.attributes[ attributeName ] = {
 					source: 'pattern_attributes',
-				},
-			},
-		};
+				};
+			}
+		}
 
 		if ( typeof attributes.metadata?.id === 'string' ) {
 			setAttributes( { connections: updatedConnections } );
@@ -71,25 +84,18 @@ function PartialSyncingControls( { name, attributes, setAttributes } ) {
 		<InspectorControls group="advanced">
 			<BaseControl __nextHasNoMarginBottom>
 				<BaseControl.VisualLabel>
-					{ __( 'Synced attributes' ) }
+					{ __( 'Pattern overrides' ) }
 				</BaseControl.VisualLabel>
-				{ Object.entries( syncedAttributes ).map(
-					( [ attributeName, label ] ) => (
-						<CheckboxControl
-							key={ attributeName }
-							__nextHasNoMarginBottom
-							label={ label }
-							checked={
-								attributes.connections?.attributes?.[
-									attributeName
-								]?.source === 'pattern_attributes'
-							}
-							onChange={ ( isChecked ) => {
-								updateConnections( attributeName, isChecked );
-							} }
-						/>
-					)
-				) }
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={ __( 'Allow instance overrides' ) }
+					checked={ attributeSources.some(
+						( source ) => source === 'pattern_attributes'
+					) }
+					onChange={ ( isChecked ) => {
+						updateConnections( isChecked );
+					} }
+				/>
 			</BaseControl>
 		</InspectorControls>
 	);

package/src/private-apis.js

@@ -2,8 +2,14 @@
  * Internal dependencies
  */
 import { lock } from './lock-unlock';
-import CreatePatternModal from './components/create-pattern-modal';
-import DuplicatePatternModal from './components/duplicate-pattern-modal';
+import {
+	default as CreatePatternModal,
+	CreatePatternModalContents,
+} from './components/create-pattern-modal';
+import {
+	default as DuplicatePatternModal,
+	useDuplicatePatternProps,
+} from './components/duplicate-pattern-modal';
 import RenamePatternModal from './components/rename-pattern-modal';
 import PatternsMenuItems from './components';
 import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
@@ -20,7 +26,9 @@ import {
 export const privateApis = {};
 lock( privateApis, {
 	CreatePatternModal,
+	CreatePatternModalContents,
 	DuplicatePatternModal,
+	useDuplicatePatternProps,
 	RenamePatternModal,
 	PatternsMenuItems,
 	RenamePatternCategoryModal,