@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 12.16.0 (2023-12-13)
+
 ## 12.15.0 (2023-11-29)
 
 ## 12.14.0 (2023-11-16)

package/LICENSE.md

@@ -1,6 +1,6 @@
 ## Gutenberg
 
-    Copyright 2016-2023 by the contributors
+    Copyright 2016-2024 by the contributors
 
 **License for Contributions (on and after April 15, 2021)**
 

package/README.md

@@ -19,7 +19,6 @@ import { useState } from 'react';
 import {
 	BlockEditorProvider,
 	BlockList,
-	BlockTools,
 	WritingFlow,
 } from '@wordpress/block-editor';
 
@@ -32,9 +31,7 @@ function MyEditorComponent() {
 			onInput={ ( blocks ) => updateBlocks( blocks ) }
 			onChange={ ( blocks ) => updateBlocks( blocks ) }
 		>
-			<BlockTools>
-				<BlockCanvas height="400px" />
-			</BlockTools>
+			<BlockCanvas height="400px" />
 		</BlockEditorProvider>
 	);
 }
@@ -280,10 +277,18 @@ _Returns_
 
 ### BlockToolbar
 
+Renders the block toolbar.
+
 _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-toolbar/README.md>
 
+_Parameters_
+
+-   _props_ `Object`: Components props.
+-   _props.hideDragHandle_ `boolean`: Show or hide the Drag Handle for drag and drop functionality.
+-   _props.variant_ `string`: Style variant of the toolbar, also passed to the Dropdowns rendered from Block Toolbar Buttons.
+
 ### BlockTools
 
 Renders block tools (the block toolbar, select/navigation mode toolbar, the insertion point and a slot for the inline rich text toolbar). Must be wrapped around the block content and editor styles wrapper or iframe.
@@ -534,16 +539,13 @@ _Returns_
 
 ### getPxFromCssUnit
 
-Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
-
-_Parameters_
+> **Deprecated**
 
--   _cssUnit_ `string`:
--   _options_ `Object`:
+This function was accidentially exposed for mobile/native usage.
 
 _Returns_
 
--   `string`: returns the cssUnit value in a simple px format.
+-   `string`: Empty string.
 
 ### getSpacingPresetCssVar
 

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

@@ -8,7 +8,9 @@ exports.ExperimentalBlockCanvas = ExperimentalBlockCanvas;
 exports.default = void 0;
 var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _blockList = _interopRequireDefault(require("../block-list"));
+var _blockTools = _interopRequireDefault(require("../block-tools"));
 var _editorStyles = _interopRequireDefault(require("../editor-styles"));
 var _iframe = _interopRequireDefault(require("../iframe"));
 var _writingFlow = _interopRequireDefault(require("../writing-flow"));
