@wordpress/block-editor 9.1.0 → 9.4.0

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,CACrCE,aADqC,CAAxB,CAEZO,MAFY,CAEJ;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAgB,kCAAkCC,IAAlC,CAAwCD,IAAxC,CAAhB;AAAA,GAFI,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(\n\t\tclipboardData\n\t).filter( ( { type } ) => /^image\\/(?:jpe?g|png|gif|webp)$/.test( type ) );\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"],"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"]}

package/build-module/utils/selection.js

@@ -0,0 +1,24 @@
+/**
+ * A robust way to retain selection position through various
+ * transforms is to insert a special character at the position and
+ * then recover it.
+ */
+export const START_OF_SELECTED_AREA = '\u0086';
+/**
+ * Retrieve the block attribute that contains the selection position.
+ *
+ * @param {Object} blockAttributes Block attributes.
+ * @return {string|void} The name of the block attribute that was previously selected.
+ */
+
+export function retrieveSelectedAttribute(blockAttributes) {
+  if (!blockAttributes) {
+    return;
+  }
+
+  return Object.keys(blockAttributes).find(name => {
+    const value = blockAttributes[name];
+    return typeof value === 'string' && value.indexOf(START_OF_SELECTED_AREA) !== -1;
+  });
+}
+//# sourceMappingURL=selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/utils/selection.js"],"names":["START_OF_SELECTED_AREA","retrieveSelectedAttribute","blockAttributes","Object","keys","find","name","value","indexOf"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,sBAAsB,GAAG,QAA/B;AAEP;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,yBAAT,CAAoCC,eAApC,EAAsD;AAC5D,MAAK,CAAEA,eAAP,EAAyB;AACxB;AACA;;AAED,SAAOC,MAAM,CAACC,IAAP,CAAaF,eAAb,EAA+BG,IAA/B,CAAuCC,IAAF,IAAY;AACvD,UAAMC,KAAK,GAAGL,eAAe,CAAEI,IAAF,CAA7B;AACA,WACC,OAAOC,KAAP,KAAiB,QAAjB,IACAA,KAAK,CAACC,OAAN,CAAeR,sBAAf,MAA4C,CAAC,CAF9C;AAIA,GANM,CAAP;AAOA","sourcesContent":["/**\n * A robust way to retain selection position through various\n * transforms is to insert a special character at the position and\n * then recover it.\n */\nexport const START_OF_SELECTED_AREA = '\\u0086';\n\n/**\n * Retrieve the block attribute that contains the selection position.\n *\n * @param {Object} blockAttributes Block attributes.\n * @return {string|void} The name of the block attribute that was previously selected.\n */\nexport function retrieveSelectedAttribute( blockAttributes ) {\n\tif ( ! blockAttributes ) {\n\t\treturn;\n\t}\n\n\treturn Object.keys( blockAttributes ).find( ( name ) => {\n\t\tconst value = blockAttributes[ name ];\n\t\treturn (\n\t\t\ttypeof value === 'string' &&\n\t\t\tvalue.indexOf( START_OF_SELECTED_AREA ) !== -1\n\t\t);\n\t} );\n}\n"]}

