@wordpress/block-editor 9.0.0 → 9.3.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/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

@@ -107,14 +107,6 @@
   margin-top: 0;
 }
 
-.block-editor-block-alignment-matrix-control__popover .components-popover__content {
-  min-width: 0;
-  width: auto;
-}
-.block-editor-block-alignment-matrix-control__popover .components-popover__content > div {
-  padding: 8px;
-}
-
 .block-editor-block-icon {
   display: flex;
   align-items: center;
@@ -524,18 +516,8 @@
   }
 }
 
-.block-editor-block-list__block-popover-inserter {
-  position: absolute;
-  top: -9999em;
-  margin-bottom: 14px;
-}
-.block-editor-block-list__block-popover-inserter.is-visible {
-  position: static;
-}
-
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon {
+.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
   border-radius: 2px;
   color: #fff;
@@ -544,8 +526,7 @@
   height: 24px;
 }
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon:hover,
-.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover,
-.block-editor-block-list__block-popover-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
+.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon:hover {
   color: #fff;
   background: var(--wp-admin-theme-color);
 }
@@ -889,7 +870,7 @@
   margin: 0.67em 0;
 }
 
-.block-editor-block-content-overlay.overlay-active::before {
+.block-editor-block-content-overlay::before {
   content: "";
   position: absolute;
   top: 0;
@@ -901,16 +882,10 @@
   border-radius: 2px;
   z-index: 10;
 }
-.block-editor-block-content-overlay:hover:not(.is-dragging-blocks).overlay-active::before, .block-editor-block-content-overlay.parent-highlighted.overlay-active::before {
+.block-editor-block-content-overlay:hover:not(.is-dragging-blocks)::before {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
 }
-.block-editor-block-content-overlay.overlay-active:not(.is-dragging-blocks) * {
-  pointer-events: none;
-}
-.block-editor-block-content-overlay.is-dragging-blocks {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
 
 .block-editor-block-draggable-chip-wrapper {
   position: absolute;
@@ -1094,6 +1069,7 @@
   width: max-content;
   background: none;
   border: none;
+  outline: none;
   box-shadow: none;
   overflow-y: visible;
   pointer-events: none;
@@ -1240,10 +1216,6 @@
   font-size: 14px;
 }
 
-.block-editor-block-switcher__popover {
-  margin-right: 6px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
 }
@@ -1286,39 +1258,16 @@
   min-width: 300px;
 }
 
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-  min-width: auto;
-  display: flex;
-  background: #fff;
-  padding: 0;
-}
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div .components-menu-group {
-  margin: 0;
-}
-
-.block-editor-block-switcher__popover .components-popover__content .block-editor-block-styles {
-  margin: 0 -3px;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body {
-  border: 0;
-  position: relative;
-  z-index: 1;
-}
-.block-editor-block-switcher__popover .components-popover__content .components-panel__body + .components-panel__body {
-  border-top: 1px solid #e0e0e0;
-}
-
 .block-editor-block-switcher__popover__preview__parent .block-editor-block-switcher__popover__preview__container {
   position: absolute;
   top: -12px;
-  right: calc(100% + 32px);
+  right: calc(100% + 16px);
 }
 
 .block-editor-block-switcher__preview__popover {
   display: none;
 }
 .block-editor-block-switcher__preview__popover.components-popover {
-  margin-right: 4px;
   margin-top: 11px;
 }
 @media (min-width: 782px) {
@@ -1331,6 +1280,7 @@
   border: 1px solid #1e1e1e;
   background: #fff;
   border-radius: 2px;
+  outline: none;
 }
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
   width: 300px;
@@ -1631,7 +1581,7 @@
 .components-border-radius-control .components-border-radius-control__wrapper > .components-unit-control-wrapper {
   width: 110px;
   margin-bottom: 0;
-  margin-left: 8px;
+  margin-left: 12px;
   flex-shrink: 0;
 }
 .components-border-radius-control .components-border-radius-control__wrapper .components-range-control {
@@ -1653,7 +1603,7 @@
   width: 70%;
   flex-wrap: wrap;
 }
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-unit-control-wrapper {
+.components-border-radius-control .components-border-radius-control__input-controls-wrapper .components-border-radius-control__tooltip-wrapper {
   width: calc(50% - 8px);
   margin-bottom: 8px;
   margin-left: 8px;
@@ -1662,6 +1612,7 @@
   display: flex;
   justify-content: center;
   margin-right: 2px;
+  margin-top: 3px;
 }
 .components-border-radius-control .component-border-radius-control__linked-button.has-icon svg {
   margin-left: 0;
@@ -1703,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;
@@ -1728,45 +1668,59 @@
 .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-content .components-popover__content > div {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__color-indicator {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-@media (min-width: 782px) {
-  .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-    margin-left: 156px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-top .components-popover__content {
-    margin-top: -60px !important;
-  }
-  .block-editor-panel-color-gradient-settings__dropdown-content.is-from-bottom .components-popover__content {
-    margin-bottom: -60px !important;
-  }
+/**
+* The following styles replicate the separated border of the
+* `ItemGroup` component but allows for hidden items. This is because
+* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+* must at least render a placeholder which would otherwise interfere
+* with the `:last-child` styles.
+*/
+.block-editor-tools-panel-color-gradient-settings__item {
+  padding: 0;
+  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);
 }
-.block-editor-panel-color-gradient-settings__dropdown:last-child > div {
-  border-bottom-width: 0;
+.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);
+}
+.block-editor-tools-panel-color-gradient-settings__item.last {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.block-editor-tools-panel-color-gradient-settings__item > div,
+.block-editor-tools-panel-color-gradient-settings__item > div > button {
+  border-radius: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__item {
-  padding-top: 12px !important;
-  padding-bottom: 12px !important;
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+  display: block;
+  padding: 0;
 }
-.block-editor-panel-color-gradient-settings__item .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+.block-editor-tools-panel-color-gradient-settings__dropdown > button {
+  height: 46px;
 }
-.block-editor-panel-color-gradient-settings__item.is-open {
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
 
+.block-editor-panel-color-gradient-settings__dropdown {
+  width: 100%;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1892,7 +1846,7 @@
   text-align: right;
 }
 
-.block-editor-duotone-control__popover > .components-popover__content > div {
+.block-editor-duotone-control__popover > .components-popover__content {
   padding: 16px;
   width: 280px;
 }
@@ -1914,10 +1868,6 @@
   font-size: 12px;
 }
 
-.block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
-  margin-right: -14px;
-}
-
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2039,6 +1989,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;
 }
@@ -2887,10 +2852,11 @@
   height: 1px;
 }
 
-.block-editor-list-view-drop-indicator:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
   margin-right: 0;
   border: none;
   box-shadow: none;
+  outline: none;
 }
 
 .block-editor-list-view-placeholder {
@@ -3078,8 +3044,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;
@@ -3119,13 +3084,10 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   min-width: auto;
   margin-bottom: 8px;
   box-shadow: none;
-  border: 1px solid #1e1e1e;
-  border-radius: 2px;
-  background-color: #fff;
+  outline: none;
 }
-.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
-  border: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
@@ -3578,44 +3540,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-right .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-  width: 282px;
-}
-
-@media (min-width: 782px) {
-  .block-editor__border-box-control__popover .components-popover__content,
-.block-editor__border-box-control__popover-left .components-popover__content {
-    margin-left: 52px !important;
-  }
-
-  .block-editor__border-box-control__popover-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom .components-popover__content {
-    margin-left: 107px !important;
-  }
-
-  .block-editor__border-box-control__popover-right .components-popover__content {
-    margin-left: 162px !important;
-  }
-
-  .block-editor__border-box-control__popover.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-top .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-top .components-popover__content {
-    margin-top: -52px !important;
-  }
-  .block-editor__border-box-control__popover.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-top.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-right.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-bottom.is-from-bottom .components-popover__content,
-.block-editor__border-box-control__popover-left.is-from-bottom .components-popover__content {
-    margin-bottom: -52px !important;
-  }
-}
 .dimensions-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3633,15 +3557,9 @@ 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 */
   /**
-   * The following styles replicate the separated border of the
-   * `ItemGroup` component but allows for hidden items. This is because
-   * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
-   * must at least render a placeholder which would otherwise interfere
-   * with the `:last-child` styles.
-   */
-  /**
-   * The following few styles fix the layout and spacing for the due to the
-   * introduced wrapper element by the `Item` component.
+   * 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 {
@@ -3660,42 +3578,8 @@ 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 {
-  padding: 0;
-  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);
-}
 .color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.last {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div,
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item > div > button {
-  border-radius: inherit;
-}
-.color-block-support-panel .block-editor-panel-color-gradient-settings__color-indicator {
-  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown {
-  display: block;
-  padding: 0;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button {
-  height: 46px;
-}
-.color-block-support-panel .block-editor-tools-panel-color-dropdown > button.is-open {
-  background: #f0f0f0;
-  color: var(--wp-admin-theme-color);
-}
-.color-block-support-panel .color-block-support-panel__item-group > div {
-  grid-column: span 2;
-  border-radius: inherit;
+  margin-top: 0;
 }
 
 .block-editor__padding-visualizer {
@@ -3880,6 +3764,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
+  outline: none;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > * {
   border-right: 1px solid #ccc;
@@ -4152,7 +4037,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-top: 1px solid #ddd;
 }
 
-.block-editor-inserter__popover.is-quick > .components-popover__content > div {
+.block-editor-inserter__popover.is-quick > .components-popover__content {
   padding: 0;
 }
 
@@ -4236,9 +4121,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   padding-right: 8px;
 }
 
-.block-editor-post-preview__dropdown-content .components-popover__content {
-  overflow-y: visible;
-}
 .block-editor-post-preview__dropdown-content.edit-post-post-preview-dropdown .components-menu-group:first-child {
   padding-bottom: 8px;
 }