@wordpress/block-editor 12.24.0 → 12.26.0

package/build-module/utils/object.js

@@ -51,4 +51,20 @@ export const getValueFromObjectPath = (object, path, defaultValue) => {
   });
   return (_value = value) !== null && _value !== void 0 ? _value : defaultValue;
 };
+
+/**
+ * Helper util to filter out objects with duplicate values for a given property.
+ *
+ * @param {Object[]} array    Array of objects to filter.
+ * @param {string}   property Property to filter unique values by.
+ *
+ * @return {Object[]} Array of objects with unique values for the specified property.
+ */
+export function uniqByProperty(array, property) {
+  const seen = new Set();
+  return array.filter(item => {
+    const value = item[property];
+    return seen.has(value) ? false : seen.add(value);
+  });
+}
 //# sourceMappingURL=object.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects. Supports arrays, too.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\n}\n\n/**\n * Helper util to return a value from a certain path of the object.\n * Path is specified as either:\n * - a string of properties, separated by dots, for example: \"x.y\".\n * - an array of properties, for example `[ 'x', 'y' ]`.\n * You can also specify a default value in case the result is nullish.\n *\n * @param {Object}       object       Input object.\n * @param {string|Array} path         Path to the object property.\n * @param {*}            defaultValue Default value if the value at the specified path is nullish.\n * @return {*} Value of the object property at the specified path.\n */\nexport const getValueFromObjectPath = ( object, path, defaultValue ) => {\n\tconst arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC","ignoreList":[]}
+{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName","uniqByProperty","array","property","seen","Set","filter","item","has","add"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects. Supports arrays, too.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\n}\n\n/**\n * Helper util to return a value from a certain path of the object.\n * Path is specified as either:\n * - a string of properties, separated by dots, for example: \"x.y\".\n * - an array of properties, for example `[ 'x', 'y' ]`.\n * You can also specify a default value in case the result is nullish.\n *\n * @param {Object}       object       Input object.\n * @param {string|Array} path         Path to the object property.\n * @param {*}            defaultValue Default value if the value at the specified path is nullish.\n * @return {*} Value of the object property at the specified path.\n */\nexport const getValueFromObjectPath = ( object, path, defaultValue ) => {\n\tconst arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n\n/**\n * Helper util to filter out objects with duplicate values for a given property.\n *\n * @param {Object[]} array    Array of objects to filter.\n * @param {string}   property Property to filter unique values by.\n *\n * @return {Object[]} Array of objects with unique values for the specified property.\n */\nexport function uniqByProperty( array, property ) {\n\tconst seen = new Set();\n\treturn array.filter( ( item ) => {\n\t\tconst value = item[ property ];\n\t\treturn seen.has( value ) ? false : seen.add( value );\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAEC,KAAK,EAAEC,QAAQ,EAAG;EACjD,MAAMC,IAAI,GAAG,IAAIC,GAAG,CAAC,CAAC;EACtB,OAAOH,KAAK,CAACI,MAAM,CAAIC,IAAI,IAAM;IAChC,MAAMrB,KAAK,GAAGqB,IAAI,CAAEJ,QAAQ,CAAE;IAC9B,OAAOC,IAAI,CAACI,GAAG,CAAEtB,KAAM,CAAC,GAAG,KAAK,GAAGkB,IAAI,CAACK,GAAG,CAAEvB,KAAM,CAAC;EACrD,CAAE,CAAC;AACJ","ignoreList":[]}

package/build-module/utils/order-inserter-block-items.js

@@ -20,8 +20,12 @@ export const orderInserterBlockItems = (items, priority) => {
     let aIndex = priority.indexOf(aName);
     let bIndex = priority.indexOf(bName);
     // All other block items should come after that.
-    if (aIndex < 0) aIndex = priority.length;
-    if (bIndex < 0) bIndex = priority.length;
+    if (aIndex < 0) {
+      aIndex = priority.length;
+    }
+    if (bIndex < 0) {
+      bIndex = priority.length;
+    }
     return aIndex - bIndex;
   });
   return items;

package/build-module/utils/order-inserter-block-items.js.map

