@wordpress/block-editor 14.3.5 → 14.3.7

package/build-module/utils/block-bindings.js

@@ -29,6 +29,8 @@ function isObjectEmpty(object) {
  * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
  * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
  *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
  * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
  *
  * @example
@@ -59,10 +61,11 @@ function isObjectEmpty(object) {
  * removeAllBlockBindings();
  * ```
  */
-export function useBlockBindingsUtils() {
+export function useBlockBindingsUtils(clientId) {
   const {
-    clientId
+    clientId: contextClientId
   } = useBlockEditContext();
+  const blockClientId = clientId || contextClientId;
   const {
     updateBlockAttributes
   } = useDispatch(blockEditorStore);
@@ -105,7 +108,7 @@ export function useBlockBindingsUtils() {
         bindings: currentBindings,
         ...metadata
       } = {}
-    } = getBlockAttributes(clientId);
+    } = getBlockAttributes(blockClientId);
     const newBindings = {
       ...currentBindings
     };
@@ -123,7 +126,7 @@ export function useBlockBindingsUtils() {
     if (isObjectEmpty(newMetadata.bindings)) {
       delete newMetadata.bindings;
     }
-    updateBlockAttributes(clientId, {
+    updateBlockAttributes(blockClientId, {
       metadata: isObjectEmpty(newMetadata) ? undefined : newMetadata
     });
   };
@@ -145,8 +148,8 @@ export function useBlockBindingsUtils() {
         bindings,
         ...metadata
       } = {}
-    } = getBlockAttributes(clientId);
-    updateBlockAttributes(clientId, {
+    } = getBlockAttributes(blockClientId);
+    updateBlockAttributes(blockClientId, {
       metadata: isObjectEmpty(metadata) ? undefined : metadata
     });
   };

package/build-module/utils/block-bindings.js.map

@@ -1 +1 @@
-{"version":3,"names":["useDispatch","useRegistry","store","blockEditorStore","useBlockEditContext","isObjectEmpty","object","Object","keys","length","useBlockBindingsUtils","clientId","updateBlockAttributes","getBlockAttributes","select","updateBlockBindings","bindings","metadata","currentBindings","newBindings","entries","forEach","attribute","binding","newMetadata","undefined","removeAllBlockBindings"],"sources":["@wordpress/block-editor/src/utils/block-bindings.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useBlockEditContext } from '../components/block-edit';\n\nfunction isObjectEmpty( object ) {\n\treturn ! object || Object.keys( object ).length === 0;\n}\n\n/**\n * Contains utils to update the block `bindings` metadata.\n *\n * @typedef {Object} WPBlockBindingsUtils\n *\n * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.\n * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.\n */\n\n/**\n * Retrieves the existing utils needed to update the block `bindings` metadata.\n * They can be used to create, modify, or remove connections from the existing block attributes.\n *\n * It contains the following utils:\n * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.\n * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.\n *\n * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.\n *\n * @example\n * ```js\n * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();\n *\n * // Update url and alt attributes.\n * updateBlockBindings( {\n *     url: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'url_custom_field',\n *         },\n *     },\n *     alt: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'text_custom_field',\n *         },\n *     },\n * } );\n *\n * // Remove binding from url attribute.\n * updateBlockBindings( { url: undefined } );\n *\n * // Remove bindings from all attributes.\n * removeAllBlockBindings();\n * ```\n */\nexport function useBlockBindingsUtils() {\n\tconst { clientId } = useBlockEditContext();\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useRegistry().select( blockEditorStore );\n\n\t/**\n\t * Updates the value of the bindings connected to block attributes.\n\t * It removes the binding when the new value is `undefined`.\n\t *\n\t * @param {Object} bindings        Bindings including the attributes to update and the new object.\n\t * @param {string} bindings.source The source name to connect to.\n\t * @param {Object} [bindings.args] Object containing the arguments needed by the source.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { updateBlockBindings } = useBlockBindingsUtils();\n\t * updateBlockBindings( {\n\t *     url: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'url_custom_field',\n\t *         },\n\t * \t   },\n\t *     alt: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'text_custom_field',\n\t *         },\n\t * \t   }\n\t * } );\n\t * ```\n\t */\n\tconst updateBlockBindings = ( bindings ) => {\n\t\tconst { metadata: { bindings: currentBindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( clientId );\n\t\tconst newBindings = { ...currentBindings };\n\n\t\tObject.entries( bindings ).forEach( ( [ attribute, binding ] ) => {\n\t\t\tif ( ! binding && newBindings[ attribute ] ) {\n\t\t\t\tdelete newBindings[ attribute ];\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tnewBindings[ attribute ] = binding;\n\t\t} );\n\n\t\tconst newMetadata = {\n\t\t\t...metadata,\n\t\t\tbindings: newBindings,\n\t\t};\n\n\t\tif ( isObjectEmpty( newMetadata.bindings ) ) {\n\t\t\tdelete newMetadata.bindings;\n\t\t}\n\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tmetadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,\n\t\t} );\n\t};\n\n\t/**\n\t * Removes the bindings property of the `metadata` attribute.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { removeAllBlockBindings } = useBlockBindingsUtils();\n\t * removeAllBlockBindings();\n\t * ```\n\t */\n\tconst removeAllBlockBindings = () => {\n\t\tconst { metadata: { bindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( clientId );\n\t\tupdateBlockAttributes( clientId, {\n\t\t\tmetadata: isObjectEmpty( metadata ) ? undefined : metadata,\n\t\t} );\n\t};\n\n\treturn { updateBlockBindings, removeAllBlockBindings };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,WAAW,QAAQ,iBAAiB;;AAE1D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,SAASC,aAAaA,CAAEC,MAAM,EAAG;EAChC,OAAO,CAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAAEF,MAAO,CAAC,CAACG,MAAM,KAAK,CAAC;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAA,EAAG;EACvC,MAAM;IAAEC;EAAS,CAAC,GAAGP,mBAAmB,CAAC,CAAC;EAC1C,MAAM;IAAEQ;EAAsB,CAAC,GAAGZ,WAAW,CAAEG,gBAAiB,CAAC;EACjE,MAAM;IAAEU;EAAmB,CAAC,GAAGZ,WAAW,CAAC,CAAC,CAACa,MAAM,CAAEX,gBAAiB,CAAC;;EAEvE;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMY,mBAAmB,GAAKC,QAAQ,IAAM;IAC3C,MAAM;MAAEC,QAAQ,EAAE;QAAED,QAAQ,EAAEE,eAAe;QAAE,GAAGD;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GAClEJ,kBAAkB,CAAEF,QAAS,CAAC;IAC/B,MAAMQ,WAAW,GAAG;MAAE,GAAGD;IAAgB,CAAC;IAE1CX,MAAM,CAACa,OAAO,CAAEJ,QAAS,CAAC,CAACK,OAAO,CAAE,CAAE,CAAEC,SAAS,EAAEC,OAAO,CAAE,KAAM;MACjE,IAAK,CAAEA,OAAO,IAAIJ,WAAW,CAAEG,SAAS,CAAE,EAAG;QAC5C,OAAOH,WAAW,CAAEG,SAAS,CAAE;QAC/B;MACD;MACAH,WAAW,CAAEG,SAAS,CAAE,GAAGC,OAAO;IACnC,CAAE,CAAC;IAEH,MAAMC,WAAW,GAAG;MACnB,GAAGP,QAAQ;MACXD,QAAQ,EAAEG;IACX,CAAC;IAED,IAAKd,aAAa,CAAEmB,WAAW,CAACR,QAAS,CAAC,EAAG;MAC5C,OAAOQ,WAAW,CAACR,QAAQ;IAC5B;IAEAJ,qBAAqB,CAAED,QAAQ,EAAE;MAChCM,QAAQ,EAAEZ,aAAa,CAAEmB,WAAY,CAAC,GAAGC,SAAS,GAAGD;IACtD,CAAE,CAAC;EACJ,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAME,sBAAsB,GAAGA,CAAA,KAAM;IACpC,MAAM;MAAET,QAAQ,EAAE;QAAED,QAAQ;QAAE,GAAGC;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GACjDJ,kBAAkB,CAAEF,QAAS,CAAC;IAC/BC,qBAAqB,CAAED,QAAQ,EAAE;MAChCM,QAAQ,EAAEZ,aAAa,CAAEY,QAAS,CAAC,GAAGQ,SAAS,GAAGR;IACnD,CAAE,CAAC;EACJ,CAAC;EAED,OAAO;IAAEF,mBAAmB;IAAEW;EAAuB,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["useDispatch","useRegistry","store","blockEditorStore","useBlockEditContext","isObjectEmpty","object","Object","keys","length","useBlockBindingsUtils","clientId","contextClientId","blockClientId","updateBlockAttributes","getBlockAttributes","select","updateBlockBindings","bindings","metadata","currentBindings","newBindings","entries","forEach","attribute","binding","newMetadata","undefined","removeAllBlockBindings"],"sources":["@wordpress/block-editor/src/utils/block-bindings.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useRegistry } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { useBlockEditContext } from '../components/block-edit';\n\nfunction isObjectEmpty( object ) {\n\treturn ! object || Object.keys( object ).length === 0;\n}\n\n/**\n * Contains utils to update the block `bindings` metadata.\n *\n * @typedef {Object} WPBlockBindingsUtils\n *\n * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.\n * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.\n */\n\n/**\n * Retrieves the existing utils needed to update the block `bindings` metadata.\n * They can be used to create, modify, or remove connections from the existing block attributes.\n *\n * It contains the following utils:\n * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.\n * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.\n *\n * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.\n *\n * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.\n *\n * @example\n * ```js\n * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();\n *\n * // Update url and alt attributes.\n * updateBlockBindings( {\n *     url: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'url_custom_field',\n *         },\n *     },\n *     alt: {\n *         source: 'core/post-meta',\n *         args: {\n *             key: 'text_custom_field',\n *         },\n *     },\n * } );\n *\n * // Remove binding from url attribute.\n * updateBlockBindings( { url: undefined } );\n *\n * // Remove bindings from all attributes.\n * removeAllBlockBindings();\n * ```\n */\nexport function useBlockBindingsUtils( clientId ) {\n\tconst { clientId: contextClientId } = useBlockEditContext();\n\tconst blockClientId = clientId || contextClientId;\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useRegistry().select( blockEditorStore );\n\n\t/**\n\t * Updates the value of the bindings connected to block attributes.\n\t * It removes the binding when the new value is `undefined`.\n\t *\n\t * @param {Object} bindings        Bindings including the attributes to update and the new object.\n\t * @param {string} bindings.source The source name to connect to.\n\t * @param {Object} [bindings.args] Object containing the arguments needed by the source.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { updateBlockBindings } = useBlockBindingsUtils();\n\t * updateBlockBindings( {\n\t *     url: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'url_custom_field',\n\t *         },\n\t * \t   },\n\t *     alt: {\n\t *         source: 'core/post-meta',\n\t *         args: {\n\t *             key: 'text_custom_field',\n\t *         },\n\t * \t   }\n\t * } );\n\t * ```\n\t */\n\tconst updateBlockBindings = ( bindings ) => {\n\t\tconst { metadata: { bindings: currentBindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( blockClientId );\n\t\tconst newBindings = { ...currentBindings };\n\n\t\tObject.entries( bindings ).forEach( ( [ attribute, binding ] ) => {\n\t\t\tif ( ! binding && newBindings[ attribute ] ) {\n\t\t\t\tdelete newBindings[ attribute ];\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tnewBindings[ attribute ] = binding;\n\t\t} );\n\n\t\tconst newMetadata = {\n\t\t\t...metadata,\n\t\t\tbindings: newBindings,\n\t\t};\n\n\t\tif ( isObjectEmpty( newMetadata.bindings ) ) {\n\t\t\tdelete newMetadata.bindings;\n\t\t}\n\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\tmetadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,\n\t\t} );\n\t};\n\n\t/**\n\t * Removes the bindings property of the `metadata` attribute.\n\t *\n\t * @example\n\t * ```js\n\t * import { useBlockBindingsUtils } from '@wordpress/block-editor'\n\t *\n\t * const { removeAllBlockBindings } = useBlockBindingsUtils();\n\t * removeAllBlockBindings();\n\t * ```\n\t */\n\tconst removeAllBlockBindings = () => {\n\t\tconst { metadata: { bindings, ...metadata } = {} } =\n\t\t\tgetBlockAttributes( blockClientId );\n\t\tupdateBlockAttributes( blockClientId, {\n\t\t\tmetadata: isObjectEmpty( metadata ) ? undefined : metadata,\n\t\t} );\n\t};\n\n\treturn { updateBlockBindings, removeAllBlockBindings };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,WAAW,QAAQ,iBAAiB;;AAE1D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,mBAAmB,QAAQ,0BAA0B;AAE9D,SAASC,aAAaA,CAAEC,MAAM,EAAG;EAChC,OAAO,CAAEA,MAAM,IAAIC,MAAM,CAACC,IAAI,CAAEF,MAAO,CAAC,CAACG,MAAM,KAAK,CAAC;AACtD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,qBAAqBA,CAAEC,QAAQ,EAAG;EACjD,MAAM;IAAEA,QAAQ,EAAEC;EAAgB,CAAC,GAAGR,mBAAmB,CAAC,CAAC;EAC3D,MAAMS,aAAa,GAAGF,QAAQ,IAAIC,eAAe;EACjD,MAAM;IAAEE;EAAsB,CAAC,GAAGd,WAAW,CAAEG,gBAAiB,CAAC;EACjE,MAAM;IAAEY;EAAmB,CAAC,GAAGd,WAAW,CAAC,CAAC,CAACe,MAAM,CAAEb,gBAAiB,CAAC;;EAEvE;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMc,mBAAmB,GAAKC,QAAQ,IAAM;IAC3C,MAAM;MAAEC,QAAQ,EAAE;QAAED,QAAQ,EAAEE,eAAe;QAAE,GAAGD;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GAClEJ,kBAAkB,CAAEF,aAAc,CAAC;IACpC,MAAMQ,WAAW,GAAG;MAAE,GAAGD;IAAgB,CAAC;IAE1Cb,MAAM,CAACe,OAAO,CAAEJ,QAAS,CAAC,CAACK,OAAO,CAAE,CAAE,CAAEC,SAAS,EAAEC,OAAO,CAAE,KAAM;MACjE,IAAK,CAAEA,OAAO,IAAIJ,WAAW,CAAEG,SAAS,CAAE,EAAG;QAC5C,OAAOH,WAAW,CAAEG,SAAS,CAAE;QAC/B;MACD;MACAH,WAAW,CAAEG,SAAS,CAAE,GAAGC,OAAO;IACnC,CAAE,CAAC;IAEH,MAAMC,WAAW,GAAG;MACnB,GAAGP,QAAQ;MACXD,QAAQ,EAAEG;IACX,CAAC;IAED,IAAKhB,aAAa,CAAEqB,WAAW,CAACR,QAAS,CAAC,EAAG;MAC5C,OAAOQ,WAAW,CAACR,QAAQ;IAC5B;IAEAJ,qBAAqB,CAAED,aAAa,EAAE;MACrCM,QAAQ,EAAEd,aAAa,CAAEqB,WAAY,CAAC,GAAGC,SAAS,GAAGD;IACtD,CAAE,CAAC;EACJ,CAAC;;EAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAME,sBAAsB,GAAGA,CAAA,KAAM;IACpC,MAAM;MAAET,QAAQ,EAAE;QAAED,QAAQ;QAAE,GAAGC;MAAS,CAAC,GAAG,CAAC;IAAE,CAAC,GACjDJ,kBAAkB,CAAEF,aAAc,CAAC;IACpCC,qBAAqB,CAAED,aAAa,EAAE;MACrCM,QAAQ,EAAEd,aAAa,CAAEc,QAAS,CAAC,GAAGQ,SAAS,GAAGR;IACnD,CAAE,CAAC;EACJ,CAAC;EAED,OAAO;IAAEF,mBAAmB;IAAEW;EAAuB,CAAC;AACvD","ignoreList":[]}

package/build-style/content-rtl.css

@@ -500,13 +500,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
-  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+  font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;
@@ -800,29 +801,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .block-editor-iframe__body {
   position: relative;
-}
-
-.block-editor-iframe__container {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.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);
+  border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__html {
-  border: 0 solid #ddd;
   transform-origin: top center;
-  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -830,17 +814,26 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     transition-delay: 0s;
   }
 }
+.block-editor-iframe__html.zoom-out-animation {
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html.zoom-out-animation {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 
 .block-editor-iframe__html.is-zoomed-out {
-  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  transform: translateX(calc(-1*((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale))));
+  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));
+  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) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .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;
+  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))) / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;

