@wordpress/block-editor 10.2.0 → 10.3.0

package/src/store/defaults.js

@@ -27,6 +27,7 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       codeEditingEnabled                     Whether or not the user can switch to the code editor
  * @property {boolean}       generateAnchors                        Enable/Disable auto anchor generation for Heading blocks
  * @property {boolean}       __experimentalCanUserUseUnfilteredHTML Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ * @property {boolean}       __experimentalClearBlockSelection      Whether the block editor should clear selection on mousedown when a block is not clicked.
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
@@ -156,11 +157,13 @@ export const SETTINGS_DEFAULTS = {
 	canLockBlocks: true,
 
 	__experimentalCanUserUseUnfilteredHTML: false,
+	__experimentalClearBlockSelection: true,
 	__experimentalBlockDirectory: false,
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__unstableGalleryWithImageBlocks: false,
+	__unstableIsPreviewMode: false,
 
 	generateAnchors: false,
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.

package/src/store/reducer.js

@@ -1,15 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	reduce,
-	omit,
-	without,
-	mapValues,
-	isEqual,
-	isEmpty,
-	omitBy,
-} from 'lodash';
+import { reduce, omit, mapValues, isEqual, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -425,15 +417,15 @@ const withBlockTree =
 				break;
 			}
 			case 'SAVE_REUSABLE_BLOCK_SUCCESS': {
-				const updatedBlockUids = Object.keys(
-					omitBy( newState.attributes, ( attributes, clientId ) => {
+				const updatedBlockUids = Object.entries( newState.attributes )
+					.filter( ( [ clientId, attributes ] ) => {
 						return (
-							newState.byClientId[ clientId ].name !==
-								'core/block' ||
-							attributes.ref !== action.updatedId
+							newState.byClientId[ clientId ].name ===
+								'core/block' &&
+							attributes.ref === action.updatedId
 						);
 					} )
-				);
+					.map( ( [ clientId ] ) => clientId );
 
 				newState.tree = updateParentInnerBlocksInTree(
 					newState,
@@ -987,10 +979,10 @@ export const blocks = pipe(
 				// Moving from a parent block to another.
 				return {
 					...state,
-					[ fromRootClientId ]: without(
-						state[ fromRootClientId ],
-						...clientIds
-					),
+					[ fromRootClientId ]:
+						state[ fromRootClientId ]?.filter(
+							( id ) => ! clientIds.includes( id )
+						) ?? [],
 					[ toRootClientId ]: insertAt(
 						state[ toRootClientId ],
 						clientIds,
@@ -1095,8 +1087,13 @@ export const blocks = pipe(
 
 					// Remove deleted blocks from other blocks' orderings.
 					( nextState ) =>
-						mapValues( nextState, ( subState ) =>
-							without( subState, ...action.removedClientIds )
+						mapValues(
+							nextState,
+							( subState ) =>
+								subState?.filter(
+									( id ) =>
+										! action.removedClientIds.includes( id )
+								) ?? []
 						),
 				] )( state );
 		}
@@ -1475,9 +1472,19 @@ export function blocksMode( state = {}, action ) {
  */
 export function insertionPoint( state = null, action ) {
 	switch ( action.type ) {
-		case 'SHOW_INSERTION_POINT':
-			const { rootClientId, index, __unstableWithInserter } = action;
-			return { rootClientId, index, __unstableWithInserter };
+		case 'SHOW_INSERTION_POINT': {
+			const { rootClientId, index, __unstableWithInserter, operation } =
+				action;
+			const nextState = {
+				rootClientId,
+				index,
+				__unstableWithInserter,
+				operation,
+			};
+
+			// Bail out updates if the states are the same.
+			return isEqual( state, nextState ) ? state : nextState;
+		}
 
 		case 'HIDE_INSERTION_POINT':
 			return null;

package/src/store/test/actions.js

@@ -27,7 +27,6 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
-	hideInsertionPoint,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -610,14 +609,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'hideInsertionPoint', () => {
-		it( 'should return the HIDE_INSERTION_POINT action', () => {
-			expect( hideInsertionPoint() ).toEqual( {
-				type: 'HIDE_INSERTION_POINT',
-			} );
-		} );
-	} );
-
 	describe( 'removeBlocks', () => {
 		it( 'should dispatch REMOVE_BLOCKS action', () => {
 			const clientId = 'clientId';

package/src/utils/math.js

@@ -89,3 +89,20 @@ export function getDistanceToNearestEdge(
 
 	return [ candidateDistance, candidateEdge ];
 }
+
+/**
+ * Is the point contained by the rectangle.
+ *
+ * @param {WPPoint} point The point.
+ * @param {DOMRect} rect  The rectangle.
+ *
+ * @return {boolean} True if the point is contained by the rectangle, false otherwise.
+ */
+export function isPointContainedByRect( point, rect ) {
+	return (
+		rect.left <= point.x &&
+		rect.right >= point.x &&
+		rect.top <= point.y &&
+		rect.bottom >= point.y
+	);
+}

package/src/utils/pre-parse-patterns.js

@@ -28,14 +28,19 @@ const cancelIdleCallback = ( () => {
 } )();
 
 export function usePreParsePatterns() {
-	const patterns = useSelect(
-		( _select ) =>
-			_select( blockEditorStore ).getSettings()
-				.__experimentalBlockPatterns,
-		[]
-	);
+	const { patterns, isPreviewMode } = useSelect( ( _select ) => {
+		const { __experimentalBlockPatterns, __unstableIsPreviewMode } =
+			_select( blockEditorStore ).getSettings();
+		return {
+			patterns: __experimentalBlockPatterns,
+			isPreviewMode: __unstableIsPreviewMode,
+		};
+	}, [] );
 
 	useEffect( () => {
+		if ( isPreviewMode ) {
+			return;
+		}
 		if ( ! patterns?.length ) {
 			return;
 		}
@@ -58,7 +63,7 @@ export function usePreParsePatterns() {
 
 		handle = requestIdleCallback( callback );
 		return () => cancelIdleCallback( handle );
-	}, [ patterns ] );
+	}, [ patterns, isPreviewMode ] );
 
 	return null;
 }

package/build/components/inserter/pattern-panel.js

@@ -1,87 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _compose = require("@wordpress/compose");
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-function PatternInserterPanel(_ref) {
-  let {
-    selectedCategory,
-    patternCategories,
-    onClickCategory,
-    openPatternExplorer
-  } = _ref;
-  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
-
-  const categoryOptions = () => {
-    const options = [];
-    patternCategories.map(patternCategory => {
-      return options.push({
-        value: patternCategory.name,
-        label: patternCategory.label
-      });
-    });
-    return options;
-  };
-
-  const onChangeSelect = selected => {
-    onClickCategory(patternCategories.find(patternCategory => selected === patternCategory.name));
-  };
-
-  const className = (0, _classnames.default)('block-editor-inserter__panel-header', 'block-editor-inserter__panel-header-patterns'); // In iOS-based mobile devices, the onBlur will fire when selecting an option
-  // from a Select element. To prevent closing the useDialog on iOS devices, we
-  // stop propagating the onBlur event if there is no relatedTarget, which means
-  // that the user most likely did not click on an element within the editor canvas.
-
-  const onBlur = event => {
-    if (!(event !== null && event !== void 0 && event.relatedTarget)) {
-      event.stopPropagation();
-    }
-  };
-
-  return (0, _element.createElement)(_components.Flex, {
-    justify: "space-between",
-    align: "start",
-    gap: "4",
-    className: className
-  }, (0, _element.createElement)(_components.FlexItem, {
-    isBlock: true
-  }, (0, _element.createElement)(_components.SelectControl, {
-    className: "block-editor-inserter__panel-dropdown",
-    label: (0, _i18n.__)('Filter patterns'),
-    hideLabelFromVision: true,
-    value: selectedCategory.name,
-    onChange: onChangeSelect,
-    onBlur: onBlur,
-    options: categoryOptions()
-  })), !isMobile && (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
-    variant: "secondary",
-    className: "block-editor-inserter__patterns-explorer-expand",
-    label: (0, _i18n.__)('Explore all patterns'),
-    onClick: () => openPatternExplorer()
-  }, (0, _i18n._x)('Explore', 'Label for showing all block patterns'))));
-}
-
-var _default = PatternInserterPanel;
-exports.default = _default;
-//# sourceMappingURL=pattern-panel.js.map

package/build/components/inserter/pattern-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/pattern-panel.js"],"names":["PatternInserterPanel","selectedCategory","patternCategories","onClickCategory","openPatternExplorer","isMobile","categoryOptions","options","map","patternCategory","push","value","name","label","onChangeSelect","selected","find","className","onBlur","event","relatedTarget","stopPropagation"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAKA,SAASA,oBAAT,OAKI;AAAA,MAL2B;AAC9BC,IAAAA,gBAD8B;AAE9BC,IAAAA,iBAF8B;AAG9BC,IAAAA,eAH8B;AAI9BC,IAAAA;AAJ8B,GAK3B;AACH,QAAMC,QAAQ,GAAG,+BAAkB,QAAlB,EAA4B,GAA5B,CAAjB;;AACA,QAAMC,eAAe,GAAG,MAAM;AAC7B,UAAMC,OAAO,GAAG,EAAhB;AAEAL,IAAAA,iBAAiB,CAACM,GAAlB,CAAyBC,eAAF,IAAuB;AAC7C,aAAOF,OAAO,CAACG,IAAR,CAAc;AACpBC,QAAAA,KAAK,EAAEF,eAAe,CAACG,IADH;AAEpBC,QAAAA,KAAK,EAAEJ,eAAe,CAACI;AAFH,OAAd,CAAP;AAIA,KALD;AAOA,WAAON,OAAP;AACA,GAXD;;AAaA,QAAMO,cAAc,GAAKC,QAAF,IAAgB;AACtCZ,IAAAA,eAAe,CACdD,iBAAiB,CAACc,IAAlB,CACGP,eAAF,IAAuBM,QAAQ,KAAKN,eAAe,CAACG,IADrD,CADc,CAAf;AAKA,GAND;;AAQA,QAAMK,SAAS,GAAG,yBACjB,qCADiB,EAEjB,8CAFiB,CAAlB,CAvBG,CA4BH;AACA;AACA;AACA;;AACA,QAAMC,MAAM,GAAKC,KAAF,IAAa;AAC3B,QAAK,EAAEA,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEC,aAAT,CAAL,EAA8B;AAC7BD,MAAAA,KAAK,CAACE,eAAN;AACA;AACD,GAJD;;AAMA,SACC,4BAAC,gBAAD;AACC,IAAA,OAAO,EAAC,eADT;AAEC,IAAA,KAAK,EAAC,OAFP;AAGC,IAAA,GAAG,EAAC,GAHL;AAIC,IAAA,SAAS,EAAGJ;AAJb,KAMC,4BAAC,oBAAD;AAAU,IAAA,OAAO;AAAjB,KACC,4BAAC,yBAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAG,cAAI,iBAAJ,CAFT;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,KAAK,EAAGhB,gBAAgB,CAACW,IAJ1B;AAKC,IAAA,QAAQ,EAAGE,cALZ;AAMC,IAAA,MAAM,EAAGI,MANV;AAOC,IAAA,OAAO,EAAGZ,eAAe;AAP1B,IADD,CAND,EAiBG,CAAED,QAAF,IACD,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,WADT;AAEC,IAAA,SAAS,EAAC,iDAFX;AAGC,IAAA,KAAK,EAAG,cAAI,sBAAJ,CAHT;AAIC,IAAA,OAAO,EAAG,MAAMD,mBAAmB;AAJpC,KAMG,cACD,SADC,EAED,sCAFC,CANH,CADD,CAlBF,CADD;AAmCA;;eAEcJ,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\n\nfunction PatternInserterPanel( {\n\tselectedCategory,\n\tpatternCategories,\n\tonClickCategory,\n\topenPatternExplorer,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst categoryOptions = () => {\n\t\tconst options = [];\n\n\t\tpatternCategories.map( ( patternCategory ) => {\n\t\t\treturn options.push( {\n\t\t\t\tvalue: patternCategory.name,\n\t\t\t\tlabel: patternCategory.label,\n\t\t\t} );\n\t\t} );\n\n\t\treturn options;\n\t};\n\n\tconst onChangeSelect = ( selected ) => {\n\t\tonClickCategory(\n\t\t\tpatternCategories.find(\n\t\t\t\t( patternCategory ) => selected === patternCategory.name\n\t\t\t)\n\t\t);\n\t};\n\n\tconst className = classnames(\n\t\t'block-editor-inserter__panel-header',\n\t\t'block-editor-inserter__panel-header-patterns'\n\t);\n\n\t// In iOS-based mobile devices, the onBlur will fire when selecting an option\n\t// from a Select element. To prevent closing the useDialog on iOS devices, we\n\t// stop propagating the onBlur event if there is no relatedTarget, which means\n\t// that the user most likely did not click on an element within the editor canvas.\n\tconst onBlur = ( event ) => {\n\t\tif ( ! event?.relatedTarget ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t};\n\n\treturn (\n\t\t<Flex\n\t\t\tjustify=\"space-between\"\n\t\t\talign=\"start\"\n\t\t\tgap=\"4\"\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<FlexItem isBlock>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"block-editor-inserter__panel-dropdown\"\n\t\t\t\t\tlabel={ __( 'Filter patterns' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tvalue={ selectedCategory.name }\n\t\t\t\t\tonChange={ onChangeSelect }\n\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\toptions={ categoryOptions() }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explorer-expand\"\n\t\t\t\t\t\tlabel={ __( 'Explore all patterns' ) }\n\t\t\t\t\t\tonClick={ () => openPatternExplorer() }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ _x(\n\t\t\t\t\t\t\t'Explore',\n\t\t\t\t\t\t\t'Label for showing all block patterns'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t) }\n\t\t</Flex>\n\t);\n}\n\nexport default PatternInserterPanel;\n"]}

package/build-module/components/inserter/pattern-panel.js

@@ -1,74 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-
-import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-
-function PatternInserterPanel(_ref) {
-  let {
-    selectedCategory,
-    patternCategories,
-    onClickCategory,
-    openPatternExplorer
-  } = _ref;
-  const isMobile = useViewportMatch('medium', '<');
-
-  const categoryOptions = () => {
-    const options = [];
-    patternCategories.map(patternCategory => {
-      return options.push({
-        value: patternCategory.name,
-        label: patternCategory.label
-      });
-    });
-    return options;
-  };
-
-  const onChangeSelect = selected => {
-    onClickCategory(patternCategories.find(patternCategory => selected === patternCategory.name));
-  };
-
-  const className = classnames('block-editor-inserter__panel-header', 'block-editor-inserter__panel-header-patterns'); // In iOS-based mobile devices, the onBlur will fire when selecting an option
-  // from a Select element. To prevent closing the useDialog on iOS devices, we
-  // stop propagating the onBlur event if there is no relatedTarget, which means
-  // that the user most likely did not click on an element within the editor canvas.
-
-  const onBlur = event => {
-    if (!(event !== null && event !== void 0 && event.relatedTarget)) {
-      event.stopPropagation();
-    }
-  };
-
-  return createElement(Flex, {
-    justify: "space-between",
-    align: "start",
-    gap: "4",
-    className: className
-  }, createElement(FlexItem, {
-    isBlock: true
-  }, createElement(SelectControl, {
-    className: "block-editor-inserter__panel-dropdown",
-    label: __('Filter patterns'),
-    hideLabelFromVision: true,
-    value: selectedCategory.name,
-    onChange: onChangeSelect,
-    onBlur: onBlur,
-    options: categoryOptions()
-  })), !isMobile && createElement(FlexItem, null, createElement(Button, {
-    variant: "secondary",
-    className: "block-editor-inserter__patterns-explorer-expand",
-    label: __('Explore all patterns'),
-    onClick: () => openPatternExplorer()
-  }, _x('Explore', 'Label for showing all block patterns'))));
-}
-
-export default PatternInserterPanel;
-//# sourceMappingURL=pattern-panel.js.map

package/build-module/components/inserter/pattern-panel.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/inserter/pattern-panel.js"],"names":["classnames","Flex","FlexItem","SelectControl","Button","__","_x","useViewportMatch","PatternInserterPanel","selectedCategory","patternCategories","onClickCategory","openPatternExplorer","isMobile","categoryOptions","options","map","patternCategory","push","value","name","label","onChangeSelect","selected","find","className","onBlur","event","relatedTarget","stopPropagation"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,aAAzB,EAAwCC,MAAxC,QAAsD,uBAAtD;AACA,SAASC,EAAT,EAAaC,EAAb,QAAuB,iBAAvB;AACA,SAASC,gBAAT,QAAiC,oBAAjC;;AAEA,SAASC,oBAAT,OAKI;AAAA,MAL2B;AAC9BC,IAAAA,gBAD8B;AAE9BC,IAAAA,iBAF8B;AAG9BC,IAAAA,eAH8B;AAI9BC,IAAAA;AAJ8B,GAK3B;AACH,QAAMC,QAAQ,GAAGN,gBAAgB,CAAE,QAAF,EAAY,GAAZ,CAAjC;;AACA,QAAMO,eAAe,GAAG,MAAM;AAC7B,UAAMC,OAAO,GAAG,EAAhB;AAEAL,IAAAA,iBAAiB,CAACM,GAAlB,CAAyBC,eAAF,IAAuB;AAC7C,aAAOF,OAAO,CAACG,IAAR,CAAc;AACpBC,QAAAA,KAAK,EAAEF,eAAe,CAACG,IADH;AAEpBC,QAAAA,KAAK,EAAEJ,eAAe,CAACI;AAFH,OAAd,CAAP;AAIA,KALD;AAOA,WAAON,OAAP;AACA,GAXD;;AAaA,QAAMO,cAAc,GAAKC,QAAF,IAAgB;AACtCZ,IAAAA,eAAe,CACdD,iBAAiB,CAACc,IAAlB,CACGP,eAAF,IAAuBM,QAAQ,KAAKN,eAAe,CAACG,IADrD,CADc,CAAf;AAKA,GAND;;AAQA,QAAMK,SAAS,GAAGzB,UAAU,CAC3B,qCAD2B,EAE3B,8CAF2B,CAA5B,CAvBG,CA4BH;AACA;AACA;AACA;;AACA,QAAM0B,MAAM,GAAKC,KAAF,IAAa;AAC3B,QAAK,EAAEA,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEC,aAAT,CAAL,EAA8B;AAC7BD,MAAAA,KAAK,CAACE,eAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,IAAD;AACC,IAAA,OAAO,EAAC,eADT;AAEC,IAAA,KAAK,EAAC,OAFP;AAGC,IAAA,GAAG,EAAC,GAHL;AAIC,IAAA,SAAS,EAAGJ;AAJb,KAMC,cAAC,QAAD;AAAU,IAAA,OAAO;AAAjB,KACC,cAAC,aAAD;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,KAAK,EAAGpB,EAAE,CAAE,iBAAF,CAFX;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,KAAK,EAAGI,gBAAgB,CAACW,IAJ1B;AAKC,IAAA,QAAQ,EAAGE,cALZ;AAMC,IAAA,MAAM,EAAGI,MANV;AAOC,IAAA,OAAO,EAAGZ,eAAe;AAP1B,IADD,CAND,EAiBG,CAAED,QAAF,IACD,cAAC,QAAD,QACC,cAAC,MAAD;AACC,IAAA,OAAO,EAAC,WADT;AAEC,IAAA,SAAS,EAAC,iDAFX;AAGC,IAAA,KAAK,EAAGR,EAAE,CAAE,sBAAF,CAHX;AAIC,IAAA,OAAO,EAAG,MAAMO,mBAAmB;AAJpC,KAMGN,EAAE,CACH,SADG,EAEH,sCAFG,CANL,CADD,CAlBF,CADD;AAmCA;;AAED,eAAeE,oBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\n\nfunction PatternInserterPanel( {\n\tselectedCategory,\n\tpatternCategories,\n\tonClickCategory,\n\topenPatternExplorer,\n} ) {\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\tconst categoryOptions = () => {\n\t\tconst options = [];\n\n\t\tpatternCategories.map( ( patternCategory ) => {\n\t\t\treturn options.push( {\n\t\t\t\tvalue: patternCategory.name,\n\t\t\t\tlabel: patternCategory.label,\n\t\t\t} );\n\t\t} );\n\n\t\treturn options;\n\t};\n\n\tconst onChangeSelect = ( selected ) => {\n\t\tonClickCategory(\n\t\t\tpatternCategories.find(\n\t\t\t\t( patternCategory ) => selected === patternCategory.name\n\t\t\t)\n\t\t);\n\t};\n\n\tconst className = classnames(\n\t\t'block-editor-inserter__panel-header',\n\t\t'block-editor-inserter__panel-header-patterns'\n\t);\n\n\t// In iOS-based mobile devices, the onBlur will fire when selecting an option\n\t// from a Select element. To prevent closing the useDialog on iOS devices, we\n\t// stop propagating the onBlur event if there is no relatedTarget, which means\n\t// that the user most likely did not click on an element within the editor canvas.\n\tconst onBlur = ( event ) => {\n\t\tif ( ! event?.relatedTarget ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\t};\n\n\treturn (\n\t\t<Flex\n\t\t\tjustify=\"space-between\"\n\t\t\talign=\"start\"\n\t\t\tgap=\"4\"\n\t\t\tclassName={ className }\n\t\t>\n\t\t\t<FlexItem isBlock>\n\t\t\t\t<SelectControl\n\t\t\t\t\tclassName=\"block-editor-inserter__panel-dropdown\"\n\t\t\t\t\tlabel={ __( 'Filter patterns' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tvalue={ selectedCategory.name }\n\t\t\t\t\tonChange={ onChangeSelect }\n\t\t\t\t\tonBlur={ onBlur }\n\t\t\t\t\toptions={ categoryOptions() }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explorer-expand\"\n\t\t\t\t\t\tlabel={ __( 'Explore all patterns' ) }\n\t\t\t\t\t\tonClick={ () => openPatternExplorer() }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ _x(\n\t\t\t\t\t\t\t'Explore',\n\t\t\t\t\t\t\t'Label for showing all block patterns'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Button>\n\t\t\t\t</FlexItem>\n\t\t\t) }\n\t\t</Flex>\n\t);\n}\n\nexport default PatternInserterPanel;\n"]}

package/src/components/inserter/pattern-panel.js

@@ -1,93 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useViewportMatch } from '@wordpress/compose';
-
-function PatternInserterPanel( {
-	selectedCategory,
-	patternCategories,
-	onClickCategory,
-	openPatternExplorer,
-} ) {
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const categoryOptions = () => {
-		const options = [];
-
-		patternCategories.map( ( patternCategory ) => {
-			return options.push( {
-				value: patternCategory.name,
-				label: patternCategory.label,
-			} );
-		} );
-
-		return options;
-	};
-
-	const onChangeSelect = ( selected ) => {
-		onClickCategory(
-			patternCategories.find(
-				( patternCategory ) => selected === patternCategory.name
-			)
-		);
-	};
-
-	const className = classnames(
-		'block-editor-inserter__panel-header',
-		'block-editor-inserter__panel-header-patterns'
-	);
-
-	// In iOS-based mobile devices, the onBlur will fire when selecting an option
-	// from a Select element. To prevent closing the useDialog on iOS devices, we
-	// stop propagating the onBlur event if there is no relatedTarget, which means
-	// that the user most likely did not click on an element within the editor canvas.
-	const onBlur = ( event ) => {
-		if ( ! event?.relatedTarget ) {
-			event.stopPropagation();
-		}
-	};
-
-	return (
-		<Flex
-			justify="space-between"
-			align="start"
-			gap="4"
-			className={ className }
-		>
-			<FlexItem isBlock>
-				<SelectControl
-					className="block-editor-inserter__panel-dropdown"
-					label={ __( 'Filter patterns' ) }
-					hideLabelFromVision
-					value={ selectedCategory.name }
-					onChange={ onChangeSelect }
-					onBlur={ onBlur }
-					options={ categoryOptions() }
-				/>
-			</FlexItem>
-			{ ! isMobile && (
-				<FlexItem>
-					<Button
-						variant="secondary"
-						className="block-editor-inserter__patterns-explorer-expand"
-						label={ __( 'Explore all patterns' ) }
-						onClick={ () => openPatternExplorer() }
-					>
-						{ _x(
-							'Explore',
-							'Label for showing all block patterns'
-						) }
-					</Button>
-				</FlexItem>
-			) }
-		</Flex>
-	);
-}
-
-export default PatternInserterPanel;