@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/components/image-size-control/index.js

@@ -87,7 +87,7 @@ export default function ImageSizeControl( {
 								return (
 									<Button
 										key={ scale }
-										isSmall
+										size="small"
 										variant={
 											isCurrent ? 'primary' : undefined
 										}
@@ -104,7 +104,10 @@ export default function ImageSizeControl( {
 								);
 							} ) }
 						</ButtonGroup>
-						<Button isSmall onClick={ () => updateDimensions() }>
+						<Button
+							size="small"
+							onClick={ () => updateDimensions() }
+						>
 							{ __( 'Reset' ) }
 						</Button>
 					</HStack>

package/src/components/index.native.js

@@ -45,13 +45,13 @@ export {
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
 } from './media-upload/constants';
+export { default as MediaUploadProgress } from './media-upload-progress';
 export {
-	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,
 	MEDIA_UPLOAD_STATE_SUCCEEDED,
 	MEDIA_UPLOAD_STATE_FAILED,
 	MEDIA_UPLOAD_STATE_RESET,
-} from './media-upload-progress';
+} from './media-upload-progress/constants';
 export { default as BlockMediaUpdateProgress } from './block-media-update-progress';
 export { default as URLInput } from './url-input';
 export { default as BlockInvalidWarning } from './block-list/block-invalid-warning';
@@ -90,6 +90,7 @@ export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
+export { default as InserterButton } from './inserter-button';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 

package/src/components/inner-blocks/README.md

@@ -188,8 +188,19 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 ### `defaultBlock`
 
-- **Type:** `Array`
-- **Default:** - `undefined`. Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an array in the form of `[ blockname, {blockAttributes} ]`.
+- **Type:** `Object`
+- **Default:** - `undefined`
+
+Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an object in the form of `{ name: blockname, attributes: {blockAttributes} }`.
+
+```jsx
+const DEFAULT_BLOCK = { name: 'core/paragraph', attributes: { content: 'Lorem ipsum...' } };
+...
+<InnerBlocks
+    defaultBlock={ DEFAULT_BLOCK }
+    directInsert={ true }
+/>
+```
 
 ### `directInsert`
 

package/src/components/inner-blocks/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
@@ -33,6 +33,15 @@ import { useSettings } from '../use-settings';
 
 const EMPTY_OBJECT = {};
 
