@wordpress/block-editor 8.5.0 → 8.6.0

package/build/components/block-popover/inbetween.js

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InsertionPointOpenRef = void 0;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _data = require("@wordpress/data");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+var _store = require("../../store");
+
+var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
+
+var _usePopoverScroll = _interopRequireDefault(require("./use-popover-scroll"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const InsertionPointOpenRef = (0, _element.createContext)();
+exports.InsertionPointOpenRef = InsertionPointOpenRef;
+
+function BlockPopoverInbetween(_ref) {
+  let {
+    previousClientId,
+    nextClientId,
+    children,
+    __unstablePopoverSlot,
+    __unstableContentRef,
+    ...props
+  } = _ref;
+  const {
+    orientation,
+    rootClientId
+  } = (0, _data.useSelect)(select => {
+    var _getBlockListSettings;
+
+    const {
+      getBlockListSettings,
+      getBlockRootClientId
+    } = select(_store.store);
+
+    const _rootClientId = getBlockRootClientId(previousClientId);
+
+    return {
+      orientation: ((_getBlockListSettings = getBlockListSettings(_rootClientId)) === null || _getBlockListSettings === void 0 ? void 0 : _getBlockListSettings.orientation) || 'vertical',
+      rootClientId: _rootClientId
+    };
+  }, [previousClientId]);
+  const previousElement = (0, _useBlockRefs.__unstableUseBlockElement)(previousClientId);
+  const nextElement = (0, _useBlockRefs.__unstableUseBlockElement)(nextClientId);
+  const isVertical = orientation === 'vertical';
+  const style = (0, _element.useMemo)(() => {
+    if (!previousElement && !nextElement) {
+      return {};
+    }
+
+    const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
+    const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
+
+    if (isVertical) {
+      return {
+        width: previousElement ? previousElement.offsetWidth : nextElement.offsetWidth,
+        height: nextRect && previousRect ? nextRect.top - previousRect.bottom : 0
+      };
+    }
+
+    let width = 0;
+
+    if (previousRect && nextRect) {
+      width = (0, _i18n.isRTL)() ? previousRect.left - nextRect.right : nextRect.left - previousRect.right;
+    }
+
+    return {
+      width,
+      height: previousElement ? previousElement.offsetHeight : nextElement.offsetHeight
+    };
+  }, [previousElement, nextElement, isVertical]);
+  const getAnchorRect = (0, _element.useCallback)(() => {
+    if (!previousElement && !nextElement) {
+      return {};
+    }
+
+    const {
+      ownerDocument
+    } = previousElement || nextElement;
+    const previousRect = previousElement ? previousElement.getBoundingClientRect() : null;
+    const nextRect = nextElement ? nextElement.getBoundingClientRect() : null;
+
+    if (isVertical) {
+      if ((0, _i18n.isRTL)()) {
+        return {
+          top: previousRect ? previousRect.bottom : nextRect.top,
+          left: previousRect ? previousRect.right : nextRect.right,
+          right: previousRect ? previousRect.left : nextRect.left,
+          bottom: nextRect ? nextRect.top : previousRect.bottom,
+          ownerDocument
+        };
+      }
+
+      return {
+        top: previousRect ? previousRect.bottom : nextRect.top,
+        left: previousRect ? previousRect.left : nextRect.left,
+        right: previousRect ? previousRect.right : nextRect.right,
+        bottom: nextRect ? nextRect.top : previousRect.bottom,
+        ownerDocument
+      };
+    }
+
+    if ((0, _i18n.isRTL)()) {
+      return {
+        top: previousRect ? previousRect.top : nextRect.top,
+        left: previousRect ? previousRect.left : nextRect.right,
+        right: nextRect ? nextRect.right : previousRect.left,
+        bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+        ownerDocument
+      };
+    }
+
+    return {
+      top: previousRect ? previousRect.top : nextRect.top,
+      left: previousRect ? previousRect.right : nextRect.left,
+      right: nextRect ? nextRect.left : previousRect.right,
+      bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+      ownerDocument
+    };
+  }, [previousElement, nextElement]);
+  const popoverScrollRef = (0, _usePopoverScroll.default)(__unstableContentRef);
+
+  if (!previousElement || !nextElement) {
+    return null;
+  }
+  /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+  // While ideally it would be enough to capture the
+  // bubbling focus event from the Inserter, due to the
+  // characteristics of click focusing of `button`s in
+  // Firefox and Safari, it is not reliable.
+  //
+  // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+
+
+  return (0, _element.createElement)(_components.Popover, (0, _extends2.default)({
+    ref: popoverScrollRef,
+    noArrow: true,
+    animate: false,
+    getAnchorRect: getAnchorRect,
+    focusOnMount: false // Render in the old slot if needed for backward compatibility,
+    // otherwise render in place (not in the the default popover slot).
+    ,
+    __unstableSlotName: __unstablePopoverSlot || null // Forces a remount of the popover when its position changes
+    // This makes sure the popover doesn't animate from its previous position.
+    ,
+    key: nextClientId + '--' + rootClientId
+  }, props, {
+    className: (0, _classnames.default)('block-editor-block-popover', props.className)
+  }), (0, _element.createElement)("div", {
+    style: style
+  }, children));
+  /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+}
+
+var _default = BlockPopoverInbetween;
+exports.default = _default;
+//# sourceMappingURL=inbetween.js.map

package/build/components/block-popover/inbetween.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/inbetween.js"],"names":["InsertionPointOpenRef","BlockPopoverInbetween","previousClientId","nextClientId","children","__unstablePopoverSlot","__unstableContentRef","props","orientation","rootClientId","select","getBlockListSettings","getBlockRootClientId","blockEditorStore","_rootClientId","previousElement","nextElement","isVertical","style","previousRect","getBoundingClientRect","nextRect","width","offsetWidth","height","top","bottom","left","right","offsetHeight","getAnchorRect","ownerDocument","popoverScrollRef","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useCallback, useMemo, createContext } from '@wordpress/element';\nimport { Popover } from '@wordpress/components';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nexport const InsertionPointOpenRef = createContext();\n\nfunction BlockPopoverInbetween( {\n\tpreviousClientId,\n\tnextClientId,\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst { orientation, rootClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockListSettings, getBlockRootClientId } = select(\n\t\t\t\tblockEditorStore\n\t\t\t);\n\n\t\t\tconst _rootClientId = getBlockRootClientId( previousClientId );\n\t\t\treturn {\n\t\t\t\torientation:\n\t\t\t\t\tgetBlockListSettings( _rootClientId )?.orientation ||\n\t\t\t\t\t'vertical',\n\t\t\t\trootClientId: _rootClientId,\n\t\t\t};\n\t\t},\n\t\t[ previousClientId ]\n\t);\n\tconst previousElement = useBlockElement( previousClientId );\n\tconst nextElement = useBlockElement( nextClientId );\n\tconst isVertical = orientation === 'vertical';\n\tconst style = useMemo( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( isVertical ) {\n\t\t\treturn {\n\t\t\t\twidth: previousElement\n\t\t\t\t\t? previousElement.offsetWidth\n\t\t\t\t\t: nextElement.offsetWidth,\n\t\t\t\theight:\n\t\t\t\t\tnextRect && previousRect\n\t\t\t\t\t\t? nextRect.top - previousRect.bottom\n\t\t\t\t\t\t: 0,\n\t\t\t};\n\t\t}\n\n\t\tlet width = 0;\n\t\tif ( previousRect && nextRect ) {\n\t\t\twidth = isRTL()\n\t\t\t\t? previousRect.left - nextRect.right\n\t\t\t\t: nextRect.left - previousRect.right;\n\t\t}\n\n\t\treturn {\n\t\t\twidth,\n\t\t\theight: previousElement\n\t\t\t\t? previousElement.offsetHeight\n\t\t\t\t: nextElement.offsetHeight,\n\t\t};\n\t}, [ previousElement, nextElement, isVertical ] );\n\n\tconst getAnchorRect = useCallback( () => {\n\t\tif ( ! previousElement && ! nextElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst { ownerDocument } = previousElement || nextElement;\n\n\t\tconst previousRect = previousElement\n\t\t\t? previousElement.getBoundingClientRect()\n\t\t\t: null;\n\t\tconst nextRect = nextElement\n\t\t\t? nextElement.getBoundingClientRect()\n\t\t\t: null;\n\n\t\tif ( isVertical ) {\n\t\t\tif ( isRTL() ) {\n\t\t\t\treturn {\n\t\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\t\tleft: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\t\tright: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\t\townerDocument,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.bottom : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.left,\n\t\t\t\tright: previousRect ? previousRect.right : nextRect.right,\n\t\t\t\tbottom: nextRect ? nextRect.top : previousRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\tif ( isRTL() ) {\n\t\t\treturn {\n\t\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\t\tleft: previousRect ? previousRect.left : nextRect.right,\n\t\t\t\tright: nextRect ? nextRect.right : previousRect.left,\n\t\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\t\townerDocument,\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\ttop: previousRect ? previousRect.top : nextRect.top,\n\t\t\tleft: previousRect ? previousRect.right : nextRect.left,\n\t\t\tright: nextRect ? nextRect.left : previousRect.right,\n\t\t\tbottom: previousRect ? previousRect.bottom : nextRect.bottom,\n\t\t\townerDocument,\n\t\t};\n\t}, [ previousElement, nextElement ] );\n\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\n\tif ( ! previousElement || ! nextElement ) {\n\t\treturn null;\n\t}\n\n\t/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n\t// While ideally it would be enough to capture the\n\t// bubbling focus event from the Inserter, due to the\n\t// characteristics of click focusing of `button`s in\n\t// Firefox and Safari, it is not reliable.\n\t//\n\t// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tnoArrow\n\t\t\tanimate={ false }\n\t\t\tgetAnchorRect={ getAnchorRect }\n\t\t\tfocusOnMount={ false }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\t// Forces a remount of the popover when its position changes\n\t\t\t// This makes sure the popover doesn't animate from its previous position.\n\t\t\tkey={ nextClientId + '--' + rootClientId }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t>\n\t\t\t<div style={ style }>{ children }</div>\n\t\t</Popover>\n\t);\n\t/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n}\n\nexport default BlockPopoverInbetween;\n"]}

package/build/components/block-popover/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockPopover;
+
+var _element = require("@wordpress/element");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _components = require("@wordpress/components");
+
+var _dom = require("@wordpress/dom");
+
+var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
+
+var _usePopoverScroll = _interopRequireDefault(require("./use-popover-scroll"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function BlockPopover(_ref) {
+  let {
+    clientId,
+    bottomClientId,
+    children,
+    __unstablePopoverSlot,
+    __unstableContentRef,
+    ...props
+  } = _ref;
+  const selectedElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
+  const lastSelectedElement = (0, _useBlockRefs.__unstableUseBlockElement)(bottomClientId !== null && bottomClientId !== void 0 ? bottomClientId : clientId);
+  const popoverScrollRef = (0, _usePopoverScroll.default)(__unstableContentRef);
+
+  if (!selectedElement || bottomClientId && !lastSelectedElement) {
+    return null;
+  }
+
+  const anchorRef = {
+    top: selectedElement,
+    bottom: lastSelectedElement
+  };
+  const {
+    ownerDocument
+  } = selectedElement;
+  const stickyBoundaryElement = ownerDocument.defaultView.frameElement || (0, _dom.getScrollContainer)(selectedElement) || ownerDocument.body;
+  return (0, _element.createElement)(_components.Popover, (0, _extends2.default)({
+    ref: popoverScrollRef,
+    noArrow: true,
+    animate: false,
+    position: "top right left",
+    focusOnMount: false,
+    anchorRef: anchorRef,
+    __unstableStickyBoundaryElement: stickyBoundaryElement // Render in the old slot if needed for backward compatibility,
+    // otherwise render in place (not in the the default popover slot).
+    ,
+    __unstableSlotName: __unstablePopoverSlot || null,
+    __unstableBoundaryParent: true // Observe movement for block animations (especially horizontal).
+    ,
+    __unstableObserveElement: selectedElement,
+    shouldAnchorIncludePadding: true // Used to safeguard sticky position behavior against cases where it would permanently
+    // obscure specific sections of a block.
+    ,
+    __unstableEditorCanvasWrapper: __unstableContentRef === null || __unstableContentRef === void 0 ? void 0 : __unstableContentRef.current
+  }, props, {
+    className: (0, _classnames.default)('block-editor-block-popover', props.className)
+  }), children);
+}
+//# sourceMappingURL=index.js.map

package/build/components/block-popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/index.js"],"names":["BlockPopover","clientId","bottomClientId","children","__unstablePopoverSlot","__unstableContentRef","props","selectedElement","lastSelectedElement","popoverScrollRef","anchorRef","top","bottom","ownerDocument","stickyBoundaryElement","defaultView","frameElement","body","current","className"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAIe,SAASA,YAAT,OAOX;AAAA,MAPkC;AACrCC,IAAAA,QADqC;AAErCC,IAAAA,cAFqC;AAGrCC,IAAAA,QAHqC;AAIrCC,IAAAA,qBAJqC;AAKrCC,IAAAA,oBALqC;AAMrC,OAAGC;AANkC,GAOlC;AACH,QAAMC,eAAe,GAAG,6CAAiBN,QAAjB,CAAxB;AACA,QAAMO,mBAAmB,GAAG,6CAAiBN,cAAjB,aAAiBA,cAAjB,cAAiBA,cAAjB,GAAmCD,QAAnC,CAA5B;AACA,QAAMQ,gBAAgB,GAAG,+BAAkBJ,oBAAlB,CAAzB;;AAEA,MAAK,CAAEE,eAAF,IAAuBL,cAAc,IAAI,CAAEM,mBAAhD,EAAwE;AACvE,WAAO,IAAP;AACA;;AAED,QAAME,SAAS,GAAG;AACjBC,IAAAA,GAAG,EAAEJ,eADY;AAEjBK,IAAAA,MAAM,EAAEJ;AAFS,GAAlB;AAKA,QAAM;AAAEK,IAAAA;AAAF,MAAoBN,eAA1B;AACA,QAAMO,qBAAqB,GAC1BD,aAAa,CAACE,WAAd,CAA0BC,YAA1B,IACA,6BAAoBT,eAApB,CADA,IAEAM,aAAa,CAACI,IAHf;AAKA,SACC,4BAAC,mBAAD;AACC,IAAA,GAAG,EAAGR,gBADP;AAEC,IAAA,OAAO,MAFR;AAGC,IAAA,OAAO,EAAG,KAHX;AAIC,IAAA,QAAQ,EAAC,gBAJV;AAKC,IAAA,YAAY,EAAG,KALhB;AAMC,IAAA,SAAS,EAAGC,SANb;AAOC,IAAA,+BAA+B,EAAGI,qBAPnC,CAQC;AACA;AATD;AAUC,IAAA,kBAAkB,EAAGV,qBAAqB,IAAI,IAV/C;AAWC,IAAA,wBAAwB,MAXzB,CAYC;AAZD;AAaC,IAAA,wBAAwB,EAAGG,eAb5B;AAcC,IAAA,0BAA0B,MAd3B,CAeC;AACA;AAhBD;AAiBC,IAAA,6BAA6B,EAAGF,oBAAH,aAAGA,oBAAH,uBAAGA,oBAAoB,CAAEa;AAjBvD,KAkBMZ,KAlBN;AAmBC,IAAA,SAAS,EAAG,yBACX,4BADW,EAEXA,KAAK,CAACa,SAFK;AAnBb,MAwBGhB,QAxBH,CADD;AA4BA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { getScrollContainer } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';\nimport usePopoverScroll from './use-popover-scroll';\n\nexport default function BlockPopover( {\n\tclientId,\n\tbottomClientId,\n\tchildren,\n\t__unstablePopoverSlot,\n\t__unstableContentRef,\n\t...props\n} ) {\n\tconst selectedElement = useBlockElement( clientId );\n\tconst lastSelectedElement = useBlockElement( bottomClientId ?? clientId );\n\tconst popoverScrollRef = usePopoverScroll( __unstableContentRef );\n\n\tif ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {\n\t\treturn null;\n\t}\n\n\tconst anchorRef = {\n\t\ttop: selectedElement,\n\t\tbottom: lastSelectedElement,\n\t};\n\n\tconst { ownerDocument } = selectedElement;\n\tconst stickyBoundaryElement =\n\t\townerDocument.defaultView.frameElement ||\n\t\tgetScrollContainer( selectedElement ) ||\n\t\townerDocument.body;\n\n\treturn (\n\t\t<Popover\n\t\t\tref={ popoverScrollRef }\n\t\t\tnoArrow\n\t\t\tanimate={ false }\n\t\t\tposition=\"top right left\"\n\t\t\tfocusOnMount={ false }\n\t\t\tanchorRef={ anchorRef }\n\t\t\t__unstableStickyBoundaryElement={ stickyBoundaryElement }\n\t\t\t// Render in the old slot if needed for backward compatibility,\n\t\t\t// otherwise render in place (not in the the default popover slot).\n\t\t\t__unstableSlotName={ __unstablePopoverSlot || null }\n\t\t\t__unstableBoundaryParent\n\t\t\t// Observe movement for block animations (especially horizontal).\n\t\t\t__unstableObserveElement={ selectedElement }\n\t\t\tshouldAnchorIncludePadding\n\t\t\t// Used to safeguard sticky position behavior against cases where it would permanently\n\t\t\t// obscure specific sections of a block.\n\t\t\t__unstableEditorCanvasWrapper={ __unstableContentRef?.current }\n\t\t\t{ ...props }\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-block-popover',\n\t\t\t\tprops.className\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Popover>\n\t);\n}\n"]}

package/build/components/{block-tools → block-popover}/use-popover-scroll.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.usePopoverScroll = usePopoverScroll;
+exports.default = void 0;
 
 var _compose = require("@wordpress/compose");
 
@@ -43,4 +43,7 @@ function usePopoverScroll(scrollableRef) {
     };
   }, [scrollableRef]);
 }
+
+var _default = usePopoverScroll;
+exports.default = _default;
 //# sourceMappingURL=use-popover-scroll.js.map

package/build/components/block-popover/use-popover-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-popover/use-popover-scroll.js"],"names":["usePopoverScroll","scrollableRef","node","onWheel","event","deltaX","deltaY","current","scrollBy","options","passive","addEventListener","removeEventListener"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,gBAAT,CAA2BC,aAA3B,EAA2C;AAC1C,SAAO,2BACJC,IAAF,IAAY;AACX,QAAK,CAAED,aAAP,EAAuB;AACtB;AACA;;AAED,aAASE,OAAT,CAAkBC,KAAlB,EAA0B;AACzB,YAAM;AAAEC,QAAAA,MAAF;AAAUC,QAAAA;AAAV,UAAqBF,KAA3B;AACAH,MAAAA,aAAa,CAACM,OAAd,CAAsBC,QAAtB,CAAgCH,MAAhC,EAAwCC,MAAxC;AACA,KARU,CASX;AACA;;;AACA,UAAMG,OAAO,GAAG;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAAhB;AACAR,IAAAA,IAAI,CAACS,gBAAL,CAAuB,OAAvB,EAAgCR,OAAhC,EAAyCM,OAAzC;AACA,WAAO,MAAM;AACZP,MAAAA,IAAI,CAACU,mBAAL,CAA0B,OAA1B,EAAmCT,OAAnC,EAA4CM,OAA5C;AACA,KAFD;AAGA,GAjBK,EAkBN,CAAER,aAAF,CAlBM,CAAP;AAoBA;;eAEcD,gB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Allow scrolling \"through\" popovers over the canvas. This is only called for\n * as long as the pointer is over a popover. Do not use React events because it\n * will bubble through portals.\n *\n * @param {Object} scrollableRef\n */\nfunction usePopoverScroll( scrollableRef ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( ! scrollableRef ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfunction onWheel( event ) {\n\t\t\t\tconst { deltaX, deltaY } = event;\n\t\t\t\tscrollableRef.current.scrollBy( deltaX, deltaY );\n\t\t\t}\n\t\t\t// Tell the browser that we do not call event.preventDefault\n\t\t\t// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners\n\t\t\tconst options = { passive: true };\n\t\t\tnode.addEventListener( 'wheel', onWheel, options );\n\t\t\treturn () => {\n\t\t\t\tnode.removeEventListener( 'wheel', onWheel, options );\n\t\t\t};\n\t\t},\n\t\t[ scrollableRef ]\n\t);\n}\n\nexport default usePopoverScroll;\n"]}

