@wordpress/block-editor 12.21.0 → 12.23.0

package/build-module/components/iframe/index.js

@@ -20,7 +20,6 @@ import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useWritingFlow } from '../writing-flow';
 import { getCompatibilityStyles } from './get-compatibility-styles';
 import { store as blockEditorStore } from '../../store';
-import calculateScale from '../../utils/calculate-scale';
 function bubbleEvent(event, Constructor, frame) {
   const init = {};
   for (const key in event) {
@@ -93,7 +92,8 @@ function Iframe({
   contentRef,
   children,
   tabIndex = 0,
-  shouldZoom = false,
+  scale = 1,
+  frameSize = 0,
   readonly,
   forwardedRef: ref,
   title = __('Editor canvas'),
@@ -101,18 +101,15 @@ function Iframe({
 }) {
   const {
     resolvedAssets,
-    isPreviewMode,
-    isZoomOutMode
+    isPreviewMode
   } = useSelect(select => {
     const {
-      getSettings,
-      __unstableGetEditorMode
+      getSettings
     } = select(blockEditorStore);
     const settings = getSettings();
     return {
       resolvedAssets: settings.__unstableResolvedAssets,
-      isPreviewMode: settings.__unstableIsPreviewMode,
-      isZoomOutMode: __unstableGetEditorMode() === 'zoom-out'
+      isPreviewMode: settings.__unstableIsPreviewMode
     };
   }, []);
   const {
@@ -127,18 +124,6 @@ function Iframe({
     height: contentHeight,
     width: contentWidth
   }] = useResizeObserver();
-
-  // When zoom-out mode is enabled, the iframe is scaled down to fit the
-  // content within the viewport.
-  // At 1000px wide, the iframe is scaled to 45%.
-  // At 400px wide, the iframe is scaled to 90%.
-  const scale = isZoomOutMode && shouldZoom ? calculateScale({
-    maxWidth: 1000,
-    minWidth: 400,
-    maxScale: 0.45,
-    minScale: 0.9
-  }, contentWidth) : 1;
-  const frameSize = isZoomOutMode ? 100 : 0;
   const setRef = useRefEffect(node => {
     node._load = () => {
       setIframeDocument(node.contentDocument);
@@ -156,6 +141,11 @@ function Iframe({
       const {
         documentElement
       } = contentDocument;
+      // Get any CSS classes the iframe document body may initially have
+      // to re-apply them later together with the ones of the main document
+      // body. This is necessary for some CSS classes for example the
+      // `is-dark-theme` class added by useDarkThemeBodyClassName.
+      const initialIframeBodyClasses = Array.from(contentDocument.body.classList);
       iFrameDocument = contentDocument;
       documentElement.classList.add('block-editor-iframe__html');
       clearerRef(documentElement);
@@ -163,7 +153,7 @@ function Iframe({
       // Ideally ALL classes that are added through get_body_class should
       // be added in the editor too, which we'll somehow have to get from
       // the server in the future (which will run the PHP filters).
-      setBodyClasses(Array.from(ownerDocument.body.classList).filter(name => name.startsWith('admin-color-') || name.startsWith('post-type-') || name === 'wp-embed-responsive'));
+      setBodyClasses(Array.from(ownerDocument.body.classList).concat(initialIframeBodyClasses).filter(name => name.startsWith('admin-color-') || name.startsWith('post-type-') || name === 'wp-embed-responsive' || name === 'is-dark-theme'));
       contentDocument.dir = ownerDocument.dir;
       for (const compatStyle of getCompatibilityStyles()) {
         if (contentDocument.getElementById(compatStyle.id)) {
@@ -186,10 +176,21 @@ function Iframe({
       iFrameDocument?.removeEventListener('drop', preventFileDropDefault);
     };
   }, []);
+  const windowResizeRef = useRefEffect(node => {
+    const nodeWindow = node.ownerDocument.defaultView;
+    const onResize = () => {
+      setIframeWindowInnerHeight(nodeWindow.innerHeight);
+    };
+    nodeWindow.addEventListener('resize', onResize);
+    return () => {
+      nodeWindow.removeEventListener('resize', onResize);
+    };
+  }, []);
+  const [iframeWindowInnerHeight, setIframeWindowInnerHeight] = useState();
   const disabledRef = useDisabled({
     isDisabled: !readonly
   });
-  const bodyRef = useMergeRefs([useBubbleEvents(iframeDocument), contentRef, clearerRef, writingFlowRef, disabledRef]);
+  const bodyRef = useMergeRefs([useBubbleEvents(iframeDocument), contentRef, clearerRef, writingFlowRef, disabledRef, windowResizeRef]);
 
   // Correct doctype is required to enable rendering in standards
   // mode. Also preload the styles to avoid a flash of unstyled
@@ -204,12 +205,12 @@ function Iframe({
 				height: auto !important;
 				min-height: 100%;
 			}
-
-			body {
+			/* Lowest specificity to not override global styles */
+			:where(body) {
 				margin: 0;
 				/* Default background color in case zoom out mode background
 				colors the html element */
-				background: white;
+				background-color: white;
 			}
 		</style>
 		${styles}
@@ -226,23 +227,31 @@ function Iframe({
     return [_src, () => URL.revokeObjectURL(_src)];
   }, [html]);
   useEffect(() => cleanup, [cleanup]);
-
-  // We need to counter the margin created by scaling the iframe. If the scale
-  // is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
-  // top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
-  const marginFromScaling = contentHeight * (1 - scale) / 2;
   useEffect(() => {
-    if (iframeDocument && scale !== 1) {
-      iframeDocument.documentElement.style.transform = `scale( ${scale} )`;
+    if (!iframeDocument) {
+      return;
+    }
+    const _scale = typeof scale === 'function' ? scale(contentWidth, contentHeight) : scale;
+    if (_scale !== 1) {
+      // Hack to get proper margins when scaling the iframe document.
+      const bottomFrameSize = frameSize - contentHeight * (1 - _scale);
+      iframeDocument.body.classList.add('is-zoomed-out');
+      iframeDocument.documentElement.style.transform = `scale( ${_scale} )`;
       iframeDocument.documentElement.style.marginTop = `${frameSize}px`;
-      iframeDocument.documentElement.style.marginBottom = `${-marginFromScaling * 2 + frameSize}px`;
+      // TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.
+      iframeDocument.documentElement.style.marginBottom = `${bottomFrameSize}px`;
+      if (iframeWindowInnerHeight > contentHeight * _scale) {
+        iframeDocument.body.style.minHeight = `${Math.floor((iframeWindowInnerHeight - 2 * frameSize) / _scale)}px`;
+      }
       return () => {
+        iframeDocument.body.classList.remove('is-zoomed-out');
         iframeDocument.documentElement.style.transform = '';
         iframeDocument.documentElement.style.marginTop = '';
         iframeDocument.documentElement.style.marginBottom = '';
+        iframeDocument.body.style.minHeight = '';
       };
     }
-  }, [scale, frameSize, marginFromScaling, iframeDocument]);
+  }, [scale, frameSize, iframeDocument, contentHeight, iframeWindowInnerHeight, contentWidth]);
 
   // Make sure to not render the before and after focusable div elements in view
   // mode. They're only needed to capture focus in edit mode.

package/build-module/components/iframe/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","createPortal","forwardRef","useMemo","useEffect","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","calculateScale","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","shouldZoom","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","isZoomOutMode","select","getSettings","__unstableGetEditorMode","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","width","contentWidth","scale","maxWidth","minWidth","maxScale","minScale","frameSize","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","marginFromScaling","style","transform","marginTop","marginBottom","shouldRenderFocusCaptureElements","createElement","Fragment","border","transition","onKeyDown","currentTarget","target","stopPropagation","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\nimport calculateScale from '../../utils/calculate-scale';\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tshouldZoom = false,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode, isZoomOutMode } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getSettings, __unstableGetEditorMode } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst settings = getSettings();\n\t\t\treturn {\n\t\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t\t\tisZoomOutMode: __unstableGetEditorMode() === 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[]\n\t);\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight, width: contentWidth },\n\t] = useResizeObserver();\n\n\t// When zoom-out mode is enabled, the iframe is scaled down to fit the\n\t// content within the viewport.\n\t// At 1000px wide, the iframe is scaled to 45%.\n\t// At 400px wide, the iframe is scaled to 90%.\n\tconst scale =\n\t\tisZoomOutMode && shouldZoom\n\t\t\t? calculateScale(\n\t\t\t\t\t{\n\t\t\t\t\t\tmaxWidth: 1000,\n\t\t\t\t\t\tminWidth: 400,\n\t\t\t\t\t\tmaxScale: 0.45,\n\t\t\t\t\t\tminScale: 0.9,\n\t\t\t\t\t},\n\t\t\t\t\tcontentWidth\n\t\t\t  )\n\t\t\t: 1;\n\tconst frameSize = isZoomOutMode ? 100 : 0;\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t\t( name ) =>\n\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\n\t\t\tbody {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\t// We need to counter the margin created by scaling the iframe. If the scale\n\t// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the\n\t// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).\n\tconst marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;\n\n\tuseEffect( () => {\n\t\tif ( iframeDocument && scale !== 1 ) {\n\t\t\tiframeDocument.documentElement.style.transform = `scale( ${ scale } )`;\n\t\t\tiframeDocument.documentElement.style.marginTop = `${ frameSize }px`;\n\t\t\tiframeDocument.documentElement.style.marginBottom = `${\n\t\t\t\t-marginFromScaling * 2 + frameSize\n\t\t\t}px`;\n\t\t\treturn () => {\n\t\t\t\tiframeDocument.documentElement.style.transform = '';\n\t\t\t\tiframeDocument.documentElement.style.marginTop = '';\n\t\t\t\tiframeDocument.documentElement.style.marginBottom = '';\n\t\t\t};\n\t\t}\n\t}, [ scale, frameSize, marginFromScaling, iframeDocument ] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\treturn (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborder: 0,\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\ttransition: 'all .3s',\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useState","createPortal","forwardRef","useMemo","useEffect","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","scale","frameSize","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","select","getSettings","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","width","contentWidth","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","initialIframeBodyClasses","Array","from","body","classList","add","concat","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","windowResizeRef","nodeWindow","onResize","setIframeWindowInnerHeight","innerHeight","iframeWindowInnerHeight","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","_scale","bottomFrameSize","style","transform","marginTop","marginBottom","minHeight","Math","floor","remove","shouldRenderFocusCaptureElements","createElement","Fragment","border","transition","onKeyDown","currentTarget","target","stopPropagation","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\n\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tscale = 1,\n\tframeSize = 0,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight, width: contentWidth },\n\t] = useResizeObserver();\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\t// Get any CSS classes the iframe document body may initially have\n\t\t\t// to re-apply them later together with the ones of the main document\n\t\t\t// body. This is necessary for some CSS classes for example the\n\t\t\t// `is-dark-theme` class added by useDarkThemeBodyClassName.\n\t\t\tconst initialIframeBodyClasses = Array.from(\n\t\t\t\tcontentDocument.body.classList\n\t\t\t);\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList )\n\t\t\t\t\t.concat( initialIframeBodyClasses )\n\t\t\t\t\t.filter(\n\t\t\t\t\t\t( name ) =>\n\t\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\t\tname === 'wp-embed-responsive' ||\n\t\t\t\t\t\t\tname === 'is-dark-theme'\n\t\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst windowResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tconst onResize = () => {\n\t\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t\twindowResizeRef,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\t\t\t/* Lowest specificity to not override global styles */\n\t\t\t:where(body) {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst _scale =\n\t\t\ttypeof scale === 'function'\n\t\t\t\t? scale( contentWidth, contentHeight )\n\t\t\t\t: scale;\n\n\t\tif ( _scale !== 1 ) {\n\t\t\t// Hack to get proper margins when scaling the iframe document.\n\t\t\tconst bottomFrameSize = frameSize - contentHeight * ( 1 - _scale );\n\n\t\t\tiframeDocument.body.classList.add( 'is-zoomed-out' );\n\n\t\t\tiframeDocument.documentElement.style.transform = `scale( ${ _scale } )`;\n\t\t\tiframeDocument.documentElement.style.marginTop = `${ frameSize }px`;\n\t\t\t// TODO: `marginBottom` doesn't work in Firefox. We need another way to do this.\n\t\t\tiframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`;\n\t\t\tif ( iframeWindowInnerHeight > contentHeight * _scale ) {\n\t\t\t\tiframeDocument.body.style.minHeight = `${ Math.floor(\n\t\t\t\t\t( iframeWindowInnerHeight - 2 * frameSize ) / _scale\n\t\t\t\t) }px`;\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tiframeDocument.body.classList.remove( 'is-zoomed-out' );\n\t\t\t\tiframeDocument.documentElement.style.transform = '';\n\t\t\t\tiframeDocument.documentElement.style.marginTop = '';\n\t\t\t\tiframeDocument.documentElement.style.marginBottom = '';\n\t\t\t\tiframeDocument.body.style.minHeight = '';\n\t\t\t};\n\t\t}\n\t}, [\n\t\tscale,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tcontentHeight,\n\t\tiframeWindowInnerHeight,\n\t\tcontentWidth,\n\t] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\treturn (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\tborder: 0,\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\ttransition: 'all .3s',\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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"}

package/build-module/components/inserter/block-patterns-explorer/index.js

@@ -17,9 +17,8 @@ function PatternsExplorer({
   rootClientId
 }) {
   const [searchValue, setSearchValue] = useState('');
-  const [patternSourceFilter, setPatternSourceFilter] = useState('all');
   const [selectedCategory, setSelectedCategory] = useState(initialCategory?.name);
-  const patternCategories = usePatternCategories(rootClientId, patternSourceFilter);
+  const patternCategories = usePatternCategories(rootClientId);
   return createElement("div", {
     className: "block-editor-block-patterns-explorer"
   }, createElement(PatternExplorerSidebar, {
@@ -27,14 +26,12 @@ function PatternsExplorer({
     patternCategories: patternCategories,
     onClickCategory: setSelectedCategory,
     searchValue: searchValue,
-    setSearchValue: setSearchValue,
-    patternSourceFilter: patternSourceFilter,
-    setPatternSourceFilter: setPatternSourceFilter
+    setSearchValue: setSearchValue
   }), createElement(PatternList, {
     searchValue: searchValue,
     selectedCategory: selectedCategory,
     patternCategories: patternCategories,
-    patternSourceFilter: patternSourceFilter
+    rootClientId: rootClientId
   }));
 }
 function PatternsExplorerModal({

package/build-module/components/inserter/block-patterns-explorer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Modal","useState","__","PatternExplorerSidebar","PatternList","usePatternCategories","PatternsExplorer","initialCategory","rootClientId","searchValue","setSearchValue","patternSourceFilter","setPatternSourceFilter","selectedCategory","setSelectedCategory","name","patternCategories","createElement","className","onClickCategory","PatternsExplorerModal","onModalClose","restProps","title","onRequestClose","isFullScreen"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-explorer/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PatternExplorerSidebar from './pattern-explorer-sidebar';\nimport PatternList from './pattern-list';\nimport { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';\n\nfunction PatternsExplorer( { initialCategory, rootClientId } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );\n\n\tconst [ selectedCategory, setSelectedCategory ] = useState(\n\t\tinitialCategory?.name\n\t);\n\n\tconst patternCategories = usePatternCategories(\n\t\trootClientId,\n\t\tpatternSourceFilter\n\t);\n\n\treturn (\n\t\t<div className=\"block-editor-block-patterns-explorer\">\n\t\t\t<PatternExplorerSidebar\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\tonClickCategory={ setSelectedCategory }\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tsetSearchValue={ setSearchValue }\n\t\t\t\tpatternSourceFilter={ patternSourceFilter }\n\t\t\t\tsetPatternSourceFilter={ setPatternSourceFilter }\n\t\t\t/>\n\t\t\t<PatternList\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\tpatternSourceFilter={ patternSourceFilter }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction PatternsExplorerModal( { onModalClose, ...restProps } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Patterns' ) }\n\t\t\tonRequestClose={ onModalClose }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<PatternsExplorer { ...restProps } />\n\t\t</Modal>\n\t);\n}\n\nexport default PatternsExplorerModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,sBAAsB,MAAM,4BAA4B;AAC/D,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,oBAAoB,QAAQ,8CAA8C;AAEnF,SAASC,gBAAgBA,CAAE;EAAEC,eAAe;EAAEC;AAAa,CAAC,EAAG;EAC9D,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGT,QAAQ,CAAE,EAAG,CAAC;EACtD,MAAM,CAAEU,mBAAmB,EAAEC,sBAAsB,CAAE,GAAGX,QAAQ,CAAE,KAAM,CAAC;EAEzE,MAAM,CAAEY,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGb,QAAQ,CACzDM,eAAe,EAAEQ,IAClB,CAAC;EAED,MAAMC,iBAAiB,GAAGX,oBAAoB,CAC7CG,YAAY,EACZG,mBACD,CAAC;EAED,OACCM,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACpDD,aAAA,CAACd,sBAAsB;IACtBU,gBAAgB,EAAGA,gBAAkB;IACrCG,iBAAiB,EAAGA,iBAAmB;IACvCG,eAAe,EAAGL,mBAAqB;IACvCL,WAAW,EAAGA,WAAa;IAC3BC,cAAc,EAAGA,cAAgB;IACjCC,mBAAmB,EAAGA,mBAAqB;IAC3CC,sBAAsB,EAAGA;EAAwB,CACjD,CAAC,EACFK,aAAA,CAACb,WAAW;IACXK,WAAW,EAAGA,WAAa;IAC3BI,gBAAgB,EAAGA,gBAAkB;IACrCG,iBAAiB,EAAGA,iBAAmB;IACvCL,mBAAmB,EAAGA;EAAqB,CAC3C,CACG,CAAC;AAER;AAEA,SAASS,qBAAqBA,CAAE;EAAEC,YAAY;EAAE,GAAGC;AAAU,CAAC,EAAG;EAChE,OACCL,aAAA,CAACjB,KAAK;IACLuB,KAAK,EAAGrB,EAAE,CAAE,UAAW,CAAG;IAC1BsB,cAAc,EAAGH,YAAc;IAC/BI,YAAY;EAAA,GAEZR,aAAA,CAACX,gBAAgB;IAAA,GAAMgB;EAAS,CAAI,CAC9B,CAAC;AAEV;AAEA,eAAeF,qBAAqB"}
+{"version":3,"names":["Modal","useState","__","PatternExplorerSidebar","PatternList","usePatternCategories","PatternsExplorer","initialCategory","rootClientId","searchValue","setSearchValue","selectedCategory","setSelectedCategory","name","patternCategories","createElement","className","onClickCategory","PatternsExplorerModal","onModalClose","restProps","title","onRequestClose","isFullScreen"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-explorer/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport PatternExplorerSidebar from './pattern-explorer-sidebar';\nimport PatternList from './pattern-list';\nimport { usePatternCategories } from '../block-patterns-tab/use-pattern-categories';\n\nfunction PatternsExplorer( { initialCategory, rootClientId } ) {\n\tconst [ searchValue, setSearchValue ] = useState( '' );\n\tconst [ selectedCategory, setSelectedCategory ] = useState(\n\t\tinitialCategory?.name\n\t);\n\n\tconst patternCategories = usePatternCategories( rootClientId );\n\n\treturn (\n\t\t<div className=\"block-editor-block-patterns-explorer\">\n\t\t\t<PatternExplorerSidebar\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\tonClickCategory={ setSelectedCategory }\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tsetSearchValue={ setSearchValue }\n\t\t\t/>\n\t\t\t<PatternList\n\t\t\t\tsearchValue={ searchValue }\n\t\t\t\tselectedCategory={ selectedCategory }\n\t\t\t\tpatternCategories={ patternCategories }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction PatternsExplorerModal( { onModalClose, ...restProps } ) {\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Patterns' ) }\n\t\t\tonRequestClose={ onModalClose }\n\t\t\tisFullScreen\n\t\t>\n\t\t\t<PatternsExplorer { ...restProps } />\n\t\t</Modal>\n\t);\n}\n\nexport default PatternsExplorerModal;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,sBAAsB,MAAM,4BAA4B;AAC/D,OAAOC,WAAW,MAAM,gBAAgB;AACxC,SAASC,oBAAoB,QAAQ,8CAA8C;AAEnF,SAASC,gBAAgBA,CAAE;EAAEC,eAAe;EAAEC;AAAa,CAAC,EAAG;EAC9D,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGT,QAAQ,CAAE,EAAG,CAAC;EACtD,MAAM,CAAEU,gBAAgB,EAAEC,mBAAmB,CAAE,GAAGX,QAAQ,CACzDM,eAAe,EAAEM,IAClB,CAAC;EAED,MAAMC,iBAAiB,GAAGT,oBAAoB,CAAEG,YAAa,CAAC;EAE9D,OACCO,aAAA;IAAKC,SAAS,EAAC;EAAsC,GACpDD,aAAA,CAACZ,sBAAsB;IACtBQ,gBAAgB,EAAGA,gBAAkB;IACrCG,iBAAiB,EAAGA,iBAAmB;IACvCG,eAAe,EAAGL,mBAAqB;IACvCH,WAAW,EAAGA,WAAa;IAC3BC,cAAc,EAAGA;EAAgB,CACjC,CAAC,EACFK,aAAA,CAACX,WAAW;IACXK,WAAW,EAAGA,WAAa;IAC3BE,gBAAgB,EAAGA,gBAAkB;IACrCG,iBAAiB,EAAGA,iBAAmB;IACvCN,YAAY,EAAGA;EAAc,CAC7B,CACG,CAAC;AAER;AAEA,SAASU,qBAAqBA,CAAE;EAAEC,YAAY;EAAE,GAAGC;AAAU,CAAC,EAAG;EAChE,OACCL,aAAA,CAACf,KAAK;IACLqB,KAAK,EAAGnB,EAAE,CAAE,UAAW,CAAG;IAC1BoB,cAAc,EAAGH,YAAc;IAC/BI,YAAY;EAAA,GAEZR,aAAA,CAACT,gBAAgB;IAAA,GAAMc;EAAS,CAAI,CAC9B,CAAC;AAEV;AAEA,eAAeF,qBAAqB"}

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

@@ -36,11 +36,13 @@ function PatternsListHeader({
 function PatternList({
   searchValue,
   selectedCategory,
-  patternCategories
+  patternCategories,
+  rootClientId
 }) {
   const container = useRef();
   const debouncedSpeak = useDebounce(speak, 500);
   const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
+    rootClientId,
     shouldFocusBlock: true
   });
   const [patterns,, onClickPattern] = usePatternsState(onInsertBlocks, destinationRootClientId);

package/build-module/components/inserter/block-patterns-explorer/pattern-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useEffect","useRef","useState","_n","sprintf","useDebounce","__experimentalHeading","Heading","speak","BlockPatternsList","useInsertionPoint","usePatternsState","InserterListbox","searchItems","BlockPatternsPaging","usePatternsPaging","INSERTER_PATTERN_TYPES","allPatternsCategory","myPatternsCategory","PatternsListHeader","filterValue","filteredBlockPatternsLength","createElement","level","lineHeight","className","PatternList","searchValue","selectedCategory","patternCategories","container","debouncedSpeak","destinationRootClientId","onInsertBlocks","shouldFocusBlock","patterns","onClickPattern","registeredPatternCategories","map","patternCategory","name","filteredBlockPatterns","filteredPatterns","filter","pattern","type","user","hasKnownCategory","categories","some","category","includes","length","count","resultsFoundMessage","pagingProps","previousSearchValue","setPreviousSearchValue","changePage","hasItems","ref","Fragment","shownPatterns","categoryPatternsAsyncList","blockPatterns","categoryPatterns","isDraggable"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useEffect, useRef, useState } from '@wordpress/element';\nimport { _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce } from '@wordpress/compose';\nimport { __experimentalHeading as Heading } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport BlockPatternsList from '../../block-patterns-list';\nimport useInsertionPoint from '../hooks/use-insertion-point';\nimport usePatternsState from '../hooks/use-patterns-state';\nimport InserterListbox from '../../inserter-listbox';\nimport { searchItems } from '../search-items';\nimport BlockPatternsPaging from '../../block-patterns-paging';\nimport usePatternsPaging from '../hooks/use-patterns-paging';\nimport {\n\tINSERTER_PATTERN_TYPES,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n} from '../block-patterns-tab/utils';\n\nfunction PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {\n\tif ( ! filterValue ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Heading\n\t\t\tlevel={ 2 }\n\t\t\tlineHeight={ '48px' }\n\t\t\tclassName=\"block-editor-block-patterns-explorer__search-results-count\"\n\t\t>\n\t\t\t{ sprintf(\n\t\t\t\t/* translators: %d: number of patterns. */\n\t\t\t\t_n(\n\t\t\t\t\t'%d pattern found',\n\t\t\t\t\t'%d patterns found',\n\t\t\t\t\tfilteredBlockPatternsLength\n\t\t\t\t),\n\t\t\t\tfilteredBlockPatternsLength\n\t\t\t) }\n\t\t</Heading>\n\t);\n}\n\nfunction PatternList( { searchValue, selectedCategory, patternCategories } ) {\n\tconst container = useRef();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {\n\t\tshouldFocusBlock: true,\n\t} );\n\tconst [ patterns, , onClickPattern ] = usePatternsState(\n\t\tonInsertBlocks,\n\t\tdestinationRootClientId\n\t);\n\n\tconst registeredPatternCategories = useMemo(\n\t\t() =>\n\t\t\tpatternCategories.map(\n\t\t\t\t( patternCategory ) => patternCategory.name\n\t\t\t),\n\t\t[ patternCategories ]\n\t);\n\n\tconst filteredBlockPatterns = useMemo( () => {\n\t\tconst filteredPatterns = patterns.filter( ( pattern ) => {\n\t\t\tif ( selectedCategory === allPatternsCategory.name ) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === myPatternsCategory.name &&\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif ( selectedCategory === 'uncategorized' ) {\n\t\t\t\tconst hasKnownCategory = pattern.categories.some(\n\t\t\t\t\t( category ) =>\n\t\t\t\t\t\tregisteredPatternCategories.includes( category )\n\t\t\t\t);\n\n\t\t\t\treturn ! pattern.categories?.length || ! hasKnownCategory;\n\t\t\t}\n\n\t\t\treturn pattern.categories?.includes( selectedCategory );\n\t\t} );\n\n\t\tif ( ! searchValue ) {\n\t\t\treturn filteredPatterns;\n\t\t}\n\n\t\treturn searchItems( filteredPatterns, searchValue );\n\t}, [\n\t\tsearchValue,\n\t\tpatterns,\n\t\tselectedCategory,\n\t\tregisteredPatternCategories,\n\t] );\n\n\t// Announce search results on change.\n\tuseEffect( () => {\n\t\tif ( ! searchValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst count = filteredBlockPatterns.length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );\n\n\tconst pagingProps = usePatternsPaging(\n\t\tfilteredBlockPatterns,\n\t\tselectedCategory,\n\t\tcontainer\n\t);\n\n\t// Reset page when search value changes.\n\tconst [ previousSearchValue, setPreviousSearchValue ] =\n\t\tuseState( searchValue );\n\tif ( searchValue !== previousSearchValue ) {\n\t\tsetPreviousSearchValue( searchValue );\n\t\tpagingProps.changePage( 1 );\n\t}\n\n\tconst hasItems = !! filteredBlockPatterns?.length;\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-block-patterns-explorer__list\"\n\t\t\tref={ container }\n\t\t>\n\t\t\t<PatternsListHeader\n\t\t\t\tfilterValue={ searchValue }\n\t\t\t\tfilteredBlockPatternsLength={ filteredBlockPatterns.length }\n\t\t\t/>\n\n\t\t\t<InserterListbox>\n\t\t\t\t{ hasItems && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\t\tshownPatterns={\n\t\t\t\t\t\t\t\tpagingProps.categoryPatternsAsyncList\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\t\t\tonClickPattern={ onClickPattern }\n\t\t\t\t\t\t\tisDraggable={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockPatternsPaging { ...pagingProps } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</InserterListbox>\n\t\t</div>\n\t);\n}\n\nexport default PatternList;\n"],"mappings":"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"}
+{"version":3,"names":["useMemo","useEffect","useRef","useState","_n","sprintf","useDebounce","__experimentalHeading","Heading","speak","BlockPatternsList","useInsertionPoint","usePatternsState","InserterListbox","searchItems","BlockPatternsPaging","usePatternsPaging","INSERTER_PATTERN_TYPES","allPatternsCategory","myPatternsCategory","PatternsListHeader","filterValue","filteredBlockPatternsLength","createElement","level","lineHeight","className","PatternList","searchValue","selectedCategory","patternCategories","rootClientId","container","debouncedSpeak","destinationRootClientId","onInsertBlocks","shouldFocusBlock","patterns","onClickPattern","registeredPatternCategories","map","patternCategory","name","filteredBlockPatterns","filteredPatterns","filter","pattern","type","user","hasKnownCategory","categories","some","category","includes","length","count","resultsFoundMessage","pagingProps","previousSearchValue","setPreviousSearchValue","changePage","hasItems","ref","Fragment","shownPatterns","categoryPatternsAsyncList","blockPatterns","categoryPatterns","isDraggable"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useEffect, useRef, useState } from '@wordpress/element';\nimport { _n, sprintf } from '@wordpress/i18n';\nimport { useDebounce } from '@wordpress/compose';\nimport { __experimentalHeading as Heading } from '@wordpress/components';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport BlockPatternsList from '../../block-patterns-list';\nimport useInsertionPoint from '../hooks/use-insertion-point';\nimport usePatternsState from '../hooks/use-patterns-state';\nimport InserterListbox from '../../inserter-listbox';\nimport { searchItems } from '../search-items';\nimport BlockPatternsPaging from '../../block-patterns-paging';\nimport usePatternsPaging from '../hooks/use-patterns-paging';\nimport {\n\tINSERTER_PATTERN_TYPES,\n\tallPatternsCategory,\n\tmyPatternsCategory,\n} from '../block-patterns-tab/utils';\n\nfunction PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {\n\tif ( ! filterValue ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Heading\n\t\t\tlevel={ 2 }\n\t\t\tlineHeight={ '48px' }\n\t\t\tclassName=\"block-editor-block-patterns-explorer__search-results-count\"\n\t\t>\n\t\t\t{ sprintf(\n\t\t\t\t/* translators: %d: number of patterns. */\n\t\t\t\t_n(\n\t\t\t\t\t'%d pattern found',\n\t\t\t\t\t'%d patterns found',\n\t\t\t\t\tfilteredBlockPatternsLength\n\t\t\t\t),\n\t\t\t\tfilteredBlockPatternsLength\n\t\t\t) }\n\t\t</Heading>\n\t);\n}\n\nfunction PatternList( {\n\tsearchValue,\n\tselectedCategory,\n\tpatternCategories,\n\trootClientId,\n} ) {\n\tconst container = useRef();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {\n\t\trootClientId,\n\t\tshouldFocusBlock: true,\n\t} );\n\tconst [ patterns, , onClickPattern ] = usePatternsState(\n\t\tonInsertBlocks,\n\t\tdestinationRootClientId\n\t);\n\n\tconst registeredPatternCategories = useMemo(\n\t\t() =>\n\t\t\tpatternCategories.map(\n\t\t\t\t( patternCategory ) => patternCategory.name\n\t\t\t),\n\t\t[ patternCategories ]\n\t);\n\n\tconst filteredBlockPatterns = useMemo( () => {\n\t\tconst filteredPatterns = patterns.filter( ( pattern ) => {\n\t\t\tif ( selectedCategory === allPatternsCategory.name ) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tselectedCategory === myPatternsCategory.name &&\n\t\t\t\tpattern.type === INSERTER_PATTERN_TYPES.user\n\t\t\t) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t\tif ( selectedCategory === 'uncategorized' ) {\n\t\t\t\tconst hasKnownCategory = pattern.categories.some(\n\t\t\t\t\t( category ) =>\n\t\t\t\t\t\tregisteredPatternCategories.includes( category )\n\t\t\t\t);\n\n\t\t\t\treturn ! pattern.categories?.length || ! hasKnownCategory;\n\t\t\t}\n\n\t\t\treturn pattern.categories?.includes( selectedCategory );\n\t\t} );\n\n\t\tif ( ! searchValue ) {\n\t\t\treturn filteredPatterns;\n\t\t}\n\n\t\treturn searchItems( filteredPatterns, searchValue );\n\t}, [\n\t\tsearchValue,\n\t\tpatterns,\n\t\tselectedCategory,\n\t\tregisteredPatternCategories,\n\t] );\n\n\t// Announce search results on change.\n\tuseEffect( () => {\n\t\tif ( ! searchValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst count = filteredBlockPatterns.length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );\n\n\tconst pagingProps = usePatternsPaging(\n\t\tfilteredBlockPatterns,\n\t\tselectedCategory,\n\t\tcontainer\n\t);\n\n\t// Reset page when search value changes.\n\tconst [ previousSearchValue, setPreviousSearchValue ] =\n\t\tuseState( searchValue );\n\tif ( searchValue !== previousSearchValue ) {\n\t\tsetPreviousSearchValue( searchValue );\n\t\tpagingProps.changePage( 1 );\n\t}\n\n\tconst hasItems = !! filteredBlockPatterns?.length;\n\treturn (\n\t\t<div\n\t\t\tclassName=\"block-editor-block-patterns-explorer__list\"\n\t\t\tref={ container }\n\t\t>\n\t\t\t<PatternsListHeader\n\t\t\t\tfilterValue={ searchValue }\n\t\t\t\tfilteredBlockPatternsLength={ filteredBlockPatterns.length }\n\t\t\t/>\n\n\t\t\t<InserterListbox>\n\t\t\t\t{ hasItems && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockPatternsList\n\t\t\t\t\t\t\tshownPatterns={\n\t\t\t\t\t\t\t\tpagingProps.categoryPatternsAsyncList\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tblockPatterns={ pagingProps.categoryPatterns }\n\t\t\t\t\t\t\tonClickPattern={ onClickPattern }\n\t\t\t\t\t\t\tisDraggable={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockPatternsPaging { ...pagingProps } />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</InserterListbox>\n\t\t</div>\n\t);\n}\n\nexport default PatternList;\n"],"mappings":"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"}

package/build-module/components/inserter/block-patterns-tab/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useState","__","isRTL","useViewportMatch","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexBlock","Button","Icon","chevronRight","chevronLeft","PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","showPatternsExplorer","setShowPatternsExplorer","categories","initialCategory","isMobile","createElement","Fragment","className","role","map","category","key","name","onClick","label","undefined","icon","variant","showTitlesAsTooltip","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n\tButton,\n} from '@wordpress/components';\nimport { Icon, chevronRight, chevronLeft } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst initialCategory = selectedCategory || categories[ 0 ];\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<nav\n\t\t\t\t\t\taria-label={ __( 'Block pattern categories' ) }\n\t\t\t\t\t\tclassName=\"block-editor-inserter__block-patterns-tabs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ItemGroup role=\"list\">\n\t\t\t\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectCategory( category )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\tcategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'\n\t\t\t\t\t\t\t\t\t\t\t: 'block-editor-inserter__patterns-category'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taria-label={ category.label }\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tcategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'true'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t\t\t\t{ category.label }\n\t\t\t\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<div role=\"listitem\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetShowPatternsExplorer( true )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\tshowTitlesAsTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ initialCategory }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,EAAE,EAAEC,KAAK,QAAQ,iBAAiB;AAC3C,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SACCC,uBAAuB,IAAIC,SAAS,EACpCC,kBAAkB,IAAIC,IAAI,EAC1BC,oBAAoB,IAAIC,MAAM,EAC9BC,SAAS,EACTC,MAAM,QACA,uBAAuB;AAC9B,SAASC,IAAI,EAAEC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;;AAElE;AACA;AACA;AACA,OAAOC,qBAAqB,MAAM,4BAA4B;AAC9D,OAAOC,mBAAmB,MAAM,0BAA0B;AAC1D,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,SAASC,gBAAgBA,CAAE;EAC1BC,gBAAgB;EAChBC,gBAAgB;EAChBC,QAAQ;EACRC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,oBAAoB,EAAEC,uBAAuB,CAAE,GAAGzB,QAAQ,CAAE,KAAM,CAAC;EAE3E,MAAM0B,UAAU,GAAGR,oBAAoB,CAAEK,YAAa,CAAC;EAEvD,MAAMI,eAAe,GAAGN,gBAAgB,IAAIK,UAAU,CAAE,CAAC,CAAE;EAC3D,MAAME,QAAQ,GAAGzB,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAClD,OACC0B,aAAA,CAAAC,QAAA,QACG,CAAEF,QAAQ,IACXC,aAAA;IAAKE,SAAS,EAAC;EAAsD,GACpEF,aAAA;IACC,cAAa5B,EAAE,CAAE,0BAA2B,CAAG;IAC/C8B,SAAS,EAAC;EAA4C,GAEtDF,aAAA,CAACxB,SAAS;IAAC2B,IAAI,EAAC;EAAM,GACnBN,UAAU,CAACO,GAAG,CAAIC,QAAQ,IAC3BL,aAAA,CAACtB,IAAI;IACJyB,IAAI,EAAC,UAAU;IACfG,GAAG,EAAGD,QAAQ,CAACE,IAAM;IACrBC,OAAO,EAAGA,CAAA,KACTjB,gBAAgB,CAAEc,QAAS,CAC3B;IACDH,SAAS,EACRG,QAAQ,KAAKb,gBAAgB,GAC1B,4FAA4F,GAC5F,0CACH;IACD,cAAaa,QAAQ,CAACI,KAAO;IAC7B,gBACCJ,QAAQ,KAAKb,gBAAgB,GAC1B,MAAM,GACNkB;EACH,GAEDV,aAAA,CAACpB,MAAM,QACNoB,aAAA,CAACnB,SAAS,QACPwB,QAAQ,CAACI,KACD,CAAC,EACZT,aAAA,CAACjB,IAAI;IACJ4B,IAAI,EACHtC,KAAK,CAAC,CAAC,GACJY,WAAW,GACXD;EACH,CACD,CACM,CACH,CACL,CAAC,EACHgB,aAAA;IAAKG,IAAI,EAAC;EAAU,GACnBH,aAAA,CAAClB,MAAM;IACNoB,SAAS,EAAC,gDAAgD;IAC1DM,OAAO,EAAGA,CAAA,KACTZ,uBAAuB,CAAE,IAAK,CAC9B;IACDgB,OAAO,EAAC;EAAW,GAEjBxC,EAAE,CAAE,sBAAuB,CACtB,CACJ,CACK,CACP,CACD,CACL,EACC2B,QAAQ,IACTC,aAAA,CAACb,mBAAmB;IAACU,UAAU,EAAGA;EAAY,GACzCQ,QAAQ,IACXL,aAAA,CAACZ,uBAAuB;IACvBkB,GAAG,EAAGD,QAAQ,CAACE,IAAM;IACrBd,QAAQ,EAAGA,QAAU;IACrBC,YAAY,EAAGA,YAAc;IAC7BW,QAAQ,EAAGA,QAAU;IACrBQ,mBAAmB,EAAG;EAAO,CAC7B,CAEkB,CACrB,EACClB,oBAAoB,IACrBK,aAAA,CAACd,qBAAqB;IACrBY,eAAe,EAAGA,eAAiB;IACnCgB,iBAAiB,EAAGjB,UAAY;IAChCkB,YAAY,EAAGA,CAAA,KAAMnB,uBAAuB,CAAE,KAAM,CAAG;IACvDF,YAAY,EAAGA;EAAc,CAC7B,CAED,CAAC;AAEL;AAEA,eAAeJ,gBAAgB"}
+{"version":3,"names":["useState","__","isRTL","useViewportMatch","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","FlexBlock","Button","Icon","chevronRight","chevronLeft","PatternsExplorerModal","MobileTabNavigation","PatternCategoryPreviews","usePatternCategories","BlockPatternsTab","onSelectCategory","selectedCategory","onInsert","rootClientId","showPatternsExplorer","setShowPatternsExplorer","categories","initialCategory","isMobile","createElement","Fragment","className","role","map","category","key","name","onClick","label","undefined","icon","variant","showTitlesAsTooltip","patternCategories","onModalClose"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\tFlexBlock,\n\tButton,\n} from '@wordpress/components';\nimport { Icon, chevronRight, chevronLeft } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport PatternsExplorerModal from '../block-patterns-explorer';\nimport MobileTabNavigation from '../mobile-tab-navigation';\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { usePatternCategories } from './use-pattern-categories';\n\nfunction BlockPatternsTab( {\n\tonSelectCategory,\n\tselectedCategory,\n\tonInsert,\n\trootClientId,\n} ) {\n\tconst [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );\n\n\tconst categories = usePatternCategories( rootClientId );\n\n\tconst initialCategory = selectedCategory || categories[ 0 ];\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isMobile && (\n\t\t\t\t<div className=\"block-editor-inserter__block-patterns-tabs-container\">\n\t\t\t\t\t<nav\n\t\t\t\t\t\taria-label={ __( 'Block pattern categories' ) }\n\t\t\t\t\t\tclassName=\"block-editor-inserter__block-patterns-tabs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<ItemGroup role=\"list\">\n\t\t\t\t\t\t\t{ categories.map( ( category ) => (\n\t\t\t\t\t\t\t\t<Item\n\t\t\t\t\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tonSelectCategory( category )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\tcategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'\n\t\t\t\t\t\t\t\t\t\t\t: 'block-editor-inserter__patterns-category'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\taria-label={ category.label }\n\t\t\t\t\t\t\t\t\taria-current={\n\t\t\t\t\t\t\t\t\t\tcategory === selectedCategory\n\t\t\t\t\t\t\t\t\t\t\t? 'true'\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack>\n\t\t\t\t\t\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t\t\t\t\t\t{ category.label }\n\t\t\t\t\t\t\t\t\t\t</FlexBlock>\n\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</Item>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t<div role=\"listitem\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-inserter__patterns-explore-button\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetShowPatternsExplorer( true )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Explore all patterns' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t</nav>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ isMobile && (\n\t\t\t\t<MobileTabNavigation categories={ categories }>\n\t\t\t\t\t{ ( category ) => (\n\t\t\t\t\t\t<PatternCategoryPreviews\n\t\t\t\t\t\t\tkey={ category.name }\n\t\t\t\t\t\t\tonInsert={ onInsert }\n\t\t\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t\t\t\tcategory={ category }\n\t\t\t\t\t\t\tshowTitlesAsTooltip={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</MobileTabNavigation>\n\t\t\t) }\n\t\t\t{ showPatternsExplorer && (\n\t\t\t\t<PatternsExplorerModal\n\t\t\t\t\tinitialCategory={ initialCategory }\n\t\t\t\t\tpatternCategories={ categories }\n\t\t\t\t\tonModalClose={ () => setShowPatternsExplorer( false ) }\n\t\t\t\t\trootClientId={ rootClientId }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default BlockPatternsTab;\n"],"mappings":"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"}

package/build-module/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -10,6 +10,7 @@ import { focus } from '@wordpress/dom';
  */
 
 import { PatternCategoryPreviews } from './pattern-category-previews';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 export function PatternCategoryPreviewPanel({
   rootClientId,
   onInsert,
@@ -26,6 +27,10 @@ export function PatternCategoryPreviewPanel({
     });
     return () => clearTimeout(timeout);
   }, [category]);
+
+  // Move to zoom out mode when this component is mounted
+  // and back to the previous mode when unmounted.
+  useZoomOut();
   return createElement("div", {
     ref: container,
     className: "block-editor-inserter__patterns-category-dialog"

package/build-module/components/inserter/block-patterns-tab/pattern-category-preview-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","focus","PatternCategoryPreviews","PatternCategoryPreviewPanel","rootClientId","onInsert","onHover","category","showTitlesAsTooltip","patternFilter","container","timeout","setTimeout","firstTabbable","tabbable","find","current","clearTimeout","createElement","ref","className","key","name"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\n\nimport { PatternCategoryPreviews } from './pattern-category-previews';\n\nexport function PatternCategoryPreviewPanel( {\n\trootClientId,\n\tonInsert,\n\tonHover,\n\tcategory,\n\tshowTitlesAsTooltip,\n\tpatternFilter,\n} ) {\n\tconst container = useRef();\n\n\tuseEffect( () => {\n\t\tconst timeout = setTimeout( () => {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( container.current );\n\t\t\tfirstTabbable?.focus();\n\t\t} );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ category ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ container }\n\t\t\tclassName=\"block-editor-inserter__patterns-category-dialog\"\n\t\t>\n\t\t\t<PatternCategoryPreviews\n\t\t\t\tkey={ category.name }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tonHover={ onHover }\n\t\t\t\tcategory={ category }\n\t\t\t\tshowTitlesAsTooltip={ showTitlesAsTooltip }\n\t\t\t\tpatternFilter={ patternFilter }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAEtD,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;;AAEA,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,SAASC,2BAA2BA,CAAE;EAC5CC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,SAAS,GAAGX,MAAM,CAAC,CAAC;EAE1BC,SAAS,CAAE,MAAM;IAChB,MAAMW,OAAO,GAAGC,UAAU,CAAE,MAAM;MACjC,MAAM,CAAEC,aAAa,CAAE,GAAGZ,KAAK,CAACa,QAAQ,CAACC,IAAI,CAAEL,SAAS,CAACM,OAAQ,CAAC;MAClEH,aAAa,EAAEZ,KAAK,CAAC,CAAC;IACvB,CAAE,CAAC;IACH,OAAO,MAAMgB,YAAY,CAAEN,OAAQ,CAAC;EACrC,CAAC,EAAE,CAAEJ,QAAQ,CAAG,CAAC;EAEjB,OACCW,aAAA;IACCC,GAAG,EAAGT,SAAW;IACjBU,SAAS,EAAC;EAAiD,GAE3DF,aAAA,CAAChB,uBAAuB;IACvBmB,GAAG,EAAGd,QAAQ,CAACe,IAAM;IACrBlB,YAAY,EAAGA,YAAc;IAC7BC,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrBC,mBAAmB,EAAGA,mBAAqB;IAC3CC,aAAa,EAAGA;EAAe,CAC/B,CACG,CAAC;AAER"}
+{"version":3,"names":["useRef","useEffect","focus","PatternCategoryPreviews","useZoomOut","PatternCategoryPreviewPanel","rootClientId","onInsert","onHover","category","showTitlesAsTooltip","patternFilter","container","timeout","setTimeout","firstTabbable","tabbable","find","current","clearTimeout","createElement","ref","className","key","name"],"sources":["@wordpress/block-editor/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\n\nimport { PatternCategoryPreviews } from './pattern-category-previews';\nimport { useZoomOut } from '../../../hooks/use-zoom-out';\n\nexport function PatternCategoryPreviewPanel( {\n\trootClientId,\n\tonInsert,\n\tonHover,\n\tcategory,\n\tshowTitlesAsTooltip,\n\tpatternFilter,\n} ) {\n\tconst container = useRef();\n\n\tuseEffect( () => {\n\t\tconst timeout = setTimeout( () => {\n\t\t\tconst [ firstTabbable ] = focus.tabbable.find( container.current );\n\t\t\tfirstTabbable?.focus();\n\t\t} );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ category ] );\n\n\t// Move to zoom out mode when this component is mounted\n\t// and back to the previous mode when unmounted.\n\tuseZoomOut();\n\n\treturn (\n\t\t<div\n\t\t\tref={ container }\n\t\t\tclassName=\"block-editor-inserter__patterns-category-dialog\"\n\t\t>\n\t\t\t<PatternCategoryPreviews\n\t\t\t\tkey={ category.name }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t\tonInsert={ onInsert }\n\t\t\t\tonHover={ onHover }\n\t\t\t\tcategory={ category }\n\t\t\t\tshowTitlesAsTooltip={ showTitlesAsTooltip }\n\t\t\t\tpatternFilter={ patternFilter }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AAEtD,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;;AAEA,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,UAAU,QAAQ,6BAA6B;AAExD,OAAO,SAASC,2BAA2BA,CAAE;EAC5CC,YAAY;EACZC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,mBAAmB;EACnBC;AACD,CAAC,EAAG;EACH,MAAMC,SAAS,GAAGZ,MAAM,CAAC,CAAC;EAE1BC,SAAS,CAAE,MAAM;IAChB,MAAMY,OAAO,GAAGC,UAAU,CAAE,MAAM;MACjC,MAAM,CAAEC,aAAa,CAAE,GAAGb,KAAK,CAACc,QAAQ,CAACC,IAAI,CAAEL,SAAS,CAACM,OAAQ,CAAC;MAClEH,aAAa,EAAEb,KAAK,CAAC,CAAC;IACvB,CAAE,CAAC;IACH,OAAO,MAAMiB,YAAY,CAAEN,OAAQ,CAAC;EACrC,CAAC,EAAE,CAAEJ,QAAQ,CAAG,CAAC;;EAEjB;EACA;EACAL,UAAU,CAAC,CAAC;EAEZ,OACCgB,aAAA;IACCC,GAAG,EAAGT,SAAW;IACjBU,SAAS,EAAC;EAAiD,GAE3DF,aAAA,CAACjB,uBAAuB;IACvBoB,GAAG,EAAGd,QAAQ,CAACe,IAAM;IACrBlB,YAAY,EAAGA,YAAc;IAC7BC,QAAQ,EAAGA,QAAU;IACrBC,OAAO,EAAGA,OAAS;IACnBC,QAAQ,EAAGA,QAAU;IACrBC,mBAAmB,EAAGA,mBAAqB;IAC3CC,aAAa,EAAGA;EAAe,CAC/B,CACG,CAAC;AAER"}

package/build-module/components/inserter/library.js

@@ -19,6 +19,7 @@ function InserterLibrary({
   showMostUsedBlocks = false,
   __experimentalInsertionIndex,
   __experimentalFilterValue,
+  __experimentalOnPatternCategorySelection,
   onSelect = noop,
   shouldFocusBlock = false
 }, ref) {
@@ -42,6 +43,7 @@ function InserterLibrary({
     showMostUsedBlocks: showMostUsedBlocks,
     __experimentalInsertionIndex: __experimentalInsertionIndex,
     __experimentalFilterValue: __experimentalFilterValue,
+    __experimentalOnPatternCategorySelection: __experimentalOnPatternCategorySelection,
     shouldFocusBlock: shouldFocusBlock,
     ref: ref
   });

package/build-module/components/inserter/library.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelect","forwardRef","InserterMenu","store","blockEditorStore","noop","InserterLibrary","rootClientId","clientId","isAppender","showInserterHelpPanel","showMostUsedBlocks","__experimentalInsertionIndex","__experimentalFilterValue","onSelect","shouldFocusBlock","ref","destinationRootClientId","select","getBlockRootClientId","_rootClientId","undefined","createElement"],"sources":["@wordpress/block-editor/src/components/inserter/library.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InserterMenu from './menu';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\n\nfunction InserterLibrary(\n\t{\n\t\trootClientId,\n\t\tclientId,\n\t\tisAppender,\n\t\tshowInserterHelpPanel,\n\t\tshowMostUsedBlocks = false,\n\t\t__experimentalInsertionIndex,\n\t\t__experimentalFilterValue,\n\t\tonSelect = noop,\n\t\tshouldFocusBlock = false,\n\t},\n\tref\n) {\n\tconst { destinationRootClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId } = select( blockEditorStore );\n\t\t\tconst _rootClientId =\n\t\t\t\trootClientId || getBlockRootClientId( clientId ) || undefined;\n\t\t\treturn {\n\t\t\t\tdestinationRootClientId: _rootClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId, rootClientId ]\n\t);\n\n\treturn (\n\t\t<InserterMenu\n\t\t\tonSelect={ onSelect }\n\t\t\trootClientId={ destinationRootClientId }\n\t\t\tclientId={ clientId }\n\t\t\tisAppender={ isAppender }\n\t\t\tshowInserterHelpPanel={ showInserterHelpPanel }\n\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t__experimentalInsertionIndex={ __experimentalInsertionIndex }\n\t\t\t__experimentalFilterValue={ __experimentalFilterValue }\n\t\t\tshouldFocusBlock={ shouldFocusBlock }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( InserterLibrary );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,YAAY,MAAM,QAAQ;AACjC,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,eAAeA,CACvB;EACCC,YAAY;EACZC,QAAQ;EACRC,UAAU;EACVC,qBAAqB;EACrBC,kBAAkB,GAAG,KAAK;EAC1BC,4BAA4B;EAC5BC,yBAAyB;EACzBC,QAAQ,GAAGT,IAAI;EACfU,gBAAgB,GAAG;AACpB,CAAC,EACDC,GAAG,EACF;EACD,MAAM;IAAEC;EAAwB,CAAC,GAAGjB,SAAS,CAC1CkB,MAAM,IAAM;IACb,MAAM;MAAEC;IAAqB,CAAC,GAAGD,MAAM,CAAEd,gBAAiB,CAAC;IAC3D,MAAMgB,aAAa,GAClBb,YAAY,IAAIY,oBAAoB,CAAEX,QAAS,CAAC,IAAIa,SAAS;IAC9D,OAAO;MACNJ,uBAAuB,EAAEG;IAC1B,CAAC;EACF,CAAC,EACD,CAAEZ,QAAQ,EAAED,YAAY,CACzB,CAAC;EAED,OACCe,aAAA,CAACpB,YAAY;IACZY,QAAQ,EAAGA,QAAU;IACrBP,YAAY,EAAGU,uBAAyB;IACxCT,QAAQ,EAAGA,QAAU;IACrBC,UAAU,EAAGA,UAAY;IACzBC,qBAAqB,EAAGA,qBAAuB;IAC/CC,kBAAkB,EAAGA,kBAAoB;IACzCC,4BAA4B,EAAGA,4BAA8B;IAC7DC,yBAAyB,EAAGA,yBAA2B;IACvDE,gBAAgB,EAAGA,gBAAkB;IACrCC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ;AAEA,eAAef,UAAU,CAAEK,eAAgB,CAAC"}
+{"version":3,"names":["useSelect","forwardRef","InserterMenu","store","blockEditorStore","noop","InserterLibrary","rootClientId","clientId","isAppender","showInserterHelpPanel","showMostUsedBlocks","__experimentalInsertionIndex","__experimentalFilterValue","__experimentalOnPatternCategorySelection","onSelect","shouldFocusBlock","ref","destinationRootClientId","select","getBlockRootClientId","_rootClientId","undefined","createElement"],"sources":["@wordpress/block-editor/src/components/inserter/library.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InserterMenu from './menu';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\n\nfunction InserterLibrary(\n\t{\n\t\trootClientId,\n\t\tclientId,\n\t\tisAppender,\n\t\tshowInserterHelpPanel,\n\t\tshowMostUsedBlocks = false,\n\t\t__experimentalInsertionIndex,\n\t\t__experimentalFilterValue,\n\t\t__experimentalOnPatternCategorySelection,\n\t\tonSelect = noop,\n\t\tshouldFocusBlock = false,\n\t},\n\tref\n) {\n\tconst { destinationRootClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId } = select( blockEditorStore );\n\t\t\tconst _rootClientId =\n\t\t\t\trootClientId || getBlockRootClientId( clientId ) || undefined;\n\t\t\treturn {\n\t\t\t\tdestinationRootClientId: _rootClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId, rootClientId ]\n\t);\n\n\treturn (\n\t\t<InserterMenu\n\t\t\tonSelect={ onSelect }\n\t\t\trootClientId={ destinationRootClientId }\n\t\t\tclientId={ clientId }\n\t\t\tisAppender={ isAppender }\n\t\t\tshowInserterHelpPanel={ showInserterHelpPanel }\n\t\t\tshowMostUsedBlocks={ showMostUsedBlocks }\n\t\t\t__experimentalInsertionIndex={ __experimentalInsertionIndex }\n\t\t\t__experimentalFilterValue={ __experimentalFilterValue }\n\t\t\t__experimentalOnPatternCategorySelection={\n\t\t\t\t__experimentalOnPatternCategorySelection\n\t\t\t}\n\t\t\tshouldFocusBlock={ shouldFocusBlock }\n\t\t\tref={ ref }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( InserterLibrary );\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,YAAY,MAAM,QAAQ;AACjC,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,aAAa;AAEvD,MAAMC,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAErB,SAASC,eAAeA,CACvB;EACCC,YAAY;EACZC,QAAQ;EACRC,UAAU;EACVC,qBAAqB;EACrBC,kBAAkB,GAAG,KAAK;EAC1BC,4BAA4B;EAC5BC,yBAAyB;EACzBC,wCAAwC;EACxCC,QAAQ,GAAGV,IAAI;EACfW,gBAAgB,GAAG;AACpB,CAAC,EACDC,GAAG,EACF;EACD,MAAM;IAAEC;EAAwB,CAAC,GAAGlB,SAAS,CAC1CmB,MAAM,IAAM;IACb,MAAM;MAAEC;IAAqB,CAAC,GAAGD,MAAM,CAAEf,gBAAiB,CAAC;IAC3D,MAAMiB,aAAa,GAClBd,YAAY,IAAIa,oBAAoB,CAAEZ,QAAS,CAAC,IAAIc,SAAS;IAC9D,OAAO;MACNJ,uBAAuB,EAAEG;IAC1B,CAAC;EACF,CAAC,EACD,CAAEb,QAAQ,EAAED,YAAY,CACzB,CAAC;EAED,OACCgB,aAAA,CAACrB,YAAY;IACZa,QAAQ,EAAGA,QAAU;IACrBR,YAAY,EAAGW,uBAAyB;IACxCV,QAAQ,EAAGA,QAAU;IACrBC,UAAU,EAAGA,UAAY;IACzBC,qBAAqB,EAAGA,qBAAuB;IAC/CC,kBAAkB,EAAGA,kBAAoB;IACzCC,4BAA4B,EAAGA,4BAA8B;IAC7DC,yBAAyB,EAAGA,yBAA2B;IACvDC,wCAAwC,EACvCA,wCACA;IACDE,gBAAgB,EAAGA,gBAAkB;IACrCC,GAAG,EAAGA;EAAK,CACX,CAAC;AAEJ;AAEA,eAAehB,UAAU,CAAEK,eAAgB,CAAC"}

package/build-module/components/inserter/menu.js

@@ -27,6 +27,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+const NOOP = () => {};
 function InserterMenu({
   rootClientId,
   clientId,
@@ -36,7 +37,8 @@ function InserterMenu({
   showInserterHelpPanel,
   showMostUsedBlocks,
   __experimentalFilterValue = '',
-  shouldFocusBlock = true
+  shouldFocusBlock = true,
+  __experimentalOnPatternCategorySelection = NOOP
 }, ref) {
   const [filterValue, setFilterValue, delayedFilterValue] = useDebouncedInput(__experimentalFilterValue);
   const [hoveredItem, setHoveredItem] = useState(null);
@@ -52,21 +54,17 @@ function InserterMenu({
     shouldFocusBlock
   });
   const {
-    isZoomOutMode,
     showPatterns
   } = useSelect(select => {
     const {
-      hasAllowedPatterns,
-      __unstableGetEditorMode
+      hasAllowedPatterns
     } = unlock(select(blockEditorStore));
     return {
-      isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
       showPatterns: hasAllowedPatterns(destinationRootClientId)
     };
   }, [destinationRootClientId]);
   const mediaCategories = useMediaCategories(destinationRootClientId);
-  const showMedia = mediaCategories.length > 0 && !isZoomOutMode;
-  const showBlocks = !isZoomOutMode;
+  const showMedia = mediaCategories.length > 0;
   const onInsert = useCallback((blocks, meta, shouldForceFocusBlock) => {
     onInsertBlocks(blocks, meta, shouldForceFocusBlock);
     onSelect();
@@ -84,10 +82,14 @@ function InserterMenu({
   const onHoverPattern = useCallback(item => {
     onToggleInsertionPoint(!!item);
   }, [onToggleInsertionPoint]);
+  const isZoomedOutViewExperimentEnabled = window?.__experimentalEnableZoomedOutView;
   const onClickPatternCategory = useCallback((patternCategory, filter) => {
     setSelectedPatternCategory(patternCategory);
     setPatternFilter(filter);
-  }, [setSelectedPatternCategory]);
+    if (isZoomedOutViewExperimentEnabled) {
+      __experimentalOnPatternCategorySelection();
+    }
+  }, [setSelectedPatternCategory, __experimentalOnPatternCategorySelection]);
   const blocksTab = useMemo(() => createElement(Fragment, null, createElement("div", {
     className: "block-editor-inserter__block-list"
   }, createElement(BlockTypesTab, {
@@ -162,15 +164,13 @@ function InserterMenu({
     isAppender: isAppender,
     __experimentalInsertionIndex: __experimentalInsertionIndex,
     showBlockDirectory: true,
-    showBlocks: showBlocks,
     shouldFocusBlock: shouldFocusBlock
   })), showAsTabs && createElement(InserterTabs, {
-    showBlocks: showBlocks,
     showPatterns: showPatterns,
     showMedia: showMedia,
     onSelect: handleSetSelectedTab,
     tabsContents: inserterTabsContents
-  }), !delayedFilterValue && !showAsTabs && showBlocks && createElement("div", {
+  }), !delayedFilterValue && !showAsTabs && createElement("div", {
     className: "block-editor-inserter__no-tab-container"
   }, blocksTab)), showMediaPanel && createElement(MediaCategoryDialog, {
     rootClientId: destinationRootClientId,