@@ -1 +1 @@
-{"version":3,"names":["orderInserterBlockItems","items","priority","sort","id","aName","bName","aIndex","indexOf","bIndex","length"],"sources":["@wordpress/block-editor/src/utils/order-inserter-block-items.js"],"sourcesContent":["/** @typedef {import('../store/selectors').WPEditorInserterItem} WPEditorInserterItem */\n\n/**\n * Helper function to order inserter block items according to a provided array of prioritized blocks.\n *\n * @param {WPEditorInserterItem[]} items    The array of editor inserter block items to be sorted.\n * @param {string[]}               priority The array of block names to be prioritized.\n * @return {WPEditorInserterItem[]} The sorted array of editor inserter block items.\n */\nexport const orderInserterBlockItems = ( items, priority ) => {\n\tif ( ! priority ) {\n\t\treturn items;\n\t}\n\n\titems.sort( ( { id: aName }, { id: bName } ) => {\n\t\t// Sort block items according to `priority`.\n\t\tlet aIndex = priority.indexOf( aName );\n\t\tlet bIndex = priority.indexOf( bName );\n\t\t// All other block items should come after that.\n\t\tif ( aIndex < 0 ) aIndex = priority.length;\n\t\tif ( bIndex < 0 ) bIndex = priority.length;\n\t\treturn aIndex - bIndex;\n\t} );\n\n\treturn items;\n};\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,uBAAuB,GAAGA,CAAEC,KAAK,EAAEC,QAAQ,KAAM;EAC7D,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAOD,KAAK;EACb;EAEAA,KAAK,CAACE,IAAI,CAAE,CAAE;IAAEC,EAAE,EAAEC;EAAM,CAAC,EAAE;IAAED,EAAE,EAAEE;EAAM,CAAC,KAAM;IAC/C;IACA,IAAIC,MAAM,GAAGL,QAAQ,CAACM,OAAO,CAAEH,KAAM,CAAC;IACtC,IAAII,MAAM,GAAGP,QAAQ,CAACM,OAAO,CAAEF,KAAM,CAAC;IACtC;IACA,IAAKC,MAAM,GAAG,CAAC,EAAGA,MAAM,GAAGL,QAAQ,CAACQ,MAAM;IAC1C,IAAKD,MAAM,GAAG,CAAC,EAAGA,MAAM,GAAGP,QAAQ,CAACQ,MAAM;IAC1C,OAAOH,MAAM,GAAGE,MAAM;EACvB,CAAE,CAAC;EAEH,OAAOR,KAAK;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["orderInserterBlockItems","items","priority","sort","id","aName","bName","aIndex","indexOf","bIndex","length"],"sources":["@wordpress/block-editor/src/utils/order-inserter-block-items.js"],"sourcesContent":["/** @typedef {import('../store/selectors').WPEditorInserterItem} WPEditorInserterItem */\n\n/**\n * Helper function to order inserter block items according to a provided array of prioritized blocks.\n *\n * @param {WPEditorInserterItem[]} items    The array of editor inserter block items to be sorted.\n * @param {string[]}               priority The array of block names to be prioritized.\n * @return {WPEditorInserterItem[]} The sorted array of editor inserter block items.\n */\nexport const orderInserterBlockItems = ( items, priority ) => {\n\tif ( ! priority ) {\n\t\treturn items;\n\t}\n\n\titems.sort( ( { id: aName }, { id: bName } ) => {\n\t\t// Sort block items according to `priority`.\n\t\tlet aIndex = priority.indexOf( aName );\n\t\tlet bIndex = priority.indexOf( bName );\n\t\t// All other block items should come after that.\n\t\tif ( aIndex < 0 ) {\n\t\t\taIndex = priority.length;\n\t\t}\n\t\tif ( bIndex < 0 ) {\n\t\t\tbIndex = priority.length;\n\t\t}\n\t\treturn aIndex - bIndex;\n\t} );\n\n\treturn items;\n};\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,uBAAuB,GAAGA,CAAEC,KAAK,EAAEC,QAAQ,KAAM;EAC7D,IAAK,CAAEA,QAAQ,EAAG;IACjB,OAAOD,KAAK;EACb;EAEAA,KAAK,CAACE,IAAI,CAAE,CAAE;IAAEC,EAAE,EAAEC;EAAM,CAAC,EAAE;IAAED,EAAE,EAAEE;EAAM,CAAC,KAAM;IAC/C;IACA,IAAIC,MAAM,GAAGL,QAAQ,CAACM,OAAO,CAAEH,KAAM,CAAC;IACtC,IAAII,MAAM,GAAGP,QAAQ,CAACM,OAAO,CAAEF,KAAM,CAAC;IACtC;IACA,IAAKC,MAAM,GAAG,CAAC,EAAG;MACjBA,MAAM,GAAGL,QAAQ,CAACQ,MAAM;IACzB;IACA,IAAKD,MAAM,GAAG,CAAC,EAAG;MACjBA,MAAM,GAAGP,QAAQ,CAACQ,MAAM;IACzB;IACA,OAAOH,MAAM,GAAGE,MAAM;EACvB,CAAE,CAAC;EAEH,OAAOR,KAAK;AACb,CAAC","ignoreList":[]}

package/build-module/utils/pasting.js

@@ -108,7 +108,9 @@ export function shouldDismissPastedFiles(files, html /*, plainText */) {
     // 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;
-    if (html.match(IMAGE_TAG)?.length !== 1) return true;
+    if (html.match(IMAGE_TAG)?.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
@@ -117,7 +119,9 @@ export function shouldDismissPastedFiles(files, html /*, plainText */) {
     // 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;
+    if (html.match(IMG_WITH_LOCAL_SRC)) {
+      return true;
+    }
   }
   return false;
 }

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

@@ -1 +1 @@
-{"version":3,"names":["getFilesFromDataTransfer","removeWindowsFragments","html","startStr","startIdx","indexOf","substring","length","endStr","endIdx","removeCharsetMetaTag","metaTag","startsWith","slice","getPasteEventData","clipboardData","plainText","getData","error1","error2","files","shouldDismissPastedFiles","type","IMAGE_TAG","match","IMG_WITH_LOCAL_SRC"],"sources":["@wordpress/block-editor/src/utils/pasting.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\n\n/**\n * Normalizes a given string of HTML to remove the Windows-specific \"Fragment\"\n * comments and any preceding and trailing content.\n *\n * @param {string} html the html to be normalized\n * @return {string} the normalized html\n */\nfunction removeWindowsFragments( html ) {\n\tconst startStr = '<!--StartFragment-->';\n\tconst startIdx = html.indexOf( startStr );\n\tif ( startIdx > -1 ) {\n\t\thtml = html.substring( startIdx + startStr.length );\n\t} else {\n\t\t// No point looking for EndFragment\n\t\treturn html;\n\t}\n\n\tconst endStr = '<!--EndFragment-->';\n\tconst endIdx = html.indexOf( endStr );\n\tif ( endIdx > -1 ) {\n\t\thtml = html.substring( 0, endIdx );\n\t}\n\n\treturn html;\n}\n\n/**\n * Removes the charset meta tag inserted by Chromium.\n * See:\n * - https://github.com/WordPress/gutenberg/issues/33585\n * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4\n *\n * @param {string} html the html to be stripped of the meta tag.\n * @return {string} the cleaned html\n */\nfunction removeCharsetMetaTag( html ) {\n\tconst metaTag = `<meta charset='utf-8'>`;\n\n\tif ( html.startsWith( metaTag ) ) {\n\t\treturn html.slice( metaTag.length );\n\t}\n\n\treturn html;\n}\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\t// Remove Windows-specific metadata appended within copied HTML text.\n\thtml = removeWindowsFragments( html );\n\n\t// Strip meta tag.\n\thtml = removeCharsetMetaTag( html );\n\n\tconst files = getFilesFromDataTransfer( clipboardData );\n\n\tif ( files.length && ! shouldDismissPastedFiles( files, html ) ) {\n\t\treturn { files };\n\t}\n\n\treturn { html, plainText, files: [] };\n}\n\n/**\n * Given a collection of DataTransfer files and HTML and plain text strings,\n * determine whether the files are to be dismissed in favor of the HTML.\n *\n * Certain office-type programs, like Microsoft Word or Apple Numbers,\n * will, upon copy, generate a screenshot of the content being copied and\n * attach it to the clipboard alongside the actual rich text that the user\n * sought to copy. In those cases, we should let Gutenberg handle the rich text\n * content and not the screenshot, since this allows Gutenberg to insert\n * meaningful blocks, like paragraphs, lists or even tables.\n *\n * @param {File[]} files File objects obtained from a paste event\n * @param {string} html  HTML content obtained from a paste event\n * @return {boolean}     True if the files should be dismissed\n */\nexport function shouldDismissPastedFiles( files, html /*, plainText */ ) {\n\t// The question is only relevant when there is actual HTML content and when\n\t// there is exactly one image file.\n\tif (\n\t\thtml &&\n\t\tfiles?.length === 1 &&\n\t\tfiles[ 0 ].type.indexOf( 'image/' ) === 0\n\t) {\n\t\t// A single <img> tag found in the HTML source suggests that the\n\t\t// content being pasted revolves around an image. Sometimes there are\n\t\t// other elements found, like <figure>, but we assume that the user's\n\t\t// intention is to paste the actual image file.\n\t\tconst IMAGE_TAG = /<\\s*img\\b/gi;\n\t\tif ( html.match( IMAGE_TAG )?.length !== 1 ) return true;\n\n\t\t// Even when there is exactly one <img> tag in the HTML payload, we\n\t\t// choose to weed out local images, i.e. those whose source starts with\n\t\t// \"file://\". These payloads occur in specific configurations, such as\n\t\t// when copying an entire document from Microsoft Word, that contains\n\t\t// text and exactly one image, and pasting that content using Google\n\t\t// Chrome.\n\t\tconst IMG_WITH_LOCAL_SRC = /<\\s*img\\b[^>]*\\bsrc=\"file:\\/\\//i;\n\t\tif ( html.match( IMG_WITH_LOCAL_SRC ) ) return true;\n\t}\n\n\treturn false;\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getFilesFromDataTransfer","removeWindowsFragments","html","startStr","startIdx","indexOf","substring","length","endStr","endIdx","removeCharsetMetaTag","metaTag","startsWith","slice","getPasteEventData","clipboardData","plainText","getData","error1","error2","files","shouldDismissPastedFiles","type","IMAGE_TAG","match","IMG_WITH_LOCAL_SRC"],"sources":["@wordpress/block-editor/src/utils/pasting.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getFilesFromDataTransfer } from '@wordpress/dom';\n\n/**\n * Normalizes a given string of HTML to remove the Windows-specific \"Fragment\"\n * comments and any preceding and trailing content.\n *\n * @param {string} html the html to be normalized\n * @return {string} the normalized html\n */\nfunction removeWindowsFragments( html ) {\n\tconst startStr = '<!--StartFragment-->';\n\tconst startIdx = html.indexOf( startStr );\n\tif ( startIdx > -1 ) {\n\t\thtml = html.substring( startIdx + startStr.length );\n\t} else {\n\t\t// No point looking for EndFragment\n\t\treturn html;\n\t}\n\n\tconst endStr = '<!--EndFragment-->';\n\tconst endIdx = html.indexOf( endStr );\n\tif ( endIdx > -1 ) {\n\t\thtml = html.substring( 0, endIdx );\n\t}\n\n\treturn html;\n}\n\n/**\n * Removes the charset meta tag inserted by Chromium.\n * See:\n * - https://github.com/WordPress/gutenberg/issues/33585\n * - https://bugs.chromium.org/p/chromium/issues/detail?id=1264616#c4\n *\n * @param {string} html the html to be stripped of the meta tag.\n * @return {string} the cleaned html\n */\nfunction removeCharsetMetaTag( html ) {\n\tconst metaTag = `<meta charset='utf-8'>`;\n\n\tif ( html.startsWith( metaTag ) ) {\n\t\treturn html.slice( metaTag.length );\n\t}\n\n\treturn html;\n}\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\t// Remove Windows-specific metadata appended within copied HTML text.\n\thtml = removeWindowsFragments( html );\n\n\t// Strip meta tag.\n\thtml = removeCharsetMetaTag( html );\n\n\tconst files = getFilesFromDataTransfer( clipboardData );\n\n\tif ( files.length && ! shouldDismissPastedFiles( files, html ) ) {\n\t\treturn { files };\n\t}\n\n\treturn { html, plainText, files: [] };\n}\n\n/**\n * Given a collection of DataTransfer files and HTML and plain text strings,\n * determine whether the files are to be dismissed in favor of the HTML.\n *\n * Certain office-type programs, like Microsoft Word or Apple Numbers,\n * will, upon copy, generate a screenshot of the content being copied and\n * attach it to the clipboard alongside the actual rich text that the user\n * sought to copy. In those cases, we should let Gutenberg handle the rich text\n * content and not the screenshot, since this allows Gutenberg to insert\n * meaningful blocks, like paragraphs, lists or even tables.\n *\n * @param {File[]} files File objects obtained from a paste event\n * @param {string} html  HTML content obtained from a paste event\n * @return {boolean}     True if the files should be dismissed\n */\nexport function shouldDismissPastedFiles( files, html /*, plainText */ ) {\n\t// The question is only relevant when there is actual HTML content and when\n\t// there is exactly one image file.\n\tif (\n\t\thtml &&\n\t\tfiles?.length === 1 &&\n\t\tfiles[ 0 ].type.indexOf( 'image/' ) === 0\n\t) {\n\t\t// A single <img> tag found in the HTML source suggests that the\n\t\t// content being pasted revolves around an image. Sometimes there are\n\t\t// other elements found, like <figure>, but we assume that the user's\n\t\t// intention is to paste the actual image file.\n\t\tconst IMAGE_TAG = /<\\s*img\\b/gi;\n\t\tif ( html.match( IMAGE_TAG )?.length !== 1 ) {\n\t\t\treturn true;\n\t\t}\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 ) ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/utils/selection.js

@@ -28,4 +28,11 @@ export function retrieveSelectedAttribute(blockAttributes) {
     value.toString().indexOf(START_OF_SELECTED_AREA) !== -1;
   });
 }
+export function findRichTextAttributeKey(blockType) {
+  for (const [key, value] of Object.entries(blockType.attributes)) {
+    if (value.source === 'rich-text' || value.source === 'html') {
+      return key;
+    }
+  }
+}
 //# sourceMappingURL=selection.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["RichTextData","START_OF_SELECTED_AREA","retrieveSelectedAttribute","blockAttributes","Object","keys","find","name","value","toString","indexOf"],"sources":["@wordpress/block-editor/src/utils/selection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RichTextData } from '@wordpress/rich-text';\n\n/**\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\t( typeof value === 'string' || value instanceof RichTextData ) &&\n\t\t\t// To do: refactor this to use rich text's selection instead, so we\n\t\t\t// no longer have to use on this hack inserting a special character.\n\t\t\tvalue.toString().indexOf( START_OF_SELECTED_AREA ) !== -1\n\t\t);\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,sBAAsB;;AAEnD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAG,QAAQ;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAAEC,eAAe,EAAG;EAC5D,IAAK,CAAEA,eAAe,EAAG;IACxB;EACD;EAEA,OAAOC,MAAM,CAACC,IAAI,CAAEF,eAAgB,CAAC,CAACG,IAAI,CAAIC,IAAI,IAAM;IACvD,MAAMC,KAAK,GAAGL,eAAe,CAAEI,IAAI,CAAE;IACrC,OACC,CAAE,OAAOC,KAAK,KAAK,QAAQ,IAAIA,KAAK,YAAYR,YAAY;IAC5D;IACA;IACAQ,KAAK,CAACC,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAET,sBAAuB,CAAC,KAAK,CAAC,CAAC;EAE3D,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["RichTextData","START_OF_SELECTED_AREA","retrieveSelectedAttribute","blockAttributes","Object","keys","find","name","value","toString","indexOf","findRichTextAttributeKey","blockType","key","entries","attributes","source"],"sources":["@wordpress/block-editor/src/utils/selection.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { RichTextData } from '@wordpress/rich-text';\n\n/**\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\t( typeof value === 'string' || value instanceof RichTextData ) &&\n\t\t\t// To do: refactor this to use rich text's selection instead, so we\n\t\t\t// no longer have to use on this hack inserting a special character.\n\t\t\tvalue.toString().indexOf( START_OF_SELECTED_AREA ) !== -1\n\t\t);\n\t} );\n}\n\nexport function findRichTextAttributeKey( blockType ) {\n\tfor ( const [ key, value ] of Object.entries( blockType.attributes ) ) {\n\t\tif ( value.source === 'rich-text' || value.source === 'html' ) {\n\t\t\treturn key;\n\t\t}\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,QAAQ,sBAAsB;;AAEnD;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAG,QAAQ;;AAE9C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAAEC,eAAe,EAAG;EAC5D,IAAK,CAAEA,eAAe,EAAG;IACxB;EACD;EAEA,OAAOC,MAAM,CAACC,IAAI,CAAEF,eAAgB,CAAC,CAACG,IAAI,CAAIC,IAAI,IAAM;IACvD,MAAMC,KAAK,GAAGL,eAAe,CAAEI,IAAI,CAAE;IACrC,OACC,CAAE,OAAOC,KAAK,KAAK,QAAQ,IAAIA,KAAK,YAAYR,YAAY;IAC5D;IACA;IACAQ,KAAK,CAACC,QAAQ,CAAC,CAAC,CAACC,OAAO,CAAET,sBAAuB,CAAC,KAAK,CAAC,CAAC;EAE3D,CAAE,CAAC;AACJ;AAEA,OAAO,SAASU,wBAAwBA,CAAEC,SAAS,EAAG;EACrD,KAAM,MAAM,CAAEC,GAAG,EAAEL,KAAK,CAAE,IAAIJ,MAAM,CAACU,OAAO,CAAEF,SAAS,CAACG,UAAW,CAAC,EAAG;IACtE,IAAKP,KAAK,CAACQ,MAAM,KAAK,WAAW,IAAIR,KAAK,CAACQ,MAAM,KAAK,MAAM,EAAG;MAC9D,OAAOH,GAAG;IACX;EACD;AACD","ignoreList":[]}

package/build-module/utils/transform-styles/index.js

@@ -4,7 +4,7 @@
 import postcss, { CssSyntaxError } from 'postcss';
 import wrap from 'postcss-prefixwrap';
 import rebaseUrl from 'postcss-urlrebase';
-const transformStylesCache = new WeakMap();
+const cacheByWrapperSelector = new Map();
 function transformStyle({
   css,
   ignoredSelectors = [],
@@ -17,7 +17,7 @@ function transformStyle({
   if (!wrapperSelector && !baseURL) {
     return css;
   }
-  const postcssFriendlyCSS = css.replace(':where(body)', 'body');
+  const postcssFriendlyCSS = css.replace(/:where\(body\)/g, 'body');
   try {
     return postcss([wrapperSelector && wrap(wrapperSelector, {
       ignoredSelectors: [...ignoredSelectors, wrapperSelector]
@@ -49,13 +49,18 @@ function transformStyle({
  * @return {Array} converted rules.
  */
 const transformStyles = (styles, wrapperSelector = '') => {
+  let cache = cacheByWrapperSelector.get(wrapperSelector);
+  if (!cache) {
+    cache = new WeakMap();
+    cacheByWrapperSelector.set(wrapperSelector, cache);
+  }
   return styles.map(style => {
-    if (transformStylesCache.has(style)) {
-      return transformStylesCache.get(style);
+    let css = cache.get(style);
+    if (!css) {
+      css = transformStyle(style, wrapperSelector);
+      cache.set(style, css);
     }
-    const transformedStyle = transformStyle(style, wrapperSelector);
-    transformStylesCache.set(style, transformedStyle);
-    return transformedStyle;
+    return css;
   });
 };
 export default transformStyles;

package/build-module/utils/transform-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["postcss","CssSyntaxError","wrap","rebaseUrl","transformStylesCache","WeakMap","transformStyle","css","ignoredSelectors","baseURL","wrapperSelector","postcssFriendlyCSS","replace","rootUrl","filter","Boolean","process","error","console","warn","message","showSourceCode","transformStyles","styles","map","style","has","get","transformedStyle","set"],"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport postcss, { CssSyntaxError } from 'postcss';\nimport wrap from 'postcss-prefixwrap';\nimport rebaseUrl from 'postcss-urlrebase';\n\nconst transformStylesCache = new WeakMap();\n\nfunction transformStyle(\n\t{ css, ignoredSelectors = [], baseURL },\n\twrapperSelector = ''\n) {\n\t// When there is no wrapper selector or base URL, there is no need\n\t// to transform the CSS. This is most cases because in the default\n\t// iframed editor, no wrapping is needed, and not many styles\n\t// provide a base URL.\n\tif ( ! wrapperSelector && ! baseURL ) {\n\t\treturn css;\n\t}\n\n\tconst postcssFriendlyCSS = css.replace( ':where(body)', 'body' );\n\ttry {\n\t\treturn postcss(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\twrap( wrapperSelector, {\n\t\t\t\t\t\tignoredSelectors: [\n\t\t\t\t\t\t\t...ignoredSelectors,\n\t\t\t\t\t\t\twrapperSelector,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\tbaseURL && rebaseUrl( { rootUrl: baseURL } ),\n\t\t\t].filter( Boolean )\n\t\t).process( postcssFriendlyCSS, {} ).css; // use sync PostCSS API\n\t} catch ( error ) {\n\t\tif ( error instanceof CssSyntaxError ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror.message + '\\n' + error.showSourceCode( false )\n\t\t\t);\n\t\t} else {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t}\n}\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @typedef {Object} EditorStyle\n * @property {string}        css              the CSS block(s), as a single string.\n * @property {?string}       baseURL          the base URL to be used as the reference when rewritting urls.\n * @property {?string[]}     ignoredSelectors the selectors not to wrap.\n *\n * @param    {EditorStyle[]} styles           CSS rules.\n * @param    {string}        wrapperSelector  Wrapper selector.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '' ) => {\n\treturn styles.map( ( style ) => {\n\t\tif ( transformStylesCache.has( style ) ) {\n\t\t\treturn transformStylesCache.get( style );\n\t\t}\n\n\t\tconst transformedStyle = transformStyle( style, wrapperSelector );\n\t\ttransformStylesCache.set( style, transformedStyle );\n\t\treturn transformedStyle;\n\t} );\n};\n\nexport default transformStyles;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,IAAIC,cAAc,QAAQ,SAAS;AACjD,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,SAAS,MAAM,mBAAmB;AAEzC,MAAMC,oBAAoB,GAAG,IAAIC,OAAO,CAAC,CAAC;AAE1C,SAASC,cAAcA,CACtB;EAAEC,GAAG;EAAEC,gBAAgB,GAAG,EAAE;EAAEC;AAAQ,CAAC,EACvCC,eAAe,GAAG,EAAE,EACnB;EACD;EACA;EACA;EACA;EACA,IAAK,CAAEA,eAAe,IAAI,CAAED,OAAO,EAAG;IACrC,OAAOF,GAAG;EACX;EAEA,MAAMI,kBAAkB,GAAGJ,GAAG,CAACK,OAAO,CAAE,cAAc,EAAE,MAAO,CAAC;EAChE,IAAI;IACH,OAAOZ,OAAO,CACb,CACCU,eAAe,IACdR,IAAI,CAAEQ,eAAe,EAAE;MACtBF,gBAAgB,EAAE,CACjB,GAAGA,gBAAgB,EACnBE,eAAe;IAEjB,CAAE,CAAC,EACJD,OAAO,IAAIN,SAAS,CAAE;MAAEU,OAAO,EAAEJ;IAAQ,CAAE,CAAC,CAC5C,CAACK,MAAM,CAAEC,OAAQ,CACnB,CAAC,CAACC,OAAO,CAAEL,kBAAkB,EAAE,CAAC,CAAE,CAAC,CAACJ,GAAG,CAAC,CAAC;EAC1C,CAAC,CAAC,OAAQU,KAAK,EAAG;IACjB,IAAKA,KAAK,YAAYhB,cAAc,EAAG;MACtC;MACAiB,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KAAK,CAACG,OAAO,GAAG,IAAI,GAAGH,KAAK,CAACI,cAAc,CAAE,KAAM,CACpD,CAAC;IACF,CAAC,MAAM;MACN;MACAH,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KACD,CAAC;IACF;IAEA,OAAO,IAAI;EACZ;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,eAAe,GAAGA,CAAEC,MAAM,EAAEb,eAAe,GAAG,EAAE,KAAM;EAC3D,OAAOa,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAC/B,IAAKrB,oBAAoB,CAACsB,GAAG,CAAED,KAAM,CAAC,EAAG;MACxC,OAAOrB,oBAAoB,CAACuB,GAAG,CAAEF,KAAM,CAAC;IACzC;IAEA,MAAMG,gBAAgB,GAAGtB,cAAc,CAAEmB,KAAK,EAAEf,eAAgB,CAAC;IACjEN,oBAAoB,CAACyB,GAAG,CAAEJ,KAAK,EAAEG,gBAAiB,CAAC;IACnD,OAAOA,gBAAgB;EACxB,CAAE,CAAC;AACJ,CAAC;AAED,eAAeN,eAAe","ignoreList":[]}
+{"version":3,"names":["postcss","CssSyntaxError","wrap","rebaseUrl","cacheByWrapperSelector","Map","transformStyle","css","ignoredSelectors","baseURL","wrapperSelector","postcssFriendlyCSS","replace","rootUrl","filter","Boolean","process","error","console","warn","message","showSourceCode","transformStyles","styles","cache","get","WeakMap","set","map","style"],"sources":["@wordpress/block-editor/src/utils/transform-styles/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport postcss, { CssSyntaxError } from 'postcss';\nimport wrap from 'postcss-prefixwrap';\nimport rebaseUrl from 'postcss-urlrebase';\n\nconst cacheByWrapperSelector = new Map();\n\nfunction transformStyle(\n\t{ css, ignoredSelectors = [], baseURL },\n\twrapperSelector = ''\n) {\n\t// When there is no wrapper selector or base URL, there is no need\n\t// to transform the CSS. This is most cases because in the default\n\t// iframed editor, no wrapping is needed, and not many styles\n\t// provide a base URL.\n\tif ( ! wrapperSelector && ! baseURL ) {\n\t\treturn css;\n\t}\n\tconst postcssFriendlyCSS = css.replace( /:where\\(body\\)/g, 'body' );\n\ttry {\n\t\treturn postcss(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\twrap( wrapperSelector, {\n\t\t\t\t\t\tignoredSelectors: [\n\t\t\t\t\t\t\t...ignoredSelectors,\n\t\t\t\t\t\t\twrapperSelector,\n\t\t\t\t\t\t],\n\t\t\t\t\t} ),\n\t\t\t\tbaseURL && rebaseUrl( { rootUrl: baseURL } ),\n\t\t\t].filter( Boolean )\n\t\t).process( postcssFriendlyCSS, {} ).css; // use sync PostCSS API\n\t} catch ( error ) {\n\t\tif ( error instanceof CssSyntaxError ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror.message + '\\n' + error.showSourceCode( false )\n\t\t\t);\n\t\t} else {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t'wp.blockEditor.transformStyles Failed to transform CSS.',\n\t\t\t\terror\n\t\t\t);\n\t\t}\n\n\t\treturn null;\n\t}\n}\n\n/**\n * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.\n *\n * @typedef {Object} EditorStyle\n * @property {string}        css              the CSS block(s), as a single string.\n * @property {?string}       baseURL          the base URL to be used as the reference when rewritting urls.\n * @property {?string[]}     ignoredSelectors the selectors not to wrap.\n *\n * @param    {EditorStyle[]} styles           CSS rules.\n * @param    {string}        wrapperSelector  Wrapper selector.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '' ) => {\n\tlet cache = cacheByWrapperSelector.get( wrapperSelector );\n\tif ( ! cache ) {\n\t\tcache = new WeakMap();\n\t\tcacheByWrapperSelector.set( wrapperSelector, cache );\n\t}\n\treturn styles.map( ( style ) => {\n\t\tlet css = cache.get( style );\n\t\tif ( ! css ) {\n\t\t\tcss = transformStyle( style, wrapperSelector );\n\t\t\tcache.set( style, css );\n\t\t}\n\t\treturn css;\n\t} );\n};\n\nexport default transformStyles;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,IAAIC,cAAc,QAAQ,SAAS;AACjD,OAAOC,IAAI,MAAM,oBAAoB;AACrC,OAAOC,SAAS,MAAM,mBAAmB;AAEzC,MAAMC,sBAAsB,GAAG,IAAIC,GAAG,CAAC,CAAC;AAExC,SAASC,cAAcA,CACtB;EAAEC,GAAG;EAAEC,gBAAgB,GAAG,EAAE;EAAEC;AAAQ,CAAC,EACvCC,eAAe,GAAG,EAAE,EACnB;EACD;EACA;EACA;EACA;EACA,IAAK,CAAEA,eAAe,IAAI,CAAED,OAAO,EAAG;IACrC,OAAOF,GAAG;EACX;EACA,MAAMI,kBAAkB,GAAGJ,GAAG,CAACK,OAAO,CAAE,iBAAiB,EAAE,MAAO,CAAC;EACnE,IAAI;IACH,OAAOZ,OAAO,CACb,CACCU,eAAe,IACdR,IAAI,CAAEQ,eAAe,EAAE;MACtBF,gBAAgB,EAAE,CACjB,GAAGA,gBAAgB,EACnBE,eAAe;IAEjB,CAAE,CAAC,EACJD,OAAO,IAAIN,SAAS,CAAE;MAAEU,OAAO,EAAEJ;IAAQ,CAAE,CAAC,CAC5C,CAACK,MAAM,CAAEC,OAAQ,CACnB,CAAC,CAACC,OAAO,CAAEL,kBAAkB,EAAE,CAAC,CAAE,CAAC,CAACJ,GAAG,CAAC,CAAC;EAC1C,CAAC,CAAC,OAAQU,KAAK,EAAG;IACjB,IAAKA,KAAK,YAAYhB,cAAc,EAAG;MACtC;MACAiB,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KAAK,CAACG,OAAO,GAAG,IAAI,GAAGH,KAAK,CAACI,cAAc,CAAE,KAAM,CACpD,CAAC;IACF,CAAC,MAAM;MACN;MACAH,OAAO,CAACC,IAAI,CACX,yDAAyD,EACzDF,KACD,CAAC;IACF;IAEA,OAAO,IAAI;EACZ;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMK,eAAe,GAAGA,CAAEC,MAAM,EAAEb,eAAe,GAAG,EAAE,KAAM;EAC3D,IAAIc,KAAK,GAAGpB,sBAAsB,CAACqB,GAAG,CAAEf,eAAgB,CAAC;EACzD,IAAK,CAAEc,KAAK,EAAG;IACdA,KAAK,GAAG,IAAIE,OAAO,CAAC,CAAC;IACrBtB,sBAAsB,CAACuB,GAAG,CAAEjB,eAAe,EAAEc,KAAM,CAAC;EACrD;EACA,OAAOD,MAAM,CAACK,GAAG,CAAIC,KAAK,IAAM;IAC/B,IAAItB,GAAG,GAAGiB,KAAK,CAACC,GAAG,CAAEI,KAAM,CAAC;IAC5B,IAAK,CAAEtB,GAAG,EAAG;MACZA,GAAG,GAAGD,cAAc,CAAEuB,KAAK,EAAEnB,eAAgB,CAAC;MAC9Cc,KAAK,CAACG,GAAG,CAAEE,KAAK,EAAEtB,GAAI,CAAC;IACxB;IACA,OAAOA,GAAG;EACX,CAAE,CAAC;AACJ,CAAC;AAED,eAAee,eAAe","ignoreList":[]}

package/build-style/content-rtl.css

@@ -141,7 +141,7 @@
     opacity: 0.4;
   }
 }
-/* stylelint-disable */
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
   background-color: transparent;
@@ -151,9 +151,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-  border-radius: 2px;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
@@ -168,7 +165,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   right: 0;
   background: var(--wp-admin-theme-color);
   opacity: 0.4;
-  border-radius: 2px;
   animation: selection-overlay__fade-in-animation 0.1s ease-out;
   animation-fill-mode: forwards;
   outline: 2px solid transparent;
@@ -180,7 +176,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   }
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
-  box-shadow: none;
+  outline-color: transparent;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
@@ -192,20 +188,21 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
   content: "";
   position: absolute;
-  z-index: 1;
   pointer-events: none;
-  top: 1px;
-  left: 1px;
-  bottom: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  z-index: 1;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+  outline-color: #fff;
 }
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
@@ -255,6 +252,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   -webkit-user-select: none;
           user-select: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
+  z-index: 20;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -305,36 +305,39 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   float: none;
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
-  cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
-}
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
   content: "";
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after {
+  outline-color: var(--wp-block-synced-color);
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  outline-color: var(--wp-block-synced-color);
+}
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  outline-color: #fff;
 }
 
 @keyframes block-editor-is-editable__animation {
@@ -362,7 +365,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   animation-timing-function: ease-out;
   animation-delay: 0.1s;
   animation-fill-mode: backwards;
-  border-radius: 2px;
   bottom: 0;
   content: "";
   right: 0;
@@ -405,20 +407,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   z-index: 21;
 }
 
-body.is-zoomed-out {
-  display: flex;
-  flex-direction: column;
-}
-body.is-zoomed-out > .is-root-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-body.is-zoomed-out > .is-root-container > main {
-  flex: 1;
-}
-
 .wp-site-blocks > [data-align=left] {
   float: right;
   margin-left: 2em;
@@ -508,21 +496,6 @@ body.is-zoomed-out > .is-root-container > main {
   margin-bottom: auto;
 }
 
-.block-editor-iframe__html {
-  transform-origin: top center;
-  transition: all 0.3s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-
-.block-editor-iframe__html[style*=scale] {
-  background-color: #ddd;
-}
-
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -542,38 +515,13 @@ body.is-zoomed-out > .is-root-container > main {
 .block-editor-block-list__block.has-block-overlay {
   cursor: default;
 }
-.block-editor-block-list__block.has-block-overlay::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  z-index: 10;
-}
-.block-editor-block-list__block.has-block-overlay:not(.is-multi-selected)::after {
-  content: none !important;
-}
-.block-editor-block-list__block.has-block-overlay:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before, .block-editor-block-list__block.has-block-overlay.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-  background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-  box-shadow: 0 0 0 1px var(--wp-block-synced-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay.is-selected:not(.is-dragging-blocks)::before {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
   pointer-events: none;
 }
-.block-editor-iframe__body.is-zoomed-out .block-editor-block-list__block.has-block-overlay::before {
-  width: calc(100vw);
-  right: calc(( 100% - 100vw ) / 2);
+.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
+  right: 0;
+  left: 0;
+  width: auto;
 }
 
 .block-editor-block-list__layout .is-dragging {
@@ -607,70 +555,48 @@ body.is-zoomed-out > .is-root-container > main {
   display: none;
 }
 
-.block-editor-block-variation-picker .components-placeholder__instructions {
-  margin-bottom: 0;
-}
-.block-editor-block-variation-picker .components-placeholder__fieldset {
-  flex-direction: column;
-}
-.block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset {
-  max-width: 90%;
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+  list-style: none;
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
-  margin: 16px 0;
   padding: 0;
-  list-style: none;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li {
-  list-style: none;
-  margin: 8px 0 0 20px;
-  flex-shrink: 1;
-  width: 75px;
-  text-align: center;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button {
-  display: inline-flex;
-  margin-left: 0;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation {
-  padding: 8px;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  margin: 0;
+  gap: 8px;
   font-size: 12px;
-  display: block;
-  line-height: 1.4;
 }
-
-.block-editor-block-variation-picker__variation {
-  width: 100%;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon {
-  justify-content: center;
+.block-editor-block-variation-picker__variations svg,
+.block-editor-block-variation-picker__skip svg,
+.wp-block-group-placeholder__variations svg {
+  fill: #ccc !important;
+}
+.block-editor-block-variation-picker__variations .components-button,
+.block-editor-block-variation-picker__skip .components-button,
+.wp-block-group-placeholder__variations .components-button {
+  padding: 4px;
+}
+.block-editor-block-variation-picker__variations .components-button:hover,
+.block-editor-block-variation-picker__skip .components-button:hover,
+.wp-block-group-placeholder__variations .components-button:hover {
+  background: none !important;
+}
+.block-editor-block-variation-picker__variations .components-button:hover svg,
+.block-editor-block-variation-picker__skip .components-button:hover svg,
+.wp-block-group-placeholder__variations .components-button:hover svg {
+  fill: var(--wp-admin-theme-color) !important;
+}
+.block-editor-block-variation-picker__variations > li,
+.block-editor-block-variation-picker__skip > li,
+.wp-block-group-placeholder__variations > li {
   width: auto;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary {
-  background-color: #fff;
-}
-.block-editor-block-variation-picker__variation.components-button {
-  height: auto;
-  padding: 0;
-}
-.block-editor-block-variation-picker__variation::before {
-  content: "";
-  padding-bottom: 100%;
-}
-.block-editor-block-variation-picker__variation:first-child {
-  margin-right: 0;
-}
-.block-editor-block-variation-picker__variation:last-child {
-  margin-left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 
 .block-editor-button-block-appender {
@@ -866,6 +792,54 @@ body.is-zoomed-out > .is-root-container > main {
   cursor: text;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  width: 100%;
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+  margin-right: calc(-1 * (var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2);
+}
+
+.block-editor-iframe__html {
+  transform-origin: top center;
+  transition: transform 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+.block-editor-iframe__html.is-zoomed-out {
+  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  background-color: #ddd;
+  border: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) solid #ddd;
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size)) + 2px));
+}
+.block-editor-iframe__html.is-zoomed-out body {
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  display: flex;
+  flex-direction: column;
+}
+.block-editor-iframe__html.is-zoomed-out body > .is-root-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.block-editor-iframe__html.is-zoomed-out body > .is-root-container > main {
+  flex: 1;
+}
+
 .block-editor-block-list__layout.has-overlay::after {
   content: "";
   position: absolute;
@@ -876,10 +850,6 @@ body.is-zoomed-out > .is-root-container > main {
   z-index: 60;
 }
 
-.block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
-  margin-bottom: 0;
-}
-
 .block-editor-media-placeholder__url-input-form {
   display: flex;
 }
@@ -901,10 +871,6 @@ body.is-zoomed-out > .is-root-container > main {
   flex-shrink: 1;
 }
 
-.block-editor-media-placeholder__button {
-  margin-bottom: 0.5rem;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
   margin: 1em;
   display: block;