@@ -32,9 +34,16 @@ function ExperimentalBlockCanvas({
 }) {
   const resetTypingRef = (0, _observeTyping.useMouseMoveTypingReset)();
   const clearerRef = (0, _blockSelectionClearer.useBlockSelectionClearer)();
-  const contentRef = (0, _compose.useMergeRefs)([contentRefProp, clearerRef]);
+  const localRef = (0, _element.useRef)();
+  const contentRef = (0, _compose.useMergeRefs)([contentRefProp, clearerRef, localRef]);
   if (!shouldIframe) {
-    return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_editorStyles.default, {
+    return (0, _react.createElement)(_blockTools.default, {
+      __unstableContentRef: localRef,
+      style: {
+        height,
+        display: 'flex'
+      }
+    }, (0, _react.createElement)(_editorStyles.default, {
       styles: styles,
       scope: ".editor-styles-wrapper"
     }), (0, _react.createElement)(_writingFlow.default, {
@@ -42,23 +51,28 @@ function ExperimentalBlockCanvas({
       className: "editor-styles-wrapper",
       tabIndex: -1,
       style: {
-        height
+        height: '100%',
+        width: '100%'
       }
     }, children));
   }
-  return (0, _react.createElement)(_iframe.default, {
+  return (0, _react.createElement)(_blockTools.default, {
+    __unstableContentRef: localRef,
+    style: {
+      height,
+      display: 'flex'
+    }
+  }, (0, _react.createElement)(_iframe.default, {
     ...iframeProps,
     ref: resetTypingRef,
     contentRef: contentRef,
     style: {
-      width: '100%',
-      height,
       ...iframeProps?.style
     },
     name: "editor-canvas"
   }, (0, _react.createElement)(_editorStyles.default, {
     styles: styles
-  }), children);
+  }), children));
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_blockList","_interopRequireDefault","_editorStyles","_iframe","_writingFlow","_observeTyping","_blockSelectionClearer","ExperimentalBlockCanvas","shouldIframe","height","children","_react","createElement","default","styles","contentRef","contentRefProp","iframeProps","resetTypingRef","useMouseMoveTypingReset","clearerRef","useBlockSelectionClearer","useMergeRefs","Fragment","scope","ref","className","tabIndex","style","width","name","BlockCanvas","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-canvas/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport EditorStyles from '../editor-styles';\nimport Iframe from '../iframe';\nimport WritingFlow from '../writing-flow';\nimport { useMouseMoveTypingReset } from '../observe-typing';\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\n\nexport function ExperimentalBlockCanvas( {\n\tshouldIframe = true,\n\theight = '300px',\n\tchildren = <BlockList />,\n\tstyles,\n\tcontentRef: contentRefProp,\n\tiframeProps,\n} ) {\n\tconst resetTypingRef = useMouseMoveTypingReset();\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst contentRef = useMergeRefs( [ contentRefProp, clearerRef ] );\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\".editor-styles-wrapper\"\n\t\t\t\t/>\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ { height } }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Iframe\n\t\t\t{ ...iframeProps }\n\t\t\tref={ resetTypingRef }\n\t\t\tcontentRef={ contentRef }\n\t\t\tstyle={ {\n\t\t\t\twidth: '100%',\n\t\t\t\theight,\n\t\t\t\t...iframeProps?.style,\n\t\t\t} }\n\t\t\tname=\"editor-canvas\"\n\t\t>\n\t\t\t<EditorStyles styles={ styles } />\n\t\t\t{ children }\n\t\t</Iframe>\n\t);\n}\n\n/**\n * BlockCanvas component is a component used to display the canvas of the block editor.\n * What we call the canvas is an iframe containing the block list that you can manipulate.\n * The component is also responsible of wiring up all the necessary hooks to enable\n * the keyboard navigation across blocks in the editor and inject content styles into the iframe.\n *\n * @example\n *\n * ```jsx\n * function MyBlockEditor() {\n *   const [ blocks, updateBlocks ] = useState([]);\n *   return (\n *     <BlockEditorProvider\n *       value={ blocks }\n *       onInput={ updateBlocks }\n *       onChange={ persistBlocks }\n *      >\n *        <BlockCanvas height=\"400px\" />\n *      </BlockEditorProvider>\n *    );\n * }\n * ```\n *\n * @param {Object}  props          Component props.\n * @param {string}  props.height   Canvas height, defaults to 300px.\n * @param {Array}   props.styles   Content styles to inject into the iframe.\n * @param {Element} props.children Content of the canvas, defaults to the BlockList component.\n * @return {Element}               Block Breadcrumb.\n */\nfunction BlockCanvas( { children, height, styles } ) {\n\treturn (\n\t\t<ExperimentalBlockCanvas height={ height } styles={ styles }>\n\t\t\t{ children }\n\t\t</ExperimentalBlockCanvas>\n\t);\n}\n\nexport default BlockCanvas;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,OAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,YAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AACA,IAAAO,sBAAA,GAAAP,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,SAASQ,uBAAuBA,CAAE;EACxCC,YAAY,GAAG,IAAI;EACnBC,MAAM,GAAG,OAAO;EAChBC,QAAQ,GAAG,IAAAC,MAAA,CAAAC,aAAA,EAACZ,UAAA,CAAAa,OAAS,MAAE,CAAC;EACxBC,MAAM;EACNC,UAAU,EAAEC,cAAc;EAC1BC;AACD,CAAC,EAAG;EACH,MAAMC,cAAc,GAAG,IAAAC,sCAAuB,EAAC,CAAC;EAChD,MAAMC,UAAU,GAAG,IAAAC,+CAAwB,EAAC,CAAC;EAC7C,MAAMN,UAAU,GAAG,IAAAO,qBAAY,EAAE,CAAEN,cAAc,EAAEI,UAAU,CAAG,CAAC;EAEjE,IAAK,CAAEZ,YAAY,EAAG;IACrB,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAY,QAAA,QACC,IAAAZ,MAAA,CAAAC,aAAA,EAACV,aAAA,CAAAW,OAAY;MACZC,MAAM,EAAGA,MAAQ;MACjBU,KAAK,EAAC;IAAwB,CAC9B,CAAC,EACF,IAAAb,MAAA,CAAAC,aAAA,EAACR,YAAA,CAAAS,OAAW;MACXY,GAAG,EAAGV,UAAY;MAClBW,SAAS,EAAC,uBAAuB;MACjCC,QAAQ,EAAG,CAAC,CAAG;MACfC,KAAK,EAAG;QAAEnB;MAAO;IAAG,GAElBC,QACU,CACZ,CAAC;EAEL;EAEA,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDI,WAAW;IAChBQ,GAAG,EAAGP,cAAgB;IACtBH,UAAU,EAAGA,UAAY;IACzBa,KAAK,EAAG;MACPC,KAAK,EAAE,MAAM;MACbpB,MAAM;MACN,GAAGQ,WAAW,EAAEW;IACjB,CAAG;IACHE,IAAI,EAAC;EAAe,GAEpB,IAAAnB,MAAA,CAAAC,aAAA,EAACV,aAAA,CAAAW,OAAY;IAACC,MAAM,EAAGA;EAAQ,CAAE,CAAC,EAChCJ,QACK,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASqB,WAAWA,CAAE;EAAErB,QAAQ;EAAED,MAAM;EAAEK;AAAO,CAAC,EAAG;EACpD,OACC,IAAAH,MAAA,CAAAC,aAAA,EAACL,uBAAuB;IAACE,MAAM,EAAGA,MAAQ;IAACK,MAAM,EAAGA;EAAQ,GACzDJ,QACsB,CAAC;AAE5B;AAAC,IAAAsB,QAAA,GAEcD,WAAW;AAAAE,OAAA,CAAApB,OAAA,GAAAmB,QAAA"}
+{"version":3,"names":["_compose","require","_element","_blockList","_interopRequireDefault","_blockTools","_editorStyles","_iframe","_writingFlow","_observeTyping","_blockSelectionClearer","ExperimentalBlockCanvas","shouldIframe","height","children","_react","createElement","default","styles","contentRef","contentRefProp","iframeProps","resetTypingRef","useMouseMoveTypingReset","clearerRef","useBlockSelectionClearer","localRef","useRef","useMergeRefs","__unstableContentRef","style","display","scope","ref","className","tabIndex","width","name","BlockCanvas","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-canvas/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMergeRefs } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BlockList from '../block-list';\nimport BlockTools from '../block-tools';\nimport EditorStyles from '../editor-styles';\nimport Iframe from '../iframe';\nimport WritingFlow from '../writing-flow';\nimport { useMouseMoveTypingReset } from '../observe-typing';\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\n\nexport function ExperimentalBlockCanvas( {\n\tshouldIframe = true,\n\theight = '300px',\n\tchildren = <BlockList />,\n\tstyles,\n\tcontentRef: contentRefProp,\n\tiframeProps,\n} ) {\n\tconst resetTypingRef = useMouseMoveTypingReset();\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst localRef = useRef();\n\tconst contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );\n\n\tif ( ! shouldIframe ) {\n\t\treturn (\n\t\t\t<BlockTools\n\t\t\t\t__unstableContentRef={ localRef }\n\t\t\t\tstyle={ { height, display: 'flex' } }\n\t\t\t>\n\t\t\t\t<EditorStyles\n\t\t\t\t\tstyles={ styles }\n\t\t\t\t\tscope=\".editor-styles-wrapper\"\n\t\t\t\t/>\n\t\t\t\t<WritingFlow\n\t\t\t\t\tref={ contentRef }\n\t\t\t\t\tclassName=\"editor-styles-wrapper\"\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</WritingFlow>\n\t\t\t</BlockTools>\n\t\t);\n\t}\n\n\treturn (\n\t\t<BlockTools\n\t\t\t__unstableContentRef={ localRef }\n\t\t\tstyle={ { height, display: 'flex' } }\n\t\t>\n\t\t\t<Iframe\n\t\t\t\t{ ...iframeProps }\n\t\t\t\tref={ resetTypingRef }\n\t\t\t\tcontentRef={ contentRef }\n\t\t\t\tstyle={ {\n\t\t\t\t\t...iframeProps?.style,\n\t\t\t\t} }\n\t\t\t\tname=\"editor-canvas\"\n\t\t\t>\n\t\t\t\t<EditorStyles styles={ styles } />\n\t\t\t\t{ children }\n\t\t\t</Iframe>\n\t\t</BlockTools>\n\t);\n}\n\n/**\n * BlockCanvas component is a component used to display the canvas of the block editor.\n * What we call the canvas is an iframe containing the block list that you can manipulate.\n * The component is also responsible of wiring up all the necessary hooks to enable\n * the keyboard navigation across blocks in the editor and inject content styles into the iframe.\n *\n * @example\n *\n * ```jsx\n * function MyBlockEditor() {\n *   const [ blocks, updateBlocks ] = useState([]);\n *   return (\n *     <BlockEditorProvider\n *       value={ blocks }\n *       onInput={ updateBlocks }\n *       onChange={ persistBlocks }\n *      >\n *        <BlockCanvas height=\"400px\" />\n *      </BlockEditorProvider>\n *    );\n * }\n * ```\n *\n * @param {Object}  props          Component props.\n * @param {string}  props.height   Canvas height, defaults to 300px.\n * @param {Array}   props.styles   Content styles to inject into the iframe.\n * @param {Element} props.children Content of the canvas, defaults to the BlockList component.\n * @return {Element}               Block Breadcrumb.\n */\nfunction BlockCanvas( { children, height, styles } ) {\n\treturn (\n\t\t<ExperimentalBlockCanvas height={ height } styles={ styles }>\n\t\t\t{ children }\n\t\t</ExperimentalBlockCanvas>\n\t);\n}\n\nexport default BlockCanvas;\n"],"mappings":"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"}

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

@@ -74,7 +74,7 @@ function BlockCard({
       padding: 0
     },
     icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
-    isSmall: true
+    size: "small"
   }), (0, _react.createElement)(_blockIcon.default, {
     icon: icon,
     showColors: true
@@ -82,7 +82,7 @@ function BlockCard({
     className: "block-editor-block-card__content"
   }, (0, _react.createElement)("h2", {
     className: "block-editor-block-card__title"
-  }, title), (0, _react.createElement)("span", {
+  }, title), description && (0, _react.createElement)("span", {
     className: "block-editor-block-card__description"
   }, description)));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_deprecated","_components","_icons","_i18n","_data","_blockIcon","_store","BlockCard","title","icon","description","blockType","className","deprecated","since","alternative","parentNavBlockClientId","useSelect","select","getSelectedBlockClientId","getBlockParentsByBlockName","blockEditorStore","_selectedBlockClientId","selectBlock","useDispatch","_react","createElement","classnames","Button","onClick","label","__","style","minWidth","padding","isRTL","chevronRight","chevronLeft","isSmall","default","showColors","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-card/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { Button } from '@wordpress/components';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\n\nfunction BlockCard( { title, icon, description, blockType, className } ) {\n\tif ( blockType ) {\n\t\tdeprecated( '`blockType` property in `BlockCard component`', {\n\t\t\tsince: '5.7',\n\t\t\talternative: '`title, icon and description` properties',\n\t\t} );\n\t\t( { title, icon, description } = blockType );\n\t}\n\n\tconst { parentNavBlockClientId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\n\t\tconst _selectedBlockClientId = getSelectedBlockClientId();\n\n\t\treturn {\n\t\t\tparentNavBlockClientId: getBlockParentsByBlockName(\n\t\t\t\t_selectedBlockClientId,\n\t\t\t\t'core/navigation',\n\t\t\t\ttrue\n\t\t\t)[ 0 ],\n\t\t};\n\t}, [] );\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<div className={ classnames( 'block-editor-block-card', className ) }>\n\t\t\t{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => selectBlock( parentNavBlockClientId ) }\n\t\t\t\t\tlabel={ __( 'Go to parent Navigation block' ) }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t}\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tisSmall\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t<div className=\"block-editor-block-card__content\">\n\t\t\t\t<h2 className=\"block-editor-block-card__title\">{ title }</h2>\n\t\t\t\t<span className=\"block-editor-block-card__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default BlockCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAKA,IAAAM,UAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA,SAASQ,SAASA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC,WAAW;EAAEC,SAAS;EAAEC;AAAU,CAAC,EAAG;EACxE,IAAKD,SAAS,EAAG;IAChB,IAAAE,mBAAU,EAAE,+CAA+C,EAAE;MAC5DC,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE;IACd,CAAE,CAAC;IACH,CAAE;MAAEP,KAAK;MAAEC,IAAI;MAAEC;IAAY,CAAC,GAAGC,SAAS;EAC3C;EAEA,MAAM;IAAEK;EAAuB,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC3D,MAAM;MAAEC,wBAAwB;MAAEC;IAA2B,CAAC,GAC7DF,MAAM,CAAEG,YAAiB,CAAC;IAE3B,MAAMC,sBAAsB,GAAGH,wBAAwB,CAAC,CAAC;IAEzD,OAAO;MACNH,sBAAsB,EAAEI,0BAA0B,CACjDE,sBAAsB,EACtB,iBAAiB,EACjB,IACD,CAAC,CAAE,CAAC;IACL,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM;IAAEC;EAAY,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAEvD,OACC,IAAAI,MAAA,CAAAC,aAAA;IAAKd,SAAS,EAAG,IAAAe,mBAAU,EAAE,yBAAyB,EAAEf,SAAU;EAAG,GAClEI,sBAAsB;EAAM;EAC7B,IAAAS,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,MAAM;IACNC,OAAO,EAAGA,CAAA,KAAMN,WAAW,CAAEP,sBAAuB,CAAG;IACvDc,KAAK,EAAG,IAAAC,QAAE,EAAE,+BAAgC,CAAG;IAC/CC,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDzB,IAAI,EAAG,IAAA0B,WAAK,EAAC,CAAC,GAAGC,mBAAY,GAAGC,kBAAa;IAC7CC,OAAO;EAAA,CACP,CACD,EACD,IAAAb,MAAA,CAAAC,aAAA,EAACrB,UAAA,CAAAkC,OAAS;IAAC9B,IAAI,EAAGA,IAAM;IAAC+B,UAAU;EAAA,CAAE,CAAC,EACtC,IAAAf,MAAA,CAAAC,aAAA;IAAKd,SAAS,EAAC;EAAkC,GAChD,IAAAa,MAAA,CAAAC,aAAA;IAAId,SAAS,EAAC;EAAgC,GAAGJ,KAAW,CAAC,EAC7D,IAAAiB,MAAA,CAAAC,aAAA;IAAMd,SAAS,EAAC;EAAsC,GACnDF,WACG,CACF,CACD,CAAC;AAER;AAAC,IAAA+B,QAAA,GAEclC,SAAS;AAAAmC,OAAA,CAAAH,OAAA,GAAAE,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_deprecated","_components","_icons","_i18n","_data","_blockIcon","_store","BlockCard","title","icon","description","blockType","className","deprecated","since","alternative","parentNavBlockClientId","useSelect","select","getSelectedBlockClientId","getBlockParentsByBlockName","blockEditorStore","_selectedBlockClientId","selectBlock","useDispatch","_react","createElement","classnames","Button","onClick","label","__","style","minWidth","padding","isRTL","chevronRight","chevronLeft","size","default","showColors","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-card/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { Button } from '@wordpress/components';\nimport { chevronLeft, chevronRight } from '@wordpress/icons';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport { store as blockEditorStore } from '../../store';\n\nfunction BlockCard( { title, icon, description, blockType, className } ) {\n\tif ( blockType ) {\n\t\tdeprecated( '`blockType` property in `BlockCard component`', {\n\t\t\tsince: '5.7',\n\t\t\talternative: '`title, icon and description` properties',\n\t\t} );\n\t\t( { title, icon, description } = blockType );\n\t}\n\n\tconst { parentNavBlockClientId } = useSelect( ( select ) => {\n\t\tconst { getSelectedBlockClientId, getBlockParentsByBlockName } =\n\t\t\tselect( blockEditorStore );\n\n\t\tconst _selectedBlockClientId = getSelectedBlockClientId();\n\n\t\treturn {\n\t\t\tparentNavBlockClientId: getBlockParentsByBlockName(\n\t\t\t\t_selectedBlockClientId,\n\t\t\t\t'core/navigation',\n\t\t\t\ttrue\n\t\t\t)[ 0 ],\n\t\t};\n\t}, [] );\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\treturn (\n\t\t<div className={ classnames( 'block-editor-block-card', className ) }>\n\t\t\t{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.\n\t\t\t\t<Button\n\t\t\t\t\tonClick={ () => selectBlock( parentNavBlockClientId ) }\n\t\t\t\t\tlabel={ __( 'Go to parent Navigation block' ) }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t}\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t<div className=\"block-editor-block-card__content\">\n\t\t\t\t<h2 className=\"block-editor-block-card__title\">{ title }</h2>\n\t\t\t\t{ description && (\n\t\t\t\t\t<span className=\"block-editor-block-card__description\">\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default BlockCard;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAKA,IAAAM,UAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAIA,SAASQ,SAASA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC,WAAW;EAAEC,SAAS;EAAEC;AAAU,CAAC,EAAG;EACxE,IAAKD,SAAS,EAAG;IAChB,IAAAE,mBAAU,EAAE,+CAA+C,EAAE;MAC5DC,KAAK,EAAE,KAAK;MACZC,WAAW,EAAE;IACd,CAAE,CAAC;IACH,CAAE;MAAEP,KAAK;MAAEC,IAAI;MAAEC;IAAY,CAAC,GAAGC,SAAS;EAC3C;EAEA,MAAM;IAAEK;EAAuB,CAAC,GAAG,IAAAC,eAAS,EAAIC,MAAM,IAAM;IAC3D,MAAM;MAAEC,wBAAwB;MAAEC;IAA2B,CAAC,GAC7DF,MAAM,CAAEG,YAAiB,CAAC;IAE3B,MAAMC,sBAAsB,GAAGH,wBAAwB,CAAC,CAAC;IAEzD,OAAO;MACNH,sBAAsB,EAAEI,0BAA0B,CACjDE,sBAAsB,EACtB,iBAAiB,EACjB,IACD,CAAC,CAAE,CAAC;IACL,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAM;IAAEC;EAAY,CAAC,GAAG,IAAAC,iBAAW,EAAEH,YAAiB,CAAC;EAEvD,OACC,IAAAI,MAAA,CAAAC,aAAA;IAAKd,SAAS,EAAG,IAAAe,mBAAU,EAAE,yBAAyB,EAAEf,SAAU;EAAG,GAClEI,sBAAsB;EAAM;EAC7B,IAAAS,MAAA,CAAAC,aAAA,EAACzB,WAAA,CAAA2B,MAAM;IACNC,OAAO,EAAGA,CAAA,KAAMN,WAAW,CAAEP,sBAAuB,CAAG;IACvDc,KAAK,EAAG,IAAAC,QAAE,EAAE,+BAAgC,CAAG;IAC/CC,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDzB,IAAI,EAAG,IAAA0B,WAAK,EAAC,CAAC,GAAGC,mBAAY,GAAGC,kBAAa;IAC7CC,IAAI,EAAC;EAAO,CACZ,CACD,EACD,IAAAb,MAAA,CAAAC,aAAA,EAACrB,UAAA,CAAAkC,OAAS;IAAC9B,IAAI,EAAGA,IAAM;IAAC+B,UAAU;EAAA,CAAE,CAAC,EACtC,IAAAf,MAAA,CAAAC,aAAA;IAAKd,SAAS,EAAC;EAAkC,GAChD,IAAAa,MAAA,CAAAC,aAAA;IAAId,SAAS,EAAC;EAAgC,GAAGJ,KAAW,CAAC,EAC3DE,WAAW,IACZ,IAAAe,MAAA,CAAAC,aAAA;IAAMd,SAAS,EAAC;EAAsC,GACnDF,WACG,CAEH,CACD,CAAC;AAER;AAAC,IAAA+B,QAAA,GAEclC,SAAS;AAAAmC,OAAA,CAAAH,OAAA,GAAAE,QAAA"}

package/build/components/block-controls/hook.js

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = useBlockControlsFill;
-var _blocks = require("@wordpress/blocks");
-var _data = require("@wordpress/data");
 var _groups = _interopRequireDefault(require("./groups"));
-var _store = require("../../store");
 var _context = require("../block-edit/context");
-var _useDisplayBlockControls = _interopRequireDefault(require("../use-display-block-controls"));
 /**
  * WordPress dependencies
  */
@@ -20,27 +16,11 @@ var _useDisplayBlockControls = _interopRequireDefault(require("../use-display-bl
  */
 
 function useBlockControlsFill(group, shareWithChildBlocks) {
-  const isDisplayed = (0, _useDisplayBlockControls.default)();
-  const {
-    clientId
-  } = (0, _context.useBlockEditContext)();
-  const isParentDisplayed = (0, _data.useSelect)(select => {
-    if (!shareWithChildBlocks) {
-      return false;
-    }
-    const {
-      getBlockName,
-      hasSelectedInnerBlock
-    } = select(_store.store);
-    const {
-      hasBlockSupport
-    } = select(_blocks.store);
-    return hasBlockSupport(getBlockName(clientId), '__experimentalExposeControlsToChildren', false) && hasSelectedInnerBlock(clientId);
-  }, [shareWithChildBlocks, clientId]);
-  if (isDisplayed) {
+  const context = (0, _context.useBlockEditContext)();
+  if (context[_context.mayDisplayControlsKey]) {
     return _groups.default[group]?.Fill;
   }
-  if (isParentDisplayed) {
+  if (context[_context.mayDisplayParentControlsKey] && shareWithChildBlocks) {
     return _groups.default.parent.Fill;
   }
   return null;

package/build/components/block-controls/hook.js.map

@@ -1 +1 @@
-{"version":3,"names":["_blocks","require","_data","_groups","_interopRequireDefault","_store","_context","_useDisplayBlockControls","useBlockControlsFill","group","shareWithChildBlocks","isDisplayed","useDisplayBlockControls","clientId","useBlockEditContext","isParentDisplayed","useSelect","select","getBlockName","hasSelectedInnerBlock","blockEditorStore","hasBlockSupport","blocksStore","groups","Fill","parent"],"sources":["@wordpress/block-editor/src/components/block-controls/hook.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\nimport { store as blockEditorStore } from '../../store';\nimport { useBlockEditContext } from '../block-edit/context';\nimport useDisplayBlockControls from '../use-display-block-controls';\n\nexport default function useBlockControlsFill( group, shareWithChildBlocks ) {\n\tconst isDisplayed = useDisplayBlockControls();\n\tconst { clientId } = useBlockEditContext();\n\tconst isParentDisplayed = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! shareWithChildBlocks ) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst { getBlockName, hasSelectedInnerBlock } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst { hasBlockSupport } = select( blocksStore );\n\n\t\t\treturn (\n\t\t\t\thasBlockSupport(\n\t\t\t\t\tgetBlockName( clientId ),\n\t\t\t\t\t'__experimentalExposeControlsToChildren',\n\t\t\t\t\tfalse\n\t\t\t\t) && hasSelectedInnerBlock( clientId )\n\t\t\t);\n\t\t},\n\t\t[ shareWithChildBlocks, clientId ]\n\t);\n\n\tif ( isDisplayed ) {\n\t\treturn groups[ group ]?.Fill;\n\t}\n\tif ( isParentDisplayed ) {\n\t\treturn groups.parent.Fill;\n\t}\n\treturn null;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,wBAAA,GAAAH,sBAAA,CAAAH,OAAA;AAZA;AACA;AACA;;AAIA;AACA;AACA;;AAMe,SAASO,oBAAoBA,CAAEC,KAAK,EAAEC,oBAAoB,EAAG;EAC3E,MAAMC,WAAW,GAAG,IAAAC,gCAAuB,EAAC,CAAC;EAC7C,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,4BAAmB,EAAC,CAAC;EAC1C,MAAMC,iBAAiB,GAAG,IAAAC,eAAS,EAChCC,MAAM,IAAM;IACb,IAAK,CAAEP,oBAAoB,EAAG;MAC7B,OAAO,KAAK;IACb;IAEA,MAAM;MAAEQ,YAAY;MAAEC;IAAsB,CAAC,GAC5CF,MAAM,CAAEG,YAAiB,CAAC;IAC3B,MAAM;MAAEC;IAAgB,CAAC,GAAGJ,MAAM,CAAEK,aAAY,CAAC;IAEjD,OACCD,eAAe,CACdH,YAAY,CAAEL,QAAS,CAAC,EACxB,wCAAwC,EACxC,KACD,CAAC,IAAIM,qBAAqB,CAAEN,QAAS,CAAC;EAExC,CAAC,EACD,CAAEH,oBAAoB,EAAEG,QAAQ,CACjC,CAAC;EAED,IAAKF,WAAW,EAAG;IAClB,OAAOY,eAAM,CAAEd,KAAK,CAAE,EAAEe,IAAI;EAC7B;EACA,IAAKT,iBAAiB,EAAG;IACxB,OAAOQ,eAAM,CAACE,MAAM,CAACD,IAAI;EAC1B;EACA,OAAO,IAAI;AACZ"}
+{"version":3,"names":["_groups","_interopRequireDefault","require","_context","useBlockControlsFill","group","shareWithChildBlocks","context","useBlockEditContext","mayDisplayControlsKey","groups","Fill","mayDisplayParentControlsKey","parent"],"sources":["@wordpress/block-editor/src/components/block-controls/hook.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport groups from './groups';\nimport {\n\tuseBlockEditContext,\n\tmayDisplayControlsKey,\n\tmayDisplayParentControlsKey,\n} from '../block-edit/context';\n\nexport default function useBlockControlsFill( group, shareWithChildBlocks ) {\n\tconst context = useBlockEditContext();\n\tif ( context[ mayDisplayControlsKey ] ) {\n\t\treturn groups[ group ]?.Fill;\n\t}\n\tif ( context[ mayDisplayParentControlsKey ] && shareWithChildBlocks ) {\n\t\treturn groups.parent.Fill;\n\t}\n\treturn null;\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAEA;AACA;AACA;;AAQe,SAASE,oBAAoBA,CAAEC,KAAK,EAAEC,oBAAoB,EAAG;EAC3E,MAAMC,OAAO,GAAG,IAAAC,4BAAmB,EAAC,CAAC;EACrC,IAAKD,OAAO,CAAEE,8BAAqB,CAAE,EAAG;IACvC,OAAOC,eAAM,CAAEL,KAAK,CAAE,EAAEM,IAAI;EAC7B;EACA,IAAKJ,OAAO,CAAEK,oCAA2B,CAAE,IAAIN,oBAAoB,EAAG;IACrE,OAAOI,eAAM,CAACG,MAAM,CAACF,IAAI;EAC1B;EACA,OAAO,IAAI;AACZ"}

package/build/components/block-draggable/draggable-chip.js

@@ -21,7 +21,8 @@ var _blockIcon = _interopRequireDefault(require("../block-icon"));
 function BlockDraggableChip({
   count,
   icon,
-  isPattern
+  isPattern,
+  fadeWhenDisabled
 }) {
   const patternLabel = isPattern && (0, _i18n.__)('Pattern');
   return (0, _react.createElement)("div", {
@@ -37,6 +38,10 @@ function BlockDraggableChip({
   }) : patternLabel || (0, _i18n.sprintf)( /* translators: %d: Number of blocks. */
   (0, _i18n._n)('%d block', '%d blocks', count), count)), (0, _react.createElement)(_components.FlexItem, null, (0, _react.createElement)(_blockIcon.default, {
     icon: _icons.dragHandle
+  })), fadeWhenDisabled && (0, _react.createElement)(_components.FlexItem, {
+    className: "block-editor-block-draggable-chip__disabled"
+  }, (0, _react.createElement)("span", {
+    className: "block-editor-block-draggable-chip__disabled-icon"
   })))));
 }
 //# sourceMappingURL=draggable-chip.js.map

package/build/components/block-draggable/draggable-chip.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_components","_icons","_blockIcon","_interopRequireDefault","BlockDraggableChip","count","icon","isPattern","patternLabel","__","_react","createElement","className","Flex","justify","FlexItem","default","sprintf","_n","dragHandle"],"sources":["@wordpress/block-editor/src/components/block-draggable/draggable-chip.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Flex, FlexItem } from '@wordpress/components';\nimport { dragHandle } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\n\nexport default function BlockDraggableChip( { count, icon, isPattern } ) {\n\tconst patternLabel = isPattern && __( 'Pattern' );\n\treturn (\n\t\t<div className=\"block-editor-block-draggable-chip-wrapper\">\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-block-draggable-chip\"\n\t\t\t\tdata-testid=\"block-draggable-chip\"\n\t\t\t>\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tclassName=\"block-editor-block-draggable-chip__content\"\n\t\t\t\t>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t{ icon ? (\n\t\t\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tpatternLabel ||\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: Number of blocks. */\n\t\t\t\t\t\t\t\t_n( '%d block', '%d blocks', count ),\n\t\t\t\t\t\t\t\tcount\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<BlockIcon icon={ dragHandle } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,UAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,kBAAkBA,CAAE;EAAEC,KAAK;EAAEC,IAAI;EAAEC;AAAU,CAAC,EAAG;EACxE,MAAMC,YAAY,GAAGD,SAAS,IAAI,IAAAE,QAAE,EAAE,SAAU,CAAC;EACjD,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACzD,IAAAF,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,mCAAmC;IAC7C,eAAY;EAAsB,GAElC,IAAAF,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAa,IAAI;IACJC,OAAO,EAAC,QAAQ;IAChBF,SAAS,EAAC;EAA4C,GAEtD,IAAAF,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAe,QAAQ,QACNT,IAAI,GACL,IAAAI,MAAA,CAAAC,aAAA,EAACT,UAAA,CAAAc,OAAS;IAACV,IAAI,EAAGA;EAAM,CAAE,CAAC,GAE3BE,YAAY,IACZ,IAAAS,aAAO,GACN;EACA,IAAAC,QAAE,EAAE,UAAU,EAAE,WAAW,EAAEb,KAAM,CAAC,EACpCA,KACD,CAEQ,CAAC,EACX,IAAAK,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAe,QAAQ,QACR,IAAAL,MAAA,CAAAC,aAAA,EAACT,UAAA,CAAAc,OAAS;IAACV,IAAI,EAAGa;EAAY,CAAE,CACvB,CACL,CACF,CACD,CAAC;AAER"}
+{"version":3,"names":["_i18n","require","_components","_icons","_blockIcon","_interopRequireDefault","BlockDraggableChip","count","icon","isPattern","fadeWhenDisabled","patternLabel","__","_react","createElement","className","Flex","justify","FlexItem","default","sprintf","_n","dragHandle"],"sources":["@wordpress/block-editor/src/components/block-draggable/draggable-chip.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { Flex, FlexItem } from '@wordpress/components';\nimport { dragHandle } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\n\nexport default function BlockDraggableChip( {\n\tcount,\n\ticon,\n\tisPattern,\n\tfadeWhenDisabled,\n} ) {\n\tconst patternLabel = isPattern && __( 'Pattern' );\n\treturn (\n\t\t<div className=\"block-editor-block-draggable-chip-wrapper\">\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-block-draggable-chip\"\n\t\t\t\tdata-testid=\"block-draggable-chip\"\n\t\t\t>\n\t\t\t\t<Flex\n\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\tclassName=\"block-editor-block-draggable-chip__content\"\n\t\t\t\t>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t{ icon ? (\n\t\t\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tpatternLabel ||\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t/* translators: %d: Number of blocks. */\n\t\t\t\t\t\t\t\t_n( '%d block', '%d blocks', count ),\n\t\t\t\t\t\t\t\tcount\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t) }\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<BlockIcon icon={ dragHandle } />\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t{ fadeWhenDisabled && (\n\t\t\t\t\t\t<FlexItem className=\"block-editor-block-draggable-chip__disabled\">\n\t\t\t\t\t\t\t<span className=\"block-editor-block-draggable-chip__disabled-icon\"></span>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t) }\n\t\t\t\t</Flex>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,UAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,kBAAkBA,CAAE;EAC3CC,KAAK;EACLC,IAAI;EACJC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,YAAY,GAAGF,SAAS,IAAI,IAAAG,QAAE,EAAE,SAAU,CAAC;EACjD,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA2C,GACzD,IAAAF,MAAA,CAAAC,aAAA;IACCC,SAAS,EAAC,mCAAmC;IAC7C,eAAY;EAAsB,GAElC,IAAAF,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAc,IAAI;IACJC,OAAO,EAAC,QAAQ;IAChBF,SAAS,EAAC;EAA4C,GAEtD,IAAAF,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAgB,QAAQ,QACNV,IAAI,GACL,IAAAK,MAAA,CAAAC,aAAA,EAACV,UAAA,CAAAe,OAAS;IAACX,IAAI,EAAGA;EAAM,CAAE,CAAC,GAE3BG,YAAY,IACZ,IAAAS,aAAO,GACN;EACA,IAAAC,QAAE,EAAE,UAAU,EAAE,WAAW,EAAEd,KAAM,CAAC,EACpCA,KACD,CAEQ,CAAC,EACX,IAAAM,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAgB,QAAQ,QACR,IAAAL,MAAA,CAAAC,aAAA,EAACV,UAAA,CAAAe,OAAS;IAACX,IAAI,EAAGc;EAAY,CAAE,CACvB,CAAC,EACTZ,gBAAgB,IACjB,IAAAG,MAAA,CAAAC,aAAA,EAACZ,WAAA,CAAAgB,QAAQ;IAACH,SAAS,EAAC;EAA6C,GAChE,IAAAF,MAAA,CAAAC,aAAA;IAAMC,SAAS,EAAC;EAAkD,CAAO,CAChE,CAEN,CACF,CACD,CAAC;AAER"}

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

@@ -10,9 +10,12 @@ var _blocks = require("@wordpress/blocks");
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
 var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
 var _draggableChip = _interopRequireDefault(require("./draggable-chip"));
 var _useScrollWhenDragging = _interopRequireDefault(require("./use-scroll-when-dragging"));
 var _store = require("../../store");
+var _useBlockRefs = require("../block-list/use-block-props/use-block-refs");
+var _useBlockDropZone = require("../use-block-drop-zone");
 /**
  * WordPress dependencies
  */
@@ -26,21 +29,25 @@ const BlockDraggable = ({
   clientIds,
   cloneClassname,
   onDragStart,
-  onDragEnd
+  onDragEnd,
+  fadeWhenDisabled = false
 }) => {
   const {
     srcRootClientId,
     isDraggable,
-    icon
+    icon,
+    visibleInserter,
+    getBlockType
   } = (0, _data.useSelect)(select => {
     const {
       canMoveBlocks,
       getBlockRootClientId,
       getBlockName,
-      getBlockAttributes
+      getBlockAttributes,
+      isBlockInsertionPointVisible
     } = select(_store.store);
     const {
-      getBlockType,
+      getBlockType: _getBlockType,
       getActiveBlockVariation
     } = select(_blocks.store);
     const rootClientId = getBlockRootClientId(clientIds[0]);
@@ -49,11 +56,18 @@ const BlockDraggable = ({
     return {
       srcRootClientId: rootClientId,
       isDraggable: canMoveBlocks(clientIds, rootClientId),
-      icon: variation?.icon || getBlockType(blockName)?.icon
+      icon: variation?.icon || _getBlockType(blockName)?.icon,
+      visibleInserter: isBlockInsertionPointVisible(),
+      getBlockType: _getBlockType
     };
   }, [clientIds]);
   const isDragging = (0, _element.useRef)(false);
   const [startScrolling, scrollOnDragOver, stopScrolling] = (0, _useScrollWhenDragging.default)();
+  const {
+    getAllowedBlocks,
+    getBlockNamesByClientId,
+    getBlockRootClientId
+  } = (0, _data.useSelect)(_store.store);
   const {
     startDraggingBlocks,
     stopDraggingBlocks
@@ -67,6 +81,61 @@ const BlockDraggable = ({
       }
     };
   }, []);
+
+  // Find the root of the editor iframe.
+  const blockRef = (0, _useBlockRefs.__unstableUseBlockRef)(clientIds[0]);
+  const editorRoot = blockRef.current?.closest('body');
+
+  /*
+   * Add a dragover event listener to the editor root to track the blocks being dragged over.
+   * The listener has to be inside the editor iframe otherwise the target isn't accessible.
+   */
+  (0, _element.useEffect)(() => {
+    if (!editorRoot || !fadeWhenDisabled) {
+      return;
+    }
+    const onDragOver = event => {
+      if (!event.target.closest('[data-block]')) {
+        return;
+      }
+      const draggedBlockNames = getBlockNamesByClientId(clientIds);
+      const targetClientId = event.target.closest('[data-block]').getAttribute('data-block');
+      const allowedBlocks = getAllowedBlocks(targetClientId);
+      const targetBlockName = getBlockNamesByClientId([targetClientId])[0];
+
+      /*
+       * Check if the target is valid to drop in.
+       * If the target's allowedBlocks is an empty array,
+       * it isn't a container block, in which case we check
+       * its parent's validity instead.
+       */
+      let dropTargetValid;
+      if (allowedBlocks?.length === 0) {
+        const targetRootClientId = getBlockRootClientId(targetClientId);
+        const targetRootBlockName = getBlockNamesByClientId([targetRootClientId])[0];
+        const rootAllowedBlocks = getAllowedBlocks(targetRootClientId);
+        dropTargetValid = (0, _useBlockDropZone.isDropTargetValid)(getBlockType, rootAllowedBlocks, draggedBlockNames, targetRootBlockName);
+      } else {
+        dropTargetValid = (0, _useBlockDropZone.isDropTargetValid)(getBlockType, allowedBlocks, draggedBlockNames, targetBlockName);
+      }
+
+      /*
+       * Update the body class to reflect if drop target is valid.
+       * This has to be done on the document body because the draggable
+       * chip is rendered outside of the editor iframe.
+       */
+      if (!dropTargetValid && !visibleInserter) {
+        window?.document?.body?.classList?.add('block-draggable-invalid-drag-token');
+      } else {
+        window?.document?.body?.classList?.remove('block-draggable-invalid-drag-token');
+      }
+    };
+    const throttledOnDragOver = (0, _compose.throttle)(onDragOver, 200);
+    editorRoot.addEventListener('dragover', throttledOnDragOver);
+    return () => {
+      editorRoot.removeEventListener('dragover', throttledOnDragOver);
+    };
+  }, [clientIds, editorRoot, fadeWhenDisabled, getAllowedBlocks, getBlockNamesByClientId, getBlockRootClientId, getBlockType, visibleInserter]);
   if (!isDraggable) {
     return children({
       draggable: false
@@ -104,7 +173,8 @@ const BlockDraggable = ({
     },
     __experimentalDragComponent: (0, _react.createElement)(_draggableChip.default, {
       count: clientIds.length,
-      icon: icon
+      icon: icon,
+      fadeWhenDisabled: true
     })
   }, ({
     onDraggableStart,

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

@@ -1 +1 @@
-{"version":3,"names":["_blocks","require","_components","_data","_element","_draggableChip","_interopRequireDefault","_useScrollWhenDragging","_store","BlockDraggable","children","clientIds","cloneClassname","onDragStart","onDragEnd","srcRootClientId","isDraggable","icon","useSelect","select","canMoveBlocks","getBlockRootClientId","getBlockName","getBlockAttributes","blockEditorStore","getBlockType","getActiveBlockVariation","blocksStore","rootClientId","blockName","variation","isDragging","useRef","startScrolling","scrollOnDragOver","stopScrolling","useScrollWhenDragging","startDraggingBlocks","stopDraggingBlocks","useDispatch","useEffect","current","draggable","transferData","type","srcClientIds","_react","createElement","Draggable","__experimentalTransferDataType","event","window","requestAnimationFrame","onDragOver","__experimentalDragComponent","default","count","length","onDraggableStart","onDraggableEnd","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-draggable/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } 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 {\n\t\t\t\tcanMoveBlocks,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst blockName = getBlockName( clientIds[ 0 ] );\n\t\t\tconst variation = getActiveBlockVariation(\n\t\t\t\tblockName,\n\t\t\t\tgetBlockAttributes( clientIds[ 0 ] )\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tsrcRootClientId: rootClientId,\n\t\t\t\tisDraggable: canMoveBlocks( clientIds, rootClientId ),\n\t\t\t\ticon: variation?.icon || 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"],"mappings":"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"}
+{"version":3,"names":["_blocks","require","_components","_data","_element","_compose","_draggableChip","_interopRequireDefault","_useScrollWhenDragging","_store","_useBlockRefs","_useBlockDropZone","BlockDraggable","children","clientIds","cloneClassname","onDragStart","onDragEnd","fadeWhenDisabled","srcRootClientId","isDraggable","icon","visibleInserter","getBlockType","useSelect","select","canMoveBlocks","getBlockRootClientId","getBlockName","getBlockAttributes","isBlockInsertionPointVisible","blockEditorStore","_getBlockType","getActiveBlockVariation","blocksStore","rootClientId","blockName","variation","isDragging","useRef","startScrolling","scrollOnDragOver","stopScrolling","useScrollWhenDragging","getAllowedBlocks","getBlockNamesByClientId","startDraggingBlocks","stopDraggingBlocks","useDispatch","useEffect","current","blockRef","useBlockRef","editorRoot","closest","onDragOver","event","target","draggedBlockNames","targetClientId","getAttribute","allowedBlocks","targetBlockName","dropTargetValid","length","targetRootClientId","targetRootBlockName","rootAllowedBlocks","isDropTargetValid","window","document","body","classList","add","remove","throttledOnDragOver","throttle","addEventListener","removeEventListener","draggable","transferData","type","srcClientIds","_react","createElement","Draggable","__experimentalTransferDataType","requestAnimationFrame","__experimentalDragComponent","default","count","onDraggableStart","onDraggableEnd","_default","exports"],"sources":["@wordpress/block-editor/src/components/block-draggable/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { Draggable } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { throttle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BlockDraggableChip from './draggable-chip';\nimport useScrollWhenDragging from './use-scroll-when-dragging';\nimport { store as blockEditorStore } from '../../store';\nimport { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';\nimport { isDropTargetValid } from '../use-block-drop-zone';\n\nconst BlockDraggable = ( {\n\tchildren,\n\tclientIds,\n\tcloneClassname,\n\tonDragStart,\n\tonDragEnd,\n\tfadeWhenDisabled = false,\n} ) => {\n\tconst {\n\t\tsrcRootClientId,\n\t\tisDraggable,\n\t\ticon,\n\t\tvisibleInserter,\n\t\tgetBlockType,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tcanMoveBlocks,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tisBlockInsertionPointVisible,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst { getBlockType: _getBlockType, getActiveBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientIds[ 0 ] );\n\t\t\tconst blockName = getBlockName( clientIds[ 0 ] );\n\t\t\tconst variation = getActiveBlockVariation(\n\t\t\t\tblockName,\n\t\t\t\tgetBlockAttributes( clientIds[ 0 ] )\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tsrcRootClientId: rootClientId,\n\t\t\t\tisDraggable: canMoveBlocks( clientIds, rootClientId ),\n\t\t\t\ticon: variation?.icon || _getBlockType( blockName )?.icon,\n\t\t\t\tvisibleInserter: isBlockInsertionPointVisible(),\n\t\t\t\tgetBlockType: _getBlockType,\n\t\t\t};\n\t\t},\n\t\t[ clientIds ]\n\t);\n\n\tconst isDragging = useRef( false );\n\tconst [ startScrolling, scrollOnDragOver, stopScrolling ] =\n\t\tuseScrollWhenDragging();\n\n\tconst { getAllowedBlocks, getBlockNamesByClientId, getBlockRootClientId } =\n\t\tuseSelect( blockEditorStore );\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\t// Find the root of the editor iframe.\n\tconst blockRef = useBlockRef( clientIds[ 0 ] );\n\tconst editorRoot = blockRef.current?.closest( 'body' );\n\n\t/*\n\t * Add a dragover event listener to the editor root to track the blocks being dragged over.\n\t * The listener has to be inside the editor iframe otherwise the target isn't accessible.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! editorRoot || ! fadeWhenDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst onDragOver = ( event ) => {\n\t\t\tif ( ! event.target.closest( '[data-block]' ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst draggedBlockNames = getBlockNamesByClientId( clientIds );\n\t\t\tconst targetClientId = event.target\n\t\t\t\t.closest( '[data-block]' )\n\t\t\t\t.getAttribute( 'data-block' );\n\n\t\t\tconst allowedBlocks = getAllowedBlocks( targetClientId );\n\t\t\tconst targetBlockName = getBlockNamesByClientId( [\n\t\t\t\ttargetClientId,\n\t\t\t] )[ 0 ];\n\n\t\t\t/*\n\t\t\t * Check if the target is valid to drop in.\n\t\t\t * If the target's allowedBlocks is an empty array,\n\t\t\t * it isn't a container block, in which case we check\n\t\t\t * its parent's validity instead.\n\t\t\t */\n\t\t\tlet dropTargetValid;\n\t\t\tif ( allowedBlocks?.length === 0 ) {\n\t\t\t\tconst targetRootClientId =\n\t\t\t\t\tgetBlockRootClientId( targetClientId );\n\t\t\t\tconst targetRootBlockName = getBlockNamesByClientId( [\n\t\t\t\t\ttargetRootClientId,\n\t\t\t\t] )[ 0 ];\n\t\t\t\tconst rootAllowedBlocks =\n\t\t\t\t\tgetAllowedBlocks( targetRootClientId );\n\t\t\t\tdropTargetValid = isDropTargetValid(\n\t\t\t\t\tgetBlockType,\n\t\t\t\t\trootAllowedBlocks,\n\t\t\t\t\tdraggedBlockNames,\n\t\t\t\t\ttargetRootBlockName\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tdropTargetValid = isDropTargetValid(\n\t\t\t\t\tgetBlockType,\n\t\t\t\t\tallowedBlocks,\n\t\t\t\t\tdraggedBlockNames,\n\t\t\t\t\ttargetBlockName\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t/*\n\t\t\t * Update the body class to reflect if drop target is valid.\n\t\t\t * This has to be done on the document body because the draggable\n\t\t\t * chip is rendered outside of the editor iframe.\n\t\t\t */\n\t\t\tif ( ! dropTargetValid && ! visibleInserter ) {\n\t\t\t\twindow?.document?.body?.classList?.add(\n\t\t\t\t\t'block-draggable-invalid-drag-token'\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twindow?.document?.body?.classList?.remove(\n\t\t\t\t\t'block-draggable-invalid-drag-token'\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst throttledOnDragOver = throttle( onDragOver, 200 );\n\n\t\teditorRoot.addEventListener( 'dragover', throttledOnDragOver );\n\n\t\treturn () => {\n\t\t\teditorRoot.removeEventListener( 'dragover', throttledOnDragOver );\n\t\t};\n\t}, [\n\t\tclientIds,\n\t\teditorRoot,\n\t\tfadeWhenDisabled,\n\t\tgetAllowedBlocks,\n\t\tgetBlockNamesByClientId,\n\t\tgetBlockRootClientId,\n\t\tgetBlockType,\n\t\tvisibleInserter,\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\n\t\t\t\t\tcount={ clientIds.length }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tfadeWhenDisabled\n\t\t\t\t/>\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"],"mappings":"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"}

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

@@ -18,7 +18,6 @@ var _reactNativeAztec = _interopRequireDefault(require("@wordpress/react-native-
 var _useScrollWhenDragging = _interopRequireDefault(require("./use-scroll-when-dragging"));
 var _draggableChip = _interopRequireDefault(require("./draggable-chip"));
 var _store = require("../../store");
-var _blockListContext = require("../block-list/block-list-context");
 var _droppingInsertionPoint = _interopRequireDefault(require("./dropping-insertion-point"));
 var _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone"));
 var _style = _interopRequireDefault(require("./style.scss"));
@@ -71,10 +70,6 @@ const BlockDraggableWrapper = ({
     startDraggingBlocks,
     stopDraggingBlocks
   } = (0, _data.useDispatch)(_store.store);
-  const {
-    scrollRef
-  } = (0, _blockListContext.useBlockListContext)();
-  const animatedScrollRef = (0, _reactNativeReanimated.useAnimatedRef)();
   const {
     left,
     right
@@ -84,7 +79,6 @@ const BlockDraggableWrapper = ({
   } = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
   const safeAreaOffset = left + right;
   const contentWidth = width - safeAreaOffset;
-  animatedScrollRef(scrollRef);
   const scroll = {
     offsetY: (0, _reactNativeReanimated.useSharedValue)(0)
   };