@wordpress/block-editor 9.0.0 → 9.1.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.1.0 (2022-05-18)
+
 ## 9.0.0 (2022-05-04)
 
 ### Breaking change

package/README.md

@@ -724,6 +724,7 @@ _Parameters_
 -   _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined.
 -   _options_ `Object`: Options for internal use only.
 -   _options.\_\_unstableIsHtml_ `boolean`:
+-   _options.\_\_unstableIsDisabled_ `boolean`: Whether the block should be disabled.
 
 _Returns_
 

package/build/components/block-alignment-matrix-control/index.js

@@ -32,15 +32,10 @@ function BlockAlignmentMatrixControl(props) {
   const icon = (0, _element.createElement)(_components.__experimentalAlignmentMatrixControl.Icon, {
     value: value
   });
-  const className = 'block-editor-block-alignment-matrix-control';
-  const popoverClassName = `${className}__popover`;
-  const isAlternate = true;
   return (0, _element.createElement)(_components.Dropdown, {
     position: "bottom right",
-    className: className,
     popoverProps: {
-      className: popoverClassName,
-      isAlternate
+      isAlternate: true
     },
     renderToggle: _ref => {
       let {

package/build/components/block-alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-alignment-matrix-control/index.js"],"names":["BlockAlignmentMatrixControl","props","label","onChange","noop","value","isDisabled","icon","className","popoverClassName","isAlternate","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AATA;AACA;AACA;;AAEA;AACA;AACA;AASA,SAASA,2BAAT,CAAsCC,KAAtC,EAA8C;AAC7C,QAAM;AACLC,IAAAA,KAAK,GAAG,cAAI,yBAAJ,CADH;AAELC,IAAAA,QAAQ,GAAGC,YAFN;AAGLC,IAAAA,KAAK,GAAG,QAHH;AAILC,IAAAA;AAJK,MAKFL,KALJ;AAOA,QAAMM,IAAI,GAAG,4BAAC,gDAAD,CAAwB,IAAxB;AAA6B,IAAA,KAAK,EAAGF;AAArC,IAAb;AACA,QAAMG,SAAS,GAAG,6CAAlB;AACA,QAAMC,gBAAgB,GAAI,GAAGD,SAAW,WAAxC;AACA,QAAME,WAAW,GAAG,IAApB;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,QAAQ,EAAC,cADV;AAEC,IAAA,SAAS,EAAGF,SAFb;AAGC,IAAA,YAAY,EAAG;AAAEA,MAAAA,SAAS,EAAEC,gBAAb;AAA+BC,MAAAA;AAA/B,KAHhB;AAIC,IAAA,YAAY,EAAG,QAA4B;AAAA,UAA1B;AAAEC,QAAAA,QAAF;AAAYC,QAAAA;AAAZ,OAA0B;;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEF,MAAF,IAAYE,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,UAAAA,KAAK,CAACG,cAAN;AACAN,UAAAA,QAAQ;AACR;AACD,OALD;;AAOA,aACC,4BAAC,yBAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,yBAAc,MAFf;AAGC,yBAAgBC,MAHjB;AAIC,QAAA,SAAS,EAAGC,eAJb;AAKC,QAAA,KAAK,EAAGX,KALT;AAMC,QAAA,IAAI,EAAGK,IANR;AAOC,QAAA,WAAW,MAPZ;AAQC,QAAA,QAAQ,EAAGD;AARZ,QADD;AAYA,KAxBF;AAyBC,IAAA,aAAa,EAAG,MACf,4BAAC,gDAAD;AACC,MAAA,cAAc,EAAG,KADlB;AAEC,MAAA,QAAQ,EAAGH,QAFZ;AAGC,MAAA,KAAK,EAAGE;AAHT;AA1BF,IADD;AAmCA;;eAEcL,2B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tToolbarButton,\n\tDropdown,\n\t__experimentalAlignmentMatrixControl as AlignmentMatrixControl,\n} from '@wordpress/components';\n\nfunction BlockAlignmentMatrixControl( props ) {\n\tconst {\n\t\tlabel = __( 'Change matrix alignment' ),\n\t\tonChange = noop,\n\t\tvalue = 'center',\n\t\tisDisabled,\n\t} = props;\n\n\tconst icon = <AlignmentMatrixControl.Icon value={ value } />;\n\tconst className = 'block-editor-block-alignment-matrix-control';\n\tconst popoverClassName = `${ className }__popover`;\n\tconst isAlternate = true;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tposition=\"bottom right\"\n\t\t\tclassName={ className }\n\t\t\tpopoverProps={ { className: popoverClassName, isAlternate } }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<AlignmentMatrixControl\n\t\t\t\t\thasFocusBorder={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default BlockAlignmentMatrixControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-alignment-matrix-control/index.js"],"names":["BlockAlignmentMatrixControl","props","label","onChange","noop","value","isDisabled","icon","isAlternate","onToggle","isOpen","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AATA;AACA;AACA;;AAEA;AACA;AACA;AASA,SAASA,2BAAT,CAAsCC,KAAtC,EAA8C;AAC7C,QAAM;AACLC,IAAAA,KAAK,GAAG,cAAI,yBAAJ,CADH;AAELC,IAAAA,QAAQ,GAAGC,YAFN;AAGLC,IAAAA,KAAK,GAAG,QAHH;AAILC,IAAAA;AAJK,MAKFL,KALJ;AAOA,QAAMM,IAAI,GAAG,4BAAC,gDAAD,CAAwB,IAAxB;AAA6B,IAAA,KAAK,EAAGF;AAArC,IAAb;AAEA,SACC,4BAAC,oBAAD;AACC,IAAA,QAAQ,EAAC,cADV;AAEC,IAAA,YAAY,EAAG;AAAEG,MAAAA,WAAW,EAAE;AAAf,KAFhB;AAGC,IAAA,YAAY,EAAG,QAA4B;AAAA,UAA1B;AAAEC,QAAAA,QAAF;AAAYC,QAAAA;AAAZ,OAA0B;;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEF,MAAF,IAAYE,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,UAAAA,KAAK,CAACG,cAAN;AACAN,UAAAA,QAAQ;AACR;AACD,OALD;;AAOA,aACC,4BAAC,yBAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,yBAAc,MAFf;AAGC,yBAAgBC,MAHjB;AAIC,QAAA,SAAS,EAAGC,eAJb;AAKC,QAAA,KAAK,EAAGT,KALT;AAMC,QAAA,IAAI,EAAGK,IANR;AAOC,QAAA,WAAW,MAPZ;AAQC,QAAA,QAAQ,EAAGD;AARZ,QADD;AAYA,KAvBF;AAwBC,IAAA,aAAa,EAAG,MACf,4BAAC,gDAAD;AACC,MAAA,cAAc,EAAG,KADlB;AAEC,MAAA,QAAQ,EAAGH,QAFZ;AAGC,MAAA,KAAK,EAAGE;AAHT;AAzBF,IADD;AAkCA;;eAEcL,2B","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tToolbarButton,\n\tDropdown,\n\t__experimentalAlignmentMatrixControl as AlignmentMatrixControl,\n} from '@wordpress/components';\n\nfunction BlockAlignmentMatrixControl( props ) {\n\tconst {\n\t\tlabel = __( 'Change matrix alignment' ),\n\t\tonChange = noop,\n\t\tvalue = 'center',\n\t\tisDisabled,\n\t} = props;\n\n\tconst icon = <AlignmentMatrixControl.Icon value={ value } />;\n\n\treturn (\n\t\t<Dropdown\n\t\t\tposition=\"bottom right\"\n\t\t\tpopoverProps={ { isAlternate: true } }\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<AlignmentMatrixControl\n\t\t\t\t\thasFocusBorder={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default BlockAlignmentMatrixControl;\n"]}

package/build/components/block-content-overlay/index.js

@@ -1,22 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = BlockContentOverlay;
-
-var _element = require("@wordpress/element");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.default = useBlockOverlayActive;
 
 var _data = require("@wordpress/data");
 
 var _store = require("../../store");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 /**
  * WordPress dependencies
  */
@@ -24,84 +16,14 @@ var _classnames = _interopRequireDefault(require("classnames"));
 /**
  * Internal dependencies
  */
-
-/**
- * External dependencies
- */
-function BlockContentOverlay(_ref) {
-  let {
-    clientId,
-    tagName: TagName = 'div',
-    wrapperProps,
-    className
-  } = _ref;
-  const baseClassName = 'block-editor-block-content-overlay';
-  const [isOverlayActive, setIsOverlayActive] = (0, _element.useState)(true);
-  const [isHovered, setIsHovered] = (0, _element.useState)(false);
-  const {
-    canEdit,
-    isParentSelected,
-    hasChildSelected,
-    isDraggingBlocks,
-    isParentHighlighted
-  } = (0, _data.useSelect)(select => {
+function useBlockOverlayActive(clientId) {
+  return (0, _data.useSelect)(select => {
     const {
       isBlockSelected,
       hasSelectedInnerBlock,
-      isDraggingBlocks: _isDraggingBlocks,
-      isBlockHighlighted,
       canEditBlock
     } = select(_store.store);
-    return {
-      canEdit: canEditBlock(clientId),
-      isParentSelected: isBlockSelected(clientId),
-      hasChildSelected: hasSelectedInnerBlock(clientId, true),
-      isDraggingBlocks: _isDraggingBlocks(),
-      isParentHighlighted: isBlockHighlighted(clientId)
-    };
+    return !canEditBlock(clientId) || !isBlockSelected(clientId) && !hasSelectedInnerBlock(clientId, true);
   }, [clientId]);
-  const classes = (0, _classnames.default)(baseClassName, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className, className, {
-    'overlay-active': isOverlayActive,
-    'parent-highlighted': isParentHighlighted,
-    'is-dragging-blocks': isDraggingBlocks
-  });
-  (0, _element.useEffect)(() => {
-    // The overlay is always active when editing is locked.
-    if (!canEdit) {
-      setIsOverlayActive(true);
-      return;
-    } // Reenable when blocks are not in use.
-
-
-    if (!isParentSelected && !hasChildSelected && !isOverlayActive) {
-      setIsOverlayActive(true);
-    } // Disable if parent selected by another means (such as list view).
-    // We check hover to ensure the overlay click interaction is not taking place.
-    // Trying to click the overlay will select the parent block via its 'focusin'
-    // listener on the wrapper, so if the block is selected while hovered we will
-    // let the mouseup disable the overlay instead.
-
-
-    if (isParentSelected && !isHovered && isOverlayActive) {
-      setIsOverlayActive(false);
-    } // Ensure overlay is disabled if a child block is selected.
-
-
-    if (hasChildSelected && isOverlayActive) {
-      setIsOverlayActive(false);
-    }
-  }, [isParentSelected, hasChildSelected, isOverlayActive, isHovered, canEdit]); // Disabled because the overlay div doesn't actually have a role or functionality
-  // as far as the a11y is concerned. We're just catching the first click so that
-  // the block can be selected without interacting with its contents.
-
-  /* eslint-disable jsx-a11y/no-static-element-interactions */
-
-  return (0, _element.createElement)(TagName, (0, _extends2.default)({}, wrapperProps, {
-    className: classes,
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    onMouseUp: isOverlayActive && canEdit ? () => setIsOverlayActive(false) : undefined
-  }), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.children);
 }
-/* eslint-enable jsx-a11y/no-static-element-interactions */
 //# sourceMappingURL=index.js.map

package/build/components/block-content-overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-content-overlay/index.js"],"names":["BlockContentOverlay","clientId","tagName","TagName","wrapperProps","className","baseClassName","isOverlayActive","setIsOverlayActive","isHovered","setIsHovered","canEdit","isParentSelected","hasChildSelected","isDraggingBlocks","isParentHighlighted","select","isBlockSelected","hasSelectedInnerBlock","_isDraggingBlocks","isBlockHighlighted","canEditBlock","blockEditorStore","classes","undefined","children"],"mappings":";;;;;;;;;AAIA;;;;AADA;;AAMA;;AAKA;;AAdA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,mBAAT,OAKX;AAAA,MALyC;AAC5CC,IAAAA,QAD4C;AAE5CC,IAAAA,OAAO,EAAEC,OAAO,GAAG,KAFyB;AAG5CC,IAAAA,YAH4C;AAI5CC,IAAAA;AAJ4C,GAKzC;AACH,QAAMC,aAAa,GAAG,oCAAtB;AACA,QAAM,CAAEC,eAAF,EAAmBC,kBAAnB,IAA0C,uBAAU,IAAV,CAAhD;AACA,QAAM,CAAEC,SAAF,EAAaC,YAAb,IAA8B,uBAAU,KAAV,CAApC;AAEA,QAAM;AACLC,IAAAA,OADK;AAELC,IAAAA,gBAFK;AAGLC,IAAAA,gBAHK;AAILC,IAAAA,gBAJK;AAKLC,IAAAA;AALK,MAMF,qBACDC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,eADK;AAELC,MAAAA,qBAFK;AAGLJ,MAAAA,gBAAgB,EAAEK,iBAHb;AAILC,MAAAA,kBAJK;AAKLC,MAAAA;AALK,QAMFL,MAAM,CAAEM,YAAF,CANV;AAOA,WAAO;AACNX,MAAAA,OAAO,EAAEU,YAAY,CAAEpB,QAAF,CADf;AAENW,MAAAA,gBAAgB,EAAEK,eAAe,CAAEhB,QAAF,CAF3B;AAGNY,MAAAA,gBAAgB,EAAEK,qBAAqB,CAAEjB,QAAF,EAAY,IAAZ,CAHjC;AAINa,MAAAA,gBAAgB,EAAEK,iBAAiB,EAJ7B;AAKNJ,MAAAA,mBAAmB,EAAEK,kBAAkB,CAAEnB,QAAF;AALjC,KAAP;AAOA,GAhBE,EAiBH,CAAEA,QAAF,CAjBG,CANJ;AA0BA,QAAMsB,OAAO,GAAG,yBACfjB,aADe,EAEfF,YAFe,aAEfA,YAFe,uBAEfA,YAAY,CAAEC,SAFC,EAGfA,SAHe,EAIf;AACC,sBAAkBE,eADnB;AAEC,0BAAsBQ,mBAFvB;AAGC,0BAAsBD;AAHvB,GAJe,CAAhB;AAWA,0BAAW,MAAM;AAChB;AACA,QAAK,CAAEH,OAAP,EAAiB;AAChBH,MAAAA,kBAAkB,CAAE,IAAF,CAAlB;AACA;AACA,KALe,CAOhB;;;AACA,QAAK,CAAEI,gBAAF,IAAsB,CAAEC,gBAAxB,IAA4C,CAAEN,eAAnD,EAAqE;AACpEC,MAAAA,kBAAkB,CAAE,IAAF,CAAlB;AACA,KAVe,CAWhB;AACA;AACA;AACA;AACA;;;AACA,QAAKI,gBAAgB,IAAI,CAAEH,SAAtB,IAAmCF,eAAxC,EAA0D;AACzDC,MAAAA,kBAAkB,CAAE,KAAF,CAAlB;AACA,KAlBe,CAmBhB;;;AACA,QAAKK,gBAAgB,IAAIN,eAAzB,EAA2C;AAC1CC,MAAAA,kBAAkB,CAAE,KAAF,CAAlB;AACA;AACD,GAvBD,EAuBG,CACFI,gBADE,EAEFC,gBAFE,EAGFN,eAHE,EAIFE,SAJE,EAKFE,OALE,CAvBH,EA1CG,CAyEH;AACA;AACA;;AACA;;AACA,SACC,4BAAC,OAAD,6BACMP,YADN;AAEC,IAAA,SAAS,EAAGmB,OAFb;AAGC,IAAA,YAAY,EAAG,MAAMb,YAAY,CAAE,IAAF,CAHlC;AAIC,IAAA,YAAY,EAAG,MAAMA,YAAY,CAAE,KAAF,CAJlC;AAKC,IAAA,SAAS,EACRH,eAAe,IAAII,OAAnB,GACG,MAAMH,kBAAkB,CAAE,KAAF,CAD3B,GAEGgB;AARL,MAWGpB,YAXH,aAWGA,YAXH,uBAWGA,YAAY,CAAEqB,QAXjB,CADD;AAeA;AACD","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function BlockContentOverlay( {\n\tclientId,\n\ttagName: TagName = 'div',\n\twrapperProps,\n\tclassName,\n} ) {\n\tconst baseClassName = 'block-editor-block-content-overlay';\n\tconst [ isOverlayActive, setIsOverlayActive ] = useState( true );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\n\tconst {\n\t\tcanEdit,\n\t\tisParentSelected,\n\t\thasChildSelected,\n\t\tisDraggingBlocks,\n\t\tisParentHighlighted,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tisBlockSelected,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t\tisDraggingBlocks: _isDraggingBlocks,\n\t\t\t\tisBlockHighlighted,\n\t\t\t\tcanEditBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tcanEdit: canEditBlock( clientId ),\n\t\t\t\tisParentSelected: isBlockSelected( clientId ),\n\t\t\t\thasChildSelected: hasSelectedInnerBlock( clientId, true ),\n\t\t\t\tisDraggingBlocks: _isDraggingBlocks(),\n\t\t\t\tisParentHighlighted: isBlockHighlighted( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst classes = classnames(\n\t\tbaseClassName,\n\t\twrapperProps?.className,\n\t\tclassName,\n\t\t{\n\t\t\t'overlay-active': isOverlayActive,\n\t\t\t'parent-highlighted': isParentHighlighted,\n\t\t\t'is-dragging-blocks': isDraggingBlocks,\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\t// The overlay is always active when editing is locked.\n\t\tif ( ! canEdit ) {\n\t\t\tsetIsOverlayActive( true );\n\t\t\treturn;\n\t\t}\n\n\t\t// Reenable when blocks are not in use.\n\t\tif ( ! isParentSelected && ! hasChildSelected && ! isOverlayActive ) {\n\t\t\tsetIsOverlayActive( true );\n\t\t}\n\t\t// Disable if parent selected by another means (such as list view).\n\t\t// We check hover to ensure the overlay click interaction is not taking place.\n\t\t// Trying to click the overlay will select the parent block via its 'focusin'\n\t\t// listener on the wrapper, so if the block is selected while hovered we will\n\t\t// let the mouseup disable the overlay instead.\n\t\tif ( isParentSelected && ! isHovered && isOverlayActive ) {\n\t\t\tsetIsOverlayActive( false );\n\t\t}\n\t\t// Ensure overlay is disabled if a child block is selected.\n\t\tif ( hasChildSelected && isOverlayActive ) {\n\t\t\tsetIsOverlayActive( false );\n\t\t}\n\t}, [\n\t\tisParentSelected,\n\t\thasChildSelected,\n\t\tisOverlayActive,\n\t\tisHovered,\n\t\tcanEdit,\n\t] );\n\n\t// Disabled because the overlay div doesn't actually have a role or functionality\n\t// as far as the a11y is concerned. We're just catching the first click so that\n\t// the block can be selected without interacting with its contents.\n\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\treturn (\n\t\t<TagName\n\t\t\t{ ...wrapperProps }\n\t\t\tclassName={ classes }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\tonMouseUp={\n\t\t\t\tisOverlayActive && canEdit\n\t\t\t\t\t? () => setIsOverlayActive( false )\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t>\n\t\t\t{ wrapperProps?.children }\n\t\t</TagName>\n\t);\n}\n/* eslint-enable jsx-a11y/no-static-element-interactions */\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-content-overlay/index.js"],"names":["useBlockOverlayActive","clientId","select","isBlockSelected","hasSelectedInnerBlock","canEditBlock","blockEditorStore"],"mappings":";;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,qBAAT,CAAgCC,QAAhC,EAA2C;AACzD,SAAO,qBACJC,MAAF,IAAc;AACb,UAAM;AACLC,MAAAA,eADK;AAELC,MAAAA,qBAFK;AAGLC,MAAAA;AAHK,QAIFH,MAAM,CAAEI,YAAF,CAJV;AAMA,WACC,CAAED,YAAY,CAAEJ,QAAF,CAAd,IACE,CAAEE,eAAe,CAAEF,QAAF,CAAjB,IACD,CAAEG,qBAAqB,CAAEH,QAAF,EAAY,IAAZ,CAHzB;AAKA,GAbK,EAcN,CAAEA,QAAF,CAdM,CAAP;AAgBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\n\nexport default function useBlockOverlayActive( clientId ) {\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tisBlockSelected,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t\tcanEditBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\treturn (\n\t\t\t\t! canEditBlock( clientId ) ||\n\t\t\t\t( ! isBlockSelected( clientId ) &&\n\t\t\t\t\t! hasSelectedInnerBlock( clientId, true ) )\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\n\t);\n}\n"]}

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = BlockDraggableChip;
+
+var _element = require("@wordpress/element");
+
+var _reactNative = require("react-native");
+
+var _icons = require("@wordpress/icons");
+
+var _compose = require("@wordpress/compose");
+
+var _blockIcon = _interopRequireDefault(require("../block-icon"));
+
+var _style = _interopRequireDefault(require("./style.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const shadowStyle = {
+  shadowColor: '#000',
+  shadowOffset: {
+    width: 0,
+    height: 2
+  },
+  shadowOpacity: 0.25,
+  shadowRadius: 3.84,
+  elevation: 5
+};
+/**
+ * Block draggable chip component
+ *
+ * @param {Object} props        Component props.
+ * @param {Object} [props.icon] Block icon.
+ * @return {JSX.Element} Chip component.
+ */
+
+function BlockDraggableChip(_ref) {
+  let {
+    icon
+  } = _ref;
+  const containerStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default['draggable-chip__container'], _style.default['draggable-chip__container--dark']);
+  return (0, _element.createElement)(_reactNative.View, {
+    style: [containerStyle, shadowStyle]
+  }, (0, _element.createElement)(_blockIcon.default, {
+    icon: _icons.dragHandle
+  }), icon && (0, _element.createElement)(_blockIcon.default, {
+    icon: icon
+  }));
+}
+//# sourceMappingURL=draggable-chip.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/draggable-chip.native.js"],"names":["shadowStyle","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","BlockDraggableChip","icon","containerStyle","styles","dragHandle"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAIA,MAAMA,WAAW,GAAG;AACnBC,EAAAA,WAAW,EAAE,MADM;AAEnBC,EAAAA,YAAY,EAAE;AACbC,IAAAA,KAAK,EAAE,CADM;AAEbC,IAAAA,MAAM,EAAE;AAFK,GAFK;AAMnBC,EAAAA,aAAa,EAAE,IANI;AAOnBC,EAAAA,YAAY,EAAE,IAPK;AASnBC,EAAAA,SAAS,EAAE;AATQ,CAApB;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,kBAAT,OAAwC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACtD,QAAMC,cAAc,GAAG,2CACtBC,eAAQ,2BAAR,CADsB,EAEtBA,eAAQ,iCAAR,CAFsB,CAAvB;AAKA,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAED,cAAF,EAAkBV,WAAlB;AAAd,KACC,4BAAC,kBAAD;AAAW,IAAA,IAAI,EAAGY;AAAlB,IADD,EAEGH,IAAI,IAAI,4BAAC,kBAAD;AAAW,IAAA,IAAI,EAAGA;AAAlB,IAFX,CADD;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { dragHandle } from '@wordpress/icons';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport styles from './style.scss';\n\nconst shadowStyle = {\n\tshadowColor: '#000',\n\tshadowOffset: {\n\t\twidth: 0,\n\t\theight: 2,\n\t},\n\tshadowOpacity: 0.25,\n\tshadowRadius: 3.84,\n\n\televation: 5,\n};\n\n/**\n * Block draggable chip component\n *\n * @param {Object} props        Component props.\n * @param {Object} [props.icon] Block icon.\n * @return {JSX.Element} Chip component.\n */\nexport default function BlockDraggableChip( { icon } ) {\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'draggable-chip__container' ],\n\t\tstyles[ 'draggable-chip__container--dark' ]\n\t);\n\n\treturn (\n\t\t<View style={ [ containerStyle, shadowStyle ] }>\n\t\t\t<BlockIcon icon={ dragHandle } />\n\t\t\t{ icon && <BlockIcon icon={ icon } /> }\n\t\t</View>\n\t);\n}\n"]}

package/build/components/block-draggable/dropping-insertion-point.native.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DroppingInsertionPoint;
+
+var _element = require("@wordpress/element");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _data = require("@wordpress/data");
+
+var _reactNativeBridge = require("@wordpress/react-native-bridge");
+
+var _store = require("../../store");
+
+var _blockListContext = require("../block-list/block-list-context");
+
+var _droppingInsertionPoint = _interopRequireDefault(require("./dropping-insertion-point.scss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Dropping zone indicator component.
+ *
+ * This component shows where a block can be dropped when it's being dragged.
+ *
+ * @param {Object}                                        props                  Component props.
+ * @param {Object}                                        props.scroll           Scroll offset object.
+ * @param {Object}                                        props.currentYPosition Current Y coordinate position when dragging.
+ * @param {import('react-native-reanimated').SharedValue} props.isDragging       Whether or not dragging has started.
+ * @param {import('react-native-reanimated').SharedValue} props.targetBlockIndex Current block target index.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+function DroppingInsertionPoint(_ref) {
+  let {
+    scroll,
+    currentYPosition,
+    isDragging,
+    targetBlockIndex
+  } = _ref;
+  const {
+    getBlockOrder,
+    isBlockBeingDragged,
+    isDraggingBlocks,
+    getPreviousBlockClientId,
+    getNextBlockClientId
+  } = (0, _data.useSelect)(_store.store);
+  const {
+    blocksLayouts,
+    findBlockLayoutByClientId
+  } = (0, _blockListContext.useBlockListContext)();
+  const {
+    top,
+    bottom
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    height
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
+  const safeAreaOffset = top + bottom;
+  const maxHeight = height - (safeAreaOffset + _droppingInsertionPoint.default['dropping-insertion-point'].height);
+  const blockYPosition = (0, _reactNativeReanimated.useSharedValue)(0);
+  const opacity = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => isDragging.value, value => {
+    if (!value) {
+      opacity.value = 0;
+      blockYPosition.value = 0;
+    }
+  });
+
+  function getSelectedBlockIndicatorPosition(positions) {
+    const currentYPositionWithScroll = currentYPosition.value + scroll.offsetY.value;
+    const midpoint = (positions.top + positions.bottom) / 2;
+    return midpoint < currentYPositionWithScroll ? positions.bottom : positions.top;
+  }
+
+  function setIndicatorPosition(index) {
+    const insertionPointIndex = index;
+    const order = getBlockOrder();
+    const isDraggingAnyBlocks = isDraggingBlocks();
+
+    if (!isDraggingAnyBlocks || insertionPointIndex === null || !order.length) {
+      return;
+    }
+
+    let previousClientId = order[insertionPointIndex - 1];
+    let nextClientId = order[insertionPointIndex];
+
+    while (isBlockBeingDragged(previousClientId)) {
+      previousClientId = getPreviousBlockClientId(previousClientId);
+    }
+
+    while (isBlockBeingDragged(nextClientId)) {
+      nextClientId = getNextBlockClientId(nextClientId);
+    }
+
+    const previousElement = previousClientId ? findBlockLayoutByClientId(blocksLayouts.current, previousClientId) : null;
+    const nextElement = nextClientId ? findBlockLayoutByClientId(blocksLayouts.current, nextClientId) : null;
+    const previousElementPosition = previousElement ? previousElement.y + previousElement.height : 0;
+    const nextElementPosition = nextElement ? nextElement.y : 0;
+    const elementsPositions = {
+      top: Math.floor(previousElement ? previousElementPosition : nextElementPosition),
+      bottom: Math.floor(nextElement ? nextElementPosition : previousElementPosition)
+    };
+    const nextPosition = elementsPositions.top !== elementsPositions.bottom ? getSelectedBlockIndicatorPosition(elementsPositions) : elementsPositions.top;
+
+    if (nextPosition && blockYPosition.value !== nextPosition) {
+      opacity.value = 0;
+      blockYPosition.value = nextPosition;
+      opacity.value = (0, _reactNativeReanimated.withTiming)(1);
+      (0, _reactNativeBridge.generateHapticFeedback)();
+    }
+  }
+
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => targetBlockIndex.value, (value, previous) => {
+    if (value !== previous) {
+      (0, _reactNativeReanimated.runOnJS)(setIndicatorPosition)(value);
+    }
+  });
+  const animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const translationY = blockYPosition.value - scroll.offsetY.value; // Prevents overflowing behind the header/footer
+
+    const shouldHideIndicator = translationY < 0 || translationY > maxHeight;
+    return {
+      opacity: shouldHideIndicator ? 0 : opacity.value,
+      transform: [{
+        translateY: translationY
+      }]
+    };
+  });
+  const insertionPointStyles = [_droppingInsertionPoint.default['dropping-insertion-point'], animatedStyles];
+  return (0, _element.createElement)(_reactNativeReanimated.default.View, {
+    pointerEvents: "none",
+    style: insertionPointStyles
+  });
+}
+//# sourceMappingURL=dropping-insertion-point.native.js.map

package/build/components/block-draggable/dropping-insertion-point.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/dropping-insertion-point.native.js"],"names":["DroppingInsertionPoint","scroll","currentYPosition","isDragging","targetBlockIndex","getBlockOrder","isBlockBeingDragged","isDraggingBlocks","getPreviousBlockClientId","getNextBlockClientId","blockEditorStore","blocksLayouts","findBlockLayoutByClientId","top","bottom","height","safeAreaOffset","maxHeight","styles","blockYPosition","opacity","value","getSelectedBlockIndicatorPosition","positions","currentYPositionWithScroll","offsetY","midpoint","setIndicatorPosition","index","insertionPointIndex","order","isDraggingAnyBlocks","length","previousClientId","nextClientId","previousElement","current","nextElement","previousElementPosition","y","nextElementPosition","elementsPositions","Math","floor","nextPosition","previous","animatedStyles","translationY","shouldHideIndicator","transform","translateY","insertionPointStyles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport Animated, {\n\tuseSharedValue,\n\tuseAnimatedStyle,\n\twithTiming,\n\tuseAnimatedReaction,\n\trunOnJS,\n} from 'react-native-reanimated';\nimport {\n\tuseSafeAreaInsets,\n\tuseSafeAreaFrame,\n} from 'react-native-safe-area-context';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { generateHapticFeedback } from '@wordpress/react-native-bridge';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../../store';\nimport { useBlockListContext } from '../block-list/block-list-context';\nimport styles from './dropping-insertion-point.scss';\n\n/**\n * Dropping zone indicator component.\n *\n * This component shows where a block can be dropped when it's being dragged.\n *\n * @param {Object}                                        props                  Component props.\n * @param {Object}                                        props.scroll           Scroll offset object.\n * @param {Object}                                        props.currentYPosition Current Y coordinate position when dragging.\n * @param {import('react-native-reanimated').SharedValue} props.isDragging       Whether or not dragging has started.\n * @param {import('react-native-reanimated').SharedValue} props.targetBlockIndex Current block target index.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nexport default function DroppingInsertionPoint( {\n\tscroll,\n\tcurrentYPosition,\n\tisDragging,\n\ttargetBlockIndex,\n} ) {\n\tconst {\n\t\tgetBlockOrder,\n\t\tisBlockBeingDragged,\n\t\tisDraggingBlocks,\n\t\tgetPreviousBlockClientId,\n\t\tgetNextBlockClientId,\n\t} = useSelect( blockEditorStore );\n\n\tconst { blocksLayouts, findBlockLayoutByClientId } = useBlockListContext();\n\tconst { top, bottom } = useSafeAreaInsets();\n\tconst { height } = useSafeAreaFrame();\n\tconst safeAreaOffset = top + bottom;\n\tconst maxHeight =\n\t\theight -\n\t\t( safeAreaOffset + styles[ 'dropping-insertion-point' ].height );\n\n\tconst blockYPosition = useSharedValue( 0 );\n\tconst opacity = useSharedValue( 0 );\n\n\tuseAnimatedReaction(\n\t\t() => isDragging.value,\n\t\t( value ) => {\n\t\t\tif ( ! value ) {\n\t\t\t\topacity.value = 0;\n\t\t\t\tblockYPosition.value = 0;\n\t\t\t}\n\t\t}\n\t);\n\n\tfunction getSelectedBlockIndicatorPosition( positions ) {\n\t\tconst currentYPositionWithScroll =\n\t\t\tcurrentYPosition.value + scroll.offsetY.value;\n\t\tconst midpoint = ( positions.top + positions.bottom ) / 2;\n\n\t\treturn midpoint < currentYPositionWithScroll\n\t\t\t? positions.bottom\n\t\t\t: positions.top;\n\t}\n\n\tfunction setIndicatorPosition( index ) {\n\t\tconst insertionPointIndex = index;\n\t\tconst order = getBlockOrder();\n\t\tconst isDraggingAnyBlocks = isDraggingBlocks();\n\n\t\tif (\n\t\t\t! isDraggingAnyBlocks ||\n\t\t\tinsertionPointIndex === null ||\n\t\t\t! order.length\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet previousClientId = order[ insertionPointIndex - 1 ];\n\t\tlet nextClientId = order[ insertionPointIndex ];\n\n\t\twhile ( isBlockBeingDragged( previousClientId ) ) {\n\t\t\tpreviousClientId = getPreviousBlockClientId( previousClientId );\n\t\t}\n\n\t\twhile ( isBlockBeingDragged( nextClientId ) ) {\n\t\t\tnextClientId = getNextBlockClientId( nextClientId );\n\t\t}\n\n\t\tconst previousElement = previousClientId\n\t\t\t? findBlockLayoutByClientId(\n\t\t\t\t\tblocksLayouts.current,\n\t\t\t\t\tpreviousClientId\n\t\t\t  )\n\t\t\t: null;\n\t\tconst nextElement = nextClientId\n\t\t\t? findBlockLayoutByClientId( blocksLayouts.current, nextClientId )\n\t\t\t: null;\n\n\t\tconst previousElementPosition = previousElement\n\t\t\t? previousElement.y + previousElement.height\n\t\t\t: 0;\n\t\tconst nextElementPosition = nextElement ? nextElement.y : 0;\n\n\t\tconst elementsPositions = {\n\t\t\ttop: Math.floor(\n\t\t\t\tpreviousElement ? previousElementPosition : nextElementPosition\n\t\t\t),\n\t\t\tbottom: Math.floor(\n\t\t\t\tnextElement ? nextElementPosition : previousElementPosition\n\t\t\t),\n\t\t};\n\n\t\tconst nextPosition =\n\t\t\telementsPositions.top !== elementsPositions.bottom\n\t\t\t\t? getSelectedBlockIndicatorPosition( elementsPositions )\n\t\t\t\t: elementsPositions.top;\n\n\t\tif ( nextPosition && blockYPosition.value !== nextPosition ) {\n\t\t\topacity.value = 0;\n\t\t\tblockYPosition.value = nextPosition;\n\t\t\topacity.value = withTiming( 1 );\n\t\t\tgenerateHapticFeedback();\n\t\t}\n\t}\n\n\tuseAnimatedReaction(\n\t\t() => targetBlockIndex.value,\n\t\t( value, previous ) => {\n\t\t\tif ( value !== previous ) {\n\t\t\t\trunOnJS( setIndicatorPosition )( value );\n\t\t\t}\n\t\t}\n\t);\n\n\tconst animatedStyles = useAnimatedStyle( () => {\n\t\tconst translationY = blockYPosition.value - scroll.offsetY.value;\n\t\t// Prevents overflowing behind the header/footer\n\t\tconst shouldHideIndicator =\n\t\t\ttranslationY < 0 || translationY > maxHeight;\n\n\t\treturn {\n\t\t\topacity: shouldHideIndicator ? 0 : opacity.value,\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: translationY,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\t} );\n\n\tconst insertionPointStyles = [\n\t\tstyles[ 'dropping-insertion-point' ],\n\t\tanimatedStyles,\n\t];\n\n\treturn (\n\t\t<Animated.View pointerEvents=\"none\" style={ insertionPointStyles } />\n\t);\n}\n"]}