@wordpress/block-editor 11.0.0 → 11.1.0

package/build-module/utils/pasting.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { createBlobURL } from '@wordpress/blob';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 export function getPasteEventData(_ref) {
   let {
@@ -26,21 +25,18 @@ export function getPasteEventData(_ref) {
     }
   }
 
-  const files = getFilesFromDataTransfer(clipboardData).filter(_ref2 => {
-    let {
-      type
-    } = _ref2;
-    return /^image\/(?:jpe?g|png|gif|webp)$/.test(type);
-  });
+  const files = getFilesFromDataTransfer(clipboardData);
 
   if (files.length && !shouldDismissPastedFiles(files, html, plainText)) {
-    html = files.map(file => `<img src="${createBlobURL(file)}">`).join('');
-    plainText = '';
+    return {
+      files
+    };
   }
 
   return {
     html,
-    plainText
+    plainText,
+    files: []
   };
 }
 /**

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","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/pasting.js"],"names":["getFilesFromDataTransfer","getPasteEventData","clipboardData","plainText","html","getData","error1","error2","files","length","shouldDismissPastedFiles","type","indexOf","IMAGE_TAG","match","IMG_WITH_LOCAL_SRC"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,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,CAAtC;;AAEA,MACCM,KAAK,CAACC,MAAN,IACA,CAAEC,wBAAwB,CAAEF,KAAF,EAASJ,IAAT,EAAeD,SAAf,CAF3B,EAGE;AACD,WAAO;AAAEK,MAAAA;AAAF,KAAP;AACA;;AAED,SAAO;AAAEJ,IAAAA,IAAF;AAAQD,IAAAA,SAAR;AAAmBK,IAAAA,KAAK,EAAE;AAA1B,GAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASE,wBAAT,CAAmCF,KAAnC,EAA0CJ;AAAK;AAA/C,EAAkE;AACxE;AACA;AACA,MACCA,IAAI,IACJ,CAAAI,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,MAAkB,CADlB,IAEAD,KAAK,CAAE,CAAF,CAAL,CAAWG,IAAX,CAAgBC,OAAhB,CAAyB,QAAzB,MAAwC,CAHzC,EAIE;AAAA;;AACD;AACA;AACA;AACA;AACA,UAAMC,SAAS,GAAG,aAAlB;AACA,QAAK,gBAAAT,IAAI,CAACU,KAAL,CAAYD,SAAZ,6DAAyBJ,MAAzB,MAAoC,CAAzC,EAA6C,OAAO,IAAP,CAN5C,CAQD;AACA;AACA;AACA;AACA;AACA;;AACA,UAAMM,kBAAkB,GAAG,iCAA3B;AACA,QAAKX,IAAI,CAACU,KAAL,CAAYC,kBAAZ,CAAL,EAAwC,OAAO,IAAP;AACxC;;AAED,SAAO,KAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\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 );\n\n\tif (\n\t\tfiles.length &&\n\t\t! shouldDismissPastedFiles( files, html, plainText )\n\t) {\n\t\treturn { files };\n\t}\n\n\treturn { html, plainText, files: [] };\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/content-rtl.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/content.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/default-editor-styles-rtl.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/default-editor-styles.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */

package/build-style/style-rtl.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -158,6 +158,9 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+  margin-bottom: 0;
+}
 .block-editor-block-inspector .components-panel__body {
   border: none;
   border-top: 1px solid #e0e0e0;
@@ -1171,6 +1174,9 @@
   width: 100%;
   border-radius: 2px;
 }
+.block-editor-block-pattern-setup.view-mode-grid {
+  padding-top: 4px;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
@@ -1192,10 +1198,26 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
   border-radius: 2px;
@@ -1237,6 +1259,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
@@ -1244,6 +1267,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  height: 100%;
   list-style: none;
   transform-style: preserve-3d;
 }
@@ -1254,6 +1278,8 @@
   position: absolute;
   top: 0;
   width: 100%;
+  height: 100%;
+  background-color: #fff;
   margin: auto;
   padding: 0;
   transition: transform 0.5s, z-index 0.5s;
@@ -2328,9 +2354,8 @@
   }
 }
 .block-editor-list-view-leaf .block-editor-block-icon {
-  align-self: flex-start;
   margin-left: 8px;
-  width: 24px;
+  flex: 0 0 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
@@ -2462,11 +2487,6 @@
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
-  width: 24px;
-  min-width: 24px;
-  margin-right: auto;
-  padding: 0;
-  vertical-align: middle;
 }
 
 .block-editor-list-view-block-select-button__description,
@@ -4143,7 +4163,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
   background-color: #1e1e1e;
   color: #fff;
-  margin: 8px 28px 0 0;
+  margin: 8px 24px 0 0;
   border-radius: 2px;
   height: 24px;
   min-width: 24px;
@@ -4164,6 +4184,10 @@
   max-width: 248px;
 }
 
+.offcanvas-editor-list-view-is-empty {
+  margin-right: 16px;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/build-style/style.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -158,6 +158,9 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+  margin-bottom: 0;
+}
 .block-editor-block-inspector .components-panel__body {
   border: none;
   border-top: 1px solid #e0e0e0;
@@ -1171,6 +1174,9 @@
   width: 100%;
   border-radius: 2px;
 }
+.block-editor-block-pattern-setup.view-mode-grid {
+  padding-top: 4px;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
@@ -1192,10 +1198,26 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
   border-radius: 2px;
@@ -1237,6 +1259,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
@@ -1244,6 +1267,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  height: 100%;
   list-style: none;
   transform-style: preserve-3d;
 }
@@ -1254,6 +1278,8 @@
   position: absolute;
   top: 0;
   width: 100%;