+function BlockContext( { children, clientId } ) {
+	const context = useBlockContext( clientId );
+	return (
+		<BlockContextProvider value={ context }>
+			{ children }
+		</BlockContextProvider>
+	);
+}
+
 /**
  * InnerBlocks is a component which allows a single block to have multiple blocks
  * as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -60,10 +69,15 @@ function UncontrolledInnerBlocks( props ) {
 		orientation,
 		placeholder,
 		layout,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
 	} = props;
 
 	useNestedSettingsUpdate(
 		clientId,
+		parentLock,
 		allowedBlocks,
 		prioritizedInserterBlocks,
 		defaultBlock,
@@ -78,19 +92,12 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
+		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection
 	);
 
-	const context = useBlockContext( clientId );
-	const name = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.name;
-		},
-		[ clientId ]
-	);
-
 	const defaultLayoutBlockSupport =
 		getBlockSupport( name, 'layout' ) ||
 		getBlockSupport( name, '__experimentalLayout' ) ||
@@ -114,20 +121,22 @@ function UncontrolledInnerBlocks( props ) {
 		[ defaultLayout, usedLayout, allowSizingOnChildren ]
 	);
 
-	// This component needs to always be synchronous as it's the one changing
-	// the async mode depending on the block selection.
-	return (
-		<BlockContextProvider value={ context }>
-			<BlockListItems
-				rootClientId={ clientId }
-				renderAppender={ renderAppender }
-				__experimentalAppenderTagName={ __experimentalAppenderTagName }
-				layout={ memoedLayout }
-				wrapperRef={ wrapperRef }
-				placeholder={ placeholder }
-			/>
-		</BlockContextProvider>
+	const items = (
+		<BlockListItems
+			rootClientId={ clientId }
+			renderAppender={ renderAppender }
+			__experimentalAppenderTagName={ __experimentalAppenderTagName }
+			layout={ memoedLayout }
+			wrapperRef={ wrapperRef }
+			placeholder={ placeholder }
+		/>
 	);
+
+	if ( Object.keys( blockType.providesContext ).length === 0 ) {
+		return items;
+	}
+
+	return <BlockContext clientId={ clientId }>{ items }</BlockContext>;
 }
 
 /**
@@ -179,8 +188,16 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		layout = null,
 		__unstableLayoutClassNames: layoutClassNames = '',
 	} = useBlockEditContext();
-	const isSmallScreen = useViewportMatch( 'medium', '<' );
-	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
+	const {
+		__experimentalCaptureToolbars,
+		hasOverlay,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
+		parentClientId,
+		isDropZoneDisabled,
+	} = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
 				return {};
@@ -191,14 +208,21 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				__unstableGetEditorMode,
+				getBlocks,
+				getTemplateLock,
+				getBlockRootClientId,
+				__unstableIsWithinBlockOverlay,
+				__unstableHasActiveBlockOverlayActive,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
+			const { hasBlockSupport, getBlockType } = select( blocksStore );
 			const blockName = getBlockName( clientId );
 			const enableClickThrough =
-				__unstableGetEditorMode() === 'navigation' || isSmallScreen;
+				__unstableGetEditorMode() === 'navigation';
+			const blockEditingMode = getBlockEditingMode( clientId );
+			const _parentClientId = getBlockRootClientId( clientId );
 			return {
-				__experimentalCaptureToolbars: select(
-					blocksStore
-				).hasBlockSupport(
+				__experimentalCaptureToolbars: hasBlockSupport(
 					blockName,
 					'__experimentalExposeControlsToChildren',
 					false
@@ -208,14 +232,25 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 					! isBlockSelected( clientId ) &&
 					! hasSelectedInnerBlock( clientId, true ) &&
 					enableClickThrough,
+				name: blockName,
+				blockType: getBlockType( blockName ),
+				innerBlocks: getBlocks( clientId ),
+				parentLock: getTemplateLock( _parentClientId ),
+				parentClientId: _parentClientId,
+				isDropZoneDisabled:
+					blockEditingMode !== 'default' ||
+					__unstableHasActiveBlockOverlayActive( clientId ) ||
+					__unstableIsWithinBlockOverlay( clientId ),
 			};
 		},
-		[ clientId, isSmallScreen ]
+		[ clientId ]
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
 		dropZoneElement,
 		rootClientId: clientId,
+		parentClientId,
+		isDisabled: isDropZoneDisabled,
 	} );
 
 	const ref = useMergeRefs( [
@@ -226,6 +261,10 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	const innerBlocksProps = {
 		__experimentalCaptureToolbars,
 		layout,
+		name,
+		blockType,
+		innerBlocks,
+		parentLock,
 		...options,
 	};
 	const InnerBlocks =

package/src/components/inner-blocks/index.native.js

@@ -105,8 +105,26 @@ function UncontrolledInnerBlocks( props ) {
 
 	const context = useBlockContext( clientId );
 
+	const { nestingLevel, innerBlocks, parentLock } = useSelect(
+		( select ) => {
+			const {
+				getBlockParents,
+				getBlocks,
+				getTemplateLock,
+				getBlockRootClientId,
+			} = select( blockEditorStore );
+			return {
+				nestingLevel: getBlockParents( clientId )?.length,
+				innerBlocks: getBlocks( clientId ),
+				parentLock: getTemplateLock( getBlockRootClientId( clientId ) ),
+			};
+		},
+		[ clientId ]
+	);
+
 	useNestedSettingsUpdate(
 		clientId,
+		parentLock,
 		allowedBlocks,
 		prioritizedInserterBlocks,
 		defaultBlock,
@@ -121,18 +139,12 @@ function UncontrolledInnerBlocks( props ) {
 
 	useInnerBlockTemplateSync(
 		clientId,
+		innerBlocks,
 		template,
 		templateLock,
 		templateInsertUpdatesSelection
 	);
 
-	const nestingLevel = useSelect(
-		( select ) => {
-			return select( blockEditorStore ).getBlockParents( clientId )
-				?.length;
-		},
-		[ clientId ]
-	);
 	if ( nestingLevel >= MAX_NESTING_DEPTH ) {
 		return <WarningMaxDepthExceeded clientId={ clientId } />;
 	}

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../../store';
  * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
+ * @param {Array}   innerBlocks
  * @param {Object}  template                       The template to match.
  * @param {string}  templateLock                   The template lock state for the inner blocks. For
  *                                                 example, if the template lock is set to "all",
@@ -36,10 +37,14 @@ import { store as blockEditorStore } from '../../store';
  */
 export default function useInnerBlockTemplateSync(
 	clientId,
+	innerBlocks,
 	template,
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
 	const {
 		getBlocks,
 		getSelectedBlocksInitialCaretPosition,
@@ -48,13 +53,6 @@ export default function useInnerBlockTemplateSync(
 	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
-	const { innerBlocks } = useSelect(
-		( select ) => ( {
-			innerBlocks: select( blockEditorStore ).getBlocks( clientId ),
-		} ),
-		[ clientId ]
-	);
-
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
 

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -32,6 +32,7 @@ function useShallowMemo( value ) {
  * came from props.
  *
  * @param {string}               clientId                   The client ID of the block to update.
+ * @param {string}               parentLock
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
  * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
@@ -53,6 +54,7 @@ function useShallowMemo( value ) {
  */
 export default function useNestedSettingsUpdate(
 	clientId,
+	parentLock,
 	allowedBlocks,
 	prioritizedInserterBlocks,
 	defaultBlock,
@@ -64,21 +66,12 @@ export default function useNestedSettingsUpdate(
 	orientation,
 	layout
 ) {
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
-	const { parentLock } = useSelect(
-		( select ) => {
-			const rootClientId =
-				select( blockEditorStore ).getBlockRootClientId( clientId );
-			return {
-				parentLock:
-					select( blockEditorStore ).getTemplateLock( rootClientId ),
-			};
-		},
-		[ clientId ]
-	);
-
 	// Implementors often pass a new array on every render,
 	// and the contents of the arrays are just strings, so the entire array
 	// can be passed as dependencies but We need to include the length of the array,

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -18,7 +18,7 @@ import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import {
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
 } from '../block-patterns-tab/utils';
@@ -73,7 +73,7 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			}
 			if (
 				selectedCategory === myPatternsCategory.name &&
-				pattern.type === PATTERN_TYPES.user
+				pattern.type === INSERTER_PATTERN_TYPES.user
 			) {
 				return true;
 			}

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -30,7 +30,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 } from './utils';
 
 const noop = () => {};
@@ -70,27 +70,27 @@ export function PatternCategoryPreviews( {
 				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
+
 				if (
 					category.name === myPatternsCategory.name &&
-					pattern.type === PATTERN_TYPES.user
+					pattern.type === INSERTER_PATTERN_TYPES.user
 				) {
 					return true;
 				}
-				if ( category.name !== 'uncategorized' ) {
-					return pattern.categories?.includes( category.name );
-				}
 
-				// The uncategorized category should show all the patterns without any category
-				// or with no available category.
-				const availablePatternCategories =
-					pattern.categories?.filter( ( cat ) =>
-						availableCategories.find(
-							( availableCategory ) =>
-								availableCategory.name === cat
-						)
-					) ?? [];
+				if ( category.name === 'uncategorized' ) {
+					// The uncategorized category should show all the patterns without any category...
+					if ( ! pattern.categories ) {
+						return true;
+					}
+
+					// ...or with no available category.
+					return ! pattern.categories.some( ( catName ) =>
+						availableCategories.some( ( c ) => c.name === catName )
+					);
+				}
 
-				return availablePatternCategories.length === 0;
+				return pattern.categories?.includes( category.name );
 			} ),
 		[
 			allPatterns,

package/src/components/inserter/block-patterns-tab/patterns-filter.js

@@ -16,11 +16,13 @@ import { useMemo, createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { myPatternsCategory, SYNC_TYPES, PATTERN_TYPES } from './utils';
-
-const getShouldDisableSyncFilter = ( sourceFilter ) =>
-	sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+import {
+	myPatternsCategory,
+	INSERTER_SYNC_TYPES,
+	INSERTER_PATTERN_TYPES,
+} from './utils';
 
+const getShouldDisableSyncFilter = ( sourceFilter ) => sourceFilter !== 'all';
 const getShouldDisableNonUserSources = ( category ) => {
 	return category.name === myPatternsCategory.name;
 };
@@ -39,7 +41,7 @@ export function PatternsFilter( {
 	// this filter themselves.
 	const currentPatternSourceFilter =
 		category.name === myPatternsCategory.name
-			? PATTERN_TYPES.user
+			? INSERTER_PATTERN_TYPES.user
 			: patternSourceFilter;
 
 	// We need to disable the sync filter option if the source filter is not 'all' or 'user'
@@ -56,11 +58,11 @@ export function PatternsFilter( {
 	const patternSyncMenuOptions = useMemo(
 		() => [
 			{
-				value: SYNC_TYPES.all,
+				value: 'all',
 				label: _x( 'All', 'Option that shows all patterns' ),
 			},
 			{
-				value: SYNC_TYPES.full,
+				value: INSERTER_SYNC_TYPES.full,
 				label: _x(
 					'Synced',
 					'Option that shows all synchronized patterns'
@@ -68,7 +70,7 @@ export function PatternsFilter( {
 				disabled: shouldDisableSyncFilter,
 			},
 			{
-				value: SYNC_TYPES.unsynced,
+				value: INSERTER_SYNC_TYPES.unsynced,
 				label: _x(
 					'Not synced',
 					'Option that shows all patterns that are not synchronized'
@@ -82,22 +84,22 @@ export function PatternsFilter( {
 	const patternSourceMenuOptions = useMemo(
 		() => [
 			{
-				value: PATTERN_TYPES.all,
+				value: 'all',
 				label: __( 'All' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.directory,
+				value: INSERTER_PATTERN_TYPES.directory,
 				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.theme,
+				value: INSERTER_PATTERN_TYPES.theme,
 				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.user,
+				value: INSERTER_PATTERN_TYPES.user,
 				label: __( 'User' ),
 			},
 		],
@@ -107,7 +109,7 @@ export function PatternsFilter( {
 	function handleSetSourceFilterChange( newSourceFilter ) {
 		setPatternSourceFilter( newSourceFilter );
 		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
-			setPatternSyncFilter( SYNC_TYPES.all );
+			setPatternSyncFilter( 'all' );
 		}
 	}
 

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { _x, _n, sprintf } from '@wordpress/i18n';
 
 import { speak } from '@wordpress/a11y';
@@ -14,9 +14,19 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 } from './utils';
 
+function hasRegisteredCategory( pattern, allCategories ) {
+	if ( ! pattern.categories || ! pattern.categories.length ) {
+		return false;
+	}
+
+	return pattern.categories.some( ( cat ) =>
+		allCategories.some( ( category ) => category.name === cat )
+	);
+}
+
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 	const [ patterns, allCategories ] = usePatternsState(
 		undefined,
@@ -34,19 +44,6 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 		[ sourceFilter, patterns ]
 	);
 
-	const hasRegisteredCategory = useCallback(
-		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
-				return false;
-			}
-
-			return pattern.categories.some( ( cat ) =>
-				allCategories.some( ( category ) => category.name === cat )
-			);
-		},
-		[ allCategories ]
-	);
-
 	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
 		const categories = allCategories
@@ -59,7 +56,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 
 		if (
 			filteredPatterns.some(
-				( pattern ) => ! hasRegisteredCategory( pattern )
+				( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
 			) &&
 			! categories.find(
 				( category ) => category.name === 'uncategorized'
@@ -72,7 +69,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 		}
 		if (
 			filteredPatterns.some(
-				( pattern ) => pattern.type === PATTERN_TYPES.user
+				( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user
 			)
 		) {
 			categories.unshift( myPatternsCategory );
@@ -95,7 +92,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 			)
 		);
 		return categories;
-	}, [ allCategories, filteredPatterns, hasRegisteredCategory ] );
+	}, [ allCategories, filteredPatterns ] );
 
 	return populatedCategories;
 }

package/src/components/inserter/block-patterns-tab/utils.js

@@ -4,17 +4,13 @@
 
 import { __ } from '@wordpress/i18n';
 
-export const PATTERN_TYPES = {
-	all: 'all',
-	synced: 'synced',
-	unsynced: 'unsynced',
+export const INSERTER_PATTERN_TYPES = {
 	user: 'user',
 	theme: 'theme',
 	directory: 'directory',
 };
 
-export const SYNC_TYPES = {
-	all: 'all',
+export const INSERTER_SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
 };
@@ -38,7 +34,7 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	// If theme source selected, filter out user created patterns and those from
 	// the core patterns directory.
 	if (
-		sourceFilter === PATTERN_TYPES.theme &&
+		sourceFilter === INSERTER_PATTERN_TYPES.theme &&
 		( isUserPattern || isDirectoryPattern )
 	) {
 		return true;
@@ -47,7 +43,7 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	// If the directory source is selected, filter out user created patterns
 	// and those bundled with the theme.
 	if (
-		sourceFilter === PATTERN_TYPES.directory &&
+		sourceFilter === INSERTER_PATTERN_TYPES.directory &&
 		( isUserPattern || ! isDirectoryPattern )
 	) {
 		return true;
@@ -55,19 +51,22 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 
 	// If user source selected, filter out theme patterns.
 	if (
-		sourceFilter === PATTERN_TYPES.user &&
-		pattern.type !== PATTERN_TYPES.user
+		sourceFilter === INSERTER_PATTERN_TYPES.user &&
+		pattern.type !== INSERTER_PATTERN_TYPES.user
 	) {
 		return true;
 	}
 
 	// Filter by sync status.
-	if ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {
+	if (
+		syncFilter === INSERTER_SYNC_TYPES.full &&
+		pattern.syncStatus !== ''
+	) {
 		return true;
 	}
 
 	if (
-		syncFilter === SYNC_TYPES.unsynced &&
+		syncFilter === INSERTER_SYNC_TYPES.unsynced &&
 		pattern.syncStatus !== 'unsynced' &&
 		isUserPattern
 	) {