package/build-style/content.css

@@ -500,13 +500,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
-  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+  font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;
@@ -800,29 +801,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 .block-editor-iframe__body {
   position: relative;
-}
-
-.block-editor-iframe__container {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.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);
+  border: 0.01px solid transparent;
 }
 
 .block-editor-iframe__html {
-  border: 0 solid #ddd;
   transform-origin: top center;
-  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s, scale 0s, padding 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -830,17 +814,26 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     transition-delay: 0s;
   }
 }
+.block-editor-iframe__html.zoom-out-animation {
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html.zoom-out-animation {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
 
 .block-editor-iframe__html.is-zoomed-out {
-  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  transform: translateX(calc((var(--wp-block-editor-iframe-zoom-out-scale-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale)));
+  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));
+  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) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
+  padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
+  padding-bottom: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .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;
+  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))) / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-iframe__html.is-zoomed-out body > .is-root-container:not(.wp-block-post-content) {
   flex: 1;

package/build-style/style-rtl.css

@@ -270,7 +270,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 @media (prefers-reduced-motion: reduce) {
   iframe[name=editor-canvas] {
@@ -554,25 +554,8 @@ iframe[name=editor-canvas] {
   right: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+  top: -1px;
 }
 
 .block-editor-block-lock-modal {
@@ -1919,6 +1902,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+  position: absolute;
+  left: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2430,6 +2429,14 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
   color: var(--wp-admin-theme-color);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
+  fill: currentColor;
+}
+@media (forced-colors: active) {
+  .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
+    fill: CanvasText;
+  }
+}
 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
   color: inherit;
 }
@@ -3053,10 +3060,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3470,9 +3481,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-left: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3767,6 +3781,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;

package/build-style/style.css

@@ -270,7 +270,7 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
 }
 @media (prefers-reduced-motion: reduce) {
   iframe[name=editor-canvas] {
@@ -554,25 +554,8 @@ iframe[name=editor-canvas] {
   left: 50%;
 }
 
-.zoom-out-toolbar .block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
-.zoom-out-toolbar .zoom-out-toolbar-button:focus::before,
-.zoom-out-toolbar .block-editor-block-toolbar-shuffle:focus::before,
-.zoom-out-toolbar .block-selection-button_drag-handle:focus::before {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.zoom-out-toolbar .block-editor-block-mover {
-  background: none;
-  border: none;
-}
-.zoom-out-toolbar .zoom-out-toolbar-button {
-  height: 40px;
-}
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
+.components-button.block-editor-button-pattern-inserter__button.block-editor-block-tools__zoom-out-mode-inserter-button {
+  top: -1px;
 }
 
 .block-editor-block-lock-modal {
@@ -1920,6 +1903,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-scale-container-width, 100vw);
+  position: absolute;
+  right: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2431,6 +2430,14 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button:hover {
   color: var(--wp-admin-theme-color);
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
+  fill: currentColor;
+}
+@media (forced-colors: active) {
+  .block-editor-list-view-leaf .block-editor-list-view-block-select-button svg {
+    fill: CanvasText;
+  }
+}
 .is-dragging-components-draggable .block-editor-list-view-leaf:not(.is-selected) .block-editor-list-view-block-select-button:hover {
   color: inherit;
 }
@@ -3054,10 +3061,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3471,9 +3482,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-right: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3768,6 +3782,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 
 .block-editor-inserter__panel-header {
+  position: relative;
   display: inline-flex;
   align-items: center;
   padding: 16px 16px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.5",
+	"version": "14.3.7",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,9 +40,9 @@
 		"@wordpress/api-fetch": "^7.8.2",
 		"@wordpress/blob": "^4.8.1",
 		"@wordpress/block-serialization-default-parser": "^5.8.1",
-		"@wordpress/blocks": "^13.8.4",
-		"@wordpress/commands": "^1.8.5",
-		"@wordpress/components": "^28.8.5",
+		"@wordpress/blocks": "^13.8.5",
+		"@wordpress/commands": "^1.8.7",
+		"@wordpress/components": "^28.8.7",
 		"@wordpress/compose": "^7.8.3",
 		"@wordpress/data": "^10.8.3",
 		"@wordpress/date": "^5.8.2",
@@ -58,7 +58,7 @@
 		"@wordpress/keyboard-shortcuts": "^5.8.3",
 		"@wordpress/keycodes": "^4.8.2",
 		"@wordpress/notices": "^5.8.3",
-		"@wordpress/preferences": "^4.8.5",
+		"@wordpress/preferences": "^4.8.7",
 		"@wordpress/private-apis": "^1.8.1",
 		"@wordpress/rich-text": "^7.8.3",
 		"@wordpress/style-engine": "^2.8.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "21b3c2e9abda74edab42455041edc6e82fccc388"
+	"gitHead": "b1ace05ee94f0803e51b205306c19fc706499ede"
 }

package/src/components/block-canvas/style.scss

@@ -4,5 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	// Handles transitions between device previews
 	@include editor-canvas-resize-animation;
 }

package/src/components/block-list/block.js

@@ -710,7 +710,6 @@ function BlockListBlockProvider( props ) {
 					) && hasSelectedInnerBlock( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				editorMode,
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
@@ -766,7 +765,6 @@ function BlockListBlockProvider( props ) {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
-		editorMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		index,
@@ -821,7 +819,6 @@ function BlockListBlockProvider( props ) {
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
-		editorMode,
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,

package/src/components/block-list/content.scss

@@ -464,14 +464,15 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	overflow: hidden;
 	font-size: $default-font-size;
 	font-family: $default-font;
 	color: $black;
 	font-weight: normal;
 
 	.is-zoomed-out & {
-		// Scale the font size based on the zoom level.
-		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+		// Maintains an absolute font-size by counter-scaling based on the zoom level.
+		font-size: calc(#{$default-font-size} / var(--wp-block-editor-iframe-zoom-out-scale));
 	}
 
 	&.is-dragged-over {

package/src/components/block-list/use-block-props/index.js

@@ -86,7 +86,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
-		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -117,7 +116,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useZoomOutModeExit( { editorMode } ),
+		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -10,6 +10,7 @@ import { useRefEffect } from '@wordpress/compose';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Adds block behaviour:
@@ -20,9 +21,18 @@ import { store as blockEditorStore } from '../../../store';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const { getBlockRootClientId, getBlockIndex } =
-		useSelect( blockEditorStore );
-	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		isZoomOut,
+		__unstableGetEditorMode,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		insertAfterBlock,
+		removeBlock,
+		__unstableSetEditorMode,
+		resetZoomLevel,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	return useRefEffect(
 		( node ) => {
@@ -56,7 +66,14 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if ( keyCode === ENTER ) {
+				if (
+					keyCode === ENTER &&
+					__unstableGetEditorMode() === 'zoom-out' &&
+					isZoomOut()
+				) {
+					__unstableSetEditorMode( 'edit' );
+					resetZoomLevel();
+				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
@@ -88,6 +105,10 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
+			__unstableGetEditorMode,
+			__unstableSetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
 		]
 	);
 }