@wordpress/block-editor 9.5.0 → 9.7.1-next.d6164808d3.0

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

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

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

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

package/build-module/utils/pasting.js

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

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

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

package/build-style/style-rtl.css

@@ -1083,7 +1083,20 @@
   overflow-y: visible;
   pointer-events: none;
 }
-.components-popover.block-editor-block-popover .components-popover__content > * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+  pointer-events: all;
+}
+
+.components-popover.block-editor-block-popover__inbetween {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter {
+  pointer-events: all;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
   pointer-events: all;
 }
 
@@ -1185,6 +1198,12 @@
 .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
 }
+.block-editor-block-styles__variants .block-editor-block-styles__item-text {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
 
 .block-editor-block-styles__block-preview-container,
 .block-editor-block-styles__block-preview-container * {
@@ -1665,6 +1684,10 @@
   min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs .block-editor-color-gradient-control__panel {
+  padding: 16px;
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
   display: block;
 }
@@ -1680,8 +1703,9 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
+  width: 260px;
+  padding: 16px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1697,6 +1721,7 @@
 */
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
+  max-width: 100%;
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1721,19 +1746,26 @@
   padding: 0;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: 46px;
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: right;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
 }
-
-.block-editor-color-gradient-control__tab-panel {
-  padding-top: 8px;
+.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
+  flex-shrink: 0;
 }
 
 .block-editor-contrast-checker > .components-notice {
@@ -1846,9 +1878,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1868,9 +1897,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1887,9 +1913,6 @@
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2767,14 +2790,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  left: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2920,6 +2949,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3269,9 +3299,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  left: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  left: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3467,10 +3497,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3574,7 +3600,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
 .typography-block-support-panel .components-font-size-picker__controls,
 .typography-block-support-panel .block-editor-text-decoration-control__buttons,
 .typography-block-support-panel .block-editor-text-transform-control__buttons {
@@ -4194,6 +4219,108 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   }
 }
 
+.tools-panel-item-spacing {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-row-gap: 4px;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-right: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  color: #757575;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-right: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-left: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  grid-column: 3/3;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
+  grid-column: span 2;
+  margin-right: 8px;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+  width: 124px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
+  grid-column: span 3;
+  padding-left: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-range-control__wrapper {
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+  z-index: 3;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  margin-left: 4px;
+  grid-column: 1/1;
+  justify-self: left;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
+  grid-column: span 3;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/build-style/style.css

@@ -1083,7 +1083,20 @@
   overflow-y: visible;
   pointer-events: none;
 }
-.components-popover.block-editor-block-popover .components-popover__content > * {
+.components-popover.block-editor-block-popover:not(.block-editor-block-popover__inbetween) .components-popover__content * {
+  pointer-events: all;
+}
+
+.components-popover.block-editor-block-popover__inbetween {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween * {
+  pointer-events: none;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter {
+  pointer-events: all;
+}
+.components-popover.block-editor-block-popover__inbetween .is-with-inserter * {
   pointer-events: all;
 }
 
@@ -1185,6 +1198,12 @@
 .block-editor-block-styles__variants .block-editor-block-styles__item.is-active:focus {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 2px var(--wp-admin-theme-color);
 }
+.block-editor-block-styles__variants .block-editor-block-styles__item-text {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
 
 .block-editor-block-styles__block-preview-container,
 .block-editor-block-styles__block-preview-container * {
@@ -1665,6 +1684,10 @@
   min-width: 0;
 }
 
+.block-editor-color-gradient-control__tabs .block-editor-color-gradient-control__panel {
+  padding: 16px;
+}
+
 .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings, .block-editor-panel-color-gradient-settings.block-editor-panel-color-gradient-settings > div:not(:first-of-type) {
   display: block;
 }
@@ -1680,8 +1703,9 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
+  width: 260px;
+  padding: 16px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1697,6 +1721,7 @@
 */
 .block-editor-tools-panel-color-gradient-settings__item {
   padding: 0;
+  max-width: 100%;
   border-left: 1px solid rgba(0, 0, 0, 0.1);
   border-right: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -1721,19 +1746,26 @@
   padding: 0;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button {
-  height: 46px;
+  height: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-align: left;
 }
 .block-editor-tools-panel-color-gradient-settings__dropdown > button.is-open {
   background: #f0f0f0;
   color: var(--wp-admin-theme-color);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown .block-editor-panel-color-gradient-settings__color-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
 }
-
-.block-editor-color-gradient-control__tab-panel {
-  padding-top: 8px;
+.block-editor-panel-color-gradient-settings__dropdown .component-color-indicator {
+  flex-shrink: 0;
 }
 
 .block-editor-contrast-checker > .components-notice {
@@ -1846,9 +1878,6 @@
 .block-editor-date-format-picker__custom-format-select-control.components-base-control {
   margin-bottom: 0;
 }
-.block-editor-date-format-picker__custom-format-select-control .components-custom-select-control__button {
-  width: 100%;
-}
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
   border-top: 1px solid #ddd;
@@ -1868,9 +1897,6 @@
 .block-editor-duotone-control__popover .components-menu-group__label {
   padding: 0;
 }
-.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
-  margin: 16px 0 12px;
-}
 .block-editor-duotone-control__popover .components-circular-option-picker__swatches {
   display: grid;
   grid-template-columns: repeat(6, 28px);
@@ -1887,9 +1913,6 @@
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
-.components-font-appearance-control {
-  margin-bottom: 24px;
-}
 .components-font-appearance-control ul li {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2767,14 +2790,20 @@
   width: 100%;
   transform: translateY(-50%);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor-wrapper {
+  position: relative;
+  max-width: min(110px, 40%);
+  width: 100%;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
-  display: inline-block;
   padding: 2px 6px;
-  max-width: min(100px, 40%);
-  overflow: hidden;
-  text-overflow: ellipsis;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
@@ -2920,6 +2949,7 @@
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
+  margin: 0;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .components-base-control .components-base-control__field {
   margin-bottom: 0;
@@ -3269,9 +3299,9 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .components-popover .block-editor-url-input .components-spinner,
 .block-editor-url-input .components-spinner {
   position: absolute;
-  right: 8px 8px 8px 12px;
-  bottom: 8px 8px 8px 12px8px1;
   margin: 0;
+  top: calc(50% - 16px / 2);
+  right: 8px;
 }
 
 .block-editor-url-input__input[type=text] {
@@ -3467,10 +3497,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .block-editor-url-popover__link-viewer .block-editor-url-input .components-base-control__field {
   margin-bottom: 0;
 }
-.block-editor-url-popover__link-editor .block-editor-url-input .components-spinner,
-.block-editor-url-popover__link-viewer .block-editor-url-input .components-spinner {
-  bottom: 8px 8px 8px 12px1;
-}
 
 .block-editor-url-popover__link-viewer-url {
   margin: 7px;
@@ -3574,7 +3600,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: span 1;
 }
 
-.typography-block-support-panel .components-font-appearance-control,
 .typography-block-support-panel .components-font-size-picker__controls,
 .typography-block-support-panel .block-editor-text-decoration-control__buttons,
 .typography-block-support-panel .block-editor-text-transform-control__buttons {
@@ -4194,6 +4219,108 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   }
 }
 
+.tools-panel-item-spacing {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-row-gap: 4px;
+}
+
+.component-spacing-sizes-control {
+  box-sizing: border-box;
+  padding-bottom: 12px;
+  width: 100%;
+  display: contents;
+}
+.component-spacing-sizes-control legend {
+  padding: 0;
+  grid-column: 1/1;
+  grid-row: 1/1;
+  align-self: center;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
+  grid-column: 1/1;
+  min-height: 30px;
+  justify-content: left;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
+  margin-top: 0;
+  margin-left: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  color: #757575;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
+  grid-column: 2/2;
+  justify-self: left;
+  grid-row: 1/1;
+  align-self: center;
+  margin-left: 4px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
+  grid-column: 2/2;
+  grid-row: 1/1;
+  justify-self: end;
+  margin-right: 4px;
+  padding: 0;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
+  grid-column: 3/3;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+}
+.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
+  grid-column: 3/3;
+  grid-row: 1/1;
+  justify-self: end;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
+  grid-column: span 2;
+  margin-left: 8px;
+  padding-right: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
+  width: 124px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
+  grid-column: span 3;
+  padding-right: 8px;
+  height: 30px;
+}
+.component-spacing-sizes-control .components-range-control__wrapper {
+  margin-bottom: 0;
+}
+.component-spacing-sizes-control .components-range-control__mark {
+  height: 4px;
+  width: 3px;
+  background-color: #fff;
+  z-index: 1;
+}
+.component-spacing-sizes-control .components-range-control__marks {
+  margin-top: 17px;
+}
+.component-spacing-sizes-control .components-range-control__marks :first-child {
+  display: none;
+}
+.component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
+  z-index: 3;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
+  margin-right: 4px;
+  grid-column: 1/1;
+  justify-self: left;
+  font-size: 12px;
+}
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
+  grid-column: span 3;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;