@wordpress/block-editor 12.0.0 → 12.1.0

package/build/hooks/use-editor-wrapper-styles.native.js

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditorWrapperStyles = useEditorWrapperStyles;
+
+var _reactNative = require("react-native");
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _useEditorWrapperStyles = _interopRequireDefault(require("./use-editor-wrapper-styles.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const ALIGNMENT_MAX_WIDTH = {
+  full: '100%',
+  wide: 1054,
+  wideMedium: 770,
+  wideLandscape: 662
+};
+const BLOCK_DEFAULT_MARGIN = 16;
+/**
+ * Get the styles for the wide width alignment.
+ *
+ * @param {Object}  [options]           The options for the helper.
+ * @param {string}  options.align       The alignment value.
+ * @param {boolean} options.isLandscape Whether the screen is in landscape mode.
+ * @param {number}  options.width       The width of the screen.
+ * @return {Object} An object containing the styles for the wide width alignment.
+ */
+
+function getWideWidthStyles() {
+  let {
+    align,
+    isLandscape,
+    width
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  if (align !== _components.WIDE_ALIGNMENTS.alignments.wide) {
+    return {};
+  }
+
+  if (isLandscape && width < _components.ALIGNMENT_BREAKPOINTS.large) {
+    return {
+      maxWidth: ALIGNMENT_MAX_WIDTH.wideLandscape
+    };
+  }
+
+  if (width <= _components.ALIGNMENT_BREAKPOINTS.small) {
+    return {
+      maxWidth: width
+    };
+  }
+
+  if (width >= _components.ALIGNMENT_BREAKPOINTS.medium && width < _components.ALIGNMENT_BREAKPOINTS.wide) {
+    return {
+      maxWidth: ALIGNMENT_MAX_WIDTH.wideMedium
+    };
+  }
+
+  return {
+    maxWidth: ALIGNMENT_MAX_WIDTH.wide
+  };
+}
+/**
+ * Get the styles for the full width alignment.
+ *
+ * @param {Object}  [options]               The options for the helper.
+ * @param {string}  options.align           The alignment value.
+ * @param {string}  options.blockName       The name of the block.
+ * @param {boolean} options.hasParents      Whether the block has parents.
+ * @param {string}  options.parentBlockName The name of the parent block.
+ * @return {Object} An object containing the styles for the full width alignment.
+ */
+
+
+function getFullWidthStyles() {
+  let {
+    align,
+    blockName,
+    hasParents,
+    parentBlockName
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    isContainerRelated,
+    isFullWidth
+  } = _components.alignmentHelpers;
+  const fullWidthStyles = isFullWidth(align) ? {
+    maxWidth: ALIGNMENT_MAX_WIDTH.full
+  } : {};
+
+  if (!align && hasParents && !isContainerRelated(parentBlockName) && isContainerRelated(blockName)) {
+    fullWidthStyles.paddingHorizontal = BLOCK_DEFAULT_MARGIN;
+  }
+
+  return fullWidthStyles;
+}
+/**
+ * Get the block margin based on various conditions.
+ *
+ * @param {Object}  [options]                    The options for the helper.
+ * @param {string}  options.align                The alignment value.
+ * @param {string}  options.blockName            The name of the block.
+ * @param {number}  options.blockWidth           The width of the block.
+ * @param {boolean} options.hasParents           Whether the block has parents.
+ * @param {number}  options.marginHorizontal     Default horizontal margin.
+ * @param {string}  options.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  options.parentBlockName      The name of the parent block.
+ * @param {number}  options.parentWidth          The width of the parent block.
+ * @param {number}  options.width                The width of the screen.
+ * @return {number} The calculated block margin.
+ */
+
+
+function getBlockMargin() {
+  let {
+    align,
+    blockName,
+    blockWidth,
+    hasParents,
+    marginHorizontal,
+    parentBlockAlignment,
+    parentBlockName,
+    parentWidth,
+    width
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    isContainerRelated,
+    isWider,
+    isWideWidth,
+    isFullWidth
+  } = _components.alignmentHelpers;
+
+  if (isFullWidth(align)) {
+    if (!hasParents) {
+      return 0;
+    }
+
+    return marginHorizontal;
+  }
+
+  if (isWideWidth(align)) {
+    return marginHorizontal;
+  }
+
+  if (isFullWidth(parentBlockAlignment) && !isWider(blockWidth, 'medium')) {
+    if (isContainerRelated(blockName) || isWider(width, 'mobile')) {
+      return marginHorizontal;
+    }
+
+    return marginHorizontal * 2;
+  }
+
+  if (isContainerRelated(parentBlockName) && !isContainerRelated(blockName)) {
+    const isScreenWidthEqual = parentWidth === width;
+
+    if (isScreenWidthEqual || isWider(width, 'mobile')) {
+      return marginHorizontal;
+    }
+  }
+
+  return marginHorizontal;
+}
+/**
+ * Custom hook to get the styles and margin for the editor wrapper.
+ *
+ * @param {Object}  [props]                    The props for the hook.
+ * @param {string}  props.align                The alignment value.
+ * @param {string}  props.blockName            The name of the block.
+ * @param {number}  props.blockWidth           The width of the block.
+ * @param {string}  props.contentResizeMode    The content resize mode.
+ * @param {boolean} props.hasParents           Whether the block has parents.
+ * @param {number}  props.marginHorizontal     Default horizontal margin.
+ * @param {string}  props.parentBlockAlignment The alignment of the parent block.
+ * @param {string}  props.parentBlockName      The name of the parent block.
+ * @param {number}  props.parentWidth          The width of the parent block.
+ * @param {boolean} [props.reversed=false]     Whether the flex direction should be reversed.
+ * @return {[Array, number]} An array containing the wrapper styles and block margin.
+ */
+
+
+function useEditorWrapperStyles() {
+  let {
+    align,
+    blockName,
+    blockWidth,
+    contentResizeMode,
+    hasParents,
+    marginHorizontal,
+    parentBlockAlignment,
+    parentBlockName,
+    parentWidth,
+    reversed = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    width,
+    height
+  } = (0, _reactNative.useWindowDimensions)();
+  const isLandscape = width >= height;
+  const blockMargin = (0, _element.useMemo)(() => getBlockMargin({
+    align,
+    blockName,
+    blockWidth,
+    hasParents,
+    marginHorizontal,
+    parentBlockAlignment,
+    parentBlockName,
+    parentWidth,
+    width
+  }), [align, blockName, blockWidth, hasParents, marginHorizontal, parentBlockAlignment, parentBlockName, parentWidth, width]);
+  const wrapperStyles = (0, _element.useMemo)(() => {
+    let canvasStyles;
+
+    if (contentResizeMode === 'stretch') {
+      // For these cases, no width constraints should be added.
+      canvasStyles = {
+        flex: 1
+      };
+    } else if (reversed) {
+      canvasStyles = _useEditorWrapperStyles.default['use-editor-wrapper-styles--reversed'];
+    } else {
+      canvasStyles = _useEditorWrapperStyles.default['use-editor-wrapper-styles'];
+    }
+
+    const alignmentStyles = { ...getWideWidthStyles({
+        align,
+        isLandscape,
+        width
+      }),
+      ...getFullWidthStyles({
+        align,
+        blockName,
+        hasParents,
+        parentBlockName
+      })
+    };
+    return [canvasStyles, alignmentStyles];
+  }, [align, blockName, hasParents, parentBlockName, isLandscape, width, contentResizeMode, reversed]);
+  return [wrapperStyles, blockMargin];
+}
+//# sourceMappingURL=use-editor-wrapper-styles.native.js.map

package/build/hooks/use-editor-wrapper-styles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-editor-wrapper-styles.native.js"],"names":["ALIGNMENT_MAX_WIDTH","full","wide","wideMedium","wideLandscape","BLOCK_DEFAULT_MARGIN","getWideWidthStyles","align","isLandscape","width","WIDE_ALIGNMENTS","alignments","ALIGNMENT_BREAKPOINTS","large","maxWidth","small","medium","getFullWidthStyles","blockName","hasParents","parentBlockName","isContainerRelated","isFullWidth","alignmentHelpers","fullWidthStyles","paddingHorizontal","getBlockMargin","blockWidth","marginHorizontal","parentBlockAlignment","parentWidth","isWider","isWideWidth","isScreenWidthEqual","useEditorWrapperStyles","contentResizeMode","reversed","height","blockMargin","wrapperStyles","canvasStyles","flex","styles","alignmentStyles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useWindowDimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport {\n\tALIGNMENT_BREAKPOINTS,\n\tWIDE_ALIGNMENTS,\n\talignmentHelpers,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './use-editor-wrapper-styles.scss';\n\nconst ALIGNMENT_MAX_WIDTH = {\n\tfull: '100%',\n\twide: 1054,\n\twideMedium: 770,\n\twideLandscape: 662,\n};\n\nconst BLOCK_DEFAULT_MARGIN = 16;\n\n/**\n * Get the styles for the wide width alignment.\n *\n * @param {Object}  [options]           The options for the helper.\n * @param {string}  options.align       The alignment value.\n * @param {boolean} options.isLandscape Whether the screen is in landscape mode.\n * @param {number}  options.width       The width of the screen.\n * @return {Object} An object containing the styles for the wide width alignment.\n */\nfunction getWideWidthStyles( { align, isLandscape, width } = {} ) {\n\tif ( align !== WIDE_ALIGNMENTS.alignments.wide ) {\n\t\treturn {};\n\t}\n\n\tif ( isLandscape && width < ALIGNMENT_BREAKPOINTS.large ) {\n\t\treturn { maxWidth: ALIGNMENT_MAX_WIDTH.wideLandscape };\n\t}\n\n\tif ( width <= ALIGNMENT_BREAKPOINTS.small ) {\n\t\treturn { maxWidth: width };\n\t}\n\n\tif (\n\t\twidth >= ALIGNMENT_BREAKPOINTS.medium &&\n\t\twidth < ALIGNMENT_BREAKPOINTS.wide\n\t) {\n\t\treturn { maxWidth: ALIGNMENT_MAX_WIDTH.wideMedium };\n\t}\n\n\treturn { maxWidth: ALIGNMENT_MAX_WIDTH.wide };\n}\n\n/**\n * Get the styles for the full width alignment.\n *\n * @param {Object}  [options]               The options for the helper.\n * @param {string}  options.align           The alignment value.\n * @param {string}  options.blockName       The name of the block.\n * @param {boolean} options.hasParents      Whether the block has parents.\n * @param {string}  options.parentBlockName The name of the parent block.\n * @return {Object} An object containing the styles for the full width alignment.\n */\nfunction getFullWidthStyles( {\n\talign,\n\tblockName,\n\thasParents,\n\tparentBlockName,\n} = {} ) {\n\tconst { isContainerRelated, isFullWidth } = alignmentHelpers;\n\tconst fullWidthStyles = isFullWidth( align )\n\t\t? { maxWidth: ALIGNMENT_MAX_WIDTH.full }\n\t\t: {};\n\n\tif (\n\t\t! align &&\n\t\thasParents &&\n\t\t! isContainerRelated( parentBlockName ) &&\n\t\tisContainerRelated( blockName )\n\t) {\n\t\tfullWidthStyles.paddingHorizontal = BLOCK_DEFAULT_MARGIN;\n\t}\n\n\treturn fullWidthStyles;\n}\n\n/**\n * Get the block margin based on various conditions.\n *\n * @param {Object}  [options]                    The options for the helper.\n * @param {string}  options.align                The alignment value.\n * @param {string}  options.blockName            The name of the block.\n * @param {number}  options.blockWidth           The width of the block.\n * @param {boolean} options.hasParents           Whether the block has parents.\n * @param {number}  options.marginHorizontal     Default horizontal margin.\n * @param {string}  options.parentBlockAlignment The alignment of the parent block.\n * @param {string}  options.parentBlockName      The name of the parent block.\n * @param {number}  options.parentWidth          The width of the parent block.\n * @param {number}  options.width                The width of the screen.\n * @return {number} The calculated block margin.\n */\nfunction getBlockMargin( {\n\talign,\n\tblockName,\n\tblockWidth,\n\thasParents,\n\tmarginHorizontal,\n\tparentBlockAlignment,\n\tparentBlockName,\n\tparentWidth,\n\twidth,\n} = {} ) {\n\tconst { isContainerRelated, isWider, isWideWidth, isFullWidth } =\n\t\talignmentHelpers;\n\n\tif ( isFullWidth( align ) ) {\n\t\tif ( ! hasParents ) {\n\t\t\treturn 0;\n\t\t}\n\t\treturn marginHorizontal;\n\t}\n\n\tif ( isWideWidth( align ) ) {\n\t\treturn marginHorizontal;\n\t}\n\n\tif (\n\t\tisFullWidth( parentBlockAlignment ) &&\n\t\t! isWider( blockWidth, 'medium' )\n\t) {\n\t\tif ( isContainerRelated( blockName ) || isWider( width, 'mobile' ) ) {\n\t\t\treturn marginHorizontal;\n\t\t}\n\t\treturn marginHorizontal * 2;\n\t}\n\n\tif (\n\t\tisContainerRelated( parentBlockName ) &&\n\t\t! isContainerRelated( blockName )\n\t) {\n\t\tconst isScreenWidthEqual = parentWidth === width;\n\t\tif ( isScreenWidthEqual || isWider( width, 'mobile' ) ) {\n\t\t\treturn marginHorizontal;\n\t\t}\n\t}\n\n\treturn marginHorizontal;\n}\n\n/**\n * Custom hook to get the styles and margin for the editor wrapper.\n *\n * @param {Object}  [props]                    The props for the hook.\n * @param {string}  props.align                The alignment value.\n * @param {string}  props.blockName            The name of the block.\n * @param {number}  props.blockWidth           The width of the block.\n * @param {string}  props.contentResizeMode    The content resize mode.\n * @param {boolean} props.hasParents           Whether the block has parents.\n * @param {number}  props.marginHorizontal     Default horizontal margin.\n * @param {string}  props.parentBlockAlignment The alignment of the parent block.\n * @param {string}  props.parentBlockName      The name of the parent block.\n * @param {number}  props.parentWidth          The width of the parent block.\n * @param {boolean} [props.reversed=false]     Whether the flex direction should be reversed.\n * @return {[Array, number]} An array containing the wrapper styles and block margin.\n */\nexport function useEditorWrapperStyles( {\n\talign,\n\tblockName,\n\tblockWidth,\n\tcontentResizeMode,\n\thasParents,\n\tmarginHorizontal,\n\tparentBlockAlignment,\n\tparentBlockName,\n\tparentWidth,\n\treversed = false,\n} = {} ) {\n\tconst { width, height } = useWindowDimensions();\n\tconst isLandscape = width >= height;\n\n\tconst blockMargin = useMemo(\n\t\t() =>\n\t\t\tgetBlockMargin( {\n\t\t\t\talign,\n\t\t\t\tblockName,\n\t\t\t\tblockWidth,\n\t\t\t\thasParents,\n\t\t\t\tmarginHorizontal,\n\t\t\t\tparentBlockAlignment,\n\t\t\t\tparentBlockName,\n\t\t\t\tparentWidth,\n\t\t\t\twidth,\n\t\t\t} ),\n\t\t[\n\t\t\talign,\n\t\t\tblockName,\n\t\t\tblockWidth,\n\t\t\thasParents,\n\t\t\tmarginHorizontal,\n\t\t\tparentBlockAlignment,\n\t\t\tparentBlockName,\n\t\t\tparentWidth,\n\t\t\twidth,\n\t\t]\n\t);\n\n\tconst wrapperStyles = useMemo( () => {\n\t\tlet canvasStyles;\n\n\t\tif ( contentResizeMode === 'stretch' ) {\n\t\t\t// For these cases, no width constraints should be added.\n\t\t\tcanvasStyles = { flex: 1 };\n\t\t} else if ( reversed ) {\n\t\t\tcanvasStyles = styles[ 'use-editor-wrapper-styles--reversed' ];\n\t\t} else {\n\t\t\tcanvasStyles = styles[ 'use-editor-wrapper-styles' ];\n\t\t}\n\n\t\tconst alignmentStyles = {\n\t\t\t...getWideWidthStyles( { align, isLandscape, width } ),\n\t\t\t...getFullWidthStyles( {\n\t\t\t\talign,\n\t\t\t\tblockName,\n\t\t\t\thasParents,\n\t\t\t\tparentBlockName,\n\t\t\t} ),\n\t\t};\n\n\t\treturn [ canvasStyles, alignmentStyles ];\n\t}, [\n\t\talign,\n\t\tblockName,\n\t\thasParents,\n\t\tparentBlockName,\n\t\tisLandscape,\n\t\twidth,\n\t\tcontentResizeMode,\n\t\treversed,\n\t] );\n\n\treturn [ wrapperStyles, blockMargin ];\n}\n"]}

package/build/hooks/use-typography-props.js

@@ -24,31 +24,35 @@ var _fluidUtils = require("../components/font-sizes/fluid-utils");
 /**
  * Internal dependencies
  */
-// This utility is intended to assist where the serialization of the typography
-// block support is being skipped for a block but the typography related CSS
-// styles still need to be generated so they can be applied to inner elements.
+
+/*
+ * This utility is intended to assist where the serialization of the typography
+ * block support is being skipped for a block but the typography related CSS
+ * styles still need to be generated so they can be applied to inner elements.
+ */
 
 /**
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}         attributes              Block attributes.
- * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
- *                                                 otherwise an object containing theme fluid typography settings.
+ * @param {Object}         attributes Block attributes.
+ * @param {Object|boolean} settings   Merged theme.json settings
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-function getTypographyClassesAndStyles(attributes, fluidTypographySettings) {
-  var _attributes$style;
+function getTypographyClassesAndStyles(attributes, settings) {
+  var _attributes$style, _settings$typography;
 
   let typographyStyles = (attributes === null || attributes === void 0 ? void 0 : (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : _attributes$style.typography) || {};
+  const fluidTypographySettings = settings === null || settings === void 0 ? void 0 : (_settings$typography = settings.typography) === null || _settings$typography === void 0 ? void 0 : _settings$typography.fluid;
 
   if (!!fluidTypographySettings && (true === fluidTypographySettings || Object.keys(fluidTypographySettings).length !== 0)) {
-    var _attributes$style2, _attributes$style2$ty, _attributes$style3, _attributes$style3$ty;
+    var _attributes$style2, _attributes$style2$ty, _settings$layout, _attributes$style3, _attributes$style3$ty;
 
     const newFontSize = (0, _fluidUtils.getComputedFluidTypographyValue)({
       fontSize: attributes === null || attributes === void 0 ? void 0 : (_attributes$style2 = attributes.style) === null || _attributes$style2 === void 0 ? void 0 : (_attributes$style2$ty = _attributes$style2.typography) === null || _attributes$style2$ty === void 0 ? void 0 : _attributes$style2$ty.fontSize,
-      minimumFontSizeLimit: fluidTypographySettings === null || fluidTypographySettings === void 0 ? void 0 : fluidTypographySettings.minFontSize
+      minimumFontSizeLimit: fluidTypographySettings === null || fluidTypographySettings === void 0 ? void 0 : fluidTypographySettings.minFontSize,
+      maximumViewPortWidth: settings === null || settings === void 0 ? void 0 : (_settings$layout = settings.layout) === null || _settings$layout === void 0 ? void 0 : _settings$layout.wideSize
     }) || (attributes === null || attributes === void 0 ? void 0 : (_attributes$style3 = attributes.style) === null || _attributes$style3 === void 0 ? void 0 : (_attributes$style3$ty = _attributes$style3.typography) === null || _attributes$style3$ty === void 0 ? void 0 : _attributes$style3$ty.fontSize);
     typographyStyles = { ...typographyStyles,
       fontSize: newFontSize

package/build/hooks/use-typography-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["getTypographyClassesAndStyles","attributes","fluidTypographySettings","typographyStyles","style","typography","Object","keys","length","newFontSize","fontSize","minimumFontSizeLimit","minFontSize","fontFamilyClassName","fontFamily","className"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;AAKA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,6BAAT,CACNC,UADM,EAENC,uBAFM,EAGL;AAAA;;AACD,MAAIC,gBAAgB,GAAG,CAAAF,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEG,KAAZ,wEAAmBC,UAAnB,KAAiC,EAAxD;;AAEA,MACC,CAAC,CAAEH,uBAAH,KACE,SAASA,uBAAT,IACDI,MAAM,CAACC,IAAP,CAAaL,uBAAb,EAAuCM,MAAvC,KAAkD,CAFnD,CADD,EAIE;AAAA;;AACD,UAAMC,WAAW,GAChB,iDAAiC;AAChCC,MAAAA,QAAQ,EAAET,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAEG,KAAd,gFAAE,mBAAmBC,UAArB,0DAAE,sBAA+BK,QADT;AAEhCC,MAAAA,oBAAoB,EAAET,uBAAF,aAAEA,uBAAF,uBAAEA,uBAAuB,CAAEU;AAFf,KAAjC,MAGOX,UAHP,aAGOA,UAHP,6CAGOA,UAAU,CAAEG,KAHnB,gFAGO,mBAAmBC,UAH1B,0DAGO,sBAA+BK,QAHtC,CADD;AAKAP,IAAAA,gBAAgB,GAAG,EAClB,GAAGA,gBADe;AAElBO,MAAAA,QAAQ,EAAED;AAFQ,KAAnB;AAIA;;AAED,QAAML,KAAK,GAAG,4BAAiB;AAAEC,IAAAA,UAAU,EAAEF;AAAd,GAAjB,CAAd;AACA,QAAMU,mBAAmB,GAAG,CAAC,EAAEZ,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEa,UAAd,CAAD,GACxB,OAAO,uBAAWb,UAAU,CAACa,UAAtB,CAAoC,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAG,yBACjBF,mBADiB,EAEjB,iCAAkBZ,UAAlB,aAAkBA,UAAlB,uBAAkBA,UAAU,CAAES,QAA9B,CAFiB,CAAlB;AAKA,SAAO;AACNK,IAAAA,SADM;AAENX,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';\n\n// This utility is intended to assist where the serialization of the typography\n// block support is being skipped for a block but the typography related CSS\n// styles still need to be generated so they can be applied to inner elements.\n\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}         attributes              Block attributes.\n * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,\n *                                                 otherwise an object containing theme fluid typography settings.\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles(\n\tattributes,\n\tfluidTypographySettings\n) {\n\tlet typographyStyles = attributes?.style?.typography || {};\n\n\tif (\n\t\t!! fluidTypographySettings &&\n\t\t( true === fluidTypographySettings ||\n\t\t\tObject.keys( fluidTypographySettings ).length !== 0 )\n\t) {\n\t\tconst newFontSize =\n\t\t\tgetComputedFluidTypographyValue( {\n\t\t\t\tfontSize: attributes?.style?.typography?.fontSize,\n\t\t\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\t\t} ) || attributes?.style?.typography?.fontSize;\n\t\ttypographyStyles = {\n\t\t\t...typographyStyles,\n\t\t\tfontSize: newFontSize,\n\t\t};\n\t}\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/use-typography-props.js"],"names":["getTypographyClassesAndStyles","attributes","settings","typographyStyles","style","typography","fluidTypographySettings","fluid","Object","keys","length","newFontSize","fontSize","minimumFontSizeLimit","minFontSize","maximumViewPortWidth","layout","wideSize","fontFamilyClassName","fontFamily","className"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AAXA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,6BAAT,CAAwCC,UAAxC,EAAoDC,QAApD,EAA+D;AAAA;;AACrE,MAAIC,gBAAgB,GAAG,CAAAF,UAAU,SAAV,IAAAA,UAAU,WAAV,iCAAAA,UAAU,CAAEG,KAAZ,wEAAmBC,UAAnB,KAAiC,EAAxD;AACA,QAAMC,uBAAuB,GAAGJ,QAAH,aAAGA,QAAH,+CAAGA,QAAQ,CAAEG,UAAb,yDAAG,qBAAsBE,KAAtD;;AAEA,MACC,CAAC,CAAED,uBAAH,KACE,SAASA,uBAAT,IACDE,MAAM,CAACC,IAAP,CAAaH,uBAAb,EAAuCI,MAAvC,KAAkD,CAFnD,CADD,EAIE;AAAA;;AACD,UAAMC,WAAW,GAChB,iDAAiC;AAChCC,MAAAA,QAAQ,EAAEX,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAEG,KAAd,gFAAE,mBAAmBC,UAArB,0DAAE,sBAA+BO,QADT;AAEhCC,MAAAA,oBAAoB,EAAEP,uBAAF,aAAEA,uBAAF,uBAAEA,uBAAuB,CAAEQ,WAFf;AAGhCC,MAAAA,oBAAoB,EAAEb,QAAF,aAAEA,QAAF,2CAAEA,QAAQ,CAAEc,MAAZ,qDAAE,iBAAkBC;AAHR,KAAjC,MAIOhB,UAJP,aAIOA,UAJP,6CAIOA,UAAU,CAAEG,KAJnB,gFAIO,mBAAmBC,UAJ1B,0DAIO,sBAA+BO,QAJtC,CADD;AAMAT,IAAAA,gBAAgB,GAAG,EAClB,GAAGA,gBADe;AAElBS,MAAAA,QAAQ,EAAED;AAFQ,KAAnB;AAIA;;AAED,QAAMP,KAAK,GAAG,4BAAiB;AAAEC,IAAAA,UAAU,EAAEF;AAAd,GAAjB,CAAd;AACA,QAAMe,mBAAmB,GAAG,CAAC,EAAEjB,UAAF,aAAEA,UAAF,eAAEA,UAAU,CAAEkB,UAAd,CAAD,GACxB,OAAO,uBAAWlB,UAAU,CAACkB,UAAtB,CAAoC,cADnB,GAEzB,EAFH;AAIA,QAAMC,SAAS,GAAG,yBACjBF,mBADiB,EAEjB,iCAAkBjB,UAAlB,aAAkBA,UAAlB,uBAAkBA,UAAU,CAAEW,QAA9B,CAFiB,CAAlB;AAKA,SAAO;AACNQ,IAAAA,SADM;AAENhB,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { getInlineStyles } from './style';\nimport { getFontSizeClass } from '../components/font-sizes';\nimport { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';\n\n/*\n * This utility is intended to assist where the serialization of the typography\n * block support is being skipped for a block but the typography related CSS\n * styles still need to be generated so they can be applied to inner elements.\n */\n/**\n * Provides the CSS class names and inline styles for a block's typography support\n * attributes.\n *\n * @param {Object}         attributes Block attributes.\n * @param {Object|boolean} settings   Merged theme.json settings\n *\n * @return {Object} Typography block support derived CSS classes & styles.\n */\nexport function getTypographyClassesAndStyles( attributes, settings ) {\n\tlet typographyStyles = attributes?.style?.typography || {};\n\tconst fluidTypographySettings = settings?.typography?.fluid;\n\n\tif (\n\t\t!! fluidTypographySettings &&\n\t\t( true === fluidTypographySettings ||\n\t\t\tObject.keys( fluidTypographySettings ).length !== 0 )\n\t) {\n\t\tconst newFontSize =\n\t\t\tgetComputedFluidTypographyValue( {\n\t\t\t\tfontSize: attributes?.style?.typography?.fontSize,\n\t\t\t\tminimumFontSizeLimit: fluidTypographySettings?.minFontSize,\n\t\t\t\tmaximumViewPortWidth: settings?.layout?.wideSize,\n\t\t\t} ) || attributes?.style?.typography?.fontSize;\n\t\ttypographyStyles = {\n\t\t\t...typographyStyles,\n\t\t\tfontSize: newFontSize,\n\t\t};\n\t}\n\n\tconst style = getInlineStyles( { typography: typographyStyles } );\n\tconst fontFamilyClassName = !! attributes?.fontFamily\n\t\t? `has-${ kebabCase( attributes.fontFamily ) }-font-family`\n\t\t: '';\n\n\tconst className = classnames(\n\t\tfontFamilyClassName,\n\t\tgetFontSizeClass( attributes?.fontSize )\n\t);\n\n\treturn {\n\t\tclassName,\n\t\tstyle,\n\t};\n}\n"]}

package/build/index.native.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useEditorWrapperStyles: true
+};
+Object.defineProperty(exports, "useEditorWrapperStyles", {
+  enumerable: true,
+  get: function () {
+    return _hooks.useEditorWrapperStyles;
+  }
+});
+
+var _index = require("./index.js");
+
+Object.keys(_index).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index[key];
+    }
+  });
+});
+
+var _hooks = require("./hooks");
+//# sourceMappingURL=index.native.js.map

package/build/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/index.native.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAGA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA","sourcesContent":["/**\n * Internal dependencies\n */\nexport * from './index.js';\n\nexport { useEditorWrapperStyles } from './hooks';\n"]}

package/build/utils/use-should-contextual-toolbar-show.js

@@ -26,15 +26,14 @@ var _lockUnlock = require("../lock-unlock");
 /**
  * Returns true if the contextual block toolbar should show, or false if it should be hidden.
  *
- * @param {string} clientId The client ID of the block.
- *
  * @return {boolean} Whether the block toolbar is hidden.
  */
-function useShouldContextualToolbarShow(clientId) {
+function useShouldContextualToolbarShow() {
   const isLargeViewport = (0, _compose.useViewportMatch)('medium');
   const {
     shouldShowContextualToolbar,
-    canFocusHiddenToolbar
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
   } = (0, _data.useSelect)(select => {
     const {
       __unstableGetEditorMode,
@@ -43,26 +42,31 @@ function useShouldContextualToolbarShow(clientId) {
       isBlockInterfaceHidden,
       getBlock,
       getSettings,
-      isNavigationMode
+      isNavigationMode,
+      getSelectedBlockClientId,
+      getFirstMultiSelectedBlockClientId
     } = (0, _lockUnlock.unlock)(select(_store.store));
     const isEditMode = __unstableGetEditorMode() === 'edit';
     const hasFixedToolbar = getSettings().hasFixedToolbar;
     const isDistractionFree = getSettings().isDistractionFree;
-    const hasClientId = !!clientId;
-    const isEmptyDefaultBlock = (0, _blocks.isUnmodifiedDefaultBlock)(getBlock(clientId) || {});
+    const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
+    const hasSelectedBlockId = !!selectedBlockId;
+    const isEmptyDefaultBlock = (0, _blocks.isUnmodifiedDefaultBlock)(getBlock(selectedBlockId) || {});
 
-    const _shouldShowContextualToolbar = isEditMode && !hasFixedToolbar && (!isDistractionFree || isNavigationMode()) && isLargeViewport && !isMultiSelecting() && !isTyping() && hasClientId && !isEmptyDefaultBlock && !isBlockInterfaceHidden();
+    const _shouldShowContextualToolbar = isEditMode && !hasFixedToolbar && (!isDistractionFree || isNavigationMode()) && isLargeViewport && !isMultiSelecting() && !isTyping() && hasSelectedBlockId && !isEmptyDefaultBlock && !isBlockInterfaceHidden();
 
-    const _canFocusHiddenToolbar = isEditMode && hasClientId && !_shouldShowContextualToolbar && !hasFixedToolbar && !isDistractionFree && !isEmptyDefaultBlock;
+    const _canFocusHiddenToolbar = isEditMode && hasSelectedBlockId && !_shouldShowContextualToolbar && !hasFixedToolbar && !isDistractionFree && !isEmptyDefaultBlock;
 
     return {
       shouldShowContextualToolbar: _shouldShowContextualToolbar,
-      canFocusHiddenToolbar: _canFocusHiddenToolbar
+      canFocusHiddenToolbar: _canFocusHiddenToolbar,
+      fixedToolbarCanBeFocused: (hasFixedToolbar || !isLargeViewport) && selectedBlockId
     };
-  }, [clientId, isLargeViewport]);
+  }, [isLargeViewport]);
   return {
     shouldShowContextualToolbar,
-    canFocusHiddenToolbar
+    canFocusHiddenToolbar,
+    fixedToolbarCanBeFocused
   };
 }
 //# sourceMappingURL=use-should-contextual-toolbar-show.js.map

package/build/utils/use-should-contextual-toolbar-show.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/use-should-contextual-toolbar-show.js"],"names":["useShouldContextualToolbarShow","clientId","isLargeViewport","shouldShowContextualToolbar","canFocusHiddenToolbar","select","__unstableGetEditorMode","isMultiSelecting","isTyping","isBlockInterfaceHidden","getBlock","getSettings","isNavigationMode","blockEditorStore","isEditMode","hasFixedToolbar","isDistractionFree","hasClientId","isEmptyDefaultBlock","_shouldShowContextualToolbar","_canFocusHiddenToolbar"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,8BAAT,CAAyCC,QAAzC,EAAoD;AAC1D,QAAMC,eAAe,GAAG,+BAAkB,QAAlB,CAAxB;AAEA,QAAM;AAAEC,IAAAA,2BAAF;AAA+BC,IAAAA;AAA/B,MAAyD,qBAC5DC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,uBADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,QAHK;AAILC,MAAAA,sBAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,WANK;AAOLC,MAAAA;AAPK,QAQF,wBAAQP,MAAM,CAAEQ,YAAF,CAAd,CARJ;AAUA,UAAMC,UAAU,GAAGR,uBAAuB,OAAO,MAAjD;AACA,UAAMS,eAAe,GAAGJ,WAAW,GAAGI,eAAtC;AACA,UAAMC,iBAAiB,GAAGL,WAAW,GAAGK,iBAAxC;AACA,UAAMC,WAAW,GAAG,CAAC,CAAEhB,QAAvB;AACA,UAAMiB,mBAAmB,GAAG,sCAC3BR,QAAQ,CAAET,QAAF,CAAR,IAAwB,EADG,CAA5B;;AAIA,UAAMkB,4BAA4B,GACjCL,UAAU,IACV,CAAEC,eADF,KAEE,CAAEC,iBAAF,IAAuBJ,gBAAgB,EAFzC,KAGAV,eAHA,IAIA,CAAEK,gBAAgB,EAJlB,IAKA,CAAEC,QAAQ,EALV,IAMAS,WANA,IAOA,CAAEC,mBAPF,IAQA,CAAET,sBAAsB,EATzB;;AAWA,UAAMW,sBAAsB,GAC3BN,UAAU,IACVG,WADA,IAEA,CAAEE,4BAFF,IAGA,CAAEJ,eAHF,IAIA,CAAEC,iBAJF,IAKA,CAAEE,mBANH;;AAQA,WAAO;AACNf,MAAAA,2BAA2B,EAAEgB,4BADvB;AAENf,MAAAA,qBAAqB,EAAEgB;AAFjB,KAAP;AAIA,GA3C6D,EA4C9D,CAAEnB,QAAF,EAAYC,eAAZ,CA5C8D,CAA/D;AA+CA,SAAO;AACNC,IAAAA,2BADM;AAENC,IAAAA;AAFM,GAAP;AAIA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the contextual block toolbar should show, or false if it should be hidden.\n *\n * @param {string} clientId The client ID of the block.\n *\n * @return {boolean} Whether the block toolbar is hidden.\n */\nexport function useShouldContextualToolbarShow( clientId ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst { shouldShowContextualToolbar, canFocusHiddenToolbar } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t\tisMultiSelecting,\n\t\t\t\tisTyping,\n\t\t\t\tisBlockInterfaceHidden,\n\t\t\t\tgetBlock,\n\t\t\t\tgetSettings,\n\t\t\t\tisNavigationMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst isEditMode = __unstableGetEditorMode() === 'edit';\n\t\t\tconst hasFixedToolbar = getSettings().hasFixedToolbar;\n\t\t\tconst isDistractionFree = getSettings().isDistractionFree;\n\t\t\tconst hasClientId = !! clientId;\n\t\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\t\tgetBlock( clientId ) || {}\n\t\t\t);\n\n\t\t\tconst _shouldShowContextualToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t( ! isDistractionFree || isNavigationMode() ) &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isMultiSelecting() &&\n\t\t\t\t! isTyping() &&\n\t\t\t\thasClientId &&\n\t\t\t\t! isEmptyDefaultBlock &&\n\t\t\t\t! isBlockInterfaceHidden();\n\n\t\t\tconst _canFocusHiddenToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\thasClientId &&\n\t\t\t\t! _shouldShowContextualToolbar &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! isEmptyDefaultBlock;\n\n\t\t\treturn {\n\t\t\t\tshouldShowContextualToolbar: _shouldShowContextualToolbar,\n\t\t\t\tcanFocusHiddenToolbar: _canFocusHiddenToolbar,\n\t\t\t};\n\t\t},\n\t\t[ clientId, isLargeViewport ]\n\t);\n\n\treturn {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/use-should-contextual-toolbar-show.js"],"names":["useShouldContextualToolbarShow","isLargeViewport","shouldShowContextualToolbar","canFocusHiddenToolbar","fixedToolbarCanBeFocused","select","__unstableGetEditorMode","isMultiSelecting","isTyping","isBlockInterfaceHidden","getBlock","getSettings","isNavigationMode","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","blockEditorStore","isEditMode","hasFixedToolbar","isDistractionFree","selectedBlockId","hasSelectedBlockId","isEmptyDefaultBlock","_shouldShowContextualToolbar","_canFocusHiddenToolbar"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AAXA;AACA;AACA;;AAKA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACO,SAASA,8BAAT,GAA0C;AAChD,QAAMC,eAAe,GAAG,+BAAkB,QAAlB,CAAxB;AAEA,QAAM;AACLC,IAAAA,2BADK;AAELC,IAAAA,qBAFK;AAGLC,IAAAA;AAHK,MAIF,qBACDC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,uBADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,QAHK;AAILC,MAAAA,sBAJK;AAKLC,MAAAA,QALK;AAMLC,MAAAA,WANK;AAOLC,MAAAA,gBAPK;AAQLC,MAAAA,wBARK;AASLC,MAAAA;AATK,QAUF,wBAAQT,MAAM,CAAEU,YAAF,CAAd,CAVJ;AAYA,UAAMC,UAAU,GAAGV,uBAAuB,OAAO,MAAjD;AACA,UAAMW,eAAe,GAAGN,WAAW,GAAGM,eAAtC;AACA,UAAMC,iBAAiB,GAAGP,WAAW,GAAGO,iBAAxC;AACA,UAAMC,eAAe,GACpBL,kCAAkC,MAClCD,wBAAwB,EAFzB;AAGA,UAAMO,kBAAkB,GAAG,CAAC,CAAED,eAA9B;AACA,UAAME,mBAAmB,GAAG,sCAC3BX,QAAQ,CAAES,eAAF,CAAR,IAA+B,EADJ,CAA5B;;AAIA,UAAMG,4BAA4B,GACjCN,UAAU,IACV,CAAEC,eADF,KAEE,CAAEC,iBAAF,IAAuBN,gBAAgB,EAFzC,KAGAX,eAHA,IAIA,CAAEM,gBAAgB,EAJlB,IAKA,CAAEC,QAAQ,EALV,IAMAY,kBANA,IAOA,CAAEC,mBAPF,IAQA,CAAEZ,sBAAsB,EATzB;;AAWA,UAAMc,sBAAsB,GAC3BP,UAAU,IACVI,kBADA,IAEA,CAAEE,4BAFF,IAGA,CAAEL,eAHF,IAIA,CAAEC,iBAJF,IAKA,CAAEG,mBANH;;AAQA,WAAO;AACNnB,MAAAA,2BAA2B,EAAEoB,4BADvB;AAENnB,MAAAA,qBAAqB,EAAEoB,sBAFjB;AAGNnB,MAAAA,wBAAwB,EACvB,CAAEa,eAAe,IAAI,CAAEhB,eAAvB,KAA4CkB;AAJvC,KAAP;AAMA,GAlDE,EAmDH,CAAElB,eAAF,CAnDG,CAJJ;AA0DA,SAAO;AACNC,IAAAA,2BADM;AAENC,IAAAA,qBAFM;AAGNC,IAAAA;AAHM,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the contextual block toolbar should show, or false if it should be hidden.\n *\n * @return {boolean} Whether the block toolbar is hidden.\n */\nexport function useShouldContextualToolbarShow() {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\tconst {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t\tisMultiSelecting,\n\t\t\t\tisTyping,\n\t\t\t\tisBlockInterfaceHidden,\n\t\t\t\tgetBlock,\n\t\t\t\tgetSettings,\n\t\t\t\tisNavigationMode,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\n\t\t\tconst isEditMode = __unstableGetEditorMode() === 'edit';\n\t\t\tconst hasFixedToolbar = getSettings().hasFixedToolbar;\n\t\t\tconst isDistractionFree = getSettings().isDistractionFree;\n\t\t\tconst selectedBlockId =\n\t\t\t\tgetFirstMultiSelectedBlockClientId() ||\n\t\t\t\tgetSelectedBlockClientId();\n\t\t\tconst hasSelectedBlockId = !! selectedBlockId;\n\t\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t\t);\n\n\t\t\tconst _shouldShowContextualToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t( ! isDistractionFree || isNavigationMode() ) &&\n\t\t\t\tisLargeViewport &&\n\t\t\t\t! isMultiSelecting() &&\n\t\t\t\t! isTyping() &&\n\t\t\t\thasSelectedBlockId &&\n\t\t\t\t! isEmptyDefaultBlock &&\n\t\t\t\t! isBlockInterfaceHidden();\n\n\t\t\tconst _canFocusHiddenToolbar =\n\t\t\t\tisEditMode &&\n\t\t\t\thasSelectedBlockId &&\n\t\t\t\t! _shouldShowContextualToolbar &&\n\t\t\t\t! hasFixedToolbar &&\n\t\t\t\t! isDistractionFree &&\n\t\t\t\t! isEmptyDefaultBlock;\n\n\t\t\treturn {\n\t\t\t\tshouldShowContextualToolbar: _shouldShowContextualToolbar,\n\t\t\t\tcanFocusHiddenToolbar: _canFocusHiddenToolbar,\n\t\t\t\tfixedToolbarCanBeFocused:\n\t\t\t\t\t( hasFixedToolbar || ! isLargeViewport ) && selectedBlockId,\n\t\t\t};\n\t\t},\n\t\t[ isLargeViewport ]\n\t);\n\n\treturn {\n\t\tshouldShowContextualToolbar,\n\t\tcanFocusHiddenToolbar,\n\t\tfixedToolbarCanBeFocused,\n\t};\n}\n"]}