package/build/components/block-preview/auto.js

@@ -37,7 +37,8 @@ const MAX_HEIGHT = 2000;
 function AutoBlockPreview(_ref) {
   let {
     viewportWidth,
-    __experimentalPadding
+    __experimentalPadding,
+    __experimentalMinHeight
   } = _ref;
   const [containerResizeListener, {
     width: containerWidth
@@ -76,7 +77,8 @@ function AutoBlockPreview(_ref) {
     style: {
       transform: `scale(${scale})`,
       height: contentHeight * scale,
-      maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined
+      maxHeight: contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
+      minHeight: __experimentalMinHeight
     }
   }, (0, _element.createElement)(_iframe.default, {
     head: (0, _element.createElement)(_editorStyles.default, {
@@ -105,7 +107,8 @@ function AutoBlockPreview(_ref) {
       pointerEvents: 'none',
       // This is a catch-all max-height for patterns.
       // See: https://github.com/WordPress/gutenberg/pull/38175.
-      maxHeight: MAX_HEIGHT
+      maxHeight: MAX_HEIGHT,
+      minHeight: scale < 1 && __experimentalMinHeight ? __experimentalMinHeight / scale : __experimentalMinHeight
     }
   }, contentResizeListener, (0, _element.createElement)(MemoizedBlockList, {
     renderAppender: false

package/build/components/block-preview/auto.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["MemoizedBlockList","MAX_HEIGHT","AutoBlockPreview","viewportWidth","__experimentalPadding","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","assets","select","settings","store","getSettings","__unstableResolvedAssets","editorStyles","css","__unstableType","BlockList","scale","transform","maxHeight","undefined","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nconst MAX_HEIGHT = 2000;\n\nfunction AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst { styles, assets } = useSelect( ( select ) => {\n\t\tconst settings = select( store ).getSettings();\n\t\treturn {\n\t\t\tstyles: settings.styles,\n\t\t\tassets: settings.__unstableResolvedAssets,\n\t\t};\n\t}, [] );\n\n\t// Avoid scrollbars for pattern previews.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{height:auto;overflow:hidden;}',\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t\tmaxHeight:\n\t\t\t\t\t\tcontentHeight > MAX_HEIGHT\n\t\t\t\t\t\t\t? MAX_HEIGHT * scale\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tassets={ assets }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\n\t\t\t\t\t\t// necessary for contentResizeListener to work.\n\t\t\t\t\t\tbodyElement.style.position = 'relative';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t// This is a catch-all max-height for patterns.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/38175.\n\t\t\t\t\t\tmaxHeight: MAX_HEIGHT,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/auto.js"],"names":["MemoizedBlockList","MAX_HEIGHT","AutoBlockPreview","viewportWidth","__experimentalPadding","__experimentalMinHeight","containerResizeListener","width","containerWidth","contentResizeListener","height","contentHeight","styles","assets","select","settings","store","getSettings","__unstableResolvedAssets","editorStyles","css","__unstableType","BlockList","scale","transform","maxHeight","undefined","minHeight","bodyElement","ownerDocument","documentElement","classList","add","style","position","padding","pointerEvents"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Disabled } from '@wordpress/components';\nimport { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport Iframe from '../iframe';\nimport EditorStyles from '../editor-styles';\nimport { store } from '../../store';\n\n// This is used to avoid rendering the block list if the sizes change.\nlet MemoizedBlockList;\n\nconst MAX_HEIGHT = 2000;\n\nfunction AutoBlockPreview( {\n\tviewportWidth,\n\t__experimentalPadding,\n\t__experimentalMinHeight,\n} ) {\n\tconst [\n\t\tcontainerResizeListener,\n\t\t{ width: containerWidth },\n\t] = useResizeObserver();\n\tconst [\n\t\tcontentResizeListener,\n\t\t{ height: contentHeight },\n\t] = useResizeObserver();\n\tconst { styles, assets } = useSelect( ( select ) => {\n\t\tconst settings = select( store ).getSettings();\n\t\treturn {\n\t\t\tstyles: settings.styles,\n\t\t\tassets: settings.__unstableResolvedAssets,\n\t\t};\n\t}, [] );\n\n\t// Avoid scrollbars for pattern previews.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'body{height:auto;overflow:hidden;}',\n\t\t\t\t\t__unstableType: 'presets',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\t// Initialize on render instead of module top level, to avoid circular dependency issues.\n\tMemoizedBlockList = MemoizedBlockList || pure( BlockList );\n\n\tconst scale = containerWidth / viewportWidth;\n\n\treturn (\n\t\t<div className=\"block-editor-block-preview__container\">\n\t\t\t{ containerResizeListener }\n\t\t\t<Disabled\n\t\t\t\tclassName=\"block-editor-block-preview__content\"\n\t\t\t\tstyle={ {\n\t\t\t\t\ttransform: `scale(${ scale })`,\n\t\t\t\t\theight: contentHeight * scale,\n\t\t\t\t\tmaxHeight:\n\t\t\t\t\t\tcontentHeight > MAX_HEIGHT\n\t\t\t\t\t\t\t? MAX_HEIGHT * scale\n\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\tminHeight: __experimentalMinHeight,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Iframe\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tassets={ assets }\n\t\t\t\t\tcontentRef={ useRefEffect( ( bodyElement ) => {\n\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\townerDocument: { documentElement },\n\t\t\t\t\t\t} = bodyElement;\n\t\t\t\t\t\tdocumentElement.classList.add(\n\t\t\t\t\t\t\t'block-editor-block-preview__content-iframe'\n\t\t\t\t\t\t);\n\t\t\t\t\t\tdocumentElement.style.position = 'absolute';\n\t\t\t\t\t\tdocumentElement.style.width = '100%';\n\t\t\t\t\t\tbodyElement.style.padding =\n\t\t\t\t\t\t\t__experimentalPadding + 'px';\n\n\t\t\t\t\t\t// necessary for contentResizeListener to work.\n\t\t\t\t\t\tbodyElement.style.position = 'relative';\n\t\t\t\t\t}, [] ) }\n\t\t\t\t\taria-hidden\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\twidth: viewportWidth,\n\t\t\t\t\t\theight: contentHeight,\n\t\t\t\t\t\tpointerEvents: 'none',\n\t\t\t\t\t\t// This is a catch-all max-height for patterns.\n\t\t\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/38175.\n\t\t\t\t\t\tmaxHeight: MAX_HEIGHT,\n\t\t\t\t\t\tminHeight:\n\t\t\t\t\t\t\tscale < 1 && __experimentalMinHeight\n\t\t\t\t\t\t\t\t? __experimentalMinHeight / scale\n\t\t\t\t\t\t\t\t: __experimentalMinHeight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t<MemoizedBlockList renderAppender={ false } />\n\t\t\t\t</Iframe>\n\t\t\t</Disabled>\n\t\t</div>\n\t);\n}\n\nexport default AutoBlockPreview;\n"]}

package/build/components/block-preview/index.js

@@ -46,7 +46,8 @@ function BlockPreview(_ref) {
     __experimentalPadding = 0,
     viewportWidth = 1200,
     __experimentalLive = false,
-    __experimentalOnClick
+    __experimentalOnClick,
+    __experimentalMinHeight
   } = _ref;
   const originalSettings = (0, _data.useSelect)(select => select(_store.store).getSettings(), []);
   const settings = (0, _element.useMemo)(() => {
@@ -68,7 +69,8 @@ function BlockPreview(_ref) {
     onClick: __experimentalOnClick
   }) : (0, _element.createElement)(_auto.default, {
     viewportWidth: viewportWidth,
-    __experimentalPadding: __experimentalPadding
+    __experimentalPadding: __experimentalPadding,
+    __experimentalMinHeight: __experimentalMinHeight
   }));
 }
 /**

package/build/components/block-preview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/index.js"],"names":["BlockPreview","blocks","__experimentalPadding","viewportWidth","__experimentalLive","__experimentalOnClick","originalSettings","select","blockEditorStore","getSettings","settings","_settings","__experimentalBlockPatterns","renderedBlocks","length","useBlockPreview","props","__experimentalLayout","disabledRef","ref","children","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { castArray } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseDisabled as useDisabled,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { memo, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockEditorProvider from '../provider';\nimport LiveBlockPreview from './live';\nimport AutoHeightBlockPreview from './auto';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockListItems } from '../block-list';\n\nexport function BlockPreview( {\n\tblocks,\n\t__experimentalPadding = 0,\n\tviewportWidth = 1200,\n\t__experimentalLive = false,\n\t__experimentalOnClick,\n} ) {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo( () => {\n\t\tconst _settings = { ...originalSettings };\n\t\t_settings.__experimentalBlockPatterns = [];\n\t\treturn _settings;\n\t}, [ originalSettings ] );\n\tconst renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );\n\tif ( ! blocks || blocks.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BlockEditorProvider value={ renderedBlocks } settings={ settings }>\n\t\t\t{ __experimentalLive ? (\n\t\t\t\t<LiveBlockPreview onClick={ __experimentalOnClick } />\n\t\t\t) : (\n\t\t\t\t<AutoHeightBlockPreview\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\t__experimentalPadding={ __experimentalPadding }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockEditorProvider>\n\t);\n}\n\n/**\n * BlockPreview renders a preview of a block or array of blocks.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-preview/README.md\n *\n * @param {Object}       preview               options for how the preview should be shown\n * @param {Array|Object} preview.blocks        A block instance (object) or an array of blocks to be previewed.\n * @param {number}       preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.\n *\n * @return {WPComponent} The component to be rendered.\n */\nexport default memo( BlockPreview );\n\n/**\n * This hook is used to lightly mark an element as a block preview wrapper\n * element. Call this hook and pass the returned props to the element to mark as\n * a block preview wrapper, automatically rendering inner blocks as children. If\n * you define a ref for the element, it is important to pass the ref to this\n * hook, which the hook in turn will pass to the component through the props it\n * returns. Optionally, you can also pass any other props through this hook, and\n * they will be merged and returned.\n *\n * @param {Object}    options                      Preview options.\n * @param {WPBlock[]} options.blocks               Block objects.\n * @param {Object}    options.props                Optional. Props to pass to the element. Must contain\n *                                                 the ref if one is defined.\n * @param {Object}    options.__experimentalLayout Layout settings to be used in the preview.\n *\n */\nexport function useBlockPreview( {\n\tblocks,\n\tprops = {},\n\t__experimentalLayout,\n} ) {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst disabledRef = useDisabled();\n\tconst ref = useMergeRefs( [ props.ref, disabledRef ] );\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),\n\t\t[ originalSettings ]\n\t);\n\tconst renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );\n\n\tconst children = (\n\t\t<BlockEditorProvider value={ renderedBlocks } settings={ settings }>\n\t\t\t<BlockListItems\n\t\t\t\trenderAppender={ false }\n\t\t\t\t__experimentalLayout={ __experimentalLayout }\n\t\t\t/>\n\t\t</BlockEditorProvider>\n\t);\n\n\treturn {\n\t\t...props,\n\t\tref,\n\t\tclassName: classnames(\n\t\t\tprops.className,\n\t\t\t'block-editor-block-preview__live-content',\n\t\t\t'components-disabled'\n\t\t),\n\t\tchildren: blocks?.length ? children : null,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-preview/index.js"],"names":["BlockPreview","blocks","__experimentalPadding","viewportWidth","__experimentalLive","__experimentalOnClick","__experimentalMinHeight","originalSettings","select","blockEditorStore","getSettings","settings","_settings","__experimentalBlockPatterns","renderedBlocks","length","useBlockPreview","props","__experimentalLayout","disabledRef","ref","children","className"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { castArray } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalUseDisabled as useDisabled,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { useSelect } from '@wordpress/data';\nimport { memo, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockEditorProvider from '../provider';\nimport LiveBlockPreview from './live';\nimport AutoHeightBlockPreview from './auto';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockListItems } from '../block-list';\n\nexport function BlockPreview( {\n\tblocks,\n\t__experimentalPadding = 0,\n\tviewportWidth = 1200,\n\t__experimentalLive = false,\n\t__experimentalOnClick,\n\t__experimentalMinHeight,\n} ) {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst settings = useMemo( () => {\n\t\tconst _settings = { ...originalSettings };\n\t\t_settings.__experimentalBlockPatterns = [];\n\t\treturn _settings;\n\t}, [ originalSettings ] );\n\tconst renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );\n\tif ( ! blocks || blocks.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<BlockEditorProvider value={ renderedBlocks } settings={ settings }>\n\t\t\t{ __experimentalLive ? (\n\t\t\t\t<LiveBlockPreview onClick={ __experimentalOnClick } />\n\t\t\t) : (\n\t\t\t\t<AutoHeightBlockPreview\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\t__experimentalPadding={ __experimentalPadding }\n\t\t\t\t\t__experimentalMinHeight={ __experimentalMinHeight }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</BlockEditorProvider>\n\t);\n}\n\n/**\n * BlockPreview renders a preview of a block or array of blocks.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-preview/README.md\n *\n * @param {Object}       preview               options for how the preview should be shown\n * @param {Array|Object} preview.blocks        A block instance (object) or an array of blocks to be previewed.\n * @param {number}       preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.\n *\n * @return {WPComponent} The component to be rendered.\n */\nexport default memo( BlockPreview );\n\n/**\n * This hook is used to lightly mark an element as a block preview wrapper\n * element. Call this hook and pass the returned props to the element to mark as\n * a block preview wrapper, automatically rendering inner blocks as children. If\n * you define a ref for the element, it is important to pass the ref to this\n * hook, which the hook in turn will pass to the component through the props it\n * returns. Optionally, you can also pass any other props through this hook, and\n * they will be merged and returned.\n *\n * @param {Object}    options                      Preview options.\n * @param {WPBlock[]} options.blocks               Block objects.\n * @param {Object}    options.props                Optional. Props to pass to the element. Must contain\n *                                                 the ref if one is defined.\n * @param {Object}    options.__experimentalLayout Layout settings to be used in the preview.\n *\n */\nexport function useBlockPreview( {\n\tblocks,\n\tprops = {},\n\t__experimentalLayout,\n} ) {\n\tconst originalSettings = useSelect(\n\t\t( select ) => select( blockEditorStore ).getSettings(),\n\t\t[]\n\t);\n\tconst disabledRef = useDisabled();\n\tconst ref = useMergeRefs( [ props.ref, disabledRef ] );\n\tconst settings = useMemo(\n\t\t() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),\n\t\t[ originalSettings ]\n\t);\n\tconst renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );\n\n\tconst children = (\n\t\t<BlockEditorProvider value={ renderedBlocks } settings={ settings }>\n\t\t\t<BlockListItems\n\t\t\t\trenderAppender={ false }\n\t\t\t\t__experimentalLayout={ __experimentalLayout }\n\t\t\t/>\n\t\t</BlockEditorProvider>\n\t);\n\n\treturn {\n\t\t...props,\n\t\tref,\n\t\tclassName: classnames(\n\t\t\tprops.className,\n\t\t\t'block-editor-block-preview__live-content',\n\t\t\t'components-disabled'\n\t\t),\n\t\tchildren: blocks?.length ? children : null,\n\t};\n}\n"]}

package/build/components/block-styles/index.js

@@ -15,8 +15,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
 
-var _keycodes = require("@wordpress/keycodes");
-
 var _components = require("@wordpress/components");
 
 var _previewPanel = _interopRequireDefault(require("./preview-panel"));
@@ -127,15 +125,8 @@ function BlockStyles(_ref3) {
       onFocus: () => styleItemHandler(style),
       onMouseLeave: () => styleItemHandler(null),
       onBlur: () => styleItemHandler(null),
-      onKeyDown: event => {
-        if (_keycodes.ENTER === event.keyCode || _keycodes.SPACE === event.keyCode) {
-          event.preventDefault();
-          onSelectStylePreview(style);
-        }
-      },
       onClick: () => onSelectStylePreview(style),
-      role: "button",
-      tabIndex: "0"
+      "aria-current": activeStyle.name === style.name
     }, (0, _element.createElement)(_components.__experimentalText, {
       as: "span",
       limit: 12,

package/build/components/block-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"names":["BlockStylesPreviewPanelSlot","scope","BlockStylesPreviewPanelFill","children","props","DEFAULT_POSITION_TOP","BlockStyles","clientId","onSwitch","noop","onHoverClassName","onSelect","stylesToRender","activeStyle","genericPreviewBlock","className","previewClassName","hoveredStyle","setHoveredStyle","containerScrollTop","setContainerScrollTop","isMobileViewport","scrollContainer","document","querySelector","scrollTop","length","debouncedSetHoveredStyle","onSelectStylePreview","style","cancel","styleItemHandler","item","name","map","buttonText","label","event","ENTER","keyCode","SPACE","preventDefault","top","Slot"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop, debounce } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport { ENTER, SPACE } from '@wordpress/keycodes';\nimport {\n\tButton,\n\t__experimentalText as Text,\n\tSlot,\n\tFill,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nfunction BlockStylesPreviewPanelSlot( { scope } ) {\n\treturn <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;\n}\n\nfunction BlockStylesPreviewPanelFill( { children, scope, ...props } ) {\n\treturn (\n\t\t<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>\n\t\t\t<div { ...props }>{ children }</div>\n\t\t</Fill>\n\t);\n}\n\n// Top position (in px) of the Block Styles container\n// relative to the editor pane.\n// The value is the equivalent of the container's right position.\nconst DEFAULT_POSITION_TOP = 16;\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( {\n\tclientId,\n\tonSwitch = noop,\n\tonHoverClassName = noop,\n\tscope,\n} ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst [ containerScrollTop, setContainerScrollTop ] = useState( 0 );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseLayoutEffect( () => {\n\t\tconst scrollContainer = document.querySelector(\n\t\t\t'.interface-interface-skeleton__content'\n\t\t);\n\t\tconst scrollTop = scrollContainer?.scrollTop || 0;\n\t\tsetContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );\n\t}, [ hoveredStyle ] );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\tonMouseEnter={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tENTER === event.keyCode ||\n\t\t\t\t\t\t\t\t\tSPACE === event.keyCode\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\tonSelectStylePreview( style );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlimit={ 12 }\n\t\t\t\t\t\t\t\tellipsizeMode=\"tail\"\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\ttruncate\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t<BlockStylesPreviewPanelFill\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\tstyle={ { top: containerScrollTop } }\n\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t>\n\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t/>\n\t\t\t\t</BlockStylesPreviewPanelFill>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nBlockStyles.Slot = BlockStylesPreviewPanelSlot;\nexport default BlockStyles;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-styles/index.js"],"names":["BlockStylesPreviewPanelSlot","scope","BlockStylesPreviewPanelFill","children","props","DEFAULT_POSITION_TOP","BlockStyles","clientId","onSwitch","noop","onHoverClassName","onSelect","stylesToRender","activeStyle","genericPreviewBlock","className","previewClassName","hoveredStyle","setHoveredStyle","containerScrollTop","setContainerScrollTop","isMobileViewport","scrollContainer","document","querySelector","scrollTop","length","debouncedSetHoveredStyle","onSelectStylePreview","style","cancel","styleItemHandler","item","name","map","buttonText","label","top","Slot"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop, debounce } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalText as Text,\n\tSlot,\n\tFill,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nfunction BlockStylesPreviewPanelSlot( { scope } ) {\n\treturn <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;\n}\n\nfunction BlockStylesPreviewPanelFill( { children, scope, ...props } ) {\n\treturn (\n\t\t<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>\n\t\t\t<div { ...props }>{ children }</div>\n\t\t</Fill>\n\t);\n}\n\n// Top position (in px) of the Block Styles container\n// relative to the editor pane.\n// The value is the equivalent of the container's right position.\nconst DEFAULT_POSITION_TOP = 16;\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( {\n\tclientId,\n\tonSwitch = noop,\n\tonHoverClassName = noop,\n\tscope,\n} ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst [ containerScrollTop, setContainerScrollTop ] = useState( 0 );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseLayoutEffect( () => {\n\t\tconst scrollContainer = document.querySelector(\n\t\t\t'.interface-interface-skeleton__content'\n\t\t);\n\t\tconst scrollTop = scrollContainer?.scrollTop || 0;\n\t\tsetContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );\n\t}, [ hoveredStyle ] );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\tonMouseEnter={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\taria-current={ activeStyle.name === style.name }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tlimit={ 12 }\n\t\t\t\t\t\t\t\tellipsizeMode=\"tail\"\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t\ttruncate\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t<BlockStylesPreviewPanelFill\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\tstyle={ { top: containerScrollTop } }\n\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t>\n\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t/>\n\t\t\t\t</BlockStylesPreviewPanelFill>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nBlockStyles.Slot = BlockStylesPreviewPanelSlot;\nexport default BlockStyles;\n"]}

package/build/components/block-switcher/index.js

@@ -129,10 +129,15 @@ const BlockSwitcherDropdownMenu = _ref => {
       disabled: true,
       className: "block-editor-block-switcher__no-switcher-icon",
       title: blockTitle,
-      icon: (0, _element.createElement)(_blockIcon.default, {
+      icon: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockIcon.default, {
         icon: icon,
         showColors: true
-      })
+      }), (isReusable || isTemplate) && (0, _element.createElement)("span", {
+        className: "block-editor-block-switcher__toggle-text"
+      }, (0, _element.createElement)(_blockTitle.default, {
+        clientId: clientIds,
+        maximumLength: 35
+      })))
     }));
   }
 

package/build/components/block-switcher/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/index.js"],"names":["BlockSwitcherDropdownMenu","clientIds","blocks","replaceBlocks","blockEditorStore","blockInformation","clientId","possibleBlockTransformations","canRemove","hasBlockStyles","icon","blockTitle","patterns","select","getBlockRootClientId","getBlockTransformItems","__experimentalGetPatternTransformItems","getBlockStyles","getBlockType","blocksStore","canRemoveBlocks","rootClientId","name","firstBlockName","_isSingleBlockSelected","length","styles","_icon","isSelectionOfSameType","map","copy","title","isReusable","isTemplate","onBlockTransform","onPatternTransform","transformedBlocks","hasPossibleBlockTransformations","hasPatternTransformation","blockSwitcherLabel","blockSwitcherDescription","showDropDown","toggleProps","position","isAlternate","className","describedBy","orientation","onClose","BlockSwitcher","getBlocksByClientId","some","block"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AAMA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAjCA;AACA;AACA;;AAGA;AACA;AACA;;AAiBA;AACA;AACA;AASO,MAAMA,yBAAyB,GAAG,QAA6B;AAAA,MAA3B;AAAEC,IAAAA,SAAF;AAAaC,IAAAA;AAAb,GAA2B;AACrE,QAAM;AAAEC,IAAAA;AAAF,MAAoB,uBAAaC,YAAb,CAA1B;AACA,QAAMC,gBAAgB,GAAG,yCAA4BH,MAAM,CAAE,CAAF,CAAN,CAAYI,QAAxC,CAAzB;AACA,QAAM;AACLC,IAAAA,4BADK;AAELC,IAAAA,SAFK;AAGLC,IAAAA,cAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,UALK;AAMLC,IAAAA;AANK,MAOF,qBACDC,MAAF,IAAc;AAAA;;AACb,UAAM;AACLC,MAAAA,oBADK;AAELC,MAAAA,sBAFK;AAGLC,MAAAA;AAHK,QAIFH,MAAM,CAAET,YAAF,CAJV;AAKA,UAAM;AAAEa,MAAAA,cAAF;AAAkBC,MAAAA;AAAlB,QAAmCL,MAAM,CAAEM,aAAF,CAA/C;AACA,UAAM;AAAEC,MAAAA;AAAF,QAAsBP,MAAM,CAAET,YAAF,CAAlC;AACA,UAAMiB,YAAY,GAAGP,oBAAoB,CACxC,uBAAWb,SAAX,EAAwB,CAAxB,CADwC,CAAzC;AAGA,UAAM,CAAE;AAAEqB,MAAAA,IAAI,EAAEC;AAAR,KAAF,IAA+BrB,MAArC;;AACA,UAAMsB,sBAAsB,GAAGtB,MAAM,CAACuB,MAAP,KAAkB,CAAjD;;AACA,UAAMC,MAAM,GACXF,sBAAsB,IAAIP,cAAc,CAAEM,cAAF,CADzC;;AAEA,QAAII,KAAJ;;AACA,QAAKH,sBAAL,EAA8B;AAC7BG,MAAAA,KAAK,GAAGtB,gBAAH,aAAGA,gBAAH,uBAAGA,gBAAgB,CAAEK,IAA1B,CAD6B,CACG;AAChC,KAFD,MAEO;AAAA;;AACN,YAAMkB,qBAAqB,GAC1B,kBAAM1B,MAAM,CAAC2B,GAAP,CAAY;AAAA,YAAE;AAAEP,UAAAA;AAAF,SAAF;AAAA,eAAgBA,IAAhB;AAAA,OAAZ,CAAN,EAA2CG,MAA3C,KAAsD,CADvD,CADM,CAGN;AACA;;AACAE,MAAAA,KAAK,GAAGC,qBAAqB,oBAC1BV,YAAY,CAAEK,cAAF,CADc,kDAC1B,cAAgCb,IADN,GAE1BoB,WAFH;AAGA;;AACD,WAAO;AACNvB,MAAAA,4BAA4B,EAAEQ,sBAAsB,CACnDb,MADmD,EAEnDmB,YAFmD,CAD9C;AAKNb,MAAAA,SAAS,EAAEY,eAAe,CAAEnB,SAAF,EAAaoB,YAAb,CALpB;AAMNZ,MAAAA,cAAc,EAAE,CAAC,EAAEiB,MAAF,aAAEA,MAAF,eAAEA,MAAM,CAAED,MAAV,CANX;AAONf,MAAAA,IAAI,EAAEiB,KAPA;AAQNhB,MAAAA,UAAU,oBAAEO,YAAY,CAAEK,cAAF,CAAd,mDAAE,eAAgCQ,KARtC;AASNnB,MAAAA,QAAQ,EAAEI,sCAAsC,CAC/Cd,MAD+C,EAE/CmB,YAF+C;AAT1C,KAAP;AAcA,GA1CE,EA2CH,CAAEpB,SAAF,EAAaC,MAAb,EAAqBG,gBAArB,aAAqBA,gBAArB,uBAAqBA,gBAAgB,CAAEK,IAAvC,CA3CG,CAPJ;AAqDA,QAAMsB,UAAU,GAAG9B,MAAM,CAACuB,MAAP,KAAkB,CAAlB,IAAuB,6BAAiBvB,MAAM,CAAE,CAAF,CAAvB,CAA1C;AACA,QAAM+B,UAAU,GAAG/B,MAAM,CAACuB,MAAP,KAAkB,CAAlB,IAAuB,4BAAgBvB,MAAM,CAAE,CAAF,CAAtB,CAA1C,CAzDqE,CA2DrE;;AACA,QAAMgC,gBAAgB,GAAKZ,IAAF,IACxBnB,aAAa,CAAEF,SAAF,EAAa,+BAAmBC,MAAnB,EAA2BoB,IAA3B,CAAb,CADd,CA5DqE,CA8DrE;;;AACA,QAAMa,kBAAkB,GAAKC,iBAAF,IAC1BjC,aAAa,CAAEF,SAAF,EAAamC,iBAAb,CADd;;AAEA,QAAMC,+BAA+B,GACpC,CAAC,CAAE9B,4BAA4B,CAACkB,MAAhC,IAA0CjB,SAD3C;AAEA,QAAM8B,wBAAwB,GAAG,CAAC,EAAE1B,QAAF,aAAEA,QAAF,eAAEA,QAAQ,CAAEa,MAAZ,CAAD,IAAuBjB,SAAxD;;AACA,MAAK,CAAEC,cAAF,IAAoB,CAAE4B,+BAA3B,EAA6D;AAC5D,WACC,4BAAC,wBAAD,QACC,4BAAC,yBAAD;AACC,MAAA,QAAQ,MADT;AAEC,MAAA,SAAS,EAAC,+CAFX;AAGC,MAAA,KAAK,EAAG1B,UAHT;AAIC,MAAA,IAAI,EAAG,4BAAC,kBAAD;AAAW,QAAA,IAAI,EAAGD,IAAlB;AAAyB,QAAA,UAAU;AAAnC;AAJR,MADD,CADD;AAUA;;AAED,QAAM6B,kBAAkB,GAAG5B,UAA3B;AAEA,QAAM6B,wBAAwB,GAC7B,MAAMtC,MAAM,CAACuB,MAAb,GACG;AACA;AACA,gBAAI,gCAAJ,CAFA,EAGAd,UAHA,CADH,GAMG;AACA;AACA,gBACC,yBADD,EAEC,0BAFD,EAGCT,MAAM,CAACuB,MAHR,CAFA,EAOAvB,MAAM,CAACuB,MAPP,CAPJ;AAiBA,QAAMgB,YAAY,GACjBhC,cAAc,IACd4B,+BADA,IAEAC,wBAHD;AAIA,SACC,4BAAC,wBAAD,QACC,4BAAC,uBAAD,QACKI,WAAF,IACD,4BAAC,wBAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAGH,kBAFT;AAGC,IAAA,YAAY,EAAG;AACdI,MAAAA,QAAQ,EAAE,cADI;AAEdC,MAAAA,WAAW,EAAE,IAFC;AAGdC,MAAAA,SAAS,EAAE;AAHG,KAHhB;AAQC,IAAA,IAAI,EACH,qDACC,4BAAC,kBAAD;AACC,MAAA,IAAI,EAAGnC,IADR;AAEC,MAAA,SAAS,EAAC,qCAFX;AAGC,MAAA,UAAU;AAHX,MADD,EAMG,CAAEsB,UAAU,IAAIC,UAAhB,KACD;AAAM,MAAA,SAAS,EAAC;AAAhB,OACC,4BAAC,mBAAD;AACC,MAAA,QAAQ,EAAGhC,SADZ;AAEC,MAAA,aAAa,EAAG;AAFjB,MADD,CAPF,CATF;AAyBC,IAAA,WAAW,EAAG;AACb6C,MAAAA,WAAW,EAAEN,wBADA;AAEb,SAAGE;AAFU,KAzBf;AA6BC,IAAA,SAAS,EAAG;AAAEK,MAAAA,WAAW,EAAE;AAAf;AA7Bb,KA+BG;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WACDP,YAAY,IACX;AAAK,MAAA,SAAS,EAAC;AAAf,OACGH,wBAAwB,IACzB,4BAAC,mCAAD;AACC,MAAA,MAAM,EAAGpC,MADV;AAEC,MAAA,QAAQ,EAAGU,QAFZ;AAGC,MAAA,QAAQ,EACPwB,iBADU,IAEN;AACJD,QAAAA,kBAAkB,CACjBC,iBADiB,CAAlB;AAGAY,QAAAA,OAAO;AACP;AAVF,MAFF,EAeGX,+BAA+B,IAChC,4BAAC,iCAAD;AACC,MAAA,SAAS,EAAC,oDADX;AAEC,MAAA,4BAA4B,EAC3B9B,4BAHF;AAKC,MAAA,MAAM,EAAGL,MALV;AAMC,MAAA,QAAQ,EAAKoB,IAAF,IAAY;AACtBY,QAAAA,gBAAgB,CAAEZ,IAAF,CAAhB;AACA0B,QAAAA,OAAO;AACP;AATF,MAhBF,EA4BGvC,cAAc,IACf,4BAAC,wBAAD;AACC,MAAA,YAAY,EAAGP,MAAM,CAAE,CAAF,CADtB;AAEC,MAAA,QAAQ,EAAG8C;AAFZ,MA7BF,CAFA;AAAA,GA/BH,CAFF,CADD,CADD;AA+EA,CAvLM;;;;AAyLA,MAAMC,aAAa,GAAG,SAAqB;AAAA,MAAnB;AAAEhD,IAAAA;AAAF,GAAmB;AACjD,QAAMC,MAAM,GAAG,qBACZW,MAAF,IACCA,MAAM,CAAET,YAAF,CAAN,CAA2B8C,mBAA3B,CAAgDjD,SAAhD,CAFa,EAGd,CAAEA,SAAF,CAHc,CAAf;;AAMA,MAAK,CAAEC,MAAM,CAACuB,MAAT,IAAmBvB,MAAM,CAACiD,IAAP,CAAeC,KAAF,IAAa,CAAEA,KAA5B,CAAxB,EAA8D;AAC7D,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,yBAAD;AAA2B,IAAA,SAAS,EAAGnD,SAAvC;AAAmD,IAAA,MAAM,EAAGC;AAA5D,IADD;AAGA,CAdM;;;eAgBQ+C,a","sourcesContent":["/**\n * External dependencies\n */\nimport { castArray, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tDropdownMenu,\n\tToolbarButton,\n\tToolbarGroup,\n\tToolbarItem,\n} from '@wordpress/components';\nimport {\n\tswitchToBlockType,\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { copy } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport BlockIcon from '../block-icon';\nimport BlockTitle from '../block-title';\nimport BlockTransformationsMenu from './block-transformations-menu';\nimport BlockStylesMenu from './block-styles-menu';\nimport PatternTransformationsMenu from './pattern-transformations-menu';\n\nexport const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );\n\tconst {\n\t\tpossibleBlockTransformations,\n\t\tcanRemove,\n\t\thasBlockStyles,\n\t\ticon,\n\t\tblockTitle,\n\t\tpatterns,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockTransformItems,\n\t\t\t\t__experimentalGetPatternTransformItems,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockStyles, getBlockType } = select( blocksStore );\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId(\n\t\t\t\tcastArray( clientIds )[ 0 ]\n\t\t\t);\n\t\t\tconst [ { name: firstBlockName } ] = blocks;\n\t\t\tconst _isSingleBlockSelected = blocks.length === 1;\n\t\t\tconst styles =\n\t\t\t\t_isSingleBlockSelected && getBlockStyles( firstBlockName );\n\t\t\tlet _icon;\n\t\t\tif ( _isSingleBlockSelected ) {\n\t\t\t\t_icon = blockInformation?.icon; // Take into account active block variations.\n\t\t\t} else {\n\t\t\t\tconst isSelectionOfSameType =\n\t\t\t\t\tuniq( blocks.map( ( { name } ) => name ) ).length === 1;\n\t\t\t\t// When selection consists of blocks of multiple types, display an\n\t\t\t\t// appropriate icon to communicate the non-uniformity.\n\t\t\t\t_icon = isSelectionOfSameType\n\t\t\t\t\t? getBlockType( firstBlockName )?.icon\n\t\t\t\t\t: copy;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tpossibleBlockTransformations: getBlockTransformItems(\n\t\t\t\t\tblocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds, rootClientId ),\n\t\t\t\thasBlockStyles: !! styles?.length,\n\t\t\t\ticon: _icon,\n\t\t\t\tblockTitle: getBlockType( firstBlockName )?.title,\n\t\t\t\tpatterns: __experimentalGetPatternTransformItems(\n\t\t\t\t\tblocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, blocks, blockInformation?.icon ]\n\t);\n\n\tconst isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );\n\tconst isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );\n\n\t// Simple block tranformation based on the `Block Transforms` API.\n\tconst onBlockTransform = ( name ) =>\n\t\treplaceBlocks( clientIds, switchToBlockType( blocks, name ) );\n\t// Pattern transformation through the `Patterns` API.\n\tconst onPatternTransform = ( transformedBlocks ) =>\n\t\treplaceBlocks( clientIds, transformedBlocks );\n\tconst hasPossibleBlockTransformations =\n\t\t!! possibleBlockTransformations.length && canRemove;\n\tconst hasPatternTransformation = !! patterns?.length && canRemove;\n\tif ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tdisabled\n\t\t\t\t\tclassName=\"block-editor-block-switcher__no-switcher-icon\"\n\t\t\t\t\ttitle={ blockTitle }\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } showColors /> }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t}\n\n\tconst blockSwitcherLabel = blockTitle;\n\n\tconst blockSwitcherDescription =\n\t\t1 === blocks.length\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %s: block title. */\n\t\t\t\t\t__( '%s: Change block type or style' ),\n\t\t\t\t\tblockTitle\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of blocks. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'Change type of %d block',\n\t\t\t\t\t\t'Change type of %d blocks',\n\t\t\t\t\t\tblocks.length\n\t\t\t\t\t),\n\t\t\t\t\tblocks.length\n\t\t\t  );\n\n\tconst showDropDown =\n\t\thasBlockStyles ||\n\t\thasPossibleBlockTransformations ||\n\t\thasPatternTransformation;\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarItem>\n\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tclassName=\"block-editor-block-switcher\"\n\t\t\t\t\t\tlabel={ blockSwitcherLabel }\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tposition: 'bottom right',\n\t\t\t\t\t\t\tisAlternate: true,\n\t\t\t\t\t\t\tclassName: 'block-editor-block-switcher__popover',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-switcher__toggle\"\n\t\t\t\t\t\t\t\t\tshowColors\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ ( isReusable || isTemplate ) && (\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-block-switcher__toggle-text\">\n\t\t\t\t\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\t\t\t\t\tclientId={ clientIds }\n\t\t\t\t\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tdescribedBy: blockSwitcherDescription,\n\t\t\t\t\t\t\t...toggleProps,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmenuProps={ { orientation: 'both' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( { onClose } ) =>\n\t\t\t\t\t\t\tshowDropDown && (\n\t\t\t\t\t\t\t\t<div className=\"block-editor-block-switcher__container\">\n\t\t\t\t\t\t\t\t\t{ hasPatternTransformation && (\n\t\t\t\t\t\t\t\t\t\t<PatternTransformationsMenu\n\t\t\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ (\n\t\t\t\t\t\t\t\t\t\t\t\ttransformedBlocks\n\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonPatternTransform(\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransformedBlocks\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\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) }\n\t\t\t\t\t\t\t\t\t{ hasPossibleBlockTransformations && (\n\t\t\t\t\t\t\t\t\t\t<BlockTransformationsMenu\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-switcher__transforms__menugroup\"\n\t\t\t\t\t\t\t\t\t\t\tpossibleBlockTransformations={\n\t\t\t\t\t\t\t\t\t\t\t\tpossibleBlockTransformations\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ ( name ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonBlockTransform( name );\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\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) }\n\t\t\t\t\t\t\t\t\t{ hasBlockStyles && (\n\t\t\t\t\t\t\t\t\t\t<BlockStylesMenu\n\t\t\t\t\t\t\t\t\t\t\thoveredBlock={ blocks[ 0 ] }\n\t\t\t\t\t\t\t\t\t\t\tonSwitch={ onClose }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t) }\n\t\t\t</ToolbarItem>\n\t\t</ToolbarGroup>\n\t);\n};\n\nexport const BlockSwitcher = ( { clientIds } ) => {\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlocksByClientId( clientIds ),\n\t\t[ clientIds ]\n\t);\n\n\tif ( ! blocks.length || blocks.some( ( block ) => ! block ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockSwitcherDropdownMenu clientIds={ clientIds } blocks={ blocks } />\n\t);\n};\n\nexport default BlockSwitcher;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-switcher/index.js"],"names":["BlockSwitcherDropdownMenu","clientIds","blocks","replaceBlocks","blockEditorStore","blockInformation","clientId","possibleBlockTransformations","canRemove","hasBlockStyles","icon","blockTitle","patterns","select","getBlockRootClientId","getBlockTransformItems","__experimentalGetPatternTransformItems","getBlockStyles","getBlockType","blocksStore","canRemoveBlocks","rootClientId","name","firstBlockName","_isSingleBlockSelected","length","styles","_icon","isSelectionOfSameType","map","copy","title","isReusable","isTemplate","onBlockTransform","onPatternTransform","transformedBlocks","hasPossibleBlockTransformations","hasPatternTransformation","blockSwitcherLabel","blockSwitcherDescription","showDropDown","toggleProps","position","isAlternate","className","describedBy","orientation","onClose","BlockSwitcher","getBlocksByClientId","some","block"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { castArray, uniq } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport {\n\tDropdownMenu,\n\tToolbarButton,\n\tToolbarGroup,\n\tToolbarItem,\n} from '@wordpress/components';\nimport {\n\tswitchToBlockType,\n\tstore as blocksStore,\n\tisReusableBlock,\n\tisTemplatePart,\n} from '@wordpress/blocks';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { copy } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport BlockIcon from '../block-icon';\nimport BlockTitle from '../block-title';\nimport BlockTransformationsMenu from './block-transformations-menu';\nimport BlockStylesMenu from './block-styles-menu';\nimport PatternTransformationsMenu from './pattern-transformations-menu';\n\nexport const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {\n\tconst { replaceBlocks } = useDispatch( blockEditorStore );\n\tconst blockInformation = useBlockDisplayInformation( blocks[ 0 ].clientId );\n\tconst {\n\t\tpossibleBlockTransformations,\n\t\tcanRemove,\n\t\thasBlockStyles,\n\t\ticon,\n\t\tblockTitle,\n\t\tpatterns,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockTransformItems,\n\t\t\t\t__experimentalGetPatternTransformItems,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockStyles, getBlockType } = select( blocksStore );\n\t\t\tconst { canRemoveBlocks } = select( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId(\n\t\t\t\tcastArray( clientIds )[ 0 ]\n\t\t\t);\n\t\t\tconst [ { name: firstBlockName } ] = blocks;\n\t\t\tconst _isSingleBlockSelected = blocks.length === 1;\n\t\t\tconst styles =\n\t\t\t\t_isSingleBlockSelected && getBlockStyles( firstBlockName );\n\t\t\tlet _icon;\n\t\t\tif ( _isSingleBlockSelected ) {\n\t\t\t\t_icon = blockInformation?.icon; // Take into account active block variations.\n\t\t\t} else {\n\t\t\t\tconst isSelectionOfSameType =\n\t\t\t\t\tuniq( blocks.map( ( { name } ) => name ) ).length === 1;\n\t\t\t\t// When selection consists of blocks of multiple types, display an\n\t\t\t\t// appropriate icon to communicate the non-uniformity.\n\t\t\t\t_icon = isSelectionOfSameType\n\t\t\t\t\t? getBlockType( firstBlockName )?.icon\n\t\t\t\t\t: copy;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tpossibleBlockTransformations: getBlockTransformItems(\n\t\t\t\t\tblocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t\tcanRemove: canRemoveBlocks( clientIds, rootClientId ),\n\t\t\t\thasBlockStyles: !! styles?.length,\n\t\t\t\ticon: _icon,\n\t\t\t\tblockTitle: getBlockType( firstBlockName )?.title,\n\t\t\t\tpatterns: __experimentalGetPatternTransformItems(\n\t\t\t\t\tblocks,\n\t\t\t\t\trootClientId\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ clientIds, blocks, blockInformation?.icon ]\n\t);\n\n\tconst isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );\n\tconst isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );\n\n\t// Simple block tranformation based on the `Block Transforms` API.\n\tconst onBlockTransform = ( name ) =>\n\t\treplaceBlocks( clientIds, switchToBlockType( blocks, name ) );\n\t// Pattern transformation through the `Patterns` API.\n\tconst onPatternTransform = ( transformedBlocks ) =>\n\t\treplaceBlocks( clientIds, transformedBlocks );\n\tconst hasPossibleBlockTransformations =\n\t\t!! possibleBlockTransformations.length && canRemove;\n\tconst hasPatternTransformation = !! patterns?.length && canRemove;\n\tif ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {\n\t\treturn (\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tdisabled\n\t\t\t\t\tclassName=\"block-editor-block-switcher__no-switcher-icon\"\n\t\t\t\t\ttitle={ blockTitle }\n\t\t\t\t\ticon={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t\t\t{ ( isReusable || isTemplate ) && (\n\t\t\t\t\t\t\t\t<span className=\"block-editor-block-switcher__toggle-text\">\n\t\t\t\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\t\t\t\tclientId={ clientIds }\n\t\t\t\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t);\n\t}\n\n\tconst blockSwitcherLabel = blockTitle;\n\n\tconst blockSwitcherDescription =\n\t\t1 === blocks.length\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %s: block title. */\n\t\t\t\t\t__( '%s: Change block type or style' ),\n\t\t\t\t\tblockTitle\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of blocks. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'Change type of %d block',\n\t\t\t\t\t\t'Change type of %d blocks',\n\t\t\t\t\t\tblocks.length\n\t\t\t\t\t),\n\t\t\t\t\tblocks.length\n\t\t\t  );\n\n\tconst showDropDown =\n\t\thasBlockStyles ||\n\t\thasPossibleBlockTransformations ||\n\t\thasPatternTransformation;\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<ToolbarItem>\n\t\t\t\t{ ( toggleProps ) => (\n\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\tclassName=\"block-editor-block-switcher\"\n\t\t\t\t\t\tlabel={ blockSwitcherLabel }\n\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\tposition: 'bottom right',\n\t\t\t\t\t\t\tisAlternate: true,\n\t\t\t\t\t\t\tclassName: 'block-editor-block-switcher__popover',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-switcher__toggle\"\n\t\t\t\t\t\t\t\t\tshowColors\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ ( isReusable || isTemplate ) && (\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-block-switcher__toggle-text\">\n\t\t\t\t\t\t\t\t\t\t<BlockTitle\n\t\t\t\t\t\t\t\t\t\t\tclientId={ clientIds }\n\t\t\t\t\t\t\t\t\t\t\tmaximumLength={ 35 }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttoggleProps={ {\n\t\t\t\t\t\t\tdescribedBy: blockSwitcherDescription,\n\t\t\t\t\t\t\t...toggleProps,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tmenuProps={ { orientation: 'both' } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ( { onClose } ) =>\n\t\t\t\t\t\t\tshowDropDown && (\n\t\t\t\t\t\t\t\t<div className=\"block-editor-block-switcher__container\">\n\t\t\t\t\t\t\t\t\t{ hasPatternTransformation && (\n\t\t\t\t\t\t\t\t\t\t<PatternTransformationsMenu\n\t\t\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\t\t\tpatterns={ patterns }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ (\n\t\t\t\t\t\t\t\t\t\t\t\ttransformedBlocks\n\t\t\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonPatternTransform(\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransformedBlocks\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\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) }\n\t\t\t\t\t\t\t\t\t{ hasPossibleBlockTransformations && (\n\t\t\t\t\t\t\t\t\t\t<BlockTransformationsMenu\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"block-editor-block-switcher__transforms__menugroup\"\n\t\t\t\t\t\t\t\t\t\t\tpossibleBlockTransformations={\n\t\t\t\t\t\t\t\t\t\t\t\tpossibleBlockTransformations\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ ( name ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tonBlockTransform( name );\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\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) }\n\t\t\t\t\t\t\t\t\t{ hasBlockStyles && (\n\t\t\t\t\t\t\t\t\t\t<BlockStylesMenu\n\t\t\t\t\t\t\t\t\t\t\thoveredBlock={ blocks[ 0 ] }\n\t\t\t\t\t\t\t\t\t\t\tonSwitch={ onClose }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t) }\n\t\t\t</ToolbarItem>\n\t\t</ToolbarGroup>\n\t);\n};\n\nexport const BlockSwitcher = ( { clientIds } ) => {\n\tconst blocks = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlocksByClientId( clientIds ),\n\t\t[ clientIds ]\n\t);\n\n\tif ( ! blocks.length || blocks.some( ( block ) => ! block ) ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockSwitcherDropdownMenu clientIds={ clientIds } blocks={ blocks } />\n\t);\n};\n\nexport default BlockSwitcher;\n"]}