@wordpress/block-editor 12.2.0 → 12.3.1

package/build-module/components/list-view/aria-referenced-text.js

@@ -0,0 +1,34 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect } from '@wordpress/element';
+/**
+ * A component specifically designed to be used as an element referenced
+ * by ARIA attributes such as `aria-labelledby` or `aria-describedby`.
+ *
+ * @param {Object}                    props          Props.
+ * @param {import('react').ReactNode} props.children
+ */
+
+export default function AriaReferencedText({
+  children,
+  ...props
+}) {
+  const ref = useRef();
+  useEffect(() => {
+    if (ref.current) {
+      // This seems like a no-op, but it fixes a bug in Firefox where
+      // it fails to recompute the text when only the text node changes.
+      // @see https://github.com/WordPress/gutenberg/pull/51035
+      ref.current.textContent = ref.current.textContent;
+    }
+  }, [children]);
+  return createElement("div", {
+    hidden: true,
+    ...props,
+    ref: ref
+  }, children);
+}
+//# sourceMappingURL=aria-referenced-text.js.map

package/build-module/components/list-view/aria-referenced-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/aria-referenced-text.js"],"names":["useRef","useEffect","AriaReferencedText","children","props","ref","current","textContent"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,kBAAT,CAA6B;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAA7B,EAAsD;AACpE,QAAMC,GAAG,GAAGL,MAAM,EAAlB;AAEAC,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKI,GAAG,CAACC,OAAT,EAAmB;AAClB;AACA;AACA;AACAD,MAAAA,GAAG,CAACC,OAAJ,CAAYC,WAAZ,GAA0BF,GAAG,CAACC,OAAJ,CAAYC,WAAtC;AACA;AACD,GAPQ,EAON,CAAEJ,QAAF,CAPM,CAAT;AASA,SACC;AAAK,IAAA,MAAM,MAAX;AAAA,OAAiBC,KAAjB;AAAyB,IAAA,GAAG,EAAGC;AAA/B,KACGF,QADH,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A component specifically designed to be used as an element referenced\n * by ARIA attributes such as `aria-labelledby` or `aria-describedby`.\n *\n * @param {Object}                    props          Props.\n * @param {import('react').ReactNode} props.children\n */\nexport default function AriaReferencedText( { children, ...props } ) {\n\tconst ref = useRef();\n\n\tuseEffect( () => {\n\t\tif ( ref.current ) {\n\t\t\t// This seems like a no-op, but it fixes a bug in Firefox where\n\t\t\t// it fails to recompute the text when only the text node changes.\n\t\t\t// @see https://github.com/WordPress/gutenberg/pull/51035\n\t\t\tref.current.textContent = ref.current.textContent;\n\t\t}\n\t}, [ children ] );\n\n\treturn (\n\t\t<div hidden { ...props } ref={ ref }>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/list-view/block-contents.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
@@ -19,19 +18,18 @@ import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 import { useListViewContext } from './context';
-const ListViewBlockContents = forwardRef((_ref, ref) => {
-  let {
-    onClick,
-    onToggleExpanded,
-    block,
-    isSelected,
-    position,
-    siblingBlockCount,
-    level,
-    isExpanded,
-    selectedClientIds,
-    ...props
-  } = _ref;
+const ListViewBlockContents = forwardRef(({
+  onClick,
+  onToggleExpanded,
+  block,
+  isSelected,
+  position,
+  siblingBlockCount,
+  level,
+  isExpanded,
+  selectedClientIds,
+  ...props
+}, ref) => {
   const {
     clientId
   } = block;
@@ -47,9 +45,9 @@ const ListViewBlockContents = forwardRef((_ref, ref) => {
       blockMovingClientId: hasBlockMovingClientId(),
       selectedBlockInBlockEditor: getSelectedBlockClientId()
     };
-  }, [clientId]);
+  }, []);
   const {
-    renderAdditionalBlockUI,
+    AdditionalBlockContent,
     insertedBlock,
     setInsertedBlock
   } = useListViewContext();
@@ -62,30 +60,32 @@ const ListViewBlockContents = forwardRef((_ref, ref) => {
   // to drag it and rearrange its position.
 
   const draggableClientIds = selectedClientIds.includes(clientId) ? selectedClientIds : [clientId];
-  return createElement(Fragment, null, renderAdditionalBlockUI && renderAdditionalBlockUI(block, insertedBlock, setInsertedBlock), createElement(BlockDraggable, {
+  return createElement(Fragment, null, AdditionalBlockContent && createElement(AdditionalBlockContent, {
+    block: block,
+    insertedBlock: insertedBlock,
+    setInsertedBlock: setInsertedBlock
+  }), createElement(BlockDraggable, {
     clientIds: draggableClientIds
-  }, _ref2 => {
-    let {
-      draggable,
-      onDragStart,
-      onDragEnd
-    } = _ref2;
-    return createElement(ListViewBlockSelectButton, _extends({
-      ref: ref,
-      className: className,
-      block: block,
-      onClick: onClick,
-      onToggleExpanded: onToggleExpanded,
-      isSelected: isSelected,
-      position: position,
-      siblingBlockCount: siblingBlockCount,
-      level: level,
-      draggable: draggable,
-      onDragStart: onDragStart,
-      onDragEnd: onDragEnd,
-      isExpanded: isExpanded
-    }, props));
-  }));
+  }, ({
+    draggable,
+    onDragStart,
+    onDragEnd
+  }) => createElement(ListViewBlockSelectButton, {
+    ref: ref,
+    className: className,
+    block: block,
+    onClick: onClick,
+    onToggleExpanded: onToggleExpanded,
+    isSelected: isSelected,
+    position: position,
+    siblingBlockCount: siblingBlockCount,
+    level: level,
+    draggable: draggable,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    isExpanded: isExpanded,
+    ...props
+  })));
 });
 export default ListViewBlockContents;
 //# sourceMappingURL=block-contents.js.map

package/build-module/components/list-view/block-contents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/block-contents.js"],"names":["classnames","useSelect","forwardRef","ListViewBlockSelectButton","BlockDraggable","store","blockEditorStore","useListViewContext","ListViewBlockContents","ref","onClick","onToggleExpanded","block","isSelected","position","siblingBlockCount","level","isExpanded","selectedClientIds","props","clientId","blockMovingClientId","selectedBlockInBlockEditor","select","hasBlockMovingClientId","getSelectedBlockClientId","renderAdditionalBlockUI","insertedBlock","setInsertedBlock","isBlockMoveTarget","className","draggableClientIds","includes","draggable","onDragStart","onDragEnd"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,uBAAtC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,SAASC,kBAAT,QAAmC,WAAnC;AAEA,MAAMC,qBAAqB,GAAGN,UAAU,CACvC,OAaCO,GAbD,KAcK;AAAA,MAbJ;AACCC,IAAAA,OADD;AAECC,IAAAA,gBAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,UAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,iBAND;AAOCC,IAAAA,KAPD;AAQCC,IAAAA,UARD;AASCC,IAAAA,iBATD;AAUC,OAAGC;AAVJ,GAaI;AACJ,QAAM;AAAEC,IAAAA;AAAF,MAAeR,KAArB;AAEA,QAAM;AAAES,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MAAsDrB,SAAS,CAClEsB,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QACLF,MAAM,CAAEjB,gBAAF,CADP;AAEA,WAAO;AACNe,MAAAA,mBAAmB,EAAEG,sBAAsB,EADrC;AAENF,MAAAA,0BAA0B,EAAEG,wBAAwB;AAF9C,KAAP;AAIA,GARmE,EASpE,CAAEL,QAAF,CAToE,CAArE;AAYA,QAAM;AAAEM,IAAAA,uBAAF;AAA2BC,IAAAA,aAA3B;AAA0CC,IAAAA;AAA1C,MACLrB,kBAAkB,EADnB;AAGA,QAAMsB,iBAAiB,GACtBR,mBAAmB,IAAIC,0BAA0B,KAAKF,QADvD;AAGA,QAAMU,SAAS,GAAG9B,UAAU,CAAE,uCAAF,EAA2C;AACtE,0BAAsB6B;AADgD,GAA3C,CAA5B,CArBI,CAyBJ;AACA;AACA;AACA;;AACA,QAAME,kBAAkB,GAAGb,iBAAiB,CAACc,QAAlB,CAA4BZ,QAA5B,IACxBF,iBADwB,GAExB,CAAEE,QAAF,CAFH;AAIA,SACC,8BACGM,uBAAuB,IACxBA,uBAAuB,CACtBd,KADsB,EAEtBe,aAFsB,EAGtBC,gBAHsB,CAFzB,EAOC,cAAC,cAAD;AAAgB,IAAA,SAAS,EAAGG;AAA5B,KACG;AAAA,QAAE;AAAEE,MAAAA,SAAF;AAAaC,MAAAA,WAAb;AAA0BC,MAAAA;AAA1B,KAAF;AAAA,WACD,cAAC,yBAAD;AACC,MAAA,GAAG,EAAG1B,GADP;AAEC,MAAA,SAAS,EAAGqB,SAFb;AAGC,MAAA,KAAK,EAAGlB,KAHT;AAIC,MAAA,OAAO,EAAGF,OAJX;AAKC,MAAA,gBAAgB,EAAGC,gBALpB;AAMC,MAAA,UAAU,EAAGE,UANd;AAOC,MAAA,QAAQ,EAAGC,QAPZ;AAQC,MAAA,iBAAiB,EAAGC,iBARrB;AASC,MAAA,KAAK,EAAGC,KATT;AAUC,MAAA,SAAS,EAAGiB,SAVb;AAWC,MAAA,WAAW,EAAGC,WAXf;AAYC,MAAA,SAAS,EAAGC,SAZb;AAaC,MAAA,UAAU,EAAGlB;AAbd,OAcME,KAdN,EADC;AAAA,GADH,CAPD,CADD;AA8BA,CA9EsC,CAAxC;AAiFA,eAAeX,qBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlockSelectButton from './block-select-button';\nimport BlockDraggable from '../block-draggable';\nimport { store as blockEditorStore } from '../../store';\nimport { useListViewContext } from './context';\n\nconst ListViewBlockContents = forwardRef(\n\t(\n\t\t{\n\t\t\tonClick,\n\t\t\tonToggleExpanded,\n\t\t\tblock,\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tsiblingBlockCount,\n\t\t\tlevel,\n\t\t\tisExpanded,\n\t\t\tselectedClientIds,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst { clientId } = block;\n\n\t\tconst { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { hasBlockMovingClientId, getSelectedBlockClientId } =\n\t\t\t\t\tselect( blockEditorStore );\n\t\t\t\treturn {\n\t\t\t\t\tblockMovingClientId: hasBlockMovingClientId(),\n\t\t\t\t\tselectedBlockInBlockEditor: getSelectedBlockClientId(),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\n\t\tconst { renderAdditionalBlockUI, insertedBlock, setInsertedBlock } =\n\t\t\tuseListViewContext();\n\n\t\tconst isBlockMoveTarget =\n\t\t\tblockMovingClientId && selectedBlockInBlockEditor === clientId;\n\n\t\tconst className = classnames( 'block-editor-list-view-block-contents', {\n\t\t\t'is-dropping-before': isBlockMoveTarget,\n\t\t} );\n\n\t\t// Only include all selected blocks if the currently clicked on block\n\t\t// is one of the selected blocks. This ensures that if a user attempts\n\t\t// to drag a block that isn't part of the selection, they're still able\n\t\t// to drag it and rearrange its position.\n\t\tconst draggableClientIds = selectedClientIds.includes( clientId )\n\t\t\t? selectedClientIds\n\t\t\t: [ clientId ];\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ renderAdditionalBlockUI &&\n\t\t\t\t\trenderAdditionalBlockUI(\n\t\t\t\t\t\tblock,\n\t\t\t\t\t\tinsertedBlock,\n\t\t\t\t\t\tsetInsertedBlock\n\t\t\t\t\t) }\n\t\t\t\t<BlockDraggable clientIds={ draggableClientIds }>\n\t\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t\t<ListViewBlockSelectButton\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\t\tonToggleExpanded={ onToggleExpanded }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\tsiblingBlockCount={ siblingBlockCount }\n\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</BlockDraggable>\n\t\t\t</>\n\t\t);\n\t}\n);\n\nexport default ListViewBlockContents;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/block-contents.js"],"names":["classnames","useSelect","forwardRef","ListViewBlockSelectButton","BlockDraggable","store","blockEditorStore","useListViewContext","ListViewBlockContents","onClick","onToggleExpanded","block","isSelected","position","siblingBlockCount","level","isExpanded","selectedClientIds","props","ref","clientId","blockMovingClientId","selectedBlockInBlockEditor","select","hasBlockMovingClientId","getSelectedBlockClientId","AdditionalBlockContent","insertedBlock","setInsertedBlock","isBlockMoveTarget","className","draggableClientIds","includes","draggable","onDragStart","onDragEnd"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,iBAA1B;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,uBAAtC;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AACA,SAASC,kBAAT,QAAmC,WAAnC;AAEA,MAAMC,qBAAqB,GAAGN,UAAU,CACvC,CACC;AACCO,EAAAA,OADD;AAECC,EAAAA,gBAFD;AAGCC,EAAAA,KAHD;AAICC,EAAAA,UAJD;AAKCC,EAAAA,QALD;AAMCC,EAAAA,iBAND;AAOCC,EAAAA,KAPD;AAQCC,EAAAA,UARD;AASCC,EAAAA,iBATD;AAUC,KAAGC;AAVJ,CADD,EAaCC,GAbD,KAcK;AACJ,QAAM;AAAEC,IAAAA;AAAF,MAAeT,KAArB;AAEA,QAAM;AAAEU,IAAAA,mBAAF;AAAuBC,IAAAA;AAAvB,MAAsDrB,SAAS,CAClEsB,MAAF,IAAc;AACb,UAAM;AAAEC,MAAAA,sBAAF;AAA0BC,MAAAA;AAA1B,QACLF,MAAM,CAAEjB,gBAAF,CADP;AAEA,WAAO;AACNe,MAAAA,mBAAmB,EAAEG,sBAAsB,EADrC;AAENF,MAAAA,0BAA0B,EAAEG,wBAAwB;AAF9C,KAAP;AAIA,GARmE,EASpE,EAToE,CAArE;AAYA,QAAM;AAAEC,IAAAA,sBAAF;AAA0BC,IAAAA,aAA1B;AAAyCC,IAAAA;AAAzC,MACLrB,kBAAkB,EADnB;AAGA,QAAMsB,iBAAiB,GACtBR,mBAAmB,IAAIC,0BAA0B,KAAKF,QADvD;AAGA,QAAMU,SAAS,GAAG9B,UAAU,CAAE,uCAAF,EAA2C;AACtE,0BAAsB6B;AADgD,GAA3C,CAA5B,CArBI,CAyBJ;AACA;AACA;AACA;;AACA,QAAME,kBAAkB,GAAGd,iBAAiB,CAACe,QAAlB,CAA4BZ,QAA5B,IACxBH,iBADwB,GAExB,CAAEG,QAAF,CAFH;AAIA,SACC,8BACGM,sBAAsB,IACvB,cAAC,sBAAD;AACC,IAAA,KAAK,EAAGf,KADT;AAEC,IAAA,aAAa,EAAGgB,aAFjB;AAGC,IAAA,gBAAgB,EAAGC;AAHpB,IAFF,EAQC,cAAC,cAAD;AAAgB,IAAA,SAAS,EAAGG;AAA5B,KACG,CAAE;AAAEE,IAAAA,SAAF;AAAaC,IAAAA,WAAb;AAA0BC,IAAAA;AAA1B,GAAF,KACD,cAAC,yBAAD;AACC,IAAA,GAAG,EAAGhB,GADP;AAEC,IAAA,SAAS,EAAGW,SAFb;AAGC,IAAA,KAAK,EAAGnB,KAHT;AAIC,IAAA,OAAO,EAAGF,OAJX;AAKC,IAAA,gBAAgB,EAAGC,gBALpB;AAMC,IAAA,UAAU,EAAGE,UANd;AAOC,IAAA,QAAQ,EAAGC,QAPZ;AAQC,IAAA,iBAAiB,EAAGC,iBARrB;AASC,IAAA,KAAK,EAAGC,KATT;AAUC,IAAA,SAAS,EAAGkB,SAVb;AAWC,IAAA,WAAW,EAAGC,WAXf;AAYC,IAAA,SAAS,EAAGC,SAZb;AAaC,IAAA,UAAU,EAAGnB,UAbd;AAAA,OAcME;AAdN,IAFF,CARD,CADD;AA+BA,CA/EsC,CAAxC;AAkFA,eAAeV,qBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlockSelectButton from './block-select-button';\nimport BlockDraggable from '../block-draggable';\nimport { store as blockEditorStore } from '../../store';\nimport { useListViewContext } from './context';\n\nconst ListViewBlockContents = forwardRef(\n\t(\n\t\t{\n\t\t\tonClick,\n\t\t\tonToggleExpanded,\n\t\t\tblock,\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tsiblingBlockCount,\n\t\t\tlevel,\n\t\t\tisExpanded,\n\t\t\tselectedClientIds,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst { clientId } = block;\n\n\t\tconst { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { hasBlockMovingClientId, getSelectedBlockClientId } =\n\t\t\t\t\tselect( blockEditorStore );\n\t\t\t\treturn {\n\t\t\t\t\tblockMovingClientId: hasBlockMovingClientId(),\n\t\t\t\t\tselectedBlockInBlockEditor: getSelectedBlockClientId(),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[]\n\t\t);\n\n\t\tconst { AdditionalBlockContent, insertedBlock, setInsertedBlock } =\n\t\t\tuseListViewContext();\n\n\t\tconst isBlockMoveTarget =\n\t\t\tblockMovingClientId && selectedBlockInBlockEditor === clientId;\n\n\t\tconst className = classnames( 'block-editor-list-view-block-contents', {\n\t\t\t'is-dropping-before': isBlockMoveTarget,\n\t\t} );\n\n\t\t// Only include all selected blocks if the currently clicked on block\n\t\t// is one of the selected blocks. This ensures that if a user attempts\n\t\t// to drag a block that isn't part of the selection, they're still able\n\t\t// to drag it and rearrange its position.\n\t\tconst draggableClientIds = selectedClientIds.includes( clientId )\n\t\t\t? selectedClientIds\n\t\t\t: [ clientId ];\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ AdditionalBlockContent && (\n\t\t\t\t\t<AdditionalBlockContent\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tinsertedBlock={ insertedBlock }\n\t\t\t\t\t\tsetInsertedBlock={ setInsertedBlock }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BlockDraggable clientIds={ draggableClientIds }>\n\t\t\t\t\t{ ( { draggable, onDragStart, onDragEnd } ) => (\n\t\t\t\t\t\t<ListViewBlockSelectButton\n\t\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\tonClick={ onClick }\n\t\t\t\t\t\t\tonToggleExpanded={ onToggleExpanded }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\tsiblingBlockCount={ siblingBlockCount }\n\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\tdraggable={ draggable }\n\t\t\t\t\t\t\tonDragStart={ onDragStart }\n\t\t\t\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</BlockDraggable>\n\t\t\t</>\n\t\t);\n\t}\n);\n\nexport default ListViewBlockContents;\n"]}

package/build-module/components/list-view/block-select-button.js

@@ -8,10 +8,13 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { Button, __experimentalHStack as HStack, __experimentalTruncate as Truncate } from '@wordpress/components';
+import { Button, __experimentalHStack as HStack, __experimentalTruncate as Truncate, Tooltip } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock } from '@wordpress/icons';
-import { SPACE, ENTER } from '@wordpress/keycodes';
+import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
+import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
@@ -21,24 +24,25 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
+import { store as blockEditorStore } from '../../store';
 
-function ListViewBlockSelectButton(_ref, ref) {
-  let {
-    className,
-    block: {
-      clientId
-    },
-    onClick,
-    onToggleExpanded,
-    tabIndex,
-    onFocus,
-    onDragStart,
-    onDragEnd,
-    draggable,
-    isExpanded,
-    ariaLabel,
-    ariaDescribedBy
-  } = _ref;
+function ListViewBlockSelectButton({
+  className,
+  block: {
+    clientId
+  },
+  onClick,
+  onToggleExpanded,
+  tabIndex,
+  onFocus,
+  onDragStart,
+  onDragEnd,
+  draggable,
+  isExpanded,
+  ariaLabel,
+  ariaDescribedBy,
+  updateFocusAndSelection
+}, ref) {
   const blockInformation = useBlockDisplayInformation(clientId);
   const blockTitle = useBlockDisplayTitle({
     clientId,
@@ -46,19 +50,62 @@ function ListViewBlockSelectButton(_ref, ref) {
   });
   const {
     isLocked
-  } = useBlockLock(clientId); // The `href` attribute triggers the browser's native HTML drag operations.
+  } = useBlockLock(clientId);
+  const {
+    getSelectedBlockClientIds,
+    getPreviousBlockClientId,
+    getBlockRootClientId,
+    getBlockOrder,
+    canRemoveBlocks
+  } = useSelect(blockEditorStore);
+  const {
+    removeBlocks
+  } = useDispatch(blockEditorStore);
+  const isMatch = useShortcutEventMatch();
+  const isSticky = blockInformation?.positionType === 'sticky';
+  const positionLabel = blockInformation?.positionLabel ? sprintf( // translators: 1: Position of selected block, e.g. "Sticky" or "Fixed".
+  __('Position: %1$s'), blockInformation.positionLabel) : ''; // The `href` attribute triggers the browser's native HTML drag operations.
   // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.
   // We need to clear any HTML drag data to prevent `pasteHandler` from firing
   // inside the `useOnBlockDrop` hook.
 
   const onDragStartHandler = event => {
     event.dataTransfer.clearData();
-    onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+    onDragStart?.(event);
   };
+  /**
+   * @param {KeyboardEvent} event
+   */
+
 
   function onKeyDownHandler(event) {
     if (event.keyCode === ENTER || event.keyCode === SPACE) {
       onClick(event);
+    } else if (event.keyCode === BACKSPACE || event.keyCode === DELETE || isMatch('core/block-editor/remove', event)) {
+      var _getPreviousBlockClie;
+
+      const selectedBlockClientIds = getSelectedBlockClientIds();
+      const isDeletingSelectedBlocks = selectedBlockClientIds.includes(clientId);
+      const firstBlockClientId = isDeletingSelectedBlocks ? selectedBlockClientIds[0] : clientId;
+      const firstBlockRootClientId = getBlockRootClientId(firstBlockClientId);
+      const blocksToDelete = isDeletingSelectedBlocks ? selectedBlockClientIds : [clientId]; // Don't update the selection if the blocks cannot be deleted.
+
+      if (!canRemoveBlocks(blocksToDelete, firstBlockRootClientId)) {
+        return;
+      }
+
+      let blockToFocus = (_getPreviousBlockClie = getPreviousBlockClientId(firstBlockClientId)) !== null && _getPreviousBlockClie !== void 0 ? _getPreviousBlockClie : // If the previous block is not found (when the first block is deleted),
+      // fallback to focus the parent block.
+      firstBlockRootClientId;
+      removeBlocks(blocksToDelete, false); // Update the selection if the original selection has been removed.
+
+      const shouldUpdateSelection = selectedBlockClientIds.length > 0 && getSelectedBlockClientIds().length === 0; // If there's no previous block nor parent block, focus the first block.
+
+      if (!blockToFocus) {
+        blockToFocus = getBlockOrder()[0];
+      }
+
+      updateFocusAndSelection(blockToFocus, shouldUpdateSelection);
     }
   }
 
@@ -79,7 +126,7 @@ function ListViewBlockSelectButton(_ref, ref) {
   }, createElement(ListViewExpander, {
     onClick: onToggleExpanded
   }), createElement(BlockIcon, {
-    icon: blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.icon,
+    icon: blockInformation?.icon,
     showColors: true,
     context: "list-view"
   }), createElement(HStack, {
@@ -91,12 +138,18 @@ function ListViewBlockSelectButton(_ref, ref) {
     className: "block-editor-list-view-block-select-button__title"
   }, createElement(Truncate, {
     ellipsizeMode: "auto"
-  }, blockTitle)), (blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.anchor) && createElement("span", {
+  }, blockTitle)), blockInformation?.anchor && createElement("span", {
     className: "block-editor-list-view-block-select-button__anchor-wrapper"
   }, createElement(Truncate, {
     className: "block-editor-list-view-block-select-button__anchor",
     ellipsizeMode: "auto"
-  }, blockInformation.anchor)), isLocked && createElement("span", {
+  }, blockInformation.anchor)), positionLabel && isSticky && createElement(Tooltip, {
+    text: positionLabel
+  }, createElement("span", {
+    className: "block-editor-list-view-block-select-button__sticky"
+  }, createElement(Icon, {
+    icon: pinSmall
+  }))), isLocked && createElement("span", {
     className: "block-editor-list-view-block-select-button__lock"
   }, createElement(Icon, {
     icon: lock

package/build-module/components/list-view/block-select-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/block-select-button.js"],"names":["classnames","Button","__experimentalHStack","HStack","__experimentalTruncate","Truncate","forwardRef","Icon","lockSmall","lock","SPACE","ENTER","BlockIcon","useBlockDisplayInformation","useBlockDisplayTitle","ListViewExpander","useBlockLock","ListViewBlockSelectButton","ref","className","block","clientId","onClick","onToggleExpanded","tabIndex","onFocus","onDragStart","onDragEnd","draggable","isExpanded","ariaLabel","ariaDescribedBy","blockInformation","blockTitle","context","isLocked","onDragStartHandler","event","dataTransfer","clearData","onKeyDownHandler","keyCode","icon","anchor"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { Icon, lockSmall as lock } from '@wordpress/icons';\nimport { SPACE, ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport ListViewExpander from './expander';\nimport { useBlockLock } from '../block-lock';\n\nfunction ListViewBlockSelectButton(\n\t{\n\t\tclassName,\n\t\tblock: { clientId },\n\t\tonClick,\n\t\tonToggleExpanded,\n\t\ttabIndex,\n\t\tonFocus,\n\t\tonDragStart,\n\t\tonDragEnd,\n\t\tdraggable,\n\t\tisExpanded,\n\t\tariaLabel,\n\t\tariaDescribedBy,\n\t},\n\tref\n) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst { isLocked } = useBlockLock( clientId );\n\n\t// The `href` attribute triggers the browser's native HTML drag operations.\n\t// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.\n\t// We need to clear any HTML drag data to prevent `pasteHandler` from firing\n\t// inside the `useOnBlockDrop` hook.\n\tconst onDragStartHandler = ( event ) => {\n\t\tevent.dataTransfer.clearData();\n\t\tonDragStart?.( event );\n\t};\n\n\tfunction onKeyDownHandler( event ) {\n\t\tif ( event.keyCode === ENTER || event.keyCode === SPACE ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-block-select-button',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonKeyDown={ onKeyDownHandler }\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tonDragStart={ onDragStartHandler }\n\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\tdraggable={ draggable }\n\t\t\t\thref={ `#block-${ clientId }` }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\taria-describedby={ ariaDescribedBy }\n\t\t\t\taria-expanded={ isExpanded }\n\t\t\t>\n\t\t\t\t<ListViewExpander onClick={ onToggleExpanded } />\n\t\t\t\t<BlockIcon\n\t\t\t\t\ticon={ blockInformation?.icon }\n\t\t\t\t\tshowColors\n\t\t\t\t\tcontext=\"list-view\"\n\t\t\t\t/>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"center\"\n\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__label-wrapper\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__title\">\n\t\t\t\t\t\t<Truncate ellipsizeMode=\"auto\">{ blockTitle }</Truncate>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ blockInformation?.anchor && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__anchor-wrapper\">\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__anchor\"\n\t\t\t\t\t\t\t\tellipsizeMode=\"auto\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ blockInformation.anchor }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isLocked && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__lock\">\n\t\t\t\t\t\t\t<Icon icon={ lock } />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n\nexport default forwardRef( ListViewBlockSelectButton );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/block-select-button.js"],"names":["classnames","Button","__experimentalHStack","HStack","__experimentalTruncate","Truncate","Tooltip","forwardRef","Icon","lockSmall","lock","pinSmall","SPACE","ENTER","BACKSPACE","DELETE","useSelect","useDispatch","__unstableUseShortcutEventMatch","useShortcutEventMatch","__","sprintf","BlockIcon","useBlockDisplayInformation","useBlockDisplayTitle","ListViewExpander","useBlockLock","store","blockEditorStore","ListViewBlockSelectButton","className","block","clientId","onClick","onToggleExpanded","tabIndex","onFocus","onDragStart","onDragEnd","draggable","isExpanded","ariaLabel","ariaDescribedBy","updateFocusAndSelection","ref","blockInformation","blockTitle","context","isLocked","getSelectedBlockClientIds","getPreviousBlockClientId","getBlockRootClientId","getBlockOrder","canRemoveBlocks","removeBlocks","isMatch","isSticky","positionType","positionLabel","onDragStartHandler","event","dataTransfer","clearData","onKeyDownHandler","keyCode","selectedBlockClientIds","isDeletingSelectedBlocks","includes","firstBlockClientId","firstBlockRootClientId","blocksToDelete","blockToFocus","shouldUpdateSelection","length","icon","anchor"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tTooltip,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';\nimport { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport ListViewExpander from './expander';\nimport { useBlockLock } from '../block-lock';\nimport { store as blockEditorStore } from '../../store';\n\nfunction ListViewBlockSelectButton(\n\t{\n\t\tclassName,\n\t\tblock: { clientId },\n\t\tonClick,\n\t\tonToggleExpanded,\n\t\ttabIndex,\n\t\tonFocus,\n\t\tonDragStart,\n\t\tonDragEnd,\n\t\tdraggable,\n\t\tisExpanded,\n\t\tariaLabel,\n\t\tariaDescribedBy,\n\t\tupdateFocusAndSelection,\n\t},\n\tref\n) {\n\tconst blockInformation = useBlockDisplayInformation( clientId );\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId,\n\t\tcontext: 'list-view',\n\t} );\n\tconst { isLocked } = useBlockLock( clientId );\n\tconst {\n\t\tgetSelectedBlockClientIds,\n\t\tgetPreviousBlockClientId,\n\t\tgetBlockRootClientId,\n\t\tgetBlockOrder,\n\t\tcanRemoveBlocks,\n\t} = useSelect( blockEditorStore );\n\tconst { removeBlocks } = useDispatch( blockEditorStore );\n\tconst isMatch = useShortcutEventMatch();\n\tconst isSticky = blockInformation?.positionType === 'sticky';\n\n\tconst positionLabel = blockInformation?.positionLabel\n\t\t? sprintf(\n\t\t\t\t// translators: 1: Position of selected block, e.g. \"Sticky\" or \"Fixed\".\n\t\t\t\t__( 'Position: %1$s' ),\n\t\t\t\tblockInformation.positionLabel\n\t\t  )\n\t\t: '';\n\n\t// The `href` attribute triggers the browser's native HTML drag operations.\n\t// When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html.\n\t// We need to clear any HTML drag data to prevent `pasteHandler` from firing\n\t// inside the `useOnBlockDrop` hook.\n\tconst onDragStartHandler = ( event ) => {\n\t\tevent.dataTransfer.clearData();\n\t\tonDragStart?.( event );\n\t};\n\n\t/**\n\t * @param {KeyboardEvent} event\n\t */\n\tfunction onKeyDownHandler( event ) {\n\t\tif ( event.keyCode === ENTER || event.keyCode === SPACE ) {\n\t\t\tonClick( event );\n\t\t} else if (\n\t\t\tevent.keyCode === BACKSPACE ||\n\t\t\tevent.keyCode === DELETE ||\n\t\t\tisMatch( 'core/block-editor/remove', event )\n\t\t) {\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\t\tconst isDeletingSelectedBlocks =\n\t\t\t\tselectedBlockClientIds.includes( clientId );\n\t\t\tconst firstBlockClientId = isDeletingSelectedBlocks\n\t\t\t\t? selectedBlockClientIds[ 0 ]\n\t\t\t\t: clientId;\n\t\t\tconst firstBlockRootClientId =\n\t\t\t\tgetBlockRootClientId( firstBlockClientId );\n\n\t\t\tconst blocksToDelete = isDeletingSelectedBlocks\n\t\t\t\t? selectedBlockClientIds\n\t\t\t\t: [ clientId ];\n\n\t\t\t// Don't update the selection if the blocks cannot be deleted.\n\t\t\tif ( ! canRemoveBlocks( blocksToDelete, firstBlockRootClientId ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet blockToFocus =\n\t\t\t\tgetPreviousBlockClientId( firstBlockClientId ) ??\n\t\t\t\t// If the previous block is not found (when the first block is deleted),\n\t\t\t\t// fallback to focus the parent block.\n\t\t\t\tfirstBlockRootClientId;\n\n\t\t\tremoveBlocks( blocksToDelete, false );\n\n\t\t\t// Update the selection if the original selection has been removed.\n\t\t\tconst shouldUpdateSelection =\n\t\t\t\tselectedBlockClientIds.length > 0 &&\n\t\t\t\tgetSelectedBlockClientIds().length === 0;\n\n\t\t\t// If there's no previous block nor parent block, focus the first block.\n\t\t\tif ( ! blockToFocus ) {\n\t\t\t\tblockToFocus = getBlockOrder()[ 0 ];\n\t\t\t}\n\n\t\t\tupdateFocusAndSelection( blockToFocus, shouldUpdateSelection );\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-block-select-button',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tonKeyDown={ onKeyDownHandler }\n\t\t\t\tref={ ref }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\tonFocus={ onFocus }\n\t\t\t\tonDragStart={ onDragStartHandler }\n\t\t\t\tonDragEnd={ onDragEnd }\n\t\t\t\tdraggable={ draggable }\n\t\t\t\thref={ `#block-${ clientId }` }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\taria-describedby={ ariaDescribedBy }\n\t\t\t\taria-expanded={ isExpanded }\n\t\t\t>\n\t\t\t\t<ListViewExpander onClick={ onToggleExpanded } />\n\t\t\t\t<BlockIcon\n\t\t\t\t\ticon={ blockInformation?.icon }\n\t\t\t\t\tshowColors\n\t\t\t\t\tcontext=\"list-view\"\n\t\t\t\t/>\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"center\"\n\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__label-wrapper\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__title\">\n\t\t\t\t\t\t<Truncate ellipsizeMode=\"auto\">{ blockTitle }</Truncate>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ blockInformation?.anchor && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__anchor-wrapper\">\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__anchor\"\n\t\t\t\t\t\t\t\tellipsizeMode=\"auto\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ blockInformation.anchor }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t\t{ positionLabel && isSticky && (\n\t\t\t\t\t\t<Tooltip text={ positionLabel }>\n\t\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__sticky\">\n\t\t\t\t\t\t\t\t<Icon icon={ pinSmall } />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isLocked && (\n\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__lock\">\n\t\t\t\t\t\t\t<Icon icon={ lock } />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t</>\n\t);\n}\n\nexport default forwardRef( ListViewBlockSelectButton );\n"]}

package/build-module/components/list-view/block.js

@@ -15,6 +15,7 @@ import { moreVertical } from '@wordpress/icons';
 import { useState, useRef, useEffect, useCallback, memo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
+import { focus } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
@@ -29,26 +30,26 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import { unlock } from '../../lock-unlock';
+import AriaReferencedText from './aria-referenced-text';
 
-function ListViewBlock(_ref) {
-  let {
-    block: {
-      clientId
-    },
-    isDragged,
-    isSelected,
-    isBranchSelected,
-    selectBlock,
-    position,
-    level,
-    rowCount,
-    siblingBlockCount,
-    showBlockMovers,
-    path,
-    isExpanded,
-    selectedClientIds,
-    isSyncedBranch
-  } = _ref;
+function ListViewBlock({
+  block: {
+    clientId
+  },
+  isDragged,
+  isSelected,
+  isBranchSelected,
+  selectBlock,
+  position,
+  level,
+  rowCount,
+  siblingBlockCount,
+  showBlockMovers,
+  path,
+  isExpanded,
+  selectedClientIds,
+  isSyncedBranch
+}) {
   const cellRef = useRef(null);
   const rowRef = useRef(null);
   const [isHovered, setIsHovered] = useState(false);
@@ -63,7 +64,7 @@ function ListViewBlock(_ref) {
   } = useDispatch(blockEditorStore);
   const blockInformation = useBlockDisplayInformation(clientId);
 
-  const blockTitle = (blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.title) || __('Untitled');
+  const blockTitle = blockInformation?.title || __('Untitled');
 
   const block = useSelect(select => select(blockEditorStore).getBlock(clientId), [clientId]);
   const blockName = useSelect(select => select(blockEditorStore).getBlockName(clientId), [clientId]);
@@ -87,7 +88,8 @@ function ListViewBlock(_ref) {
     BlockSettingsMenu,
     listViewInstanceId,
     expandedState,
-    setInsertedBlock
+    setInsertedBlock,
+    treeGridElementRef
   } = useListViewContext();
   const hasSiblings = siblingBlockCount > 0;
   const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -117,9 +119,35 @@ function ListViewBlock(_ref) {
     selectBlock(event, clientId);
     event.preventDefault();
   }, [clientId, selectBlock]);
-  const updateSelection = useCallback(newClientId => {
-    selectBlock(undefined, newClientId);
-  }, [selectBlock]);
+  const updateFocusAndSelection = useCallback((focusClientId, shouldSelectBlock) => {
+    if (shouldSelectBlock) {
+      selectBlock(undefined, focusClientId, null, null);
+    }
+
+    const getFocusElement = () => {
+      const row = treeGridElementRef.current?.querySelector(`[role=row][data-block="${focusClientId}"]`);
+      if (!row) return null; // Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+
+      return focus.focusable.find(row)[0];
+    };
+
+    let focusElement = getFocusElement();
+
+    if (focusElement) {
+      focusElement.focus();
+    } else {
+      // The element hasn't been painted yet. Defer focusing on the next frame.
+      // This could happen when all blocks have been deleted and the default block
+      // hasn't been added to the editor yet.
+      window.requestAnimationFrame(() => {
+        focusElement = getFocusElement(); // Ignore if the element still doesn't exist.
+
+        if (focusElement) {
+          focusElement.focus();
+        }
+      });
+    }
+  }, [selectBlock, treeGridElementRef]);
   const toggleExpanded = useCallback(event => {
     // Prevent shift+click from opening link in a new window when toggling.
     event.preventDefault();
@@ -147,7 +175,7 @@ function ListViewBlock(_ref) {
     'is-synced-branch': isSyncedBranch,
     'is-dragging': isDragged,
     'has-single-cell': !showBlockActions,
-    'is-synced': blockInformation === null || blockInformation === void 0 ? void 0 : blockInformation.isSynced
+    'is-synced': blockInformation?.isSynced
   }); // Only include all selected blocks if the currently clicked on block
   // is one of the selected blocks. This ensures that if a user attempts
   // to alter a block that isn't part of the selection, they're still able
@@ -183,89 +211,77 @@ function ListViewBlock(_ref) {
     colSpan: colSpan,
     ref: cellRef,
     "aria-selected": !!isSelected
-  }, _ref2 => {
-    let {
-      ref,
-      tabIndex,
-      onFocus
-    } = _ref2;
-    return createElement("div", {
-      className: "block-editor-list-view-block__contents-container"
-    }, createElement(ListViewBlockContents, {
-      block: block,
-      onClick: selectEditorBlock,
-      onToggleExpanded: toggleExpanded,
-      isSelected: isSelected,
-      position: position,
-      siblingBlockCount: siblingBlockCount,
-      level: level,
-      ref: ref,
-      tabIndex: currentlyEditingBlockInCanvas ? 0 : tabIndex,
-      onFocus: onFocus,
-      isExpanded: canEdit ? isExpanded : undefined,
-      selectedClientIds: selectedClientIds,
-      ariaLabel: blockAriaLabel,
-      ariaDescribedBy: descriptionId
-    }), createElement("div", {
-      className: "block-editor-list-view-block-select-button__description",
-      id: descriptionId
-    }, blockPositionDescription));
-  }), hasRenderedMovers && createElement(Fragment, null, createElement(TreeGridCell, {
+  }, ({
+    ref,
+    tabIndex,
+    onFocus
+  }) => createElement("div", {
+    className: "block-editor-list-view-block__contents-container"
+  }, createElement(ListViewBlockContents, {
+    block: block,
+    onClick: selectEditorBlock,
+    onToggleExpanded: toggleExpanded,
+    isSelected: isSelected,
+    position: position,
+    siblingBlockCount: siblingBlockCount,
+    level: level,
+    ref: ref,
+    tabIndex: currentlyEditingBlockInCanvas ? 0 : tabIndex,
+    onFocus: onFocus,
+    isExpanded: canEdit ? isExpanded : undefined,
+    selectedClientIds: selectedClientIds,
+    ariaLabel: blockAriaLabel,
+    ariaDescribedBy: descriptionId,
+    updateFocusAndSelection: updateFocusAndSelection
+  }), createElement(AriaReferencedText, {
+    id: descriptionId
+  }, blockPositionDescription))), hasRenderedMovers && createElement(Fragment, null, createElement(TreeGridCell, {
     className: moverCellClassName,
     withoutGridItem: true
-  }, createElement(TreeGridItem, null, _ref3 => {
-    let {
-      ref,
-      tabIndex,
-      onFocus
-    } = _ref3;
-    return createElement(BlockMoverUpButton, {
-      orientation: "vertical",
-      clientIds: [clientId],
-      ref: ref,
-      tabIndex: tabIndex,
-      onFocus: onFocus
-    });
-  }), createElement(TreeGridItem, null, _ref4 => {
-    let {
-      ref,
-      tabIndex,
-      onFocus
-    } = _ref4;
-    return createElement(BlockMoverDownButton, {
-      orientation: "vertical",
-      clientIds: [clientId],
-      ref: ref,
-      tabIndex: tabIndex,
-      onFocus: onFocus
-    });
-  }))), showBlockActions && BlockSettingsMenu && createElement(TreeGridCell, {
+  }, createElement(TreeGridItem, null, ({
+    ref,
+    tabIndex,
+    onFocus
+  }) => createElement(BlockMoverUpButton, {
+    orientation: "vertical",
+    clientIds: [clientId],
+    ref: ref,
+    tabIndex: tabIndex,
+    onFocus: onFocus
+  })), createElement(TreeGridItem, null, ({
+    ref,
+    tabIndex,
+    onFocus
+  }) => createElement(BlockMoverDownButton, {
+    orientation: "vertical",
+    clientIds: [clientId],
+    ref: ref,
+    tabIndex: tabIndex,
+    onFocus: onFocus
+  })))), showBlockActions && BlockSettingsMenu && createElement(TreeGridCell, {
     className: listViewBlockSettingsClassName,
     "aria-selected": !!isSelected
-  }, _ref5 => {
-    let {
+  }, ({
+    ref,
+    tabIndex,
+    onFocus
+  }) => createElement(BlockSettingsMenu, {
+    clientIds: dropdownClientIds,
+    block: block,
+    icon: moreVertical,
+    label: settingsAriaLabel,
+    toggleProps: {
       ref,
+      className: 'block-editor-list-view-block__menu',
       tabIndex,
       onFocus
-    } = _ref5;
-    return createElement(BlockSettingsMenu, {
-      clientIds: dropdownClientIds,
-      block: block,
-      icon: moreVertical,
-      label: settingsAriaLabel,
-      toggleProps: {
-        ref,
-        className: 'block-editor-list-view-block__menu',
-        tabIndex,
-        onFocus
-      },
-      disableOpenOnArrowDown: true,
-      __experimentalSelectBlock: updateSelection,
-      expand: expand,
-      expandedState: expandedState,
-      setInsertedBlock: setInsertedBlock
-    });
-  }));
+    },
+    disableOpenOnArrowDown: true,
+    expand: expand,
+    expandedState: expandedState,
+    setInsertedBlock: setInsertedBlock,
+    __experimentalSelectBlock: updateFocusAndSelection
+  })));
 }
 
 export default memo(ListViewBlock);