@wordpress/block-editor 15.21.1 → 15.22.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../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": ";AASO,IAAM,0BAA0B,CAAE,OAAO,aAAc;AAC7D,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,KAAM,CAAE,EAAE,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM,MAAO;AAE/C,QAAI,SAAS,SAAS,QAAS,KAAM;AACrC,QAAI,SAAS,SAAS,QAAS,KAAM;AAErC,QAAK,SAAS,GAAI;AACjB,eAAS,SAAS;AAAA,IACnB;AACA,QAAK,SAAS,GAAI;AACjB,eAAS,SAAS;AAAA,IACnB;AACA,WAAO,SAAS;AAAA,EACjB,CAAE;AAEF,SAAO;AACR;",
+  "sources": ["../../src/utils/order-inserter-block-items.ts"],
+  "sourcesContent": ["type EditorInserterItem = { id: string };\n\n/**\n * Helper function to order inserter block items according to a provided array of prioritized blocks.\n *\n * @param items    The array of editor inserter block items to be sorted.\n * @param priority The array of block names to be prioritized.\n * @return The sorted array of editor inserter block items.\n */\nexport const orderInserterBlockItems = (\n\titems: EditorInserterItem[],\n\tpriority: string[] | undefined\n) => {\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": ";AASO,IAAM,0BAA0B,CACtC,OACA,aACI;AACJ,MAAK,CAAE,UAAW;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,KAAM,CAAE,EAAE,IAAI,MAAM,GAAG,EAAE,IAAI,MAAM,MAAO;AAE/C,QAAI,SAAS,SAAS,QAAS,KAAM;AACrC,QAAI,SAAS,SAAS,QAAS,KAAM;AAErC,QAAK,SAAS,GAAI;AACjB,eAAS,SAAS;AAAA,IACnB;AACA,QAAK,SAAS,GAAI;AACjB,eAAS,SAAS;AAAA,IACnB;AACA,WAAO,SAAS;AAAA,EACjB,CAAE;AAEF,SAAO;AACR;",
   "names": []
 }

package/build-module/utils/pasting.mjs

@@ -1,4 +1,4 @@
-// packages/block-editor/src/utils/pasting.js
+// packages/block-editor/src/utils/pasting.ts
 import { getFilesFromDataTransfer } from "@wordpress/dom";
 function removeWindowsFragments(html) {
   const startStr = "<!--StartFragment-->";
@@ -22,7 +22,9 @@ function removeCharsetMetaTag(html) {
   }
   return html;
 }
