@wordpress/block-editor 12.24.0 → 12.25.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-style/content-rtl.css

@@ -255,6 +255,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,10 +308,10 @@ _::-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 {
+.is-outline-mode .block-editor-block-list__block.is-hovered {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
+.is-outline-mode .block-editor-block-list__block.is-hovered::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -319,13 +322,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   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 {
+.is-outline-mode .block-editor-block-list__block.is-selected {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
+.is-outline-mode .block-editor-block-list__block.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.is-selected::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -607,70 +610,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 {
@@ -876,10 +857,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 +878,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;

package/build-style/content.css

@@ -255,6 +255,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,10 +308,10 @@ _::-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 {
+.is-outline-mode .block-editor-block-list__block.is-hovered {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
+.is-outline-mode .block-editor-block-list__block.is-hovered::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -319,13 +322,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   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 {
+.is-outline-mode .block-editor-block-list__block.is-selected {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
+.is-outline-mode .block-editor-block-list__block.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.is-selected::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -607,70 +610,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 20px 0 0;
-  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-right: 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-left: 0;
-}
-.block-editor-block-variation-picker__variation:last-child {
-  margin-right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 
 .block-editor-button-block-appender {
@@ -876,10 +857,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 +878,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;