+  height: 100%;
+  background-color: #fff;
   margin: auto;
   padding: 0;
   transition: transform 0.5s, z-index 0.5s;
@@ -2328,9 +2354,8 @@
   }
 }
 .block-editor-list-view-leaf .block-editor-block-icon {
-  align-self: flex-start;
   margin-right: 8px;
-  width: 24px;
+  flex: 0 0 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
@@ -2462,11 +2487,6 @@
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
-  width: 24px;
-  min-width: 24px;
-  margin-left: auto;
-  padding: 0;
-  vertical-align: middle;
 }
 
 .block-editor-list-view-block-select-button__description,
@@ -4143,7 +4163,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
   background-color: #1e1e1e;
   color: #fff;
-  margin: 8px 0 0 28px;
+  margin: 8px 0 0 24px;
   border-radius: 2px;
   height: 24px;
   min-width: 24px;
@@ -4164,6 +4184,10 @@
   max-width: 248px;
 }
 
+.offcanvas-editor-list-view-is-empty {
+  margin-left: 16px;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.0.0",
+	"version": "11.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.23.0",
-		"@wordpress/api-fetch": "^6.20.0",
-		"@wordpress/blob": "^3.23.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/compose": "^6.0.0",
-		"@wordpress/data": "^8.0.0",
-		"@wordpress/date": "^4.23.0",
-		"@wordpress/deprecated": "^3.23.0",
-		"@wordpress/dom": "^3.23.0",
-		"@wordpress/element": "^5.0.0",
-		"@wordpress/escape-html": "^2.23.0",
-		"@wordpress/hooks": "^3.23.0",
-		"@wordpress/html-entities": "^3.23.0",
-		"@wordpress/i18n": "^4.23.0",
-		"@wordpress/icons": "^9.14.0",
-		"@wordpress/is-shallow-equal": "^4.23.0",
-		"@wordpress/keyboard-shortcuts": "^4.0.0",
-		"@wordpress/keycodes": "^3.23.0",
-		"@wordpress/notices": "^3.23.0",
-		"@wordpress/rich-text": "^6.0.0",
-		"@wordpress/shortcode": "^3.23.0",
-		"@wordpress/style-engine": "^1.6.0",
-		"@wordpress/token-list": "^2.23.0",
-		"@wordpress/url": "^3.24.0",
-		"@wordpress/warning": "^2.23.0",
-		"@wordpress/wordcount": "^3.23.0",
+		"@wordpress/a11y": "^3.24.0",
+		"@wordpress/api-fetch": "^6.21.0",
+		"@wordpress/blob": "^3.24.0",
+		"@wordpress/blocks": "^12.1.0",
+		"@wordpress/components": "^23.1.0",
+		"@wordpress/compose": "^6.1.0",
+		"@wordpress/data": "^8.1.0",
+		"@wordpress/date": "^4.24.0",
+		"@wordpress/deprecated": "^3.24.0",
+		"@wordpress/dom": "^3.24.0",
+		"@wordpress/element": "^5.1.0",
+		"@wordpress/escape-html": "^2.24.0",
+		"@wordpress/hooks": "^3.24.0",
+		"@wordpress/html-entities": "^3.24.0",
+		"@wordpress/i18n": "^4.24.0",
+		"@wordpress/icons": "^9.15.0",
+		"@wordpress/is-shallow-equal": "^4.24.0",
+		"@wordpress/keyboard-shortcuts": "^4.1.0",
+		"@wordpress/keycodes": "^3.24.0",
+		"@wordpress/notices": "^3.24.0",
+		"@wordpress/rich-text": "^6.1.0",
+		"@wordpress/shortcode": "^3.24.0",
+		"@wordpress/style-engine": "^1.7.0",
+		"@wordpress/token-list": "^2.24.0",
+		"@wordpress/url": "^3.25.0",
+		"@wordpress/warning": "^2.24.0",
+		"@wordpress/wordcount": "^3.24.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -81,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
+	"gitHead": "200bee7b06b15f6fa655e25b6ab69cbd6b49a357"
 }

package/src/components/alignment-control/test/index.js

@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();

package/src/components/alignment-control/ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 

package/src/components/block-alignment-control/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();

package/src/components/block-alignment-control/use-available-alignments.js

@@ -10,6 +10,7 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
@@ -40,14 +41,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
 		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
-			return [];
+			return EMPTY_ARRAY;
 		}
 		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
 	const enabledControls = controls
@@ -66,7 +67,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		enabledControls.length === 1 &&
 		enabledControls[ 0 ].name === 'none'
 	) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 
 	return enabledControls;

package/src/components/block-icon/index.js

@@ -10,14 +10,16 @@ import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { memo } from '@wordpress/element';
 
-function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className, context } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,

package/src/components/block-icon/test/index.js

@@ -13,6 +13,10 @@ import { image } from '@wordpress/icons';
  */
 import BlockIcon from '../';
 
+function getIconWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
@@ -23,13 +27,13 @@ describe( 'BlockIcon', () => {
 	it( 'renders a span without the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect( container.firstChild ).not.toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).not.toHaveClass( 'has-colors' );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		expect( container.firstChild ).toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'has-colors' );
 	} );
 
 	it( 'supports adding a className to the wrapper', () => {
@@ -37,7 +41,7 @@ describe( 'BlockIcon', () => {
 			<BlockIcon icon={ image } className="foo-bar" />
 		);
 
-		expect( container.firstChild ).toHaveClass( 'foo-bar' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
@@ -51,7 +55,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).not.toHaveAttribute( 'style' );
+		expect( getIconWrapper( container ) ).not.toHaveAttribute( 'style' );
 	} );
 
 	it( 'adds background and foreground styles when colors are enabled', () => {
@@ -66,7 +70,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( getIconWrapper( container ) ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );