@wordpress/block-editor 12.25.0 → 12.26.0

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: "";
@@ -308,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.is-hovered {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block.is-hovered::after {
+.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-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 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
+  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.is-selected {
-  cursor: default;
+
+.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.is-selected.rich-text {
-  cursor: unset;
+.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-outline-mode .block-editor-block-list__block.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;
+.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 {
@@ -365,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;
@@ -408,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;
@@ -511,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;
@@ -545,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 {
@@ -847,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;

package/build-style/content.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
   left: 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;
-  right: 1px;
-  bottom: 1px;
-  left: 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;
+  right: 0;
+  bottom: 0;
+  left: 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: "";
@@ -308,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.is-hovered {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block.is-hovered::after {
+.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-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;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 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.is-selected {
-  cursor: default;
+
+.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.is-selected.rich-text {
-  cursor: unset;
+.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-outline-mode .block-editor-block-list__block.is-selected::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
+.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 {
@@ -365,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: "";
   left: 0;
@@ -408,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: left;
   margin-right: 2em;
@@ -511,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-right: auto;
@@ -545,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;
-  left: 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);
-  left: calc(( 100% - 100vw ) / 2);
+.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
+  left: 0;
+  right: 0;
+  width: auto;
 }
 
 .block-editor-block-list__layout .is-dragging {
@@ -847,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-left: 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;