@wordpress/block-editor 12.0.0 → 12.1.0

package/build-module/components/block-draggable/use-scroll-when-dragging.js

@@ -55,13 +55,13 @@ export default function useScrollWhenDragging() {
       // User is dragging downwards.
       const moveableDistance = Math.max(scrollParentHeight - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
       const dragDistance = Math.max(offsetDragPosition - offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
-      const distancePercentage = dragDistance / moveableDistance;
+      const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
       velocityY.current = VELOCITY_MULTIPLIER * distancePercentage;
     } else if (event.clientY < offsetDragStartPosition) {
       // User is dragging upwards.
       const moveableDistance = Math.max(offsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
       const dragDistance = Math.max(offsetDragStartPosition - offsetDragPosition - SCROLL_INACTIVE_DISTANCE_PX, 0);
-      const distancePercentage = dragDistance / moveableDistance;
+      const distancePercentage = moveableDistance === 0 || dragDistance === 0 ? 0 : dragDistance / moveableDistance;
       velocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;
     } else {
       velocityY.current = 0;

package/build-module/components/block-draggable/use-scroll-when-dragging.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/use-scroll-when-dragging.js"],"names":["getScrollContainer","useCallback","useEffect","useRef","SCROLL_INACTIVE_DISTANCE_PX","SCROLL_INTERVAL_MS","PIXELS_PER_SECOND_PER_PERCENTAGE","VELOCITY_MULTIPLIER","useScrollWhenDragging","dragStartY","velocityY","scrollParentY","scrollEditorInterval","current","clearInterval","startScrolling","event","clientY","target","setInterval","newTop","scrollTop","scroll","top","scrollOnDragOver","scrollParentHeight","offsetHeight","offsetDragStartPosition","offsetTop","offsetDragPosition","moveableDistance","Math","max","dragDistance","distancePercentage","stopScrolling"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\nconst SCROLL_INACTIVE_DISTANCE_PX = 50;\nconst SCROLL_INTERVAL_MS = 25;\nconst PIXELS_PER_SECOND_PER_PERCENTAGE = 1000;\nconst VELOCITY_MULTIPLIER =\n\tPIXELS_PER_SECOND_PER_PERCENTAGE * ( SCROLL_INTERVAL_MS / 1000 );\n\n/**\n * React hook that scrolls the scroll container when a block is being dragged.\n *\n * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`\n *                      functions to be called in `onDragStart`, `onDragOver`\n *                      and `onDragEnd` events respectively.\n */\nexport default function useScrollWhenDragging() {\n\tconst dragStartY = useRef( null );\n\tconst velocityY = useRef( null );\n\tconst scrollParentY = useRef( null );\n\tconst scrollEditorInterval = useRef( null );\n\n\t// Clear interval when unmounting.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( scrollEditorInterval.current ) {\n\t\t\t\tclearInterval( scrollEditorInterval.current );\n\t\t\t\tscrollEditorInterval.current = null;\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tconst startScrolling = useCallback( ( event ) => {\n\t\tdragStartY.current = event.clientY;\n\n\t\t// Find nearest parent(s) to scroll.\n\t\tscrollParentY.current = getScrollContainer( event.target );\n\n\t\tscrollEditorInterval.current = setInterval( () => {\n\t\t\tif ( scrollParentY.current && velocityY.current ) {\n\t\t\t\tconst newTop =\n\t\t\t\t\tscrollParentY.current.scrollTop + velocityY.current;\n\n\t\t\t\t// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.\n\t\t\t\t// Better to use a small scroll interval.\n\t\t\t\tscrollParentY.current.scroll( {\n\t\t\t\t\ttop: newTop,\n\t\t\t\t} );\n\t\t\t}\n\t\t}, SCROLL_INTERVAL_MS );\n\t}, [] );\n\n\tconst scrollOnDragOver = useCallback( ( event ) => {\n\t\tif ( ! scrollParentY.current ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollParentHeight = scrollParentY.current.offsetHeight;\n\t\tconst offsetDragStartPosition =\n\t\t\tdragStartY.current - scrollParentY.current.offsetTop;\n\t\tconst offsetDragPosition =\n\t\t\tevent.clientY - scrollParentY.current.offsetTop;\n\n\t\tif ( event.clientY > offsetDragStartPosition ) {\n\t\t\t// User is dragging downwards.\n\t\t\tconst moveableDistance = Math.max(\n\t\t\t\tscrollParentHeight -\n\t\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst dragDistance = Math.max(\n\t\t\t\toffsetDragPosition -\n\t\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst distancePercentage = dragDistance / moveableDistance;\n\t\t\tvelocityY.current = VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else if ( event.clientY < offsetDragStartPosition ) {\n\t\t\t// User is dragging upwards.\n\t\t\tconst moveableDistance = Math.max(\n\t\t\t\toffsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst dragDistance = Math.max(\n\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\toffsetDragPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst distancePercentage = dragDistance / moveableDistance;\n\t\t\tvelocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else {\n\t\t\tvelocityY.current = 0;\n\t\t}\n\t}, [] );\n\n\tconst stopScrolling = () => {\n\t\tdragStartY.current = null;\n\t\tscrollParentY.current = null;\n\n\t\tif ( scrollEditorInterval.current ) {\n\t\t\tclearInterval( scrollEditorInterval.current );\n\t\t\tscrollEditorInterval.current = null;\n\t\t}\n\t};\n\n\treturn [ startScrolling, scrollOnDragOver, stopScrolling ];\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/use-scroll-when-dragging.js"],"names":["getScrollContainer","useCallback","useEffect","useRef","SCROLL_INACTIVE_DISTANCE_PX","SCROLL_INTERVAL_MS","PIXELS_PER_SECOND_PER_PERCENTAGE","VELOCITY_MULTIPLIER","useScrollWhenDragging","dragStartY","velocityY","scrollParentY","scrollEditorInterval","current","clearInterval","startScrolling","event","clientY","target","setInterval","newTop","scrollTop","scroll","top","scrollOnDragOver","scrollParentHeight","offsetHeight","offsetDragStartPosition","offsetTop","offsetDragPosition","moveableDistance","Math","max","dragDistance","distancePercentage","stopScrolling"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\nconst SCROLL_INACTIVE_DISTANCE_PX = 50;\nconst SCROLL_INTERVAL_MS = 25;\nconst PIXELS_PER_SECOND_PER_PERCENTAGE = 1000;\nconst VELOCITY_MULTIPLIER =\n\tPIXELS_PER_SECOND_PER_PERCENTAGE * ( SCROLL_INTERVAL_MS / 1000 );\n\n/**\n * React hook that scrolls the scroll container when a block is being dragged.\n *\n * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`\n *                      functions to be called in `onDragStart`, `onDragOver`\n *                      and `onDragEnd` events respectively.\n */\nexport default function useScrollWhenDragging() {\n\tconst dragStartY = useRef( null );\n\tconst velocityY = useRef( null );\n\tconst scrollParentY = useRef( null );\n\tconst scrollEditorInterval = useRef( null );\n\n\t// Clear interval when unmounting.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( scrollEditorInterval.current ) {\n\t\t\t\tclearInterval( scrollEditorInterval.current );\n\t\t\t\tscrollEditorInterval.current = null;\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tconst startScrolling = useCallback( ( event ) => {\n\t\tdragStartY.current = event.clientY;\n\n\t\t// Find nearest parent(s) to scroll.\n\t\tscrollParentY.current = getScrollContainer( event.target );\n\n\t\tscrollEditorInterval.current = setInterval( () => {\n\t\t\tif ( scrollParentY.current && velocityY.current ) {\n\t\t\t\tconst newTop =\n\t\t\t\t\tscrollParentY.current.scrollTop + velocityY.current;\n\n\t\t\t\t// Setting `behavior: 'smooth'` as a scroll property seems to hurt performance.\n\t\t\t\t// Better to use a small scroll interval.\n\t\t\t\tscrollParentY.current.scroll( {\n\t\t\t\t\ttop: newTop,\n\t\t\t\t} );\n\t\t\t}\n\t\t}, SCROLL_INTERVAL_MS );\n\t}, [] );\n\n\tconst scrollOnDragOver = useCallback( ( event ) => {\n\t\tif ( ! scrollParentY.current ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollParentHeight = scrollParentY.current.offsetHeight;\n\t\tconst offsetDragStartPosition =\n\t\t\tdragStartY.current - scrollParentY.current.offsetTop;\n\t\tconst offsetDragPosition =\n\t\t\tevent.clientY - scrollParentY.current.offsetTop;\n\n\t\tif ( event.clientY > offsetDragStartPosition ) {\n\t\t\t// User is dragging downwards.\n\t\t\tconst moveableDistance = Math.max(\n\t\t\t\tscrollParentHeight -\n\t\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst dragDistance = Math.max(\n\t\t\t\toffsetDragPosition -\n\t\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst distancePercentage =\n\t\t\t\tmoveableDistance === 0 || dragDistance === 0\n\t\t\t\t\t? 0\n\t\t\t\t\t: dragDistance / moveableDistance;\n\t\t\tvelocityY.current = VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else if ( event.clientY < offsetDragStartPosition ) {\n\t\t\t// User is dragging upwards.\n\t\t\tconst moveableDistance = Math.max(\n\t\t\t\toffsetDragStartPosition - SCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst dragDistance = Math.max(\n\t\t\t\toffsetDragStartPosition -\n\t\t\t\t\toffsetDragPosition -\n\t\t\t\t\tSCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t\t0\n\t\t\t);\n\t\t\tconst distancePercentage =\n\t\t\t\tmoveableDistance === 0 || dragDistance === 0\n\t\t\t\t\t? 0\n\t\t\t\t\t: dragDistance / moveableDistance;\n\t\t\tvelocityY.current = -VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else {\n\t\t\tvelocityY.current = 0;\n\t\t}\n\t}, [] );\n\n\tconst stopScrolling = () => {\n\t\tdragStartY.current = null;\n\t\tscrollParentY.current = null;\n\n\t\tif ( scrollEditorInterval.current ) {\n\t\t\tclearInterval( scrollEditorInterval.current );\n\t\t\tscrollEditorInterval.current = null;\n\t\t}\n\t};\n\n\treturn [ startScrolling, scrollOnDragOver, stopScrolling ];\n}\n"]}

package/build-module/components/block-list/block-invalid-warning.native.js

@@ -10,7 +10,7 @@ import { TouchableWithoutFeedback } from 'react-native';
 
 import { __, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -19,27 +19,35 @@ import Warning from '../warning';
 import { store as blockEditorStore } from '../../store';
 export default function BlockInvalidWarning(_ref) {
   let {
-    blockTitle,
-    icon,
     clientId
   } = _ref;
-  const accessibilityLabel = sprintf(
-  /* translators: accessibility text for blocks with invalid content. %d: localized block title */
-  __('%s block. This block has invalid content'), blockTitle);
 
   const selector = select => {
     const {
       getBlock
     } = select(blockEditorStore);
     const block = getBlock(clientId);
+    const {
+      name
+    } = block || {};
+    const blockType = getBlockType(name || 'core/missing');
+    const title = blockType === null || blockType === void 0 ? void 0 : blockType.title;
+    const blockIcon = blockType === null || blockType === void 0 ? void 0 : blockType.icon;
     return {
-      block
+      block,
+      blockTitle: title,
+      icon: blockIcon
     };
   };
 
   const {
-    block
+    block,
+    blockTitle,
+    icon
   } = useSelect(selector, [clientId]);
+  const accessibilityLabel = sprintf(
+  /* translators: accessibility text for blocks with invalid content. %d: localized block title */
+  __('%s block. This block has invalid content'), blockTitle);
   const {
     replaceBlock
   } = useDispatch(blockEditorStore);

package/build-module/components/block-list/block-invalid-warning.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-invalid-warning.native.js"],"names":["TouchableWithoutFeedback","__","sprintf","useSelect","useDispatch","createBlock","Warning","store","blockEditorStore","BlockInvalidWarning","blockTitle","icon","clientId","accessibilityLabel","selector","select","getBlock","block","replaceBlock","recoverBlock","name","attributes","innerBlocks","attemptBlockRecovery"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,wBAAT,QAAyC,cAAzC;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,WAAT,QAA4B,mBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,mBAAT,OAA+D;AAAA,MAAjC;AAAEC,IAAAA,UAAF;AAAcC,IAAAA,IAAd;AAAoBC,IAAAA;AAApB,GAAiC;AAC7E,QAAMC,kBAAkB,GAAGX,OAAO;AACjC;AACAD,EAAAA,EAAE,CAAE,0CAAF,CAF+B,EAGjCS,UAHiC,CAAlC;;AAMA,QAAMI,QAAQ,GAAKC,MAAF,IAAc;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAeD,MAAM,CAAEP,gBAAF,CAA3B;AACA,UAAMS,KAAK,GAAGD,QAAQ,CAAEJ,QAAF,CAAtB;AACA,WAAO;AACNK,MAAAA;AADM,KAAP;AAGA,GAND;;AAQA,QAAM;AAAEA,IAAAA;AAAF,MAAYd,SAAS,CAAEW,QAAF,EAAY,CAAEF,QAAF,CAAZ,CAA3B;AAEA,QAAM;AAAEM,IAAAA;AAAF,MAAmBd,WAAW,CAAEI,gBAAF,CAApC;;AAEA,QAAMW,YAAY,GAAG;AAAA,QAAE;AAAEC,MAAAA,IAAF;AAAQC,MAAAA,UAAR;AAAoBC,MAAAA;AAApB,KAAF;AAAA,WACpBjB,WAAW,CAAEe,IAAF,EAAQC,UAAR,EAAoBC,WAApB,CADS;AAAA,GAArB;;AAGA,QAAMC,oBAAoB,GAAG,MAAM;AAClCL,IAAAA,YAAY,CAAED,KAAK,CAACL,QAAR,EAAkBO,YAAY,CAAEF,KAAF,CAA9B,CAAZ;AACA,GAFD;;AAIA,SACC,cAAC,wBAAD;AACC,IAAA,OAAO,EAAGM,oBADX;AAEC,IAAA,UAAU,EAAG,IAFd;AAGC,IAAA,iBAAiB,EAAG;AAHrB,KAKC,cAAC,OAAD;AACC,IAAA,KAAK,EAAGb,UADT,CAEC;AAFD;AAGC,IAAA,OAAO,EAAGT,EAAE,CACX,4DADW,CAHb;AAMC,IAAA,IAAI,EAAGU,IANR;AAOC,IAAA,kBAAkB,EAAGE;AAPtB,IALD,CADD;AAiBA","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport Warning from '../warning';\nimport { store as blockEditorStore } from '../../store';\n\nexport default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {\n\tconst accessibilityLabel = sprintf(\n\t\t/* translators: accessibility text for blocks with invalid content. %d: localized block title */\n\t\t__( '%s block. This block has invalid content' ),\n\t\tblockTitle\n\t);\n\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst block = getBlock( clientId );\n\t\treturn {\n\t\t\tblock,\n\t\t};\n\t};\n\n\tconst { block } = useSelect( selector, [ clientId ] );\n\n\tconst { replaceBlock } = useDispatch( blockEditorStore );\n\n\tconst recoverBlock = ( { name, attributes, innerBlocks } ) =>\n\t\tcreateBlock( name, attributes, innerBlocks );\n\n\tconst attemptBlockRecovery = () => {\n\t\treplaceBlock( block.clientId, recoverBlock( block ) );\n\t};\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ attemptBlockRecovery }\n\t\t\taccessible={ true }\n\t\t\taccessibilityRole={ 'button' }\n\t\t>\n\t\t\t<Warning\n\t\t\t\ttitle={ blockTitle }\n\t\t\t\t// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace\n\t\t\t\tmessage={ __(\n\t\t\t\t\t'Problem displaying block. \\nTap to attempt block recovery.'\n\t\t\t\t) }\n\t\t\t\ticon={ icon }\n\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t/>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-invalid-warning.native.js"],"names":["TouchableWithoutFeedback","__","sprintf","useSelect","useDispatch","createBlock","getBlockType","Warning","store","blockEditorStore","BlockInvalidWarning","clientId","selector","select","getBlock","block","name","blockType","title","blockIcon","icon","blockTitle","accessibilityLabel","replaceBlock","recoverBlock","attributes","innerBlocks","attemptBlockRecovery"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,wBAAT,QAAyC,cAAzC;AAEA;AACA;AACA;;AACA,SAASC,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,WAAT,EAAsBC,YAAtB,QAA0C,mBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,eAAe,SAASC,mBAAT,OAA6C;AAAA,MAAf;AAAEC,IAAAA;AAAF,GAAe;;AAC3D,QAAMC,QAAQ,GAAKC,MAAF,IAAc;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAeD,MAAM,CAAEJ,gBAAF,CAA3B;AACA,UAAMM,KAAK,GAAGD,QAAQ,CAAEH,QAAF,CAAtB;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAWD,KAAK,IAAI,EAA1B;AAEA,UAAME,SAAS,GAAGX,YAAY,CAAEU,IAAI,IAAI,cAAV,CAA9B;AACA,UAAME,KAAK,GAAGD,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEC,KAAzB;AACA,UAAMC,SAAS,GAAGF,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEG,IAA7B;AAEA,WAAO;AACNL,MAAAA,KADM;AAENM,MAAAA,UAAU,EAAEH,KAFN;AAGNE,MAAAA,IAAI,EAAED;AAHA,KAAP;AAKA,GAdD;;AAgBA,QAAM;AAAEJ,IAAAA,KAAF;AAASM,IAAAA,UAAT;AAAqBD,IAAAA;AAArB,MAA8BjB,SAAS,CAAES,QAAF,EAAY,CAAED,QAAF,CAAZ,CAA7C;AAEA,QAAMW,kBAAkB,GAAGpB,OAAO;AACjC;AACAD,EAAAA,EAAE,CAAE,0CAAF,CAF+B,EAGjCoB,UAHiC,CAAlC;AAMA,QAAM;AAAEE,IAAAA;AAAF,MAAmBnB,WAAW,CAAEK,gBAAF,CAApC;;AAEA,QAAMe,YAAY,GAAG;AAAA,QAAE;AAAER,MAAAA,IAAF;AAAQS,MAAAA,UAAR;AAAoBC,MAAAA;AAApB,KAAF;AAAA,WACpBrB,WAAW,CAAEW,IAAF,EAAQS,UAAR,EAAoBC,WAApB,CADS;AAAA,GAArB;;AAGA,QAAMC,oBAAoB,GAAG,MAAM;AAClCJ,IAAAA,YAAY,CAAER,KAAK,CAACJ,QAAR,EAAkBa,YAAY,CAAET,KAAF,CAA9B,CAAZ;AACA,GAFD;;AAIA,SACC,cAAC,wBAAD;AACC,IAAA,OAAO,EAAGY,oBADX;AAEC,IAAA,UAAU,EAAG,IAFd;AAGC,IAAA,iBAAiB,EAAG;AAHrB,KAKC,cAAC,OAAD;AACC,IAAA,KAAK,EAAGN,UADT,CAEC;AAFD;AAGC,IAAA,OAAO,EAAGpB,EAAE,CACX,4DADW,CAHb;AAMC,IAAA,IAAI,EAAGmB,IANR;AAOC,IAAA,kBAAkB,EAAGE;AAPtB,IALD,CADD;AAiBA","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { createBlock, getBlockType } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport Warning from '../warning';\nimport { store as blockEditorStore } from '../../store';\n\nexport default function BlockInvalidWarning( { clientId } ) {\n\tconst selector = ( select ) => {\n\t\tconst { getBlock } = select( blockEditorStore );\n\t\tconst block = getBlock( clientId );\n\t\tconst { name } = block || {};\n\n\t\tconst blockType = getBlockType( name || 'core/missing' );\n\t\tconst title = blockType?.title;\n\t\tconst blockIcon = blockType?.icon;\n\n\t\treturn {\n\t\t\tblock,\n\t\t\tblockTitle: title,\n\t\t\ticon: blockIcon,\n\t\t};\n\t};\n\n\tconst { block, blockTitle, icon } = useSelect( selector, [ clientId ] );\n\n\tconst accessibilityLabel = sprintf(\n\t\t/* translators: accessibility text for blocks with invalid content. %d: localized block title */\n\t\t__( '%s block. This block has invalid content' ),\n\t\tblockTitle\n\t);\n\n\tconst { replaceBlock } = useDispatch( blockEditorStore );\n\n\tconst recoverBlock = ( { name, attributes, innerBlocks } ) =>\n\t\tcreateBlock( name, attributes, innerBlocks );\n\n\tconst attemptBlockRecovery = () => {\n\t\treplaceBlock( block.clientId, recoverBlock( block ) );\n\t};\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\tonPress={ attemptBlockRecovery }\n\t\t\taccessible={ true }\n\t\t\taccessibilityRole={ 'button' }\n\t\t>\n\t\t\t<Warning\n\t\t\t\ttitle={ blockTitle }\n\t\t\t\t// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace\n\t\t\t\tmessage={ __(\n\t\t\t\t\t'Problem displaying block. \\nTap to attempt block recovery.'\n\t\t\t\t) }\n\t\t\t\ticon={ icon }\n\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t/>\n\t\t</TouchableWithoutFeedback>\n\t);\n}\n"]}

package/build-module/components/block-list/block-list-item-cell.native.js

@@ -9,23 +9,34 @@ import { View } from 'react-native';
  */
 
 import { useEffect, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
 import { useBlockListContext } from './block-list-context';
+import { store as blockEditorStore } from '../../store';
 
 function BlockListItemCell(_ref) {
   let {
     children,
-    clientId,
-    rootClientId,
+    item: clientId,
     onLayout
   } = _ref;
   const {
     blocksLayouts,
     updateBlocksLayouts
   } = useBlockListContext();
+  const {
+    rootClientId
+  } = useSelect(select => {
+    const {
+      getBlockRootClientId
+    } = select(blockEditorStore);
+    return {
+      rootClientId: getBlockRootClientId(clientId)
+    };
+  }, [clientId]);
   useEffect(() => {
     return () => {
       updateBlocksLayouts(blocksLayouts, {

package/build-module/components/block-list/block-list-item-cell.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-list-item-cell.native.js"],"names":["View","useEffect","useCallback","useBlockListContext","BlockListItemCell","children","clientId","rootClientId","onLayout","blocksLayouts","updateBlocksLayouts","shouldRemove","onCellLayout","event","nativeEvent","layout"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,oBAAvC;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,sBAApC;;AAEA,SAASC,iBAAT,OAA6E;AAAA,MAAjD;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,QAAZ;AAAsBC,IAAAA,YAAtB;AAAoCC,IAAAA;AAApC,GAAiD;AAC5E,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAyCP,mBAAmB,EAAlE;AAEAF,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZS,MAAAA,mBAAmB,CAAED,aAAF,EAAiB;AACnCH,QAAAA,QADmC;AAEnCK,QAAAA,YAAY,EAAE;AAFqB,OAAjB,CAAnB;AAIA,KALD;AAMA,GAPQ,EAON,EAPM,CAAT;AASA,QAAMC,YAAY,GAAGV,WAAW,CAC7BW,KAAF,IAAa;AACZ,UAAM;AACLC,MAAAA,WAAW,EAAE;AAAEC,QAAAA;AAAF;AADR,QAEFF,KAFJ;AAGAH,IAAAA,mBAAmB,CAAED,aAAF,EAAiB;AACnCH,MAAAA,QADmC;AAEnCC,MAAAA,YAFmC;AAGnC,SAAGQ;AAHgC,KAAjB,CAAnB;;AAMA,QAAKP,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAEK,KAAF,CAAR;AACA;AACD,GAd8B,EAe/B,CAAEP,QAAF,EAAYC,YAAZ,EAA0BG,mBAA1B,EAA+CF,QAA/C,CAf+B,CAAhC;AAkBA,SAAO,cAAC,IAAD;AAAM,IAAA,QAAQ,EAAGI;AAAjB,KAAkCP,QAAlC,CAAP;AACA;;AAED,eAAeD,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useBlockListContext } from './block-list-context';\n\nfunction BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {\n\tconst { blocksLayouts, updateBlocksLayouts } = useBlockListContext();\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tupdateBlocksLayouts( blocksLayouts, {\n\t\t\t\tclientId,\n\t\t\t\tshouldRemove: true,\n\t\t\t} );\n\t\t};\n\t}, [] );\n\n\tconst onCellLayout = useCallback(\n\t\t( event ) => {\n\t\t\tconst {\n\t\t\t\tnativeEvent: { layout },\n\t\t\t} = event;\n\t\t\tupdateBlocksLayouts( blocksLayouts, {\n\t\t\t\tclientId,\n\t\t\t\trootClientId,\n\t\t\t\t...layout,\n\t\t\t} );\n\n\t\t\tif ( onLayout ) {\n\t\t\t\tonLayout( event );\n\t\t\t}\n\t\t},\n\t\t[ clientId, rootClientId, updateBlocksLayouts, onLayout ]\n\t);\n\n\treturn <View onLayout={ onCellLayout }>{ children }</View>;\n}\n\nexport default BlockListItemCell;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-list-item-cell.native.js"],"names":["View","useEffect","useCallback","useSelect","useBlockListContext","store","blockEditorStore","BlockListItemCell","children","item","clientId","onLayout","blocksLayouts","updateBlocksLayouts","rootClientId","select","getBlockRootClientId","shouldRemove","onCellLayout","event","nativeEvent","layout"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,WAApB,QAAuC,oBAAvC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,sBAApC;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;;AAEA,SAASC,iBAAT,OAAqE;AAAA,MAAzC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAI,EAAEC,QAAlB;AAA4BC,IAAAA;AAA5B,GAAyC;AACpE,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAyCT,mBAAmB,EAAlE;AACA,QAAM;AAAEU,IAAAA;AAAF,MAAmBX,SAAS,CAC/BY,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA;AAAF,QAA2BD,MAAM,CAAET,gBAAF,CAAvC;AACA,WAAO;AAAEQ,MAAAA,YAAY,EAAEE,oBAAoB,CAAEN,QAAF;AAApC,KAAP;AACA,GAJgC,EAKjC,CAAEA,QAAF,CALiC,CAAlC;AAQAT,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAM;AACZY,MAAAA,mBAAmB,CAAED,aAAF,EAAiB;AACnCF,QAAAA,QADmC;AAEnCO,QAAAA,YAAY,EAAE;AAFqB,OAAjB,CAAnB;AAIA,KALD;AAMA,GAPQ,EAON,EAPM,CAAT;AASA,QAAMC,YAAY,GAAGhB,WAAW,CAC7BiB,KAAF,IAAa;AACZ,UAAM;AACLC,MAAAA,WAAW,EAAE;AAAEC,QAAAA;AAAF;AADR,QAEFF,KAFJ;AAGAN,IAAAA,mBAAmB,CAAED,aAAF,EAAiB;AACnCF,MAAAA,QADmC;AAEnCI,MAAAA,YAFmC;AAGnC,SAAGO;AAHgC,KAAjB,CAAnB;;AAMA,QAAKV,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAEQ,KAAF,CAAR;AACA;AACD,GAd8B,EAe/B,CAAET,QAAF,EAAYI,YAAZ,EAA0BD,mBAA1B,EAA+CF,QAA/C,CAf+B,CAAhC;AAkBA,SAAO,cAAC,IAAD;AAAM,IAAA,QAAQ,EAAGO;AAAjB,KAAkCV,QAAlC,CAAP;AACA;;AAED,eAAeD,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useCallback } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockListContext } from './block-list-context';\nimport { store as blockEditorStore } from '../../store';\n\nfunction BlockListItemCell( { children, item: clientId, onLayout } ) {\n\tconst { blocksLayouts, updateBlocksLayouts } = useBlockListContext();\n\tconst { rootClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId } = select( blockEditorStore );\n\t\t\treturn { rootClientId: getBlockRootClientId( clientId ) };\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tupdateBlocksLayouts( blocksLayouts, {\n\t\t\t\tclientId,\n\t\t\t\tshouldRemove: true,\n\t\t\t} );\n\t\t};\n\t}, [] );\n\n\tconst onCellLayout = useCallback(\n\t\t( event ) => {\n\t\t\tconst {\n\t\t\t\tnativeEvent: { layout },\n\t\t\t} = event;\n\t\t\tupdateBlocksLayouts( blocksLayouts, {\n\t\t\t\tclientId,\n\t\t\t\trootClientId,\n\t\t\t\t...layout,\n\t\t\t} );\n\n\t\t\tif ( onLayout ) {\n\t\t\t\tonLayout( event );\n\t\t\t}\n\t\t},\n\t\t[ clientId, rootClientId, updateBlocksLayouts, onLayout ]\n\t);\n\n\treturn <View onLayout={ onCellLayout }>{ children }</View>;\n}\n\nexport default BlockListItemCell;\n"]}

package/build-module/components/block-list/block-list-item.native.js

@@ -1,216 +1,186 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
 
-import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-import { ReadableContentView, alignmentHelpers } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
-import BlockListBlock from './block';
-import BlockInsertionPoint from './insertion-point';
+import Block from './block';
 import Grid from './grid-item';
-import styles from './block-list-item.native.scss';
+import BlockInsertionPoint from './insertion-point';
 import { store as blockEditorStore } from '../../store';
-const stretchStyle = {
-  flex: 1
-};
-export class BlockListItem extends Component {
-  getMarginHorizontal() {
-    const {
-      blockAlignment,
-      marginHorizontal,
-      parentBlockAlignment,
-      hasParents,
-      blockName,
-      parentBlockName,
-      parentWidth,
-      blockWidth
-    } = this.props;
-    const {
-      isFullWidth,
-      isWideWidth,
-      isWider,
-      isContainerRelated
-    } = alignmentHelpers;
-
-    if (isFullWidth(blockAlignment)) {
-      if (!hasParents) {
-        return 0;
-      }
-
-      return marginHorizontal;
-    }
-
-    if (isWideWidth(blockAlignment)) {
-      return marginHorizontal;
-    }
-
-    const screenWidth = Math.floor(Dimensions.get('window').width);
-
-    if (isFullWidth(parentBlockAlignment) && !isWider(blockWidth, 'medium')) {
-      if (isContainerRelated(blockName) || isWider(screenWidth, 'mobile')) {
-        return marginHorizontal;
-      }
-
-      return marginHorizontal * 2;
-    }
-
-    if (isContainerRelated(parentBlockName) && !isContainerRelated(blockName)) {
-      const isScreenWidthEqual = parentWidth === screenWidth;
-
-      if (isScreenWidthEqual || isWider(screenWidth, 'mobile')) {
-        return marginHorizontal;
-      }
-    }
-
-    return marginHorizontal;
-  }
-
-  getContentStyles(readableContentViewStyle) {
-    const {
-      blockAlignment,
-      blockName,
-      hasParents,
-      parentBlockName
-    } = this.props;
-    const {
-      isFullWidth,
-      isContainerRelated
-    } = alignmentHelpers;
-    return [readableContentViewStyle, isFullWidth(blockAlignment) && !hasParents && {
-      width: styles.fullAlignment.width
-    }, !blockAlignment && hasParents && !isContainerRelated(parentBlockName) && isContainerRelated(blockName) && {
-      paddingHorizontal: styles.fullAlignmentPadding.paddingLeft
-    }];
-  }
+import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
+/**
+ * BlockListItemContent component. Renders a block with an optional insertion point.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent} The rendered block list item content.
+ */
 
-  renderContent() {
+function BlockListItemContent(_ref) {
+  let {
+    blockWidth,
+    clientId,
+    contentResizeMode,
+    contentStyle,
+    index,
+    isStackedHorizontally,
+    marginHorizontal,
+    marginVertical,
+    onAddBlock,
+    onDeleteBlock,
+    parentWidth,
+    rootClientId,
+    shouldShowInnerBlockAppender
+  } = _ref;
+  const {
+    blockAlignment,
+    blockName,
+    hasParents,
+    parentBlockAlignment,
+    parentBlockName,
+    shouldShowInsertionPointAfter,
+    shouldShowInsertionPointBefore
+  } = useSelect(select => {
     const {
-      blockAlignment,
-      clientId,
-      isReadOnly,
-      shouldShowInsertionPointBefore,
-      shouldShowInsertionPointAfter,
-      contentResizeMode,
-      shouldShowInnerBlockAppender,
-      parentWidth,
-      marginHorizontal,
-      blockName,
-      blockWidth,
-      ...restProps
-    } = this.props;
-    const readableContentViewStyle = contentResizeMode === 'stretch' && stretchStyle;
+      getBlockAttributes,
+      getBlockInsertionPoint,
+      getBlockName,
+      getBlockOrder,
+      isBlockInsertionPointVisible
+    } = select(blockEditorStore);
+    const blockClientIds = getBlockOrder(rootClientId);
+    const insertionPoint = getBlockInsertionPoint();
+    const insertionPointVisibleInCurrentRoot = !isStackedHorizontally && isBlockInsertionPointVisible() && insertionPoint.rootClientId === rootClientId;
+    const isListEmpty = blockClientIds.length === 0;
+    const isInsertionPointBeforeBlock = blockClientIds[insertionPoint.index] === clientId;
+    const isInsertionPointAtEnd = blockClientIds.length === insertionPoint.index;
+    const isBlockLastInList = blockClientIds[insertionPoint.index - 1] === clientId;
+    const showInsertionPointBefore = insertionPointVisibleInCurrentRoot && (isListEmpty || isInsertionPointBeforeBlock);
+    const showInsertionPointAfter = insertionPointVisibleInCurrentRoot && isInsertionPointAtEnd && isBlockLastInList;
+    const blockHasParents = !!rootClientId;
+    const name = getBlockName(clientId);
+    const parentName = getBlockName(rootClientId);
     const {
-      isContainerRelated
-    } = alignmentHelpers;
-    return createElement(ReadableContentView, {
-      align: blockAlignment,
-      style: [readableContentViewStyle, isContainerRelated(blockName) && parentWidth && {
-        maxWidth: parentWidth + 2 * marginHorizontal
-      }]
-    }, createElement(View, {
-      style: this.getContentStyles(readableContentViewStyle),
-      pointerEvents: isReadOnly ? 'box-only' : 'auto'
-    }, shouldShowInsertionPointBefore && createElement(BlockInsertionPoint, null), createElement(BlockListBlock, _extends({
-      key: clientId,
-      showTitle: false,
-      clientId: clientId,
-      parentWidth: parentWidth
-    }, restProps, {
-      marginHorizontal: this.getMarginHorizontal(),
-      blockWidth: blockWidth
-    })), !shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter && createElement(BlockInsertionPoint, null)));
-  }
-
-  render() {
+      align
+    } = getBlockAttributes(clientId) || {};
     const {
-      parentWidth,
-      blockWidth,
-      isGridItem
-    } = this.props;
+      align: parentBlockAlign
+    } = getBlockAttributes(rootClientId) || {};
+    return {
+      blockAlignment: align,
+      blockName: name,
+      hasParents: blockHasParents,
+      parentBlockAlignment: parentBlockAlign,
+      parentBlockName: parentName,
+      shouldShowInsertionPointAfter: showInsertionPointAfter,
+      shouldShowInsertionPointBefore: showInsertionPointBefore
+    };
+  }, [isStackedHorizontally, rootClientId, clientId]);
+  const [wrapperStyles, margin] = useEditorWrapperStyles({
+    align: blockAlignment,
+    blockName,
+    blockWidth,
+    contentResizeMode,
+    hasParents,
+    marginHorizontal,
+    parentBlockAlignment,
+    parentBlockName,
+    parentWidth
+  });
+  const shouldShowBlockInsertionPointAfter = !shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;
+  return createElement(View, {
+    style: wrapperStyles
+  }, shouldShowInsertionPointBefore && createElement(BlockInsertionPoint, {
+    testID: `block-insertion-point-before-row-${index + 1}`
+  }), createElement(Block, {
+    blockWidth: blockWidth,
+    clientId: clientId,
+    contentStyle: contentStyle,
+    isStackedHorizontally: isStackedHorizontally,
+    marginHorizontal: margin,
+    marginVertical: marginVertical,
+    onAddBlock: onAddBlock,
+    parentBlockAlignment: parentBlockAlignment,
+    onDeleteBlock: onDeleteBlock,
+    parentWidth: parentWidth,
+    rootClientId: rootClientId
+  }), shouldShowBlockInsertionPointAfter && createElement(BlockInsertionPoint, {
+    testID: `block-insertion-point-after-row-${index + 1}`
+  }));
+}
+/**
+ * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.
+ *
+ * @param {Object}   props                              Component properties.
+ * @param {boolean}  props.isGridItem                   Whether the block is a grid item.
+ * @param {number}   props.numOfColumns                 The number of columns for grid layout.
+ * @param {number}   props.parentWidth                  The width of the parent block.
+ * @param {number}   props.tileCount                    The total number of tiles in the grid.
+ * @param {number}   props.tileIndex                    The index of the current tile in the grid.
+ * @param {number}   props.blockWidth                   The width of the block.
+ * @param {string}   props.clientId                     The block client ID.
+ * @param {string}   props.contentResizeMode            The content resize mode, e.g "stretch".
+ * @param {Object}   props.contentStyle                 Styles for the block content
+ * @param {Object}   props.index                        Block item index
+ * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.
+ * @param {number}   props.marginHorizontal             The horizontal margin.
+ * @param {number}   props.marginVertical               The vertical margin.
+ * @param {Function} props.onAddBlock                   On add block callback.
+ * @param {Function} props.onDeleteBlock                On delete block callback.
+ * @param {string}   props.rootClientId                 The root client ID.
+ * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
+ *
+ * @return {WPComponent|null} The rendered block list item or null if the block width is not provided.
+ */
 
-    if (!blockWidth) {
-      return null;
-    }
 
-    if (isGridItem) {
-      const {
-        numOfColumns,
-        tileCount,
-        tileIndex
-      } = this.props;
-      return createElement(Grid, {
-        maxWidth: parentWidth,
-        numOfColumns: numOfColumns,
-        tileCount: tileCount,
-        index: tileIndex
-      }, this.renderContent());
-    }
+function BlockListItem(props) {
+  const {
+    isGridItem,
+    numOfColumns,
+    tileCount,
+    tileIndex,
+    ...restProps
+  } = props;
+
+  if (!(props !== null && props !== void 0 && props.blockWidth)) {
+    return null;
+  }
 
-    return this.renderContent();
+  if (isGridItem) {
+    return createElement(Grid, {
+      maxWidth: props === null || props === void 0 ? void 0 : props.parentWidth,
+      numOfColumns: numOfColumns,
+      tileCount: tileCount,
+      index: tileIndex
+    }, createElement(BlockListItemContent, restProps));
   }
 
+  return createElement(BlockListItemContent, restProps);
 }
-export default compose([withSelect((select, _ref) => {
-  let {
-    rootClientId,
-    isStackedHorizontally,
-    clientId
-  } = _ref;
-  const {
-    getBlockOrder,
-    getBlockInsertionPoint,
-    isBlockInsertionPointVisible,
-    getSettings,
-    getBlockParents,
-    getBlock
-  } = select(blockEditorStore);
-  const blockClientIds = getBlockOrder(rootClientId);
-  const insertionPoint = getBlockInsertionPoint();
-  const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-  const shouldShowInsertionPointBefore = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && ( // If list is empty, show the insertion point (via the default appender)
-  blockClientIds.length === 0 || // Or if the insertion point is right before the denoted block.
-  blockClientIds[insertionPoint.index] === clientId);
-  const shouldShowInsertionPointAfter = !isStackedHorizontally && blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && // If the insertion point is at the end of the list.
-  blockClientIds.length === insertionPoint.index && // And the denoted block is the last one on the list, show the indicator at the end of the block.
-  blockClientIds[insertionPoint.index - 1] === clientId;
-  const isReadOnly = getSettings().readOnly;
-  const {
-    attributes,
-    name
-  } = getBlock(clientId) || {};
-  const {
-    align
-  } = attributes || {};
-  const parents = getBlockParents(clientId, true);
-  const hasParents = !!parents.length;
-  const parentBlock = hasParents ? getBlock(parents[0]) : {};
-  const {
-    align: parentBlockAlignment
-  } = (parentBlock === null || parentBlock === void 0 ? void 0 : parentBlock.attributes) || {};
-  const {
-    name: parentBlockName
-  } = parentBlock || {};
-  return {
-    shouldShowInsertionPointBefore,
-    shouldShowInsertionPointAfter,
-    isReadOnly,
-    hasParents,
-    blockAlignment: align,
-    parentBlockAlignment,
-    blockName: name,
-    parentBlockName
-  };
-})])(BlockListItem);
+
+export default BlockListItem;
 //# sourceMappingURL=block-list-item.native.js.map

package/build-module/components/block-list/block-list-item.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-list-item.native.js"],"names":["View","Dimensions","Component","withSelect","compose","ReadableContentView","alignmentHelpers","BlockListBlock","BlockInsertionPoint","Grid","styles","store","blockEditorStore","stretchStyle","flex","BlockListItem","getMarginHorizontal","blockAlignment","marginHorizontal","parentBlockAlignment","hasParents","blockName","parentBlockName","parentWidth","blockWidth","props","isFullWidth","isWideWidth","isWider","isContainerRelated","screenWidth","Math","floor","get","width","isScreenWidthEqual","getContentStyles","readableContentViewStyle","fullAlignment","paddingHorizontal","fullAlignmentPadding","paddingLeft","renderContent","clientId","isReadOnly","shouldShowInsertionPointBefore","shouldShowInsertionPointAfter","contentResizeMode","shouldShowInnerBlockAppender","restProps","maxWidth","render","isGridItem","numOfColumns","tileCount","tileIndex","select","rootClientId","isStackedHorizontally","getBlockOrder","getBlockInsertionPoint","isBlockInsertionPointVisible","getSettings","getBlockParents","getBlock","blockClientIds","insertionPoint","blockInsertionPointIsVisible","length","index","readOnly","attributes","name","align","parents","parentBlock"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,OAAT,QAAwB,oBAAxB;AACA,SAASC,mBAAT,EAA8BC,gBAA9B,QAAsD,uBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,SAA3B;AACA,OAAOC,mBAAP,MAAgC,mBAAhC;AACA,OAAOC,IAAP,MAAiB,aAAjB;AAEA,OAAOC,MAAP,MAAmB,+BAAnB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,MAAMC,YAAY,GAAG;AACpBC,EAAAA,IAAI,EAAE;AADc,CAArB;AAIA,OAAO,MAAMC,aAAN,SAA4Bb,SAA5B,CAAsC;AAC5Cc,EAAAA,mBAAmB,GAAG;AACrB,UAAM;AACLC,MAAAA,cADK;AAELC,MAAAA,gBAFK;AAGLC,MAAAA,oBAHK;AAILC,MAAAA,UAJK;AAKLC,MAAAA,SALK;AAMLC,MAAAA,eANK;AAOLC,MAAAA,WAPK;AAQLC,MAAAA;AARK,QASF,KAAKC,KATT;AAUA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA,OAA5B;AAAqCC,MAAAA;AAArC,QACLvB,gBADD;;AAGA,QAAKoB,WAAW,CAAET,cAAF,CAAhB,EAAqC;AACpC,UAAK,CAAEG,UAAP,EAAoB;AACnB,eAAO,CAAP;AACA;;AACD,aAAOF,gBAAP;AACA;;AACD,QAAKS,WAAW,CAAEV,cAAF,CAAhB,EAAqC;AACpC,aAAOC,gBAAP;AACA;;AAED,UAAMY,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAY/B,UAAU,CAACgC,GAAX,CAAgB,QAAhB,EAA2BC,KAAvC,CAApB;;AAEA,QACCR,WAAW,CAAEP,oBAAF,CAAX,IACA,CAAES,OAAO,CAAEJ,UAAF,EAAc,QAAd,CAFV,EAGE;AACD,UACCK,kBAAkB,CAAER,SAAF,CAAlB,IACAO,OAAO,CAAEE,WAAF,EAAe,QAAf,CAFR,EAGE;AACD,eAAOZ,gBAAP;AACA;;AACD,aAAOA,gBAAgB,GAAG,CAA1B;AACA;;AAED,QACCW,kBAAkB,CAAEP,eAAF,CAAlB,IACA,CAAEO,kBAAkB,CAAER,SAAF,CAFrB,EAGE;AACD,YAAMc,kBAAkB,GAAGZ,WAAW,KAAKO,WAA3C;;AACA,UAAKK,kBAAkB,IAAIP,OAAO,CAAEE,WAAF,EAAe,QAAf,CAAlC,EAA8D;AAC7D,eAAOZ,gBAAP;AACA;AACD;;AAED,WAAOA,gBAAP;AACA;;AAEDkB,EAAAA,gBAAgB,CAAEC,wBAAF,EAA6B;AAC5C,UAAM;AAAEpB,MAAAA,cAAF;AAAkBI,MAAAA,SAAlB;AAA6BD,MAAAA,UAA7B;AAAyCE,MAAAA;AAAzC,QACL,KAAKG,KADN;AAEA,UAAM;AAAEC,MAAAA,WAAF;AAAeG,MAAAA;AAAf,QAAsCvB,gBAA5C;AAEA,WAAO,CACN+B,wBADM,EAENX,WAAW,CAAET,cAAF,CAAX,IACC,CAAEG,UADH,IACiB;AACfc,MAAAA,KAAK,EAAExB,MAAM,CAAC4B,aAAP,CAAqBJ;AADb,KAHX,EAMN,CAAEjB,cAAF,IACCG,UADD,IAEC,CAAES,kBAAkB,CAAEP,eAAF,CAFrB,IAGCO,kBAAkB,CAAER,SAAF,CAHnB,IAGoC;AAClCkB,MAAAA,iBAAiB,EAAE7B,MAAM,CAAC8B,oBAAP,CAA4BC;AADb,KAT9B,CAAP;AAaA;;AAEDC,EAAAA,aAAa,GAAG;AACf,UAAM;AACLzB,MAAAA,cADK;AAEL0B,MAAAA,QAFK;AAGLC,MAAAA,UAHK;AAILC,MAAAA,8BAJK;AAKLC,MAAAA,6BALK;AAMLC,MAAAA,iBANK;AAOLC,MAAAA,4BAPK;AAQLzB,MAAAA,WARK;AASLL,MAAAA,gBATK;AAULG,MAAAA,SAVK;AAWLG,MAAAA,UAXK;AAYL,SAAGyB;AAZE,QAaF,KAAKxB,KAbT;AAeA,UAAMY,wBAAwB,GAC7BU,iBAAiB,KAAK,SAAtB,IAAmClC,YADpC;AAEA,UAAM;AAAEgB,MAAAA;AAAF,QAAyBvB,gBAA/B;AAEA,WACC,cAAC,mBAAD;AACC,MAAA,KAAK,EAAGW,cADT;AAEC,MAAA,KAAK,EAAG,CACPoB,wBADO,EAEPR,kBAAkB,CAAER,SAAF,CAAlB,IACCE,WADD,IACgB;AACd2B,QAAAA,QAAQ,EAAE3B,WAAW,GAAG,IAAIL;AADd,OAHT;AAFT,OAUC,cAAC,IAAD;AACC,MAAA,KAAK,EAAG,KAAKkB,gBAAL,CAAuBC,wBAAvB,CADT;AAEC,MAAA,aAAa,EAAGO,UAAU,GAAG,UAAH,GAAgB;AAF3C,OAIGC,8BAA8B,IAC/B,cAAC,mBAAD,OALF,EAOC,cAAC,cAAD;AACC,MAAA,GAAG,EAAGF,QADP;AAEC,MAAA,SAAS,EAAG,KAFb;AAGC,MAAA,QAAQ,EAAGA,QAHZ;AAIC,MAAA,WAAW,EAAGpB;AAJf,OAKM0B,SALN;AAMC,MAAA,gBAAgB,EAAG,KAAKjC,mBAAL,EANpB;AAOC,MAAA,UAAU,EAAGQ;AAPd,OAPD,EAgBG,CAAEwB,4BAA4B,EAA9B,IACDF,6BADC,IAEA,cAAC,mBAAD,OAlBH,CAVD,CADD;AAkCA;;AAEDK,EAAAA,MAAM,GAAG;AACR,UAAM;AAAE5B,MAAAA,WAAF;AAAeC,MAAAA,UAAf;AAA2B4B,MAAAA;AAA3B,QAA0C,KAAK3B,KAArD;;AAEA,QAAK,CAAED,UAAP,EAAoB;AACnB,aAAO,IAAP;AACA;;AAED,QAAK4B,UAAL,EAAkB;AACjB,YAAM;AAAEC,QAAAA,YAAF;AAAgBC,QAAAA,SAAhB;AAA2BC,QAAAA;AAA3B,UAAyC,KAAK9B,KAApD;AACA,aACC,cAAC,IAAD;AACC,QAAA,QAAQ,EAAGF,WADZ;AAEC,QAAA,YAAY,EAAG8B,YAFhB;AAGC,QAAA,SAAS,EAAGC,SAHb;AAIC,QAAA,KAAK,EAAGC;AAJT,SAMG,KAAKb,aAAL,EANH,CADD;AAUA;;AACD,WAAO,KAAKA,aAAL,EAAP;AACA;;AAtJ2C;AAyJ7C,eAAetC,OAAO,CAAE,CACvBD,UAAU,CACT,CAAEqD,MAAF,WAAiE;AAAA,MAAvD;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA,qBAAhB;AAAuCf,IAAAA;AAAvC,GAAuD;AAChE,QAAM;AACLgB,IAAAA,aADK;AAELC,IAAAA,sBAFK;AAGLC,IAAAA,4BAHK;AAILC,IAAAA,WAJK;AAKLC,IAAAA,eALK;AAMLC,IAAAA;AANK,MAOFR,MAAM,CAAE5C,gBAAF,CAPV;AASA,QAAMqD,cAAc,GAAGN,aAAa,CAAEF,YAAF,CAApC;AACA,QAAMS,cAAc,GAAGN,sBAAsB,EAA7C;AACA,QAAMO,4BAA4B,GAAGN,4BAA4B,EAAjE;AACA,QAAMhB,8BAA8B,GACnC,CAAEa,qBAAF,IACAS,4BADA,IAEAD,cAAc,CAACT,YAAf,KAAgCA,YAFhC,MAGA;AACEQ,EAAAA,cAAc,CAACG,MAAf,KAA0B,CAA1B,IACD;AACAH,EAAAA,cAAc,CAAEC,cAAc,CAACG,KAAjB,CAAd,KAA2C1B,QAN5C,CADD;AASA,QAAMG,6BAA6B,GAClC,CAAEY,qBAAF,IACAS,4BADA,IAEAD,cAAc,CAACT,YAAf,KAAgCA,YAFhC,IAGA;AACAQ,EAAAA,cAAc,CAACG,MAAf,KAA0BF,cAAc,CAACG,KAJzC,IAKA;AACAJ,EAAAA,cAAc,CAAEC,cAAc,CAACG,KAAf,GAAuB,CAAzB,CAAd,KAA+C1B,QAPhD;AASA,QAAMC,UAAU,GAAGkB,WAAW,GAAGQ,QAAjC;AAEA,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAAuBR,QAAQ,CAAErB,QAAF,CAAR,IAAwB,EAArD;AACA,QAAM;AAAE8B,IAAAA;AAAF,MAAYF,UAAU,IAAI,EAAhC;AACA,QAAMG,OAAO,GAAGX,eAAe,CAAEpB,QAAF,EAAY,IAAZ,CAA/B;AACA,QAAMvB,UAAU,GAAG,CAAC,CAAEsD,OAAO,CAACN,MAA9B;AACA,QAAMO,WAAW,GAAGvD,UAAU,GAAG4C,QAAQ,CAAEU,OAAO,CAAE,CAAF,CAAT,CAAX,GAA8B,EAA5D;AACA,QAAM;AAAED,IAAAA,KAAK,EAAEtD;AAAT,MACL,CAAAwD,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEJ,UAAb,KAA2B,EAD5B;AAEA,QAAM;AAAEC,IAAAA,IAAI,EAAElD;AAAR,MAA4BqD,WAAW,IAAI,EAAjD;AAEA,SAAO;AACN9B,IAAAA,8BADM;AAENC,IAAAA,6BAFM;AAGNF,IAAAA,UAHM;AAINxB,IAAAA,UAJM;AAKNH,IAAAA,cAAc,EAAEwD,KALV;AAMNtD,IAAAA,oBANM;AAONE,IAAAA,SAAS,EAAEmD,IAPL;AAQNlD,IAAAA;AARM,GAAP;AAUA,CArDQ,CADa,CAAF,CAAP,CAwDVP,aAxDU,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Dimensions } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport { compose } from '@wordpress/compose';\nimport { ReadableContentView, alignmentHelpers } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockListBlock from './block';\nimport BlockInsertionPoint from './insertion-point';\nimport Grid from './grid-item';\n\nimport styles from './block-list-item.native.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst stretchStyle = {\n\tflex: 1,\n};\n\nexport class BlockListItem extends Component {\n\tgetMarginHorizontal() {\n\t\tconst {\n\t\t\tblockAlignment,\n\t\t\tmarginHorizontal,\n\t\t\tparentBlockAlignment,\n\t\t\thasParents,\n\t\t\tblockName,\n\t\t\tparentBlockName,\n\t\t\tparentWidth,\n\t\t\tblockWidth,\n\t\t} = this.props;\n\t\tconst { isFullWidth, isWideWidth, isWider, isContainerRelated } =\n\t\t\talignmentHelpers;\n\n\t\tif ( isFullWidth( blockAlignment ) ) {\n\t\t\tif ( ! hasParents ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\t\t\treturn marginHorizontal;\n\t\t}\n\t\tif ( isWideWidth( blockAlignment ) ) {\n\t\t\treturn marginHorizontal;\n\t\t}\n\n\t\tconst screenWidth = Math.floor( Dimensions.get( 'window' ).width );\n\n\t\tif (\n\t\t\tisFullWidth( parentBlockAlignment ) &&\n\t\t\t! isWider( blockWidth, 'medium' )\n\t\t) {\n\t\t\tif (\n\t\t\t\tisContainerRelated( blockName ) ||\n\t\t\t\tisWider( screenWidth, 'mobile' )\n\t\t\t) {\n\t\t\t\treturn marginHorizontal;\n\t\t\t}\n\t\t\treturn marginHorizontal * 2;\n\t\t}\n\n\t\tif (\n\t\t\tisContainerRelated( parentBlockName ) &&\n\t\t\t! isContainerRelated( blockName )\n\t\t) {\n\t\t\tconst isScreenWidthEqual = parentWidth === screenWidth;\n\t\t\tif ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {\n\t\t\t\treturn marginHorizontal;\n\t\t\t}\n\t\t}\n\n\t\treturn marginHorizontal;\n\t}\n\n\tgetContentStyles( readableContentViewStyle ) {\n\t\tconst { blockAlignment, blockName, hasParents, parentBlockName } =\n\t\t\tthis.props;\n\t\tconst { isFullWidth, isContainerRelated } = alignmentHelpers;\n\n\t\treturn [\n\t\t\treadableContentViewStyle,\n\t\t\tisFullWidth( blockAlignment ) &&\n\t\t\t\t! hasParents && {\n\t\t\t\t\twidth: styles.fullAlignment.width,\n\t\t\t\t},\n\t\t\t! blockAlignment &&\n\t\t\t\thasParents &&\n\t\t\t\t! isContainerRelated( parentBlockName ) &&\n\t\t\t\tisContainerRelated( blockName ) && {\n\t\t\t\t\tpaddingHorizontal: styles.fullAlignmentPadding.paddingLeft,\n\t\t\t\t},\n\t\t];\n\t}\n\n\trenderContent() {\n\t\tconst {\n\t\t\tblockAlignment,\n\t\t\tclientId,\n\t\t\tisReadOnly,\n\t\t\tshouldShowInsertionPointBefore,\n\t\t\tshouldShowInsertionPointAfter,\n\t\t\tcontentResizeMode,\n\t\t\tshouldShowInnerBlockAppender,\n\t\t\tparentWidth,\n\t\t\tmarginHorizontal,\n\t\t\tblockName,\n\t\t\tblockWidth,\n\t\t\t...restProps\n\t\t} = this.props;\n\n\t\tconst readableContentViewStyle =\n\t\t\tcontentResizeMode === 'stretch' && stretchStyle;\n\t\tconst { isContainerRelated } = alignmentHelpers;\n\n\t\treturn (\n\t\t\t<ReadableContentView\n\t\t\t\talign={ blockAlignment }\n\t\t\t\tstyle={ [\n\t\t\t\t\treadableContentViewStyle,\n\t\t\t\t\tisContainerRelated( blockName ) &&\n\t\t\t\t\t\tparentWidth && {\n\t\t\t\t\t\t\tmaxWidth: parentWidth + 2 * marginHorizontal,\n\t\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tstyle={ this.getContentStyles( readableContentViewStyle ) }\n\t\t\t\t\tpointerEvents={ isReadOnly ? 'box-only' : 'auto' }\n\t\t\t\t>\n\t\t\t\t\t{ shouldShowInsertionPointBefore && (\n\t\t\t\t\t\t<BlockInsertionPoint />\n\t\t\t\t\t) }\n\t\t\t\t\t<BlockListBlock\n\t\t\t\t\t\tkey={ clientId }\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\t\tparentWidth={ parentWidth }\n\t\t\t\t\t\t{ ...restProps }\n\t\t\t\t\t\tmarginHorizontal={ this.getMarginHorizontal() }\n\t\t\t\t\t\tblockWidth={ blockWidth }\n\t\t\t\t\t/>\n\t\t\t\t\t{ ! shouldShowInnerBlockAppender() &&\n\t\t\t\t\t\tshouldShowInsertionPointAfter && (\n\t\t\t\t\t\t\t<BlockInsertionPoint />\n\t\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</ReadableContentView>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst { parentWidth, blockWidth, isGridItem } = this.props;\n\n\t\tif ( ! blockWidth ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( isGridItem ) {\n\t\t\tconst { numOfColumns, tileCount, tileIndex } = this.props;\n\t\t\treturn (\n\t\t\t\t<Grid\n\t\t\t\t\tmaxWidth={ parentWidth }\n\t\t\t\t\tnumOfColumns={ numOfColumns }\n\t\t\t\t\ttileCount={ tileCount }\n\t\t\t\t\tindex={ tileIndex }\n\t\t\t\t>\n\t\t\t\t\t{ this.renderContent() }\n\t\t\t\t</Grid>\n\t\t\t);\n\t\t}\n\t\treturn this.renderContent();\n\t}\n}\n\nexport default compose( [\n\twithSelect(\n\t\t( select, { rootClientId, isStackedHorizontally, clientId } ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockOrder,\n\t\t\t\tgetBlockInsertionPoint,\n\t\t\t\tisBlockInsertionPointVisible,\n\t\t\t\tgetSettings,\n\t\t\t\tgetBlockParents,\n\t\t\t\tgetBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst blockClientIds = getBlockOrder( rootClientId );\n\t\t\tconst insertionPoint = getBlockInsertionPoint();\n\t\t\tconst blockInsertionPointIsVisible = isBlockInsertionPointVisible();\n\t\t\tconst shouldShowInsertionPointBefore =\n\t\t\t\t! isStackedHorizontally &&\n\t\t\t\tblockInsertionPointIsVisible &&\n\t\t\t\tinsertionPoint.rootClientId === rootClientId &&\n\t\t\t\t// If list is empty, show the insertion point (via the default appender)\n\t\t\t\t( blockClientIds.length === 0 ||\n\t\t\t\t\t// Or if the insertion point is right before the denoted block.\n\t\t\t\t\tblockClientIds[ insertionPoint.index ] === clientId );\n\n\t\t\tconst shouldShowInsertionPointAfter =\n\t\t\t\t! isStackedHorizontally &&\n\t\t\t\tblockInsertionPointIsVisible &&\n\t\t\t\tinsertionPoint.rootClientId === rootClientId &&\n\t\t\t\t// If the insertion point is at the end of the list.\n\t\t\t\tblockClientIds.length === insertionPoint.index &&\n\t\t\t\t// And the denoted block is the last one on the list, show the indicator at the end of the block.\n\t\t\t\tblockClientIds[ insertionPoint.index - 1 ] === clientId;\n\n\t\t\tconst isReadOnly = getSettings().readOnly;\n\n\t\t\tconst { attributes, name } = getBlock( clientId ) || {};\n\t\t\tconst { align } = attributes || {};\n\t\t\tconst parents = getBlockParents( clientId, true );\n\t\t\tconst hasParents = !! parents.length;\n\t\t\tconst parentBlock = hasParents ? getBlock( parents[ 0 ] ) : {};\n\t\t\tconst { align: parentBlockAlignment } =\n\t\t\t\tparentBlock?.attributes || {};\n\t\t\tconst { name: parentBlockName } = parentBlock || {};\n\n\t\t\treturn {\n\t\t\t\tshouldShowInsertionPointBefore,\n\t\t\t\tshouldShowInsertionPointAfter,\n\t\t\t\tisReadOnly,\n\t\t\t\thasParents,\n\t\t\t\tblockAlignment: align,\n\t\t\t\tparentBlockAlignment,\n\t\t\t\tblockName: name,\n\t\t\t\tparentBlockName,\n\t\t\t};\n\t\t}\n\t),\n] )( BlockListItem );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-list/block-list-item.native.js"],"names":["View","useSelect","Block","Grid","BlockInsertionPoint","store","blockEditorStore","useEditorWrapperStyles","BlockListItemContent","blockWidth","clientId","contentResizeMode","contentStyle","index","isStackedHorizontally","marginHorizontal","marginVertical","onAddBlock","onDeleteBlock","parentWidth","rootClientId","shouldShowInnerBlockAppender","blockAlignment","blockName","hasParents","parentBlockAlignment","parentBlockName","shouldShowInsertionPointAfter","shouldShowInsertionPointBefore","select","getBlockAttributes","getBlockInsertionPoint","getBlockName","getBlockOrder","isBlockInsertionPointVisible","blockClientIds","insertionPoint","insertionPointVisibleInCurrentRoot","isListEmpty","length","isInsertionPointBeforeBlock","isInsertionPointAtEnd","isBlockLastInList","showInsertionPointBefore","showInsertionPointAfter","blockHasParents","name","parentName","align","parentBlockAlign","wrapperStyles","margin","shouldShowBlockInsertionPointAfter","BlockListItem","props","isGridItem","numOfColumns","tileCount","tileIndex","restProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Block from './block';\nimport Grid from './grid-item';\nimport BlockInsertionPoint from './insertion-point';\nimport { store as blockEditorStore } from '../../store';\nimport { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';\n\n/**\n * BlockListItemContent component. Renders a block with an optional insertion point.\n *\n * @param {Object}   props                              Component properties.\n * @param {number}   props.blockWidth                   The width of the block.\n * @param {string}   props.clientId                     The block client ID.\n * @param {string}   props.contentResizeMode            The content resize mode, e.g \"stretch\".\n * @param {Object}   props.contentStyle                 Styles for the block content\n * @param {Object}   props.index                        Block item index\n * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.\n * @param {number}   props.marginHorizontal             The horizontal margin.\n * @param {number}   props.marginVertical               The vertical margin.\n * @param {Function} props.onAddBlock                   On add block callback.\n * @param {Function} props.onDeleteBlock                On delete block callback.\n * @param {number}   props.parentWidth                  The width of the parent block.\n * @param {string}   props.rootClientId                 The root client ID.\n * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.\n *\n * @return {WPComponent} The rendered block list item content.\n */\nfunction BlockListItemContent( {\n\tblockWidth,\n\tclientId,\n\tcontentResizeMode,\n\tcontentStyle,\n\tindex,\n\tisStackedHorizontally,\n\tmarginHorizontal,\n\tmarginVertical,\n\tonAddBlock,\n\tonDeleteBlock,\n\tparentWidth,\n\trootClientId,\n\tshouldShowInnerBlockAppender,\n} ) {\n\tconst {\n\t\tblockAlignment,\n\t\tblockName,\n\t\thasParents,\n\t\tparentBlockAlignment,\n\t\tparentBlockName,\n\t\tshouldShowInsertionPointAfter,\n\t\tshouldShowInsertionPointBefore,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockAttributes,\n\t\t\t\tgetBlockInsertionPoint,\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockOrder,\n\t\t\t\tisBlockInsertionPointVisible,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst blockClientIds = getBlockOrder( rootClientId );\n\t\t\tconst insertionPoint = getBlockInsertionPoint();\n\n\t\t\tconst insertionPointVisibleInCurrentRoot =\n\t\t\t\t! isStackedHorizontally &&\n\t\t\t\tisBlockInsertionPointVisible() &&\n\t\t\t\tinsertionPoint.rootClientId === rootClientId;\n\n\t\t\tconst isListEmpty = blockClientIds.length === 0;\n\t\t\tconst isInsertionPointBeforeBlock =\n\t\t\t\tblockClientIds[ insertionPoint.index ] === clientId;\n\t\t\tconst isInsertionPointAtEnd =\n\t\t\t\tblockClientIds.length === insertionPoint.index;\n\t\t\tconst isBlockLastInList =\n\t\t\t\tblockClientIds[ insertionPoint.index - 1 ] === clientId;\n\n\t\t\tconst showInsertionPointBefore =\n\t\t\t\tinsertionPointVisibleInCurrentRoot &&\n\t\t\t\t( isListEmpty || isInsertionPointBeforeBlock );\n\n\t\t\tconst showInsertionPointAfter =\n\t\t\t\tinsertionPointVisibleInCurrentRoot &&\n\t\t\t\tisInsertionPointAtEnd &&\n\t\t\t\tisBlockLastInList;\n\n\t\t\tconst blockHasParents = !! rootClientId;\n\t\t\tconst name = getBlockName( clientId );\n\t\t\tconst parentName = getBlockName( rootClientId );\n\t\t\tconst { align } = getBlockAttributes( clientId ) || {};\n\t\t\tconst { align: parentBlockAlign } =\n\t\t\t\tgetBlockAttributes( rootClientId ) || {};\n\n\t\t\treturn {\n\t\t\t\tblockAlignment: align,\n\t\t\t\tblockName: name,\n\t\t\t\thasParents: blockHasParents,\n\t\t\t\tparentBlockAlignment: parentBlockAlign,\n\t\t\t\tparentBlockName: parentName,\n\t\t\t\tshouldShowInsertionPointAfter: showInsertionPointAfter,\n\t\t\t\tshouldShowInsertionPointBefore: showInsertionPointBefore,\n\t\t\t};\n\t\t},\n\t\t[ isStackedHorizontally, rootClientId, clientId ]\n\t);\n\n\tconst [ wrapperStyles, margin ] = useEditorWrapperStyles( {\n\t\talign: blockAlignment,\n\t\tblockName,\n\t\tblockWidth,\n\t\tcontentResizeMode,\n\t\thasParents,\n\t\tmarginHorizontal,\n\t\tparentBlockAlignment,\n\t\tparentBlockName,\n\t\tparentWidth,\n\t} );\n\n\tconst shouldShowBlockInsertionPointAfter =\n\t\t! shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter;\n\n\treturn (\n\t\t<View style={ wrapperStyles }>\n\t\t\t{ shouldShowInsertionPointBefore && (\n\t\t\t\t<BlockInsertionPoint\n\t\t\t\t\ttestID={ `block-insertion-point-before-row-${ index + 1 }` }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Block\n\t\t\t\tblockWidth={ blockWidth }\n\t\t\t\tclientId={ clientId }\n\t\t\t\tcontentStyle={ contentStyle }\n\t\t\t\tisStackedHorizontally={ isStackedHorizontally }\n\t\t\t\tmarginHorizontal={ margin }\n\t\t\t\tmarginVertical={ marginVertical }\n\t\t\t\tonAddBlock={ onAddBlock }\n\t\t\t\tparentBlockAlignment={ parentBlockAlignment }\n\t\t\t\tonDeleteBlock={ onDeleteBlock }\n\t\t\t\tparentWidth={ parentWidth }\n\t\t\t\trootClientId={ rootClientId }\n\t\t\t/>\n\t\t\t{ shouldShowBlockInsertionPointAfter && (\n\t\t\t\t<BlockInsertionPoint\n\t\t\t\t\ttestID={ `block-insertion-point-after-row-${ index + 1 }` }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</View>\n\t);\n}\n\n/**\n * BlockListItem component. Renders a block list item either as a grid item or as a standalone item.\n *\n * @param {Object}   props                              Component properties.\n * @param {boolean}  props.isGridItem                   Whether the block is a grid item.\n * @param {number}   props.numOfColumns                 The number of columns for grid layout.\n * @param {number}   props.parentWidth                  The width of the parent block.\n * @param {number}   props.tileCount                    The total number of tiles in the grid.\n * @param {number}   props.tileIndex                    The index of the current tile in the grid.\n * @param {number}   props.blockWidth                   The width of the block.\n * @param {string}   props.clientId                     The block client ID.\n * @param {string}   props.contentResizeMode            The content resize mode, e.g \"stretch\".\n * @param {Object}   props.contentStyle                 Styles for the block content\n * @param {Object}   props.index                        Block item index\n * @param {boolean}  props.isStackedHorizontally        Whether the block is stacked horizontally.\n * @param {number}   props.marginHorizontal             The horizontal margin.\n * @param {number}   props.marginVertical               The vertical margin.\n * @param {Function} props.onAddBlock                   On add block callback.\n * @param {Function} props.onDeleteBlock                On delete block callback.\n * @param {string}   props.rootClientId                 The root client ID.\n * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.\n *\n * @return {WPComponent|null} The rendered block list item or null if the block width is not provided.\n */\nfunction BlockListItem( props ) {\n\tconst { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =\n\t\tprops;\n\n\tif ( ! props?.blockWidth ) {\n\t\treturn null;\n\t}\n\n\tif ( isGridItem ) {\n\t\treturn (\n\t\t\t<Grid\n\t\t\t\tmaxWidth={ props?.parentWidth }\n\t\t\t\tnumOfColumns={ numOfColumns }\n\t\t\t\ttileCount={ tileCount }\n\t\t\t\tindex={ tileIndex }\n\t\t\t>\n\t\t\t\t<BlockListItemContent { ...restProps } />\n\t\t\t</Grid>\n\t\t);\n\t}\n\n\treturn <BlockListItemContent { ...restProps } />;\n}\n\nexport default BlockListItem;\n"]}