package/build-module/components/block-controls/slot.js

@@ -6,22 +6,29 @@ import { createElement } from "@wordpress/element";
  */
 import { useContext } from '@wordpress/element';
 import { __experimentalToolbarContext as ToolbarContext, ToolbarGroup, __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
 
 import groups from './groups';
 export default function BlockControlsSlot(_ref) {
+  var _groups$group;
+
   let {
     group = 'default',
     ...props
   } = _ref;
   const accessibleToolbarState = useContext(ToolbarContext);
-  const Slot = groups[group].Slot;
-  const fills = useSlotFills(Slot.__unstableName);
-  const hasFills = Boolean(fills && fills.length);
+  const Slot = (_groups$group = groups[group]) === null || _groups$group === void 0 ? void 0 : _groups$group.Slot;
+  const fills = useSlotFills(Slot === null || Slot === void 0 ? void 0 : Slot.__unstableName);
+
+  if (!Slot) {
+    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning(`Unknown BlockControls group "${group}" provided.`) : void 0;
+    return null;
+  }
 
-  if (!hasFills) {
+  if (!(fills !== null && fills !== void 0 && fills.length)) {
     return null;
   }
 

package/build-module/components/block-controls/slot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-controls/slot.js"],"names":["useContext","__experimentalToolbarContext","ToolbarContext","ToolbarGroup","__experimentalUseSlotFills","useSlotFills","groups","BlockControlsSlot","group","props","accessibleToolbarState","Slot","fills","__unstableName","hasFills","Boolean","length"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SACCC,4BAA4B,IAAIC,cADjC,EAECC,YAFD,EAGCC,0BAA0B,IAAIC,YAH/B,QAIO,uBAJP;AAMA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,iBAAT,OAA8D;AAAA,MAAlC;AAAEC,IAAAA,KAAK,GAAG,SAAV;AAAqB,OAAGC;AAAxB,GAAkC;AAC5E,QAAMC,sBAAsB,GAAGV,UAAU,CAAEE,cAAF,CAAzC;AACA,QAAMS,IAAI,GAAGL,MAAM,CAAEE,KAAF,CAAN,CAAgBG,IAA7B;AACA,QAAMC,KAAK,GAAGP,YAAY,CAAEM,IAAI,CAACE,cAAP,CAA1B;AACA,QAAMC,QAAQ,GAAGC,OAAO,CAAEH,KAAK,IAAIA,KAAK,CAACI,MAAjB,CAAxB;;AAEA,MAAK,CAAEF,QAAP,EAAkB;AACjB,WAAO,IAAP;AACA;;AAED,MAAKN,KAAK,KAAK,SAAf,EAA2B;AAC1B,WACC,cAAC,IAAD,eACMC,KADN;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,SAAS,EAAGC;AAHb,OADD;AAOA;;AAED,SACC,cAAC,YAAD,QACC,cAAC,IAAD,eACMD,KADN;AAEC,IAAA,gBAAgB,MAFjB;AAGC,IAAA,SAAS,EAAGC;AAHb,KADD,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalToolbarContext as ToolbarContext,\n\tToolbarGroup,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function BlockControlsSlot( { group = 'default', ...props } ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\tconst Slot = groups[ group ].Slot;\n\tconst fills = useSlotFills( Slot.__unstableName );\n\tconst hasFills = Boolean( fills && fills.length );\n\n\tif ( ! hasFills ) {\n\t\treturn null;\n\t}\n\n\tif ( group === 'default' ) {\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\t{ ...props }\n\t\t\t\tbubblesVirtually\n\t\t\t\tfillProps={ accessibleToolbarState }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<Slot\n\t\t\t\t{ ...props }\n\t\t\t\tbubblesVirtually\n\t\t\t\tfillProps={ accessibleToolbarState }\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-controls/slot.js"],"names":["useContext","__experimentalToolbarContext","ToolbarContext","ToolbarGroup","__experimentalUseSlotFills","useSlotFills","warning","groups","BlockControlsSlot","group","props","accessibleToolbarState","Slot","fills","__unstableName","length"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SACCC,4BAA4B,IAAIC,cADjC,EAECC,YAFD,EAGCC,0BAA0B,IAAIC,YAH/B,QAIO,uBAJP;AAKA,OAAOC,OAAP,MAAoB,oBAApB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,iBAAT,OAA8D;AAAA;;AAAA,MAAlC;AAAEC,IAAAA,KAAK,GAAG,SAAV;AAAqB,OAAGC;AAAxB,GAAkC;AAC5E,QAAMC,sBAAsB,GAAGX,UAAU,CAAEE,cAAF,CAAzC;AACA,QAAMU,IAAI,oBAAGL,MAAM,CAAEE,KAAF,CAAT,kDAAG,cAAiBG,IAA9B;AACA,QAAMC,KAAK,GAAGR,YAAY,CAAEO,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEE,cAAR,CAA1B;;AACA,MAAK,CAAEF,IAAP,EAAc;AACb,6FAAAN,OAAO,CAAG,gCAAgCG,KAAO,aAA1C,CAAP;AACA,WAAO,IAAP;AACA;;AAED,MAAK,EAAEI,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEE,MAAT,CAAL,EAAuB;AACtB,WAAO,IAAP;AACA;;AAED,MAAKN,KAAK,KAAK,SAAf,EAA2B;AAC1B,WACC,cAAC,IAAD,eACMC,KADN;AAEC,MAAA,gBAAgB,MAFjB;AAGC,MAAA,SAAS,EAAGC;AAHb,OADD;AAOA;;AAED,SACC,cAAC,YAAD,QACC,cAAC,IAAD,eACMD,KADN;AAEC,IAAA,gBAAgB,MAFjB;AAGC,IAAA,SAAS,EAAGC;AAHb,KADD,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalToolbarContext as ToolbarContext,\n\tToolbarGroup,\n\t__experimentalUseSlotFills as useSlotFills,\n} from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function BlockControlsSlot( { group = 'default', ...props } ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\tconst Slot = groups[ group ]?.Slot;\n\tconst fills = useSlotFills( Slot?.__unstableName );\n\tif ( ! Slot ) {\n\t\twarning( `Unknown BlockControls group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\tif ( ! fills?.length ) {\n\t\treturn null;\n\t}\n\n\tif ( group === 'default' ) {\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\t{ ...props }\n\t\t\t\tbubblesVirtually\n\t\t\t\tfillProps={ accessibleToolbarState }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<ToolbarGroup>\n\t\t\t<Slot\n\t\t\t\t{ ...props }\n\t\t\t\tbubblesVirtually\n\t\t\t\tfillProps={ accessibleToolbarState }\n\t\t\t/>\n\t\t</ToolbarGroup>\n\t);\n}\n"]}

package/build-module/components/block-controls/slot.native.js

@@ -6,18 +6,26 @@ import { createElement } from "@wordpress/element";
  */
 import { useContext } from '@wordpress/element';
 import { __experimentalToolbarContext as ToolbarContext, ToolbarGroup } from '@wordpress/components';
+import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
 
 import groups from './groups';
 export default function BlockControlsSlot(_ref) {
+  var _groups$group;
+
   let {
     group = 'default',
     ...props
   } = _ref;
   const accessibleToolbarState = useContext(ToolbarContext);
-  const Slot = groups[group].Slot;
+  const Slot = (_groups$group = groups[group]) === null || _groups$group === void 0 ? void 0 : _groups$group.Slot;
+
+  if (!Slot) {
+    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? warning(`Unknown BlockControls group "${group}" provided.`) : void 0;
+    return null;
+  }
 
   if (group === 'default') {
     return createElement(Slot, _extends({}, props, {

package/build-module/components/block-controls/slot.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-controls/slot.native.js"],"names":["useContext","__experimentalToolbarContext","ToolbarContext","ToolbarGroup","groups","BlockControlsSlot","group","props","accessibleToolbarState","Slot","fills","length"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SACCC,4BAA4B,IAAIC,cADjC,EAECC,YAFD,QAGO,uBAHP;AAKA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,iBAAT,OAA8D;AAAA,MAAlC;AAAEC,IAAAA,KAAK,GAAG,SAAV;AAAqB,OAAGC;AAAxB,GAAkC;AAC5E,QAAMC,sBAAsB,GAAGR,UAAU,CAAEE,cAAF,CAAzC;AACA,QAAMO,IAAI,GAAGL,MAAM,CAAEE,KAAF,CAAN,CAAgBG,IAA7B;;AAEA,MAAKH,KAAK,KAAK,SAAf,EAA2B;AAC1B,WAAO,cAAC,IAAD,eAAWC,KAAX;AAAmB,MAAA,SAAS,EAAGC;AAA/B,OAAP;AACA;;AAED,SACC,cAAC,IAAD,eAAWD,KAAX;AAAmB,IAAA,SAAS,EAAGC;AAA/B,MACKE,KAAF,IAAa;AACd,QAAK,CAAEA,KAAK,CAACC,MAAb,EAAsB;AACrB,aAAO,IAAP;AACA;;AACD,WAAO,cAAC,YAAD,QAAgBD,KAAhB,CAAP;AACA,GANF,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalToolbarContext as ToolbarContext,\n\tToolbarGroup,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function BlockControlsSlot( { group = 'default', ...props } ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\tconst Slot = groups[ group ].Slot;\n\n\tif ( group === 'default' ) {\n\t\treturn <Slot { ...props } fillProps={ accessibleToolbarState } />;\n\t}\n\n\treturn (\n\t\t<Slot { ...props } fillProps={ accessibleToolbarState }>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif ( ! fills.length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn <ToolbarGroup>{ fills }</ToolbarGroup>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-controls/slot.native.js"],"names":["useContext","__experimentalToolbarContext","ToolbarContext","ToolbarGroup","warning","groups","BlockControlsSlot","group","props","accessibleToolbarState","Slot","fills","length"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;AACA,SACCC,4BAA4B,IAAIC,cADjC,EAECC,YAFD,QAGO,uBAHP;AAIA,OAAOC,OAAP,MAAoB,oBAApB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,UAAnB;AAEA,eAAe,SAASC,iBAAT,OAA8D;AAAA;;AAAA,MAAlC;AAAEC,IAAAA,KAAK,GAAG,SAAV;AAAqB,OAAGC;AAAxB,GAAkC;AAC5E,QAAMC,sBAAsB,GAAGT,UAAU,CAAEE,cAAF,CAAzC;AACA,QAAMQ,IAAI,oBAAGL,MAAM,CAAEE,KAAF,CAAT,kDAAG,cAAiBG,IAA9B;;AACA,MAAK,CAAEA,IAAP,EAAc;AACb,6FAAAN,OAAO,CAAG,gCAAgCG,KAAO,aAA1C,CAAP;AACA,WAAO,IAAP;AACA;;AAED,MAAKA,KAAK,KAAK,SAAf,EAA2B;AAC1B,WAAO,cAAC,IAAD,eAAWC,KAAX;AAAmB,MAAA,SAAS,EAAGC;AAA/B,OAAP;AACA;;AAED,SACC,cAAC,IAAD,eAAWD,KAAX;AAAmB,IAAA,SAAS,EAAGC;AAA/B,MACKE,KAAF,IAAa;AACd,QAAK,CAAEA,KAAK,CAACC,MAAb,EAAsB;AACrB,aAAO,IAAP;AACA;;AACD,WAAO,cAAC,YAAD,QAAgBD,KAAhB,CAAP;AACA,GANF,CADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport {\n\t__experimentalToolbarContext as ToolbarContext,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\n\nexport default function BlockControlsSlot( { group = 'default', ...props } ) {\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\tconst Slot = groups[ group ]?.Slot;\n\tif ( ! Slot ) {\n\t\twarning( `Unknown BlockControls group \"${ group }\" provided.` );\n\t\treturn null;\n\t}\n\n\tif ( group === 'default' ) {\n\t\treturn <Slot { ...props } fillProps={ accessibleToolbarState } />;\n\t}\n\n\treturn (\n\t\t<Slot { ...props } fillProps={ accessibleToolbarState }>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif ( ! fills.length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn <ToolbarGroup>{ fills }</ToolbarGroup>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n"]}

package/build-module/components/block-draggable/index.js

@@ -74,13 +74,17 @@ const BlockDraggable = _ref => {
     __experimentalTransferDataType: "wp-blocks",
     transferData: transferData,
     onDragStart: event => {
-      startDraggingBlocks(clientIds);
-      isDragging.current = true;
-      startScrolling(event);
+      // Defer hiding the dragged source element to the next
+      // frame to enable dragging.
+      window.requestAnimationFrame(() => {
+        startDraggingBlocks(clientIds);
+        isDragging.current = true;
+        startScrolling(event);
 
-      if (onDragStart) {
-        onDragStart();
-      }
+        if (onDragStart) {
+          onDragStart();
+        }
+      });
     },
     onDragOver: scrollOnDragOver,
     onDragEnd: () => {

package/build-module/components/block-draggable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/index.js"],"names":["getBlockType","Draggable","useSelect","useDispatch","useEffect","useRef","BlockDraggableChip","useScrollWhenDragging","store","blockEditorStore","BlockDraggable","children","clientIds","cloneClassname","onDragStart","onDragEnd","srcRootClientId","isDraggable","icon","select","canMoveBlocks","getBlockRootClientId","getBlockName","rootClientId","blockName","isDragging","startScrolling","scrollOnDragOver","stopScrolling","startDraggingBlocks","stopDraggingBlocks","current","draggable","transferData","type","srcClientIds","event","length","onDraggableStart","onDraggableEnd"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { Draggable } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockDraggableChip from './draggable-chip';\nimport useScrollWhenDragging from './use-scroll-when-dragging';\nimport { store as blockEditorStore } from '../../store';\n\nconst BlockDraggable = ( {\n\tchildren,\n\tclientIds,\n\tcloneClassname,\n\tonDragStart,\n\tonDragEnd,\n} ) => {\n\tconst { srcRootClientId, isDraggable, icon } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canMoveBlocks, getBlockRootClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst blockName = getBlockName( clientIds[ 0 ] );\n\n\t\t\treturn {\n\t\t\t\tsrcRootClientId: rootClientId,\n\t\t\t\tisDraggable: canMoveBlocks( clientIds, rootClientId ),\n\t\t\t\ticon: getBlockType( blockName )?.icon,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\tconst isDragging = useRef( false );\n\tconst [ startScrolling, scrollOnDragOver, stopScrolling ] =\n\t\tuseScrollWhenDragging();\n\n\tconst { startDraggingBlocks, stopDraggingBlocks } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Stop dragging blocks if the block draggable is unmounted.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging.current ) {\n\t\t\t\tstopDraggingBlocks();\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tif ( ! isDraggable ) {\n\t\treturn children( { draggable: false } );\n\t}\n\n\tconst transferData = {\n\t\ttype: 'block',\n\t\tsrcClientIds: clientIds,\n\t\tsrcRootClientId,\n\t};\n\n\treturn (\n\t\t<Draggable\n\t\t\tcloneClassname={ cloneClassname }\n\t\t\t__experimentalTransferDataType=\"wp-blocks\"\n\t\t\ttransferData={ transferData }\n\t\t\tonDragStart={ ( event ) => {\n\t\t\t\tstartDraggingBlocks( clientIds );\n\t\t\t\tisDragging.current = true;\n\n\t\t\t\tstartScrolling( event );\n\n\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\tonDragStart();\n\t\t\t\t}\n\t\t\t} }\n\t\t\tonDragOver={ scrollOnDragOver }\n\t\t\tonDragEnd={ () => {\n\t\t\t\tstopDraggingBlocks();\n\t\t\t\tisDragging.current = false;\n\n\t\t\t\tstopScrolling();\n\n\t\t\t\tif ( onDragEnd ) {\n\t\t\t\t\tonDragEnd();\n\t\t\t\t}\n\t\t\t} }\n\t\t\t__experimentalDragComponent={\n\t\t\t\t<BlockDraggableChip count={ clientIds.length } icon={ icon } />\n\t\t\t}\n\t\t>\n\t\t\t{ ( { onDraggableStart, onDraggableEnd } ) => {\n\t\t\t\treturn children( {\n\t\t\t\t\tdraggable: true,\n\t\t\t\t\tonDragStart: onDraggableStart,\n\t\t\t\t\tonDragEnd: onDraggableEnd,\n\t\t\t\t} );\n\t\t\t} }\n\t\t</Draggable>\n\t);\n};\n\nexport default BlockDraggable;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/index.js"],"names":["getBlockType","Draggable","useSelect","useDispatch","useEffect","useRef","BlockDraggableChip","useScrollWhenDragging","store","blockEditorStore","BlockDraggable","children","clientIds","cloneClassname","onDragStart","onDragEnd","srcRootClientId","isDraggable","icon","select","canMoveBlocks","getBlockRootClientId","getBlockName","rootClientId","blockName","isDragging","startScrolling","scrollOnDragOver","stopScrolling","startDraggingBlocks","stopDraggingBlocks","current","draggable","transferData","type","srcClientIds","event","window","requestAnimationFrame","length","onDraggableStart","onDraggableEnd"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\nimport { Draggable } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockDraggableChip from './draggable-chip';\nimport useScrollWhenDragging from './use-scroll-when-dragging';\nimport { store as blockEditorStore } from '../../store';\n\nconst BlockDraggable = ( {\n\tchildren,\n\tclientIds,\n\tcloneClassname,\n\tonDragStart,\n\tonDragEnd,\n} ) => {\n\tconst { srcRootClientId, isDraggable, icon } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { canMoveBlocks, getBlockRootClientId, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst blockName = getBlockName( clientIds[ 0 ] );\n\n\t\t\treturn {\n\t\t\t\tsrcRootClientId: rootClientId,\n\t\t\t\tisDraggable: canMoveBlocks( clientIds, rootClientId ),\n\t\t\t\ticon: getBlockType( blockName )?.icon,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\tconst isDragging = useRef( false );\n\tconst [ startScrolling, scrollOnDragOver, stopScrolling ] =\n\t\tuseScrollWhenDragging();\n\n\tconst { startDraggingBlocks, stopDraggingBlocks } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Stop dragging blocks if the block draggable is unmounted.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging.current ) {\n\t\t\t\tstopDraggingBlocks();\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tif ( ! isDraggable ) {\n\t\treturn children( { draggable: false } );\n\t}\n\n\tconst transferData = {\n\t\ttype: 'block',\n\t\tsrcClientIds: clientIds,\n\t\tsrcRootClientId,\n\t};\n\n\treturn (\n\t\t<Draggable\n\t\t\tcloneClassname={ cloneClassname }\n\t\t\t__experimentalTransferDataType=\"wp-blocks\"\n\t\t\ttransferData={ transferData }\n\t\t\tonDragStart={ ( event ) => {\n\t\t\t\t// Defer hiding the dragged source element to the next\n\t\t\t\t// frame to enable dragging.\n\t\t\t\twindow.requestAnimationFrame( () => {\n\t\t\t\t\tstartDraggingBlocks( clientIds );\n\t\t\t\t\tisDragging.current = true;\n\n\t\t\t\t\tstartScrolling( event );\n\n\t\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\t\tonDragStart();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t} }\n\t\t\tonDragOver={ scrollOnDragOver }\n\t\t\tonDragEnd={ () => {\n\t\t\t\tstopDraggingBlocks();\n\t\t\t\tisDragging.current = false;\n\n\t\t\t\tstopScrolling();\n\n\t\t\t\tif ( onDragEnd ) {\n\t\t\t\t\tonDragEnd();\n\t\t\t\t}\n\t\t\t} }\n\t\t\t__experimentalDragComponent={\n\t\t\t\t<BlockDraggableChip count={ clientIds.length } icon={ icon } />\n\t\t\t}\n\t\t>\n\t\t\t{ ( { onDraggableStart, onDraggableEnd } ) => {\n\t\t\t\treturn children( {\n\t\t\t\t\tdraggable: true,\n\t\t\t\t\tonDragStart: onDraggableStart,\n\t\t\t\t\tonDragEnd: onDraggableEnd,\n\t\t\t\t} );\n\t\t\t} }\n\t\t</Draggable>\n\t);\n};\n\nexport default BlockDraggable;\n"]}