package/build-module/utils/transform-styles/transforms/wrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,IAAI,GAAG,UAAEC,SAAF;AAAA,MAAaC,MAAb,uEAAsB,EAAtB;AAAA,SAAgCC,IAAF,IAAY;AACtD;AACD;AACA;AACA;AACA;AACA;AACA;AACC,UAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,UAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,eAAOF,QAAP;AACA,OAHqC,CAKtC;;;AACA;AACC,YAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,iBAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,OAVqC,CAYtC;;AACA,aAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,KAdD;;AAgBA,QAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,aAAO,EACN,GAAGP,IADG;AAENQ,QAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,OAAP;AAIA;;AAED,WAAOD,IAAP;AACA,GAhCY;AAAA,CAAb;;AAkCA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\n/**\n * Creates a callback to modify selectors so they only apply within a certain\n * namespace.\n *\n * @param {string}   namespace Namespace to prefix selectors with.\n * @param {string[]} ignore    Selectors to not prefix.\n *\n * @return {(node: Object) => Object} Callback to wrap selectors.\n */\nconst wrap = ( namespace, ignore = [] ) => ( node ) => {\n\t/**\n\t * Updates selector if necessary.\n\t *\n\t * @param {string} selector Selector to modify.\n\t *\n\t * @return {string} Updated selector.\n\t */\n\tconst updateSelector = ( selector ) => {\n\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\treturn selector;\n\t\t}\n\n\t\t// Anything other than a root tag is always prefixed.\n\t\t{\n\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t}\n\t\t}\n\n\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t};\n\n\tif ( node.type === 'rule' ) {\n\t\treturn {\n\t\t\t...node,\n\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t};\n\t}\n\n\treturn node;\n};\n\nexport default wrap;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,IAAI,GACT,UAAEC,SAAF;AAAA,MAAaC,MAAb,uEAAsB,EAAtB;AAAA,SACEC,IAAF,IAAY;AACX;AACF;AACA;AACA;AACA;AACA;AACA;AACE,UAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,UAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,eAAOF,QAAP;AACA,OAHqC,CAKtC;;;AACA;AACC,YAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,iBAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,OAVqC,CAYtC;;AACA,aAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,KAdD;;AAgBA,QAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,aAAO,EACN,GAAGP,IADG;AAENQ,QAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,OAAP;AAIA;;AAED,WAAOD,IAAP;AACA,GAjCD;AAAA,CADD;;AAoCA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\n/**\n * Creates a callback to modify selectors so they only apply within a certain\n * namespace.\n *\n * @param {string}   namespace Namespace to prefix selectors with.\n * @param {string[]} ignore    Selectors to not prefix.\n *\n * @return {(node: Object) => Object} Callback to wrap selectors.\n */\nconst wrap =\n\t( namespace, ignore = [] ) =>\n\t( node ) => {\n\t\t/**\n\t\t * Updates selector if necessary.\n\t\t *\n\t\t * @param {string} selector Selector to modify.\n\t\t *\n\t\t * @return {string} Updated selector.\n\t\t */\n\t\tconst updateSelector = ( selector ) => {\n\t\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\t\treturn selector;\n\t\t\t}\n\n\t\t\t// Anything other than a root tag is always prefixed.\n\t\t\t{\n\t\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t\t};\n\n\t\tif ( node.type === 'rule' ) {\n\t\t\treturn {\n\t\t\t\t...node,\n\t\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t\t};\n\t\t}\n\n\t\treturn node;\n\t};\n\nexport default wrap;\n"]}

package/build-style/style-rtl.css

@@ -368,7 +368,7 @@
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-  opacity: 0.5;
+  opacity: 0.2;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1654,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-right: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.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;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1679,31 +1668,11 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
-}
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
   width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-}
-.block-editor-panel-color-gradient-settings__item.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-
 .block-editor-panel-color-gradient-settings__color-indicator {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
@@ -1722,6 +1691,7 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -1747,6 +1717,10 @@
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1894,6 +1868,10 @@
   font-size: 12px;
 }
 
+.block-editor-duotone-control__unset-indicator {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2015,6 +1993,21 @@
   font-size: 12px;
 }
 
+.block-editor-inspector-popover-header {
+  margin-bottom: 16px;
+}
+
+[class].block-editor-inspector-popover-header__action {
+  height: 24px;
+}
+[class].block-editor-inspector-popover-header__action.has-icon {
+  min-width: 24px;
+  padding: 0;
+}
+[class].block-editor-inspector-popover-header__action:not(.has-icon) {
+  text-decoration: underline;
+}
+
 .items-justified-left {
   justify-content: flex-start;
 }
