@wordpress/block-editor 9.4.0 → 9.7.0

package/build-module/utils/block-variation-transforms.js

@@ -1,9 +1,15 @@
-/**
- * External dependencies
- */
-import { isMatch } from 'lodash';
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
+function matchesAttributes(blockAttributes, variation) {
+  return Object.entries(variation).every(_ref => {
+    let [key, value] = _ref;
+
+    if (typeof value === 'object' && typeof blockAttributes[key] === 'object') {
+      return matchesAttributes(blockAttributes[key], value);
+    }
 
+    return blockAttributes[key] === value;
+  });
+}
 /**
  * Matches the provided block variations with a block's attributes. If no match
  * or more than one matches are found it returns `undefined`. If a single match is
@@ -17,14 +23,15 @@ import { isMatch } from 'lodash';
  * @return {?WPBlockVariation} - If a match is found returns it. If not or more than one matches are found returns `undefined`.
  */
 
+
 export const __experimentalGetMatchingVariation = (blockAttributes, variations) => {
   if (!variations || !blockAttributes) return;
-  const matches = variations.filter(_ref => {
+  const matches = variations.filter(_ref2 => {
     let {
       attributes
-    } = _ref;
+    } = _ref2;
     if (!attributes || !Object.keys(attributes).length) return false;
-    return isMatch(blockAttributes, attributes);
+    return matchesAttributes(blockAttributes, attributes);
   });
   if (matches.length !== 1) return;
   return matches[0];

package/build-module/utils/block-variation-transforms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/block-variation-transforms.js"],"names":["isMatch","__experimentalGetMatchingVariation","blockAttributes","variations","matches","filter","attributes","Object","keys","length"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,kCAAkC,GAAG,CACjDC,eADiD,EAEjDC,UAFiD,KAG7C;AACJ,MAAK,CAAEA,UAAF,IAAgB,CAAED,eAAvB,EAAyC;AACzC,QAAME,OAAO,GAAGD,UAAU,CAACE,MAAX,CAAmB,QAAsB;AAAA,QAApB;AAAEC,MAAAA;AAAF,KAAoB;AACxD,QAAK,CAAEA,UAAF,IAAgB,CAAEC,MAAM,CAACC,IAAP,CAAaF,UAAb,EAA0BG,MAAjD,EAA0D,OAAO,KAAP;AAC1D,WAAOT,OAAO,CAAEE,eAAF,EAAmBI,UAAnB,CAAd;AACA,GAHe,CAAhB;AAIA,MAAKF,OAAO,CAACK,MAAR,KAAmB,CAAxB,EAA4B;AAC5B,SAAOL,OAAO,CAAE,CAAF,CAAd;AACA,CAXM","sourcesContent":["/**\n * External dependencies\n */\nimport { isMatch } from 'lodash';\n\n/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */\n\n/**\n * Matches the provided block variations with a block's attributes. If no match\n * or more than one matches are found it returns `undefined`. If a single match is\n * found it returns it.\n *\n * This is a simple implementation for now as it takes into account only the attributes\n * of a block variation and not `InnerBlocks`.\n *\n * @param {Object}             blockAttributes - The block attributes to try to find a match.\n * @param {WPBlockVariation[]} variations      - A list of block variations to test for a match.\n * @return {?WPBlockVariation} - If a match is found returns it. If not or more than one matches are found returns `undefined`.\n */\nexport const __experimentalGetMatchingVariation = (\n\tblockAttributes,\n\tvariations\n) => {\n\tif ( ! variations || ! blockAttributes ) return;\n\tconst matches = variations.filter( ( { attributes } ) => {\n\t\tif ( ! attributes || ! Object.keys( attributes ).length ) return false;\n\t\treturn isMatch( blockAttributes, attributes );\n\t} );\n\tif ( matches.length !== 1 ) return;\n\treturn matches[ 0 ];\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/block-variation-transforms.js"],"names":["matchesAttributes","blockAttributes","variation","Object","entries","every","key","value","__experimentalGetMatchingVariation","variations","matches","filter","attributes","keys","length"],"mappings":"AAAA;AAEA,SAASA,iBAAT,CAA4BC,eAA5B,EAA6CC,SAA7C,EAAyD;AACxD,SAAOC,MAAM,CAACC,OAAP,CAAgBF,SAAhB,EAA4BG,KAA5B,CAAmC,QAAsB;AAAA,QAApB,CAAEC,GAAF,EAAOC,KAAP,CAAoB;;AAC/D,QACC,OAAOA,KAAP,KAAiB,QAAjB,IACA,OAAON,eAAe,CAAEK,GAAF,CAAtB,KAAkC,QAFnC,EAGE;AACD,aAAON,iBAAiB,CAAEC,eAAe,CAAEK,GAAF,CAAjB,EAA0BC,KAA1B,CAAxB;AACA;;AACD,WAAON,eAAe,CAAEK,GAAF,CAAf,KAA2BC,KAAlC;AACA,GARM,CAAP;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMC,kCAAkC,GAAG,CACjDP,eADiD,EAEjDQ,UAFiD,KAG7C;AACJ,MAAK,CAAEA,UAAF,IAAgB,CAAER,eAAvB,EAAyC;AACzC,QAAMS,OAAO,GAAGD,UAAU,CAACE,MAAX,CAAmB,SAAsB;AAAA,QAApB;AAAEC,MAAAA;AAAF,KAAoB;AACxD,QAAK,CAAEA,UAAF,IAAgB,CAAET,MAAM,CAACU,IAAP,CAAaD,UAAb,EAA0BE,MAAjD,EAA0D,OAAO,KAAP;AAC1D,WAAOd,iBAAiB,CAAEC,eAAF,EAAmBW,UAAnB,CAAxB;AACA,GAHe,CAAhB;AAIA,MAAKF,OAAO,CAACI,MAAR,KAAmB,CAAxB,EAA4B;AAC5B,SAAOJ,OAAO,CAAE,CAAF,CAAd;AACA,CAXM","sourcesContent":["/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */\n\nfunction matchesAttributes( blockAttributes, variation ) {\n\treturn Object.entries( variation ).every( ( [ key, value ] ) => {\n\t\tif (\n\t\t\ttypeof value === 'object' &&\n\t\t\ttypeof blockAttributes[ key ] === 'object'\n\t\t) {\n\t\t\treturn matchesAttributes( blockAttributes[ key ], value );\n\t\t}\n\t\treturn blockAttributes[ key ] === value;\n\t} );\n}\n\n/**\n * Matches the provided block variations with a block's attributes. If no match\n * or more than one matches are found it returns `undefined`. If a single match is\n * found it returns it.\n *\n * This is a simple implementation for now as it takes into account only the attributes\n * of a block variation and not `InnerBlocks`.\n *\n * @param {Object}             blockAttributes - The block attributes to try to find a match.\n * @param {WPBlockVariation[]} variations      - A list of block variations to test for a match.\n * @return {?WPBlockVariation} - If a match is found returns it. If not or more than one matches are found returns `undefined`.\n */\nexport const __experimentalGetMatchingVariation = (\n\tblockAttributes,\n\tvariations\n) => {\n\tif ( ! variations || ! blockAttributes ) return;\n\tconst matches = variations.filter( ( { attributes } ) => {\n\t\tif ( ! attributes || ! Object.keys( attributes ).length ) return false;\n\t\treturn matchesAttributes( blockAttributes, attributes );\n\t} );\n\tif ( matches.length !== 1 ) return;\n\treturn matches[ 0 ];\n};\n"]}

package/build-module/utils/pasting.js

@@ -72,7 +72,15 @@ export function shouldDismissPastedFiles(files, html
     // other elements found, like <figure>, but we assume that the user's
     // intention is to paste the actual image file.
     const IMAGE_TAG = /<\s*img\b/gi;
-    return ((_html$match = html.match(IMAGE_TAG)) === null || _html$match === void 0 ? void 0 : _html$match.length) !== 1;
+    if (((_html$match = html.match(IMAGE_TAG)) === null || _html$match === void 0 ? void 0 : _html$match.length) !== 1) return true; // Even when there is exactly one <img> tag in the HTML payload, we
+    // choose to weed out local images, i.e. those whose source starts with
+    // "file://". These payloads occur in specific configurations, such as
+    // when copying an entire document from Microsoft Word, that contains
+    // text and exactly one image, and pasting that content using Google
+    // Chrome.
+
+    const IMG_WITH_LOCAL_SRC = /<\s*img\b[^>]*\bsrc="file:\/\//i;
+    if (html.match(IMG_WITH_LOCAL_SRC)) return true;
   }
 
   return false;

package/build-module/utils/pasting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/pasting.js"],"names":["createBlobURL","getFilesFromDataTransfer","getPasteEventData","clipboardData","plainText","html","getData","error1","error2","files","filter","type","test","length","shouldDismissPastedFiles","map","file","join","indexOf","IMAGE_TAG","match"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,wBAAT,QAAyC,gBAAzC;AAEA,OAAO,SAASC,iBAAT,OAAgD;AAAA,MAApB;AAAEC,IAAAA;AAAF,GAAoB;AACtD,MAAIC,SAAS,GAAG,EAAhB;AACA,MAAIC,IAAI,GAAG,EAAX,CAFsD,CAItD;AACA;AACA;;AACA,MAAI;AACHD,IAAAA,SAAS,GAAGD,aAAa,CAACG,OAAd,CAAuB,YAAvB,CAAZ;AACAD,IAAAA,IAAI,GAAGF,aAAa,CAACG,OAAd,CAAuB,WAAvB,CAAP;AACA,GAHD,CAGE,OAAQC,MAAR,EAAiB;AAClB,QAAI;AACHF,MAAAA,IAAI,GAAGF,aAAa,CAACG,OAAd,CAAuB,MAAvB,CAAP;AACA,KAFD,CAEE,OAAQE,MAAR,EAAiB;AAClB;AACA;AACA;AACA;AACA;AACD;;AAED,QAAMC,KAAK,GAAGR,wBAAwB,CAAEE,aAAF,CAAxB,CAA0CO,MAA1C,CACb;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAgB,kCAAkCC,IAAlC,CAAwCD,IAAxC,CAAhB;AAAA,GADa,CAAd;;AAIA,MACCF,KAAK,CAACI,MAAN,IACA,CAAEC,wBAAwB,CAAEL,KAAF,EAASJ,IAAT,EAAeD,SAAf,CAF3B,EAGE;AACDC,IAAAA,IAAI,GAAGI,KAAK,CACVM,GADK,CACEC,IAAF,IAAa,aAAahB,aAAa,CAAEgB,IAAF,CAAU,IADjD,EAELC,IAFK,CAEC,EAFD,CAAP;AAGAb,IAAAA,SAAS,GAAG,EAAZ;AACA;;AAED,SAAO;AAAEC,IAAAA,IAAF;AAAQD,IAAAA;AAAR,GAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASU,wBAAT,CAAmCL,KAAnC,EAA0CJ;AAAK;AAA/C,EAAkE;AACxE;AACA;AACA,MACCA,IAAI,IACJ,CAAAI,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,MAAP,MAAkB,CADlB,IAEAJ,KAAK,CAAE,CAAF,CAAL,CAAWE,IAAX,CAAgBO,OAAhB,CAAyB,QAAzB,MAAwC,CAHzC,EAIE;AAAA;;AACD;AACA;AACA;AACA;AACA,UAAMC,SAAS,GAAG,aAAlB;AACA,WAAO,gBAAAd,IAAI,CAACe,KAAL,CAAYD,SAAZ,6DAAyBN,MAAzB,MAAoC,CAA3C;AACA;;AAED,SAAO,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlobURL } from '@wordpress/blob';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\n\nexport function getPasteEventData( { clipboardData } ) {\n\tlet plainText = '';\n\tlet html = '';\n\n\t// IE11 only supports `Text` as an argument for `getData` and will\n\t// otherwise throw an invalid argument error, so we try the standard\n\t// arguments first, then fallback to `Text` if they fail.\n\ttry {\n\t\tplainText = clipboardData.getData( 'text/plain' );\n\t\thtml = clipboardData.getData( 'text/html' );\n\t} catch ( error1 ) {\n\t\ttry {\n\t\t\thtml = clipboardData.getData( 'Text' );\n\t\t} catch ( error2 ) {\n\t\t\t// Some browsers like UC Browser paste plain text by default and\n\t\t\t// don't support clipboardData at all, so allow default\n\t\t\t// behaviour.\n\t\t\treturn;\n\t\t}\n\t}\n\n\tconst files = getFilesFromDataTransfer( clipboardData ).filter(\n\t\t( { type } ) => /^image\\/(?:jpe?g|png|gif|webp)$/.test( type )\n\t);\n\n\tif (\n\t\tfiles.length &&\n\t\t! shouldDismissPastedFiles( files, html, plainText )\n\t) {\n\t\thtml = files\n\t\t\t.map( ( file ) => `<img src=\"${ createBlobURL( file ) }\">` )\n\t\t\t.join( '' );\n\t\tplainText = '';\n\t}\n\n\treturn { html, plainText };\n}\n\n/**\n * Given a collection of DataTransfer files and HTML and plain text strings,\n * determine whether the files are to be dismissed in favor of the HTML.\n *\n * Certain office-type programs, like Microsoft Word or Apple Numbers,\n * will, upon copy, generate a screenshot of the content being copied and\n * attach it to the clipboard alongside the actual rich text that the user\n * sought to copy. In those cases, we should let Gutenberg handle the rich text\n * content and not the screenshot, since this allows Gutenberg to insert\n * meaningful blocks, like paragraphs, lists or even tables.\n *\n * @param {File[]} files File objects obtained from a paste event\n * @param {string} html  HTML content obtained from a paste event\n * @return {boolean}     True if the files should be dismissed\n */\nexport function shouldDismissPastedFiles( files, html /*, plainText */ ) {\n\t// The question is only relevant when there is actual HTML content and when\n\t// there is exactly one image file.\n\tif (\n\t\thtml &&\n\t\tfiles?.length === 1 &&\n\t\tfiles[ 0 ].type.indexOf( 'image/' ) === 0\n\t) {\n\t\t// A single <img> tag found in the HTML source suggests that the\n\t\t// content being pasted revolves around an image. Sometimes there are\n\t\t// other elements found, like <figure>, but we assume that the user's\n\t\t// intention is to paste the actual image file.\n\t\tconst IMAGE_TAG = /<\\s*img\\b/gi;\n\t\treturn html.match( IMAGE_TAG )?.length !== 1;\n\t}\n\n\treturn false;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/pasting.js"],"names":["createBlobURL","getFilesFromDataTransfer","getPasteEventData","clipboardData","plainText","html","getData","error1","error2","files","filter","type","test","length","shouldDismissPastedFiles","map","file","join","indexOf","IMAGE_TAG","match","IMG_WITH_LOCAL_SRC"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,wBAAT,QAAyC,gBAAzC;AAEA,OAAO,SAASC,iBAAT,OAAgD;AAAA,MAApB;AAAEC,IAAAA;AAAF,GAAoB;AACtD,MAAIC,SAAS,GAAG,EAAhB;AACA,MAAIC,IAAI,GAAG,EAAX,CAFsD,CAItD;AACA;AACA;;AACA,MAAI;AACHD,IAAAA,SAAS,GAAGD,aAAa,CAACG,OAAd,CAAuB,YAAvB,CAAZ;AACAD,IAAAA,IAAI,GAAGF,aAAa,CAACG,OAAd,CAAuB,WAAvB,CAAP;AACA,GAHD,CAGE,OAAQC,MAAR,EAAiB;AAClB,QAAI;AACHF,MAAAA,IAAI,GAAGF,aAAa,CAACG,OAAd,CAAuB,MAAvB,CAAP;AACA,KAFD,CAEE,OAAQE,MAAR,EAAiB;AAClB;AACA;AACA;AACA;AACA;AACD;;AAED,QAAMC,KAAK,GAAGR,wBAAwB,CAAEE,aAAF,CAAxB,CAA0CO,MAA1C,CACb;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAgB,kCAAkCC,IAAlC,CAAwCD,IAAxC,CAAhB;AAAA,GADa,CAAd;;AAIA,MACCF,KAAK,CAACI,MAAN,IACA,CAAEC,wBAAwB,CAAEL,KAAF,EAASJ,IAAT,EAAeD,SAAf,CAF3B,EAGE;AACDC,IAAAA,IAAI,GAAGI,KAAK,CACVM,GADK,CACEC,IAAF,IAAa,aAAahB,aAAa,CAAEgB,IAAF,CAAU,IADjD,EAELC,IAFK,CAEC,EAFD,CAAP;AAGAb,IAAAA,SAAS,GAAG,EAAZ;AACA;;AAED,SAAO;AAAEC,IAAAA,IAAF;AAAQD,IAAAA;AAAR,GAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASU,wBAAT,CAAmCL,KAAnC,EAA0CJ;AAAK;AAA/C,EAAkE;AACxE;AACA;AACA,MACCA,IAAI,IACJ,CAAAI,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,MAAP,MAAkB,CADlB,IAEAJ,KAAK,CAAE,CAAF,CAAL,CAAWE,IAAX,CAAgBO,OAAhB,CAAyB,QAAzB,MAAwC,CAHzC,EAIE;AAAA;;AACD;AACA;AACA;AACA;AACA,UAAMC,SAAS,GAAG,aAAlB;AACA,QAAK,gBAAAd,IAAI,CAACe,KAAL,CAAYD,SAAZ,6DAAyBN,MAAzB,MAAoC,CAAzC,EAA6C,OAAO,IAAP,CAN5C,CAQD;AACA;AACA;AACA;AACA;AACA;;AACA,UAAMQ,kBAAkB,GAAG,iCAA3B;AACA,QAAKhB,IAAI,CAACe,KAAL,CAAYC,kBAAZ,CAAL,EAAwC,OAAO,IAAP;AACxC;;AAED,SAAO,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlobURL } from '@wordpress/blob';\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\n\nexport function getPasteEventData( { clipboardData } ) {\n\tlet plainText = '';\n\tlet html = '';\n\n\t// IE11 only supports `Text` as an argument for `getData` and will\n\t// otherwise throw an invalid argument error, so we try the standard\n\t// arguments first, then fallback to `Text` if they fail.\n\ttry {\n\t\tplainText = clipboardData.getData( 'text/plain' );\n\t\thtml = clipboardData.getData( 'text/html' );\n\t} catch ( error1 ) {\n\t\ttry {\n\t\t\thtml = clipboardData.getData( 'Text' );\n\t\t} catch ( error2 ) {\n\t\t\t// Some browsers like UC Browser paste plain text by default and\n\t\t\t// don't support clipboardData at all, so allow default\n\t\t\t// behaviour.\n\t\t\treturn;\n\t\t}\n\t}\n\n\tconst files = getFilesFromDataTransfer( clipboardData ).filter(\n\t\t( { type } ) => /^image\\/(?:jpe?g|png|gif|webp)$/.test( type )\n\t);\n\n\tif (\n\t\tfiles.length &&\n\t\t! shouldDismissPastedFiles( files, html, plainText )\n\t) {\n\t\thtml = files\n\t\t\t.map( ( file ) => `<img src=\"${ createBlobURL( file ) }\">` )\n\t\t\t.join( '' );\n\t\tplainText = '';\n\t}\n\n\treturn { html, plainText };\n}\n\n/**\n * Given a collection of DataTransfer files and HTML and plain text strings,\n * determine whether the files are to be dismissed in favor of the HTML.\n *\n * Certain office-type programs, like Microsoft Word or Apple Numbers,\n * will, upon copy, generate a screenshot of the content being copied and\n * attach it to the clipboard alongside the actual rich text that the user\n * sought to copy. In those cases, we should let Gutenberg handle the rich text\n * content and not the screenshot, since this allows Gutenberg to insert\n * meaningful blocks, like paragraphs, lists or even tables.\n *\n * @param {File[]} files File objects obtained from a paste event\n * @param {string} html  HTML content obtained from a paste event\n * @return {boolean}     True if the files should be dismissed\n */\nexport function shouldDismissPastedFiles( files, html /*, plainText */ ) {\n\t// The question is only relevant when there is actual HTML content and when\n\t// there is exactly one image file.\n\tif (\n\t\thtml &&\n\t\tfiles?.length === 1 &&\n\t\tfiles[ 0 ].type.indexOf( 'image/' ) === 0\n\t) {\n\t\t// A single <img> tag found in the HTML source suggests that the\n\t\t// content being pasted revolves around an image. Sometimes there are\n\t\t// other elements found, like <figure>, but we assume that the user's\n\t\t// intention is to paste the actual image file.\n\t\tconst IMAGE_TAG = /<\\s*img\\b/gi;\n\t\tif ( html.match( IMAGE_TAG )?.length !== 1 ) return true;\n\n\t\t// Even when there is exactly one <img> tag in the HTML payload, we\n\t\t// choose to weed out local images, i.e. those whose source starts with\n\t\t// \"file://\". These payloads occur in specific configurations, such as\n\t\t// when copying an entire document from Microsoft Word, that contains\n\t\t// text and exactly one image, and pasting that content using Google\n\t\t// Chrome.\n\t\tconst IMG_WITH_LOCAL_SRC = /<\\s*img\\b[^>]*\\bsrc=\"file:\\/\\//i;\n\t\tif ( html.match( IMG_WITH_LOCAL_SRC ) ) return true;\n\t}\n\n\treturn false;\n}\n"]}

package/build-style/style-rtl.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   box-shadow: 0 0 0 1px #fff;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1074,7 +1083,20 @@
   overflow-y: visible;
   pointer-events: none;
 }
-.components-popover.block-editor-block-popover .components-popover__content > * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+  pointer-events: all;
+}
+
+.components-popover.block-editor-block-popover__inbetween {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter {
+  pointer-events: all;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
   pointer-events: all;
 }
 
@@ -1176,6 +1198,12 @@
 .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
 }
+.block-editor-block-styles__variants .block-editor-block-styles__item-text {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
 
 .block-editor-block-styles__block-preview-container,
 .block-editor-block-styles__block-preview-container * {
@@ -1434,6 +1462,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1495,8 @@
   text-align: right;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1562,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1654,6 +1684,10 @@
   min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs .block-editor-color-gradient-control__panel {
+  padding: 16px;
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
   display: block;
 }
@@ -1669,8 +1703,9 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
+  width: 260px;
+  padding: 16px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1686,6 +1721,7 @@
 */
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
+  max-width: 100%;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1710,16 +1746,27 @@
   padding: 0;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: 46px;
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: right;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
 }
+.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
+  flex-shrink: 0;
+}
 
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
@@ -2548,7 +2595,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 0 6px 12px;
+  padding: 6px 0 6px 4px;
   text-align: right;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2666,7 +2713,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-left: 5px;
+  padding-left: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2740,13 +2787,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4067,7 +4125,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   right: 0;
   bottom: 0;
   width: 280px;

