From 8e47b94eb31ad120dba99d1ff9f187e6fef517fb Mon Sep 17 00:00:00 2001
From: Glen Davies <glen.davies@automattic.com>
Date: Fri, 15 Sep 2023 15:44:27 +1200
Subject: [PATCH] Fix issue with pattern sync filter randomly updating

---
 .../block-patterns-explorer/explorer.js       |  9 +------
 .../block-patterns-explorer/patterns-list.js  | 11 +++++---
 .../inserter/block-patterns-sync-filter.js    | 25 +++++--------------
 .../components/inserter/block-patterns-tab.js | 16 ++++++------
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
index 30e227a5ecead..e795a70679aa1 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
@@ -4,7 +4,6 @@
 import { Modal } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,16 +11,11 @@ import { useSelect } from '@wordpress/data';
 import PatternExplorerSidebar from './sidebar';
 import PatternList from './patterns-list';
 import { usePatternsCategories } from '../block-patterns-tab';
-import { store as blockEditorStore } from '../../../store';
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-	const patternSyncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
+
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
@@ -47,7 +41,6 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				patternSourceFilter={ patternSourceFilter }
-				patternSyncFilter={ patternSyncFilter }
 			/>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
index 15c439cd343e5..a33ceba422f68 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
@@ -67,8 +67,8 @@ function PatternList( {
 	patternSourceFilter,
 	selectedCategory,
 	patternCategories,
-	patternSyncFilter,
 } ) {
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -171,7 +171,12 @@ function PatternList( {
 
 			<InserterListbox>
 				{ patternSourceFilter === PATTERN_TYPES.user &&
-					! searchValue && <BlockPatternsSyncFilter /> }
+					! searchValue && (
+						<BlockPatternsSyncFilter
+							patternSyncFilter={ patternSyncFilter }
+							setPatternSyncFilter={ setPatternSyncFilter }
+						/>
+					) }
 
 				{ hasItems && (
 					<BlockPatternsList
diff --git a/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js b/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js
index 07c4c0d8fa1b1..456c8bde27045 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js
@@ -3,12 +3,10 @@
  */
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
 export const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
@@ -20,28 +18,17 @@ const patternSyncOptions = [
 	{ value: SYNC_TYPES.unsynced, label: __( 'Standard' ) },
 ];
 
-export function BlockPatternsSyncFilter() {
-	const { updateSettings } = useDispatch( blockEditorStore );
-
-	const syncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
-
-	const handleUpdateSyncFilter = ( value ) => {
-		updateSettings( {
-			patternsSyncFilter: value,
-		} );
-	};
-
+export function BlockPatternsSyncFilter( {
+	setPatternSyncFilter,
+	patternSyncFilter,
+} ) {
 	return (
 		<SelectControl
 			className="block-editor-patterns__sync-status-filter"
 			label={ __( 'Syncing' ) }
 			options={ patternSyncOptions }
-			value={ syncFilter }
-			onChange={ ( value ) => handleUpdateSyncFilter( value ) }
+			value={ patternSyncFilter }
+			onChange={ setPatternSyncFilter }
 			aria-label={ __( 'Filter patterns by sync type' ) }
 		/>
 	);
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index ecf20a076012f..e10a90df4f457 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-tab.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -20,7 +20,6 @@ import {
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
 import { speak } from '@wordpress/a11y';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -39,7 +38,6 @@ import {
 	BlockPatternsSyncFilter,
 	SYNC_TYPES,
 } from './block-patterns-sync-filter';
-import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
@@ -198,11 +196,8 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-	const patternSyncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+
 	const availableCategories = usePatternsCategories(
 		rootClientId,
 		patternFilter
@@ -256,6 +251,7 @@ export function BlockPatternsCategoryPanel( {
 	);
 
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
 	return (
@@ -268,7 +264,11 @@ export function BlockPatternsCategoryPanel( {
 			</div>
 			<p>{ category.description }</p>
 			{ patternFilter === PATTERN_TYPES.user && (
-				<BlockPatternsSyncFilter />
+				<BlockPatternsSyncFilter
+					patternSyncFilter={ patternSyncFilter }
+					setPatternSyncFilter={ setPatternSyncFilter }
+					test={ 'bob' }
+				/>
 			) }
 			{ ! currentCategoryPatterns.length && (
 				<div>{ __( 'No results found' ) }</div>