-function getPasteEventData({ clipboardData }) {
+function getPasteEventData({
+  clipboardData
+}) {
   let plainText = "";
   let html = "";
   try {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../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\ttry {\n\t\tplainText = clipboardData.getData( 'text/plain' );\n\t\thtml = clipboardData.getData( 'text/html' );\n\t} catch {\n\t\t// Some browsers like UC Browser paste plain text by default and\n\t\t// don't support clipboardData at all, so allow default\n\t\t// behaviour.\n\t\treturn;\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": ";AAGA,SAAS,gCAAgC;AASzC,SAAS,uBAAwB,MAAO;AACvC,QAAM,WAAW;AACjB,QAAM,WAAW,KAAK,QAAS,QAAS;AACxC,MAAK,WAAW,IAAK;AACpB,WAAO,KAAK,UAAW,WAAW,SAAS,MAAO;AAAA,EACnD,OAAO;AAEN,WAAO;AAAA,EACR;AAEA,QAAM,SAAS;AACf,QAAM,SAAS,KAAK,QAAS,MAAO;AACpC,MAAK,SAAS,IAAK;AAClB,WAAO,KAAK,UAAW,GAAG,MAAO;AAAA,EAClC;AAEA,SAAO;AACR;AAWA,SAAS,qBAAsB,MAAO;AACrC,QAAM,UAAU;AAEhB,MAAK,KAAK,WAAY,OAAQ,GAAI;AACjC,WAAO,KAAK,MAAO,QAAQ,MAAO;AAAA,EACnC;AAEA,SAAO;AACR;AAEO,SAAS,kBAAmB,EAAE,cAAc,GAAI;AACtD,MAAI,YAAY;AAChB,MAAI,OAAO;AAEX,MAAI;AACH,gBAAY,cAAc,QAAS,YAAa;AAChD,WAAO,cAAc,QAAS,WAAY;AAAA,EAC3C,QAAQ;AAIP;AAAA,EACD;AAGA,SAAO,uBAAwB,IAAK;AAGpC,SAAO,qBAAsB,IAAK;AAElC,QAAM,QAAQ,yBAA0B,aAAc;AAEtD,MAAK,MAAM,UAAU,CAAE,yBAA0B,OAAO,IAAK,GAAI;AAChE,WAAO,EAAE,MAAM;AAAA,EAChB;AAEA,SAAO,EAAE,MAAM,WAAW,OAAO,CAAC,EAAE;AACrC;AAiBO,SAAS,yBAA0B,OAAO,MAAwB;AAGxE,MACC,QACA,OAAO,WAAW,KAClB,MAAO,CAAE,EAAE,KAAK,QAAS,QAAS,MAAM,GACvC;AAKD,UAAM,YAAY;AAClB,QAAK,KAAK,MAAO,SAAU,GAAG,WAAW,GAAI;AAC5C,aAAO;AAAA,IACR;AAQA,UAAM,qBAAqB;AAC3B,QAAK,KAAK,MAAO,kBAAmB,GAAI;AACvC,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;",
+  "sources": ["../../src/utils/pasting.ts"],
+  "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 html the html to be normalized\n * @return the normalized html\n */\nfunction removeWindowsFragments( html: string ) {\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 html the html to be stripped of the meta tag.\n * @return the cleaned html\n */\nfunction removeCharsetMetaTag( html: string ) {\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( {\n\tclipboardData,\n}: {\n\tclipboardData: DataTransfer;\n} ) {\n\tlet plainText = '';\n\tlet html = '';\n\n\ttry {\n\t\tplainText = clipboardData.getData( 'text/plain' );\n\t\thtml = clipboardData.getData( 'text/html' );\n\t} catch {\n\t\t// Some browsers like UC Browser paste plain text by default and\n\t\t// don't support clipboardData at all, so allow default\n\t\t// behaviour.\n\t\treturn;\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 files File objects obtained from a paste event\n * @param html  HTML content obtained from a paste event\n * @return      True if the files should be dismissed\n */\nexport function shouldDismissPastedFiles(\n\tfiles: File[],\n\thtml: string /*, plainText */\n) {\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": ";AAGA,SAAS,gCAAgC;AASzC,SAAS,uBAAwB,MAAe;AAC/C,QAAM,WAAW;AACjB,QAAM,WAAW,KAAK,QAAS,QAAS;AACxC,MAAK,WAAW,IAAK;AACpB,WAAO,KAAK,UAAW,WAAW,SAAS,MAAO;AAAA,EACnD,OAAO;AAEN,WAAO;AAAA,EACR;AAEA,QAAM,SAAS;AACf,QAAM,SAAS,KAAK,QAAS,MAAO;AACpC,MAAK,SAAS,IAAK;AAClB,WAAO,KAAK,UAAW,GAAG,MAAO;AAAA,EAClC;AAEA,SAAO;AACR;AAWA,SAAS,qBAAsB,MAAe;AAC7C,QAAM,UAAU;AAEhB,MAAK,KAAK,WAAY,OAAQ,GAAI;AACjC,WAAO,KAAK,MAAO,QAAQ,MAAO;AAAA,EACnC;AAEA,SAAO;AACR;AAEO,SAAS,kBAAmB;AAAA,EAClC;AACD,GAEI;AACH,MAAI,YAAY;AAChB,MAAI,OAAO;AAEX,MAAI;AACH,gBAAY,cAAc,QAAS,YAAa;AAChD,WAAO,cAAc,QAAS,WAAY;AAAA,EAC3C,QAAQ;AAIP;AAAA,EACD;AAGA,SAAO,uBAAwB,IAAK;AAGpC,SAAO,qBAAsB,IAAK;AAElC,QAAM,QAAQ,yBAA0B,aAAc;AAEtD,MAAK,MAAM,UAAU,CAAE,yBAA0B,OAAO,IAAK,GAAI;AAChE,WAAO,EAAE,MAAM;AAAA,EAChB;AAEA,SAAO,EAAE,MAAM,WAAW,OAAO,CAAC,EAAE;AACrC;AAiBO,SAAS,yBACf,OACA,MACC;AAGD,MACC,QACA,OAAO,WAAW,KAClB,MAAO,CAAE,EAAE,KAAK,QAAS,QAAS,MAAM,GACvC;AAKD,UAAM,YAAY;AAClB,QAAK,KAAK,MAAO,SAAU,GAAG,WAAW,GAAI;AAC5C,aAAO;AAAA,IACR;AAQA,UAAM,qBAAqB;AAC3B,QAAK,KAAK,MAAO,kBAAmB,GAAI;AACvC,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;",
   "names": []
 }

package/build-module/utils/selection.mjs

@@ -1,6 +1,6 @@
-// packages/block-editor/src/utils/selection.js
+// packages/block-editor/src/utils/selection.ts
 import { RichTextData } from "@wordpress/rich-text";
-var START_OF_SELECTED_AREA = "\x86";
+var START_OF_SELECTED_AREA = "†";
 function retrieveSelectedAttribute(blockAttributes) {
   if (!blockAttributes) {
     return;
@@ -18,6 +18,7 @@ function findRichTextAttributeKey(blockType) {
       return key;
     }
   }
+  return void 0;
 }
 export {
   START_OF_SELECTED_AREA,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../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": ";AAGA,SAAS,oBAAoB;AAOtB,IAAM,yBAAyB;AAQ/B,SAAS,0BAA2B,iBAAkB;AAC5D,MAAK,CAAE,iBAAkB;AACxB;AAAA,EACD;AAEA,SAAO,OAAO,KAAM,eAAgB,EAAE,KAAM,CAAE,SAAU;AACvD,UAAM,QAAQ,gBAAiB,IAAK;AACpC,YACG,OAAO,UAAU,YAAY,iBAAiB;AAAA;AAAA,IAGhD,MAAM,SAAS,EAAE,QAAS,sBAAuB,MAAM;AAAA,EAEzD,CAAE;AACH;AAEO,SAAS,yBAA0B,WAAY;AACrD,aAAY,CAAE,KAAK,KAAM,KAAK,OAAO,QAAS,UAAU,UAAW,GAAI;AACtE,QAAK,MAAM,WAAW,eAAe,MAAM,WAAW,QAAS;AAC9D,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
+  "sources": ["../../src/utils/selection.ts"],
+  "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 blockAttributes Block attributes.\n * @return The name of the block attribute that was previously selected.\n */\nexport function retrieveSelectedAttribute(\n\tblockAttributes: Record< string, unknown > | undefined\n) {\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\ntype BlockTypeWithAttributes = {\n\tattributes: Record< string, { source?: string } >;\n};\n\nexport function findRichTextAttributeKey( blockType: BlockTypeWithAttributes ) {\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\treturn undefined;\n}\n"],
+  "mappings": ";AAGA,SAAS,oBAAoB;AAOtB,IAAM,yBAAyB;AAQ/B,SAAS,0BACf,iBACC;AACD,MAAK,CAAE,iBAAkB;AACxB;AAAA,EACD;AAEA,SAAO,OAAO,KAAM,eAAgB,EAAE,KAAM,CAAE,SAAU;AACvD,UAAM,QAAQ,gBAAiB,IAAK;AACpC,YACG,OAAO,UAAU,YAAY,iBAAiB;AAAA;AAAA,IAGhD,MAAM,SAAS,EAAE,QAAS,sBAAuB,MAAM;AAAA,EAEzD,CAAE;AACH;AAMO,SAAS,yBAA0B,WAAqC;AAC9E,aAAY,CAAE,KAAK,KAAM,KAAK,OAAO,QAAS,UAAU,UAAW,GAAI;AACtE,QAAK,MAAM,WAAW,eAAe,MAAM,WAAW,QAAS;AAC9D,aAAO;AAAA,IACR;AAAA,EACD;AACA,SAAO;AACR;",
   "names": []
 }

package/build-module/utils/sorting.mjs

@@ -1,4 +1,10 @@
-// packages/block-editor/src/utils/sorting.js
+// packages/block-editor/src/utils/sorting.ts
+function isGreater(a, b) {
+  if (typeof a === "string" && typeof b === "string") {
+    return a > b;
+  }
+  return Number(a) > Number(b);
+}
 var comparator = (field, items, order) => {
   return (a, b) => {
     let cmpA, cmpB;
@@ -9,9 +15,9 @@ var comparator = (field, items, order) => {
       cmpA = a[field];
       cmpB = b[field];
     }
-    if (cmpA > cmpB) {
+    if (isGreater(cmpA, cmpB)) {
       return order === "asc" ? 1 : -1;
-    } else if (cmpB > cmpA) {
+    } else if (isGreater(cmpB, cmpA)) {
       return order === "asc" ? -1 : 1;
     }
     const orderA = items.findIndex((item) => item === a);

package/build-module/utils/sorting.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/utils/sorting.js"],
-  "sourcesContent": ["/**\n * Recursive stable sorting comparator function.\n *\n * @param {string|Function} field Field to sort by.\n * @param {Array}           items Items to sort.\n * @param {string}          order Order, 'asc' or 'desc'.\n * @return {Function} Comparison function to be used in a `.sort()`.\n */\nconst comparator = ( field, items, order ) => {\n\treturn ( a, b ) => {\n\t\tlet cmpA, cmpB;\n\n\t\tif ( typeof field === 'function' ) {\n\t\t\tcmpA = field( a );\n\t\t\tcmpB = field( b );\n\t\t} else {\n\t\t\tcmpA = a[ field ];\n\t\t\tcmpB = b[ field ];\n\t\t}\n\n\t\tif ( cmpA > cmpB ) {\n\t\t\treturn order === 'asc' ? 1 : -1;\n\t\t} else if ( cmpB > cmpA ) {\n\t\t\treturn order === 'asc' ? -1 : 1;\n\t\t}\n\n\t\tconst orderA = items.findIndex( ( item ) => item === a );\n\t\tconst orderB = items.findIndex( ( item ) => item === b );\n\n\t\t// Stable sort: maintaining original array order\n\t\tif ( orderA > orderB ) {\n\t\t\treturn 1;\n\t\t} else if ( orderB > orderA ) {\n\t\t\treturn -1;\n\t\t}\n\n\t\treturn 0;\n\t};\n};\n\n/**\n * Order items by a certain key.\n * Supports decorator functions that allow complex picking of a comparison field.\n * Sorts in ascending order by default, but supports descending as well.\n * Stable sort - maintains original order of equal items.\n *\n * @param {Array}           items Items to order.\n * @param {string|Function} field Field to order by.\n * @param {string}          order Sorting order, `asc` or `desc`.\n * @return {Array} Sorted items.\n */\nexport function orderBy( items, field, order = 'asc' ) {\n\treturn items.concat().sort( comparator( field, items, order ) );\n}\n"],
-  "mappings": ";AAQA,IAAM,aAAa,CAAE,OAAO,OAAO,UAAW;AAC7C,SAAO,CAAE,GAAG,MAAO;AAClB,QAAI,MAAM;AAEV,QAAK,OAAO,UAAU,YAAa;AAClC,aAAO,MAAO,CAAE;AAChB,aAAO,MAAO,CAAE;AAAA,IACjB,OAAO;AACN,aAAO,EAAG,KAAM;AAChB,aAAO,EAAG,KAAM;AAAA,IACjB;AAEA,QAAK,OAAO,MAAO;AAClB,aAAO,UAAU,QAAQ,IAAI;AAAA,IAC9B,WAAY,OAAO,MAAO;AACzB,aAAO,UAAU,QAAQ,KAAK;AAAA,IAC/B;AAEA,UAAM,SAAS,MAAM,UAAW,CAAE,SAAU,SAAS,CAAE;AACvD,UAAM,SAAS,MAAM,UAAW,CAAE,SAAU,SAAS,CAAE;AAGvD,QAAK,SAAS,QAAS;AACtB,aAAO;AAAA,IACR,WAAY,SAAS,QAAS;AAC7B,aAAO;AAAA,IACR;AAEA,WAAO;AAAA,EACR;AACD;AAaO,SAAS,QAAS,OAAO,OAAO,QAAQ,OAAQ;AACtD,SAAO,MAAM,OAAO,EAAE,KAAM,WAAY,OAAO,OAAO,KAAM,CAAE;AAC/D;",
+  "sources": ["../../src/utils/sorting.ts"],
+  "sourcesContent": ["type Comparable = string | number | undefined;\ntype SortItem = Record< string, Comparable >;\ntype SortField< T > = string | ( ( item: T ) => Comparable );\n\n/**\n * Mirrors the `>` operator for `Comparable` values: lexicographic when both\n * are strings, numeric otherwise (an `undefined` operand is never greater).\n *\n * @param a Left-hand value.\n * @param b Right-hand value.\n * @return Whether `a` is greater than `b`.\n */\nfunction isGreater( a: Comparable, b: Comparable ): boolean {\n\tif ( typeof a === 'string' && typeof b === 'string' ) {\n\t\treturn a > b;\n\t}\n\treturn Number( a ) > Number( b );\n}\n\n/**\n * Recursive stable sorting comparator function.\n *\n * @param field Field to sort by.\n * @param items Items to sort.\n * @param order Order, 'asc' or 'desc'.\n * @return Comparison function to be used in a `.sort()`.\n */\nconst comparator = < T extends SortItem >(\n\tfield: SortField< T >,\n\titems: T[],\n\torder: string\n) => {\n\treturn ( a: T, b: T ) => {\n\t\tlet cmpA: Comparable, cmpB: Comparable;\n\n\t\tif ( typeof field === 'function' ) {\n\t\t\tcmpA = field( a );\n\t\t\tcmpB = field( b );\n\t\t} else {\n\t\t\tcmpA = a[ field ];\n\t\t\tcmpB = b[ field ];\n\t\t}\n\n\t\tif ( isGreater( cmpA, cmpB ) ) {\n\t\t\treturn order === 'asc' ? 1 : -1;\n\t\t} else if ( isGreater( cmpB, cmpA ) ) {\n\t\t\treturn order === 'asc' ? -1 : 1;\n\t\t}\n\n\t\tconst orderA = items.findIndex( ( item ) => item === a );\n\t\tconst orderB = items.findIndex( ( item ) => item === b );\n\n\t\t// Stable sort: maintaining original array order\n\t\tif ( orderA > orderB ) {\n\t\t\treturn 1;\n\t\t} else if ( orderB > orderA ) {\n\t\t\treturn -1;\n\t\t}\n\n\t\treturn 0;\n\t};\n};\n\n/**\n * Order items by a certain key.\n * Supports decorator functions that allow complex picking of a comparison field.\n * Sorts in ascending order by default, but supports descending as well.\n * Stable sort - maintains original order of equal items.\n *\n * @param items Items to order.\n * @param field Field to order by.\n * @param order Sorting order, `asc` or `desc`.\n * @return Sorted items.\n */\nexport function orderBy< T extends SortItem >(\n\titems: T[],\n\tfield: SortField< T >,\n\torder = 'asc'\n) {\n\treturn items.concat().sort( comparator( field, items, order ) );\n}\n"],
+  "mappings": ";AAYA,SAAS,UAAW,GAAe,GAAyB;AAC3D,MAAK,OAAO,MAAM,YAAY,OAAO,MAAM,UAAW;AACrD,WAAO,IAAI;AAAA,EACZ;AACA,SAAO,OAAQ,CAAE,IAAI,OAAQ,CAAE;AAChC;AAUA,IAAM,aAAa,CAClB,OACA,OACA,UACI;AACJ,SAAO,CAAE,GAAM,MAAU;AACxB,QAAI,MAAkB;AAEtB,QAAK,OAAO,UAAU,YAAa;AAClC,aAAO,MAAO,CAAE;AAChB,aAAO,MAAO,CAAE;AAAA,IACjB,OAAO;AACN,aAAO,EAAG,KAAM;AAChB,aAAO,EAAG,KAAM;AAAA,IACjB;AAEA,QAAK,UAAW,MAAM,IAAK,GAAI;AAC9B,aAAO,UAAU,QAAQ,IAAI;AAAA,IAC9B,WAAY,UAAW,MAAM,IAAK,GAAI;AACrC,aAAO,UAAU,QAAQ,KAAK;AAAA,IAC/B;AAEA,UAAM,SAAS,MAAM,UAAW,CAAE,SAAU,SAAS,CAAE;AACvD,UAAM,SAAS,MAAM,UAAW,CAAE,SAAU,SAAS,CAAE;AAGvD,QAAK,SAAS,QAAS;AACtB,aAAO;AAAA,IACR,WAAY,SAAS,QAAS;AAC7B,aAAO;AAAA,IACR;AAEA,WAAO;AAAA,EACR;AACD;AAaO,SAAS,QACf,OACA,OACA,QAAQ,OACP;AACD,SAAO,MAAM,OAAO,EAAE,KAAM,WAAY,OAAO,OAAO,KAAM,CAAE;AAC/D;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-// packages/block-editor/src/utils/transform-styles/index.js
+// packages/block-editor/src/utils/transform-styles/index.ts
 import * as parsel from "parsel-js";
 import Processor from "postcss/lib/processor";
 import CssSyntaxError from "postcss/lib/css-syntax-error";
@@ -34,7 +34,8 @@ function prefixRootSelector(prefix, selector) {
     0,
     {
       type: "combinator",
-      content: " "
+      content: " ",
+      pos: [0, 0]
     },
     ...tokenizedPrefix
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/utils/transform-styles/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport * as parsel from 'parsel-js';\nimport Processor from 'postcss/lib/processor';\nimport CssSyntaxError from 'postcss/lib/css-syntax-error';\nimport prefixSelector from 'postcss-prefix-selector';\nimport rebaseUrl from 'postcss-urlrebase';\n\nconst cacheByWrapperSelector = new Map();\n\nconst ROOT_SELECTOR_TOKENS = [\n\t{ type: 'type', content: 'body' },\n\t{ type: 'type', content: 'html' },\n\t{ type: 'pseudo-class', content: ':root' },\n\t{ type: 'pseudo-class', content: ':where(body)' },\n\t{ type: 'pseudo-class', content: ':where(:root)' },\n\t{ type: 'pseudo-class', content: ':where(html)' },\n];\n\n/**\n * Prefixes root selectors in a way that ensures consistent specificity.\n * This requires special handling, since prefixing a classname before\n * html, body, or :root will generally result in an invalid selector.\n *\n * Some libraries will simply replace the root selector with the prefix\n * instead, but this results in inconsistent specificity.\n *\n * This function instead inserts the prefix after the root tags but before\n * any other part of the selector. This results in consistent specificity:\n * - If a `:where()` selector is used for the prefix, all selectors output\n *   by `transformStyles` will have no specificity increase.\n * - If a classname, id, or something else is used as the prefix, all selectors\n *   will have the same specificity bump when transformed.\n *\n * @param {string} prefix   The prefix.\n * @param {string} selector The selector.\n *\n * @return {string} The prefixed root selector.\n */\nfunction prefixRootSelector( prefix, selector ) {\n\t// Use a tokenizer, since regular expressions are unreliable.\n\tconst tokenized = parsel.tokenize( selector );\n\n\t// Find the last token that contains a root selector by walking back\n\t// through the tokens.\n\tconst lastRootIndex = tokenized.findLastIndex( ( { content, type } ) => {\n\t\treturn ROOT_SELECTOR_TOKENS.some(\n\t\t\t( rootSelector ) =>\n\t\t\t\tcontent === rootSelector.content && type === rootSelector.type\n\t\t);\n\t} );\n\n\t// Walk forwards to find the combinator after the last root.\n\t// This is where the root ends and the rest of the selector begins,\n\t// and the index to insert before.\n\t// Doing it this way takes into account that a root selector like\n\t// 'body' may have additional id/class/pseudo-class/attribute-selector\n\t// parts chained to it, which is difficult to quantify using a regex.\n\tlet insertionPoint = -1;\n\tfor ( let i = lastRootIndex + 1; i < tokenized.length; i++ ) {\n\t\tif ( tokenized[ i ].type === 'combinator' ) {\n\t\t\tinsertionPoint = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\t// Tokenize and insert the prefix with a ' ' combinator before it.\n\tconst tokenizedPrefix = parsel.tokenize( prefix );\n\ttokenized.splice(\n\t\t// Insert at the insertion point, or the end.\n\t\tinsertionPoint === -1 ? tokenized.length : insertionPoint,\n\t\t0,\n\t\t{\n\t\t\ttype: 'combinator',\n\t\t\tcontent: ' ',\n\t\t},\n\t\t...tokenizedPrefix\n\t);\n\n\treturn parsel.stringify( tokenized );\n}\n\nfunction transformStyle(\n\t{ css, ignoredSelectors = [], baseURL },\n\twrapperSelector = '',\n\ttransformOptions\n) {\n\t// When there is no wrapper selector and no 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\ttry {\n\t\tconst excludedSelectors = [\n\t\t\t...ignoredSelectors,\n\t\t\t...( transformOptions?.ignoredSelectors ?? [] ),\n\t\t\twrapperSelector,\n\t\t];\n\n\t\treturn new Processor(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\tprefixSelector( {\n\t\t\t\t\t\tprefix: wrapperSelector,\n\t\t\t\t\t\ttransform( prefix, selector, prefixedSelector ) {\n\t\t\t\t\t\t\t// For backwards compatibility, don't use the `exclude` option\n\t\t\t\t\t\t\t// of postcss-prefix-selector, instead handle it here to match\n\t\t\t\t\t\t\t// the behavior of the old library (postcss-prefix-wrap) that\n\t\t\t\t\t\t\t// `transformStyle` previously used.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\texcludedSelectors.some( ( excludedSelector ) =>\n\t\t\t\t\t\t\t\t\texcludedSelector instanceof RegExp\n\t\t\t\t\t\t\t\t\t\t? selector.match( excludedSelector )\n\t\t\t\t\t\t\t\t\t\t: selector.includes( excludedSelector )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn selector;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst hasRootSelector = ROOT_SELECTOR_TOKENS.some(\n\t\t\t\t\t\t\t\t( rootSelector ) =>\n\t\t\t\t\t\t\t\t\tselector.startsWith( rootSelector.content )\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t// Reorganize root selectors such that the root part comes before the prefix,\n\t\t\t\t\t\t\t// but the prefix still comes before the remaining part of the selector.\n\t\t\t\t\t\t\tif ( hasRootSelector ) {\n\t\t\t\t\t\t\t\treturn prefixRootSelector( prefix, selector );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn prefixedSelector;\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( css, {} ).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 * @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 rewriting urls.\n * @property {?string[]} ignoredSelectors the selectors not to wrap.\n */\n\n/**\n * @typedef {Object} TransformOptions\n * @property {?string[]} ignoredSelectors the selectors not to wrap.\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 * @param {EditorStyle[]}    styles           CSS rules.\n * @param {string}           wrapperSelector  Wrapper selector.\n * @param {TransformOptions} transformOptions Additional options for style transformation.\n * @return {Array} converted rules.\n */\nconst transformStyles = ( styles, wrapperSelector = '', transformOptions ) => {\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, transformOptions );\n\t\t\tcache.set( style, css );\n\t\t}\n\t\treturn css;\n\t} );\n};\n\nexport default transformStyles;\n"],
-  "mappings": "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",
+  "sources": ["../../../src/utils/transform-styles/index.ts"],
+  "sourcesContent": ["/// <reference path=\"./postcss-urlrebase.d.ts\" />\n\n/**\n * External dependencies\n */\nimport * as parsel from 'parsel-js';\nimport Processor from 'postcss/lib/processor';\nimport CssSyntaxError from 'postcss/lib/css-syntax-error';\nimport prefixSelector from 'postcss-prefix-selector';\nimport rebaseUrl from 'postcss-urlrebase';\n\n/**\n * Internal dependencies\n */\nimport type { EditorStyle, TransformOptions } from './types';\n\nconst cacheByWrapperSelector = new Map();\n\nconst ROOT_SELECTOR_TOKENS = [\n\t{ type: 'type', content: 'body' },\n\t{ type: 'type', content: 'html' },\n\t{ type: 'pseudo-class', content: ':root' },\n\t{ type: 'pseudo-class', content: ':where(body)' },\n\t{ type: 'pseudo-class', content: ':where(:root)' },\n\t{ type: 'pseudo-class', content: ':where(html)' },\n];\n\n/**\n * Prefixes root selectors in a way that ensures consistent specificity.\n * This requires special handling, since prefixing a classname before\n * html, body, or :root will generally result in an invalid selector.\n *\n * Some libraries will simply replace the root selector with the prefix\n * instead, but this results in inconsistent specificity.\n *\n * This function instead inserts the prefix after the root tags but before\n * any other part of the selector. This results in consistent specificity:\n * - If a `:where()` selector is used for the prefix, all selectors output\n *   by `transformStyles` will have no specificity increase.\n * - If a classname, id, or something else is used as the prefix, all selectors\n *   will have the same specificity bump when transformed.\n *\n * @param prefix   The prefix.\n * @param selector The selector.\n *\n * @return The prefixed root selector.\n */\nfunction prefixRootSelector( prefix: string, selector: string ) {\n\t// Use a tokenizer, since regular expressions are unreliable.\n\tconst tokenized = parsel.tokenize( selector );\n\n\t// Find the last token that contains a root selector by walking back\n\t// through the tokens.\n\tconst lastRootIndex = tokenized.findLastIndex( ( { content, type } ) => {\n\t\treturn ROOT_SELECTOR_TOKENS.some(\n\t\t\t( rootSelector ) =>\n\t\t\t\tcontent === rootSelector.content && type === rootSelector.type\n\t\t);\n\t} );\n\n\t// Walk forwards to find the combinator after the last root.\n\t// This is where the root ends and the rest of the selector begins,\n\t// and the index to insert before.\n\t// Doing it this way takes into account that a root selector like\n\t// 'body' may have additional id/class/pseudo-class/attribute-selector\n\t// parts chained to it, which is difficult to quantify using a regex.\n\tlet insertionPoint = -1;\n\tfor ( let i = lastRootIndex + 1; i < tokenized.length; i++ ) {\n\t\tif ( tokenized[ i ].type === 'combinator' ) {\n\t\t\tinsertionPoint = i;\n\t\t\tbreak;\n\t\t}\n\t}\n\n\t// Tokenize and insert the prefix with a ' ' combinator before it.\n\tconst tokenizedPrefix = parsel.tokenize( prefix );\n\ttokenized.splice(\n\t\t// Insert at the insertion point, or the end.\n\t\tinsertionPoint === -1 ? tokenized.length : insertionPoint,\n\t\t0,\n\t\t{\n\t\t\ttype: 'combinator',\n\t\t\tcontent: ' ',\n\t\t\tpos: [ 0, 0 ],\n\t\t} as parsel.Token,\n\t\t...tokenizedPrefix\n\t);\n\n\treturn parsel.stringify( tokenized );\n}\n\nfunction transformStyle(\n\t{ css, ignoredSelectors = [], baseURL }: EditorStyle,\n\twrapperSelector = '',\n\ttransformOptions?: TransformOptions\n) {\n\t// When there is no wrapper selector and no 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\ttry {\n\t\tconst excludedSelectors = [\n\t\t\t...ignoredSelectors,\n\t\t\t...( transformOptions?.ignoredSelectors ?? [] ),\n\t\t\twrapperSelector,\n\t\t];\n\n\t\treturn new Processor(\n\t\t\t[\n\t\t\t\twrapperSelector &&\n\t\t\t\t\tprefixSelector( {\n\t\t\t\t\t\tprefix: wrapperSelector,\n\t\t\t\t\t\ttransform( prefix, selector, prefixedSelector ) {\n\t\t\t\t\t\t\t// For backwards compatibility, don't use the `exclude` option\n\t\t\t\t\t\t\t// of postcss-prefix-selector, instead handle it here to match\n\t\t\t\t\t\t\t// the behavior of the old library (postcss-prefix-wrap) that\n\t\t\t\t\t\t\t// `transformStyle` previously used.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\texcludedSelectors.some( ( excludedSelector ) =>\n\t\t\t\t\t\t\t\t\texcludedSelector instanceof RegExp\n\t\t\t\t\t\t\t\t\t\t? selector.match( excludedSelector )\n\t\t\t\t\t\t\t\t\t\t: selector.includes( excludedSelector )\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\treturn selector;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst hasRootSelector = ROOT_SELECTOR_TOKENS.some(\n\t\t\t\t\t\t\t\t( rootSelector ) =>\n\t\t\t\t\t\t\t\t\tselector.startsWith( rootSelector.content )\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t// Reorganize root selectors such that the root part comes before the prefix,\n\t\t\t\t\t\t\t// but the prefix still comes before the remaining part of the selector.\n\t\t\t\t\t\t\tif ( hasRootSelector ) {\n\t\t\t\t\t\t\t\treturn prefixRootSelector( prefix, selector );\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn prefixedSelector;\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 ) as import('postcss').AcceptedPlugin[]\n\t\t).process( css, {} ).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 * @param styles           CSS rules.\n * @param wrapperSelector  Wrapper selector.\n * @param transformOptions Additional options for style transformation.\n * @return converted rules.\n */\nconst transformStyles = (\n\tstyles: EditorStyle[],\n\twrapperSelector = '',\n\ttransformOptions?: TransformOptions\n) => {\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, transformOptions );\n\t\t\tcache.set( style, css );\n\t\t}\n\t\treturn css;\n\t} );\n};\n\nexport default transformStyles;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=postcss-urlrebase.d.mjs.map

package/build-module/utils/transform-styles/postcss-urlrebase.d.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/utils/transform-styles/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/utils/transform-styles/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-module/utils/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/build-module/utils/types.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/build-style/content-rtl.css

@@ -686,6 +686,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
+  text-shadow: none;
   margin-block-start: 0;
   margin-block-end: 0;
 }
@@ -877,6 +878,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text [data-rich-text-placeholder]::after {
   content: attr(data-rich-text-placeholder);
   opacity: 0.62;
+  text-shadow: none;
 }
 .rich-text:focus {
   outline: none;

package/build-style/content.css

@@ -687,6 +687,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 }
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
+  text-shadow: none;
   margin-block-start: 0;
   margin-block-end: 0;
 }
@@ -878,6 +879,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
 .rich-text [data-rich-text-placeholder]::after {
   content: attr(data-rich-text-placeholder);
   opacity: 0.62;
+  text-shadow: none;
 }
 .rich-text:focus {
   outline: none;

package/build-style/style-rtl.css

@@ -1519,14 +1519,22 @@ iframe[name=editor-canvas] {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
+.block-editor-panel-color-gradient-settings__contrast-notice {
+  margin-bottom: 16px;
+}
+
 /**
 * The following styles replicate the separated border of the
 * `ItemGroup` component but allows for hidden items. This is because
 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
 * must at least render a placeholder which would otherwise interfere
 * with the `:last-child` styles.
+*
+* Applied via the shared `block-editor-color-gradient-item` class on
+* color/gradient dropdown items across the Color, Background, and
+* Typography panels.
 */
-.block-editor-tools-panel-color-gradient-settings__item {
+.block-editor-color-gradient-item {
   padding: 0;
   max-width: 100%;
   position: relative;
@@ -1534,18 +1542,17 @@ iframe[name=editor-canvas] {
   border-left: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
 }
-.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
-  margin-top: 24px;
+.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
   border-top: 1px solid #ddd;
 }
-.block-editor-tools-panel-color-gradient-settings__item:nth-last-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
+.block-editor-color-gradient-item:nth-last-child(1 of .block-editor-color-gradient-item) {
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
 }
-.block-editor-tools-panel-color-gradient-settings__item > div,
-.block-editor-tools-panel-color-gradient-settings__item > div > button {
+.block-editor-color-gradient-item > div,
+.block-editor-color-gradient-item > div > button {
   border-radius: inherit;
 }
 
@@ -1569,6 +1576,9 @@ iframe[name=editor-canvas] {
   text-overflow: ellipsis;
   max-width: calc(100% - 44px);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
+  max-width: calc(100% - 72px);
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
@@ -1600,6 +1610,19 @@ iframe[name=editor-canvas] {
     opacity: 1;
   }
 }
+.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
+  left: 28px;
+}
+
+.block-editor-panel-color-gradient-settings__contrast-warning {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  margin: auto 8px auto;
+}
+.block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
+  border-radius: 2px;
+}
 
 .block-editor-date-format-picker {
   margin: 0 0 16px;
@@ -3410,33 +3433,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-/**
- * ItemGroup-like border styles for the background panel's ToolsPanelItems.
- * Replicates the separated border of the `ItemGroup` component while
- * allowing for hidden placeholder items (same approach as the color panel).
- */
-.block-editor-background-panel__item {
-  padding: 0;
-  max-width: 100%;
-  position: relative;
-  border-right: 1px solid #ddd;
-  border-left: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-}
-.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
-  border-top-right-radius: 2px;
-  border-top-left-radius: 2px;
-  border-top: 1px solid #ddd;
-}
-.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
-  border-bottom-right-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-.block-editor-background-panel__item > div,
-.block-editor-background-panel__item > div > button {
-  border-radius: inherit;
-}
-
 .background-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
 }
@@ -3651,15 +3647,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
-.color-block-support-panel {
-  /**
-   * After converting PanelColorGradientSettings to render as a ToolsPanel
-   * we need to remove the top margin when wrapping inner content due to
-   * rendering via SlotFills.
-   */
+
+.elements-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
 }
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  margin-top: 0;
+.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
+  row-gap: 0;
 }
 
 .dimensions-block-support-panel .single-column {

package/build-style/style.css

@@ -1519,14 +1519,22 @@ iframe[name=editor-canvas] {
   background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
+.block-editor-panel-color-gradient-settings__contrast-notice {
+  margin-bottom: 16px;
+}
+
 /**
 * The following styles replicate the separated border of the
 * `ItemGroup` component but allows for hidden items. This is because
 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
 * must at least render a placeholder which would otherwise interfere
 * with the `:last-child` styles.
+*
+* Applied via the shared `block-editor-color-gradient-item` class on
+* color/gradient dropdown items across the Color, Background, and
+* Typography panels.
 */
-.block-editor-tools-panel-color-gradient-settings__item {
+.block-editor-color-gradient-item {
   padding: 0;
   max-width: 100%;
   position: relative;
@@ -1534,18 +1542,17 @@ iframe[name=editor-canvas] {
   border-right: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
 }
-.block-editor-tools-panel-color-gradient-settings__item:nth-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
-  margin-top: 24px;
+.block-editor-color-gradient-item:nth-child(1 of .block-editor-color-gradient-item) {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
   border-top: 1px solid #ddd;
 }
-.block-editor-tools-panel-color-gradient-settings__item:nth-last-child(1 of .block-editor-tools-panel-color-gradient-settings__item) {
+.block-editor-color-gradient-item:nth-last-child(1 of .block-editor-color-gradient-item) {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-.block-editor-tools-panel-color-gradient-settings__item > div,
-.block-editor-tools-panel-color-gradient-settings__item > div > button {
+.block-editor-color-gradient-item > div,
+.block-editor-color-gradient-item > div > button {
   border-radius: inherit;
 }
 
@@ -1569,6 +1576,9 @@ iframe[name=editor-canvas] {
   text-overflow: ellipsis;
   max-width: calc(100% - 44px);
 }
+.block-editor-tools-panel-color-gradient-settings__dropdown > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
+  max-width: calc(100% - 72px);
+}
 
 .block-editor-panel-color-gradient-settings__dropdown {
   width: 100%;
@@ -1600,6 +1610,19 @@ iframe[name=editor-canvas] {
     opacity: 1;
   }
 }
+.block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + .block-editor-panel-color-gradient-settings__reset {
+  right: 28px;
+}
+
+.block-editor-panel-color-gradient-settings__contrast-warning {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+}
+.block-editor-panel-color-gradient-settings__contrast-warning.block-editor-panel-color-gradient-settings__contrast-warning {
+  border-radius: 2px;
+}
 
 .block-editor-date-format-picker {
   margin: 0 0 16px;
@@ -3412,33 +3435,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-/**
- * ItemGroup-like border styles for the background panel's ToolsPanelItems.
- * Replicates the separated border of the `ItemGroup` component while
- * allowing for hidden placeholder items (same approach as the color panel).
- */
-.block-editor-background-panel__item {
-  padding: 0;
-  max-width: 100%;
-  position: relative;
-  border-left: 1px solid #ddd;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-}
-.block-editor-background-panel__item:nth-child(1 of .block-editor-background-panel__item) {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  border-top: 1px solid #ddd;
-}
-.block-editor-background-panel__item:nth-last-child(1 of .block-editor-background-panel__item) {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-.block-editor-background-panel__item > div,
-.block-editor-background-panel__item > div > button {
-  border-radius: inherit;
-}
-
 .background-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
 }
@@ -3653,15 +3649,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 .color-block-support-panel.color-block-support-panel .color-block-support-panel__inner-wrapper {
   row-gap: 0;
 }
-.color-block-support-panel {
-  /**
-   * After converting PanelColorGradientSettings to render as a ToolsPanel
-   * we need to remove the top margin when wrapping inner content due to
-   * rendering via SlotFills.
-   */
+
+.elements-block-support-panel {
+  /* Increased specificity required to remove the slot wrapper's row gap */
 }
-.color-block-support-panel .block-editor-tools-panel-color-gradient-settings__item.first {
-  margin-top: 0;
+.elements-block-support-panel.elements-block-support-panel .elements-block-support-panel__inner-wrapper {
+  row-gap: 0;
 }
 
 .dimensions-block-support-panel .single-column {

package/build-types/utils/block-bindings.d.ts

@@ -0,0 +1,27 @@
+type Binding = {
+    source?: string;
+};
+type Bindings = Record<string, Binding>;
+/**
+ * Checks if the block has the `__default` binding for pattern overrides.
+ *
+ * @param bindings A block's bindings from the metadata attribute.
+ *
+ * @return Whether the block has the `__default` binding for pattern overrides.
+ */
+export declare function hasPatternOverridesDefaultBinding(bindings: Bindings | undefined | null): bindings is Bindings;
+/**
+ * Returns the bindings with the `__default` binding for pattern overrides
+ * replaced with the full-set of supported attributes. e.g.:
+ *
+ * - bindings passed in: `{ __default: { source: 'core/pattern-overrides' } }`
+ * - bindings returned: `{ content: { source: 'core/pattern-overrides' } }`
+ *
+ * @param bindings            A block's bindings from the metadata attribute.
+ * @param supportedAttributes The block's attributes which are supported by block bindings.
+ *
+ * @return The bindings with default replaced for pattern overrides.
+ */
+export declare function replacePatternOverridesDefaultBinding(bindings: Bindings | undefined | null, supportedAttributes: string[]): Bindings | null | undefined;
+export {};
+//# sourceMappingURL=block-bindings.d.ts.map

package/build-types/utils/block-bindings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-bindings.d.ts","sourceRoot":"","sources":["../../src/utils/block-bindings.ts"],"names":[],"mappings":"AAAA,KAAK,OAAO,GAAG;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACnC,KAAK,QAAQ,GAAG,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;AAK1C;;;;;;GAMG;AACH,wBAAgB,iCAAiC,CAChD,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,GACnC,QAAQ,IAAI,QAAQ,CAEtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qCAAqC,CACpD,QAAQ,EAAE,QAAQ,GAAG,SAAS,GAAG,IAAI,EACrC,mBAAmB,EAAE,MAAM,EAAE,+BAiB7B"}

package/build-types/utils/color-values.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Extracts the palette slug from a style value for any preset type, supporting
+ * both the user preset format and the theme CSS-variable format:
+ *
+ * - User format:  `var:preset|<type>|slug`
+ * - Theme format: `var(--wp--preset--<type>--slug)`
+ *
+ * Returns `undefined` for plain values, non-strings, or any other
+ * unrecognised format.
+ *
+ * @param rawValue Raw style value stored in the style object.
+ * @param type     Preset type, e.g. `'color'` or `'gradient'`.
+ * @return The palette slug, or undefined.
+ */
+export declare function extractPresetSlug(rawValue: unknown, type: 'color' | 'gradient'): string | undefined;
+/**
+ * Encodes a color value for storage in the style object.
+ *
+ * When a `slug` is provided it is used directly (the slug-based selection
+ * path). This is important because two palette entries can share the same
+ * hex value (e.g. two custom colors both set to `#e10000`); relying on a
+ * hex lookup alone would collapse them onto whichever entry appears first
+ * in the palette and silently discard the user's actual choice. Only when
+ * no slug is supplied does the function fall back to matching the hex value
+ * against the palette; if a match is found the slug is encoded, otherwise
+ * the raw value is stored as-is.
+ *
+ * Callers pass the flattened palette (`allColors`), typically computed once
+ * per render from the per-origin `colors` array.
+ *
+ * @param allColors  Flat array of `{ color, slug }` objects.
+ * @param colorValue Hex or CSS color string.
+ * @param slug       Optional palette slug from slug-aware selection.
+ * @return Encoded value suitable for the style object.
+ */
+export declare function encodeColorValueWithPalette(allColors: {
+    color: string;
+    slug: string;
+}[], colorValue?: string, slug?: string): string | undefined;
+//# sourceMappingURL=color-values.d.ts.map

package/build-types/utils/color-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-values.d.ts","sourceRoot":"","sources":["../../src/utils/color-values.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,iBAAiB,CAChC,QAAQ,EAAE,OAAO,EACjB,IAAI,EAAE,OAAO,GAAG,UAAU,sBAc1B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,2BAA2B,CAC1C,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,EAC5C,UAAU,CAAC,EAAE,MAAM,EACnB,IAAI,CAAC,EAAE,MAAM,sBAOb"}