package/build-style/style.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   box-shadow: 0 0 0 1px #fff;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1074,7 +1083,20 @@
   overflow-y: visible;
   pointer-events: none;
 }
-.components-popover.block-editor-block-popover .components-popover__content > * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+  pointer-events: all;
+}
+
+.components-popover.block-editor-block-popover__inbetween {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter {
+  pointer-events: all;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
   pointer-events: all;
 }
 
@@ -1176,6 +1198,12 @@
 .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
 }
+.block-editor-block-styles__variants .block-editor-block-styles__item-text {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
 
 .block-editor-block-styles__block-preview-container,
 .block-editor-block-styles__block-preview-container * {
@@ -1434,6 +1462,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1495,8 @@
   text-align: left;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1562,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1654,6 +1684,10 @@
   min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs .block-editor-color-gradient-control__panel {
+  padding: 16px;
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
   display: block;
 }
@@ -1669,8 +1703,9 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
+  width: 260px;
+  padding: 16px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1686,6 +1721,7 @@
 */
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
+  max-width: 100%;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1710,16 +1746,27 @@
   padding: 0;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: 46px;
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: left;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
 }
+.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
+  flex-shrink: 0;
+}
 
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
@@ -2548,7 +2595,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 12px 6px 0;
+  padding: 6px 4px 6px 0;
   text-align: left;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2666,7 +2713,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-right: 5px;
+  padding-right: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2740,13 +2787,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4067,7 +4125,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   left: 0;
   bottom: 0;
   width: 280px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.4.0",
+	"version": "9.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.12.0",
-		"@wordpress/api-fetch": "^6.9.0",
-		"@wordpress/blob": "^3.12.0",
-		"@wordpress/blocks": "^11.11.0",
-		"@wordpress/components": "^19.14.0",
-		"@wordpress/compose": "^5.10.0",
-		"@wordpress/data": "^6.12.0",
-		"@wordpress/date": "^4.12.0",
-		"@wordpress/deprecated": "^3.12.0",
-		"@wordpress/dom": "^3.12.0",
-		"@wordpress/element": "^4.10.0",
-		"@wordpress/hooks": "^3.12.0",
-		"@wordpress/html-entities": "^3.12.0",
-		"@wordpress/i18n": "^4.12.0",
-		"@wordpress/icons": "^9.3.0",
-		"@wordpress/is-shallow-equal": "^4.12.0",
-		"@wordpress/keyboard-shortcuts": "^3.10.0",
-		"@wordpress/keycodes": "^3.12.0",
-		"@wordpress/notices": "^3.12.0",
-		"@wordpress/rich-text": "^5.10.0",
-		"@wordpress/shortcode": "^3.12.0",
-		"@wordpress/style-engine": "^0.11.0",
-		"@wordpress/token-list": "^2.12.0",
-		"@wordpress/url": "^3.13.0",
-		"@wordpress/warning": "^2.12.0",
-		"@wordpress/wordcount": "^3.12.0",
+		"@wordpress/a11y": "^3.15.0",
+		"@wordpress/api-fetch": "^6.12.0",
+		"@wordpress/blob": "^3.15.0",
+		"@wordpress/blocks": "^11.14.0",
+		"@wordpress/components": "^19.17.0",
+		"@wordpress/compose": "^5.13.0",
+		"@wordpress/data": "^6.15.0",
+		"@wordpress/date": "^4.15.0",
+		"@wordpress/deprecated": "^3.15.0",
+		"@wordpress/dom": "^3.15.0",
+		"@wordpress/element": "^4.13.0",
+		"@wordpress/hooks": "^3.15.0",
+		"@wordpress/html-entities": "^3.15.0",
+		"@wordpress/i18n": "^4.15.0",
+		"@wordpress/icons": "^9.6.0",
+		"@wordpress/is-shallow-equal": "^4.15.0",
+		"@wordpress/keyboard-shortcuts": "^3.13.0",
+		"@wordpress/keycodes": "^3.15.0",
+		"@wordpress/notices": "^3.15.0",
+		"@wordpress/rich-text": "^5.13.0",
+		"@wordpress/shortcode": "^3.15.0",
+		"@wordpress/style-engine": "^0.14.0",
+		"@wordpress/token-list": "^2.15.0",
+		"@wordpress/url": "^3.16.0",
+		"@wordpress/warning": "^2.15.0",
+		"@wordpress/wordcount": "^3.15.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
+	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
 }

package/src/components/block-list/block-invalid-warning.native.js

@@ -1,27 +1,62 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback } from 'react-native';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
+import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon } ) {
+export default function BlockInvalidWarning( { blockTitle, icon, 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 selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+		return {
+			block,
+		};
+	};
+
+	const { block } = useSelect( selector, [ clientId ] );
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+		createBlock( name, attributes, innerBlocks );
+
+	const attemptBlockRecovery = () => {
+		replaceBlock( block.clientId, recoverBlock( block ) );
+	};
+
 	return (
-		<Warning
-			title={ blockTitle }
-			message={ __( 'Problem displaying block' ) }
-			icon={ icon }
+		<TouchableWithoutFeedback
+			onPress={ attemptBlockRecovery }
 			accessible={ true }
-			accessibilityLabel={ accessibilityLabel }
-		/>
+			accessibilityRole={ 'button' }
+		>
+			<Warning
+				title={ blockTitle }
+				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+				message={ __(
+					'Problem displaying block. \nTap to attempt block recovery.'
+				) }
+				icon={ icon }
+				accessibilityLabel={ accessibilityLabel }
+			/>
+		</TouchableWithoutFeedback>
 	);
 }