@@ -3055,8 +3048,7 @@
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3568,6 +3560,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
 }
 .color-block-support-panel .block-editor-contrast-checker {
   /**
@@ -3585,6 +3582,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 0;
+}
 
 .block-editor__padding-visualizer {
   position: absolute;

package/build-style/style.css

@@ -368,7 +368,7 @@
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-  opacity: 0.5;
+  opacity: 0.2;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1654,21 +1654,10 @@
   min-width: 0;
 }
 
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title {
-  display: flex;
-  gap: 8px;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  width: 12px;
-  height: 12px;
-  align-self: center;
-}
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator:first-child {
-  margin-left: 12px;
-}
-.block-editor-panel-color-gradient-settings.is-opened .block-editor-panel-color-gradient-settings__panel-title .component-color-indicator {
-  display: none;
+.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;
 }
+
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
     display: grid;
@@ -1679,31 +1668,11 @@
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
   margin-bottom: inherit;
 }
-.block-editor-panel-color-gradient-settings .block-editor-panel-color-gradient-settings__dropdown {
-  display: block;
-}
-
-.block-editor-panel-color-gradient-settings__dropdown {
-  width: 100%;
-}
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
   width: 280px;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
-}
-
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
-}
-.block-editor-panel-color-gradient-settings__item.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-
 .block-editor-panel-color-gradient-settings__color-indicator {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
@@ -1722,6 +1691,7 @@
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 24px;
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
@@ -1747,6 +1717,10 @@
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1894,6 +1868,10 @@
   font-size: 12px;
 }
 
+.block-editor-duotone-control__unset-indicator {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2015,6 +1993,21 @@
   font-size: 12px;
 }
 
+.block-editor-inspector-popover-header {
+  margin-bottom: 16px;
+}
+
+[class].block-editor-inspector-popover-header__action {
+  height: 24px;
+}
+[class].block-editor-inspector-popover-header__action.has-icon {
+  min-width: 24px;
+  padding: 0;
+}
+[class].block-editor-inspector-popover-header__action:not(.has-icon) {
+  text-decoration: underline;
+}
+
 .items-justified-left {
   justify-content: flex-start;
 }
@@ -3055,8 +3048,7 @@
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3568,6 +3560,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
+  /**
+   * After converting PanelColorGradientSettings to render as a ToolsPanel
+   * we need to remove the top margin when wrapping inner content due to
+   * rendering via SlotFills.
+   */
 }
 .color-block-support-panel .block-editor-contrast-checker {
   /**
@@ -3585,6 +3582,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
+.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
+  margin-top: 0;
+}
 
 .block-editor__padding-visualizer {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.1.0",
+	"version": "9.4.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,33 +32,33 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@react-spring/web": "^9.2.4",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/api-fetch": "^6.6.0",
-		"@wordpress/blob": "^3.9.0",
-		"@wordpress/blocks": "^11.8.0",
-		"@wordpress/components": "^19.11.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/data": "^6.9.0",
-		"@wordpress/date": "^4.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/dom": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/html-entities": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/is-shallow-equal": "^4.9.0",
-		"@wordpress/keyboard-shortcuts": "^3.7.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/notices": "^3.9.0",
-		"@wordpress/rich-text": "^5.7.0",
-		"@wordpress/shortcode": "^3.9.0",
-		"@wordpress/style-engine": "^0.8.0",
-		"@wordpress/token-list": "^2.9.0",
-		"@wordpress/url": "^3.10.0",
-		"@wordpress/warning": "^2.9.0",
-		"@wordpress/wordcount": "^3.9.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",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -67,7 +67,7 @@
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
-		"rememo": "^3.0.0",
+		"rememo": "^4.0.0",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

package/src/autocompleters/block.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, orderBy } from 'lodash';
+import { orderBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -21,6 +21,7 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
 
+const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
 
 /** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */

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

@@ -31,9 +31,8 @@ export default function BlockActions( {
 		canMoveBlocks,
 		canRemoveBlocks,
 	} = useSelect( blockEditorStore );
-	const { getDefaultBlockName, getGroupingBlockName } = useSelect(
-		blocksStore
-	);
+	const { getDefaultBlockName, getGroupingBlockName } =
+		useSelect( blocksStore );
 
 	const blocks = getBlocksByClientId( clientIds );
 	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );

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

@@ -76,12 +76,10 @@ function BlockAlignmentUI( {
 							<MenuGroup className="block-editor-block-alignment-control__menu-group">
 								{ enabledControls.map(
 									( { name: controlName, info } ) => {
-										const {
-											icon,
-											title,
-										} = BLOCK_ALIGNMENTS_CONTROLS[
-											controlName
-										];
+										const { icon, title } =
+											BLOCK_ALIGNMENTS_CONTROLS[
+												controlName
+											];
 										// If no value is provided, mark as selected the `none` option.
 										const isSelected =
 											controlName === value ||

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -13,6 +9,8 @@ import {
 	__experimentalAlignmentMatrixControl as AlignmentMatrixControl,
 } from '@wordpress/components';
 
+const noop = () => {};
+
 function BlockAlignmentMatrixControl( props ) {
 	const {
 		label = __( 'Change matrix alignment' ),

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

@@ -22,11 +22,8 @@ import { store as blockEditorStore } from '../../store';
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const {
-			getSelectionStart,
-			getSelectedBlockClientId,
-			getBlockParents,
-		} = select( blockEditorStore );
+		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
+			select( blockEditorStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
 			parents: getBlockParents( selectedBlockClientId ),

package/src/components/block-compare/test/block-view.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import BlockView from '../block-view';
 
+const noop = () => {};
+
 describe( 'BlockView', () => {
 	test( 'should match snapshot', () => {
 		const wrapper = shallow(

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

@@ -11,11 +11,8 @@ import { store as blockEditorStore } from '../../store';
 export default function useBlockOverlayActive( clientId ) {
 	return useSelect(
 		( select ) => {
-			const {
-				isBlockSelected,
-				hasSelectedInnerBlock,
-				canEditBlock,
-			} = select( blockEditorStore );
+			const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } =
+				select( blockEditorStore );
 
 			return (
 				! canEditBlock( clientId ) ||

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

@@ -25,10 +25,10 @@ const Context = createContext( {} );
  */
 export function BlockContextProvider( { value, children } ) {
 	const context = useContext( Context );
-	const nextValue = useMemo( () => ( { ...context, ...value } ), [
-		context,
-		value,
-	] );
+	const nextValue = useMemo(
+		() => ( { ...context, ...value } ),
+		[ context, value ]
+	);
 
 	return <Context.Provider value={ nextValue } children={ children } />;
 }

package/src/components/block-controls/hook.js

@@ -17,9 +17,8 @@ export default function useBlockControlsFill( group, shareWithChildBlocks ) {
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
 		( select ) => {
-			const { getBlockName, hasSelectedInnerBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockName, hasSelectedInnerBlock } =
+				select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
 			return (
 				shareWithChildBlocks &&

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

@@ -41,7 +41,7 @@ export default function BlockDraggableChip( { icon } ) {
 	);
 
 	return (
-		<View style={ [ containerStyle, shadowStyle ] }>
+		<View style={ [ containerStyle, shadowStyle ] } testID="draggable-chip">
 			<BlockIcon icon={ dragHandle } />
 			{ icon && <BlockIcon icon={ icon } /> }
 		</View>

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

@@ -22,11 +22,8 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const {
-				canMoveBlocks,
-				getBlockRootClientId,
-				getBlockName,
-			} = select( blockEditorStore );
+			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 
@@ -39,15 +36,11 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 	const isDragging = useRef( false );
-	const [
-		startScrolling,
-		scrollOnDragOver,
-		stopScrolling,
-	] = useScrollWhenDragging();
+	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
+		useScrollWhenDragging();
 
-	const { startDraggingBlocks, stopDraggingBlocks } = useDispatch(
-		blockEditorStore
-	);
+	const { startDraggingBlocks, stopDraggingBlocks } =
+		useDispatch( blockEditorStore );
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {