@wordpress/block-editor 12.5.0 → 12.7.0

package/build-module/utils/object.js

@@ -57,6 +57,7 @@ export function kebabCase(str) {
 }
 /**
  * Clones an object.
+ * Arrays are also cloned as arrays.
  * Non-object values are returned unchanged.
  *
  * @param {*} object Object to clone.
@@ -64,6 +65,10 @@ export function kebabCase(str) {
  */
 
 function cloneObject(object) {
+  if (Array.isArray(object)) {
+    return object.map(cloneObject);
+  }
+
   if (object && typeof object === 'object') {
     return { ...Object.fromEntries(Object.entries(object).map(([key, value]) => [key, cloneObject(value)]))
     };
@@ -74,7 +79,7 @@ function cloneObject(object) {
 /**
  * Immutably sets a value inside an object. Like `lodash#set`, but returning a
  * new object. Treats nullish initial values as empty objects. Clones any
- * nested objects.
+ * nested objects. Supports arrays, too.
  *
  * @param {Object}              object Object to set a value in.
  * @param {number|string|Array} path   Path in the object to modify.
@@ -88,7 +93,11 @@ export function setImmutably(object, path, value) {
   const newObject = object ? cloneObject(object) : {};
   normalizedPath.reduce((acc, key, i) => {
     if (acc[key] === undefined) {
-      acc[key] = {};
+      if (Number.isInteger(path[i + 1])) {
+        acc[key] = [];
+      } else {
+        acc[key] = {};
+      }
     }
 
     if (i === normalizedPath.length - 1) {
@@ -99,4 +108,27 @@ export function setImmutably(object, path, value) {
   }, newObject);
   return newObject;
 }
+/**
+ * Helper util to return a value from a certain path of the object.
+ * Path is specified as either:
+ * - a string of properties, separated by dots, for example: "x.y".
+ * - an array of properties, for example `[ 'x', 'y' ]`.
+ * You can also specify a default value in case the result is nullish.
+ *
+ * @param {Object}       object       Input object.
+ * @param {string|Array} path         Path to the object property.
+ * @param {*}            defaultValue Default value if the value at the specified path is nullish.
+ * @return {*} Value of the object property at the specified path.
+ */
+
+export const getValueFromObjectPath = (object, path, defaultValue) => {
+  var _value;
+
+  const normalizedPath = Array.isArray(path) ? path : path.split('.');
+  let value = object;
+  normalizedPath.forEach(fieldName => {
+    value = value?.[fieldName];
+  });
+  return (_value = value) !== null && _value !== void 0 ? _value : defaultValue;
+};
 //# sourceMappingURL=object.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/object.js"],"names":["paramCase","normalizePath","path","Array","isArray","toString","kebabCase","str","input","replace","splitRegexp","cloneObject","object","Object","fromEntries","entries","map","key","value","setImmutably","normalizedPath","newObject","reduce","acc","i","undefined","length"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,aAA1B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,aAAT,CAAwBC,IAAxB,EAA+B;AAC9B,MAAKC,KAAK,CAACC,OAAN,CAAeF,IAAf,CAAL,EAA6B;AAC5B,WAAOA,IAAP;AACA,GAFD,MAEO,IAAK,OAAOA,IAAP,KAAgB,QAArB,EAAgC;AACtC,WAAO,CAAEA,IAAI,CAACG,QAAL,EAAF,CAAP;AACA;;AAED,SAAO,CAAEH,IAAF,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASI,SAAT,CAAoBC,GAApB,EAA0B;AAChC,MAAIC,KAAK,GAAGD,GAAZ;;AACA,MAAK,OAAOA,GAAP,KAAe,QAApB,EAA+B;AAAA;;AAC9BC,IAAAA,KAAK,oBAAGD,GAAG,EAAEF,QAAL,IAAH,yDAAwB,EAA7B;AACA,GAJ+B,CAMhC;;;AACAG,EAAAA,KAAK,GAAGA,KAAK,CAACC,OAAN,CAAe,WAAf,EAA4B,EAA5B,CAAR;AAEA,SAAOT,SAAS,CAAEQ,KAAF,EAAS;AACxBE,IAAAA,WAAW,EAAE,CACZ,wDADY,EAC8C;AAC1D,yDAFY,EAE2C;AACvD,wBAHY,EAGU;AACtB,0BAJY,CAIY;AAJZ;AADW,GAAT,CAAhB;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsBC,MAAtB,EAA+B;AAC9B,MAAKA,MAAM,IAAI,OAAOA,MAAP,KAAkB,QAAjC,EAA4C;AAC3C,WAAO,EACN,GAAGC,MAAM,CAACC,WAAP,CACFD,MAAM,CAACE,OAAP,CAAgBH,MAAhB,EAAyBI,GAAzB,CAA8B,CAAE,CAAEC,GAAF,EAAOC,KAAP,CAAF,KAAsB,CACnDD,GADmD,EAEnDN,WAAW,CAAEO,KAAF,CAFwC,CAApD,CADE;AADG,KAAP;AAQA;;AAED,SAAON,MAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASO,YAAT,CAAuBP,MAAvB,EAA+BV,IAA/B,EAAqCgB,KAArC,EAA6C;AACnD,QAAME,cAAc,GAAGnB,aAAa,CAAEC,IAAF,CAApC;AACA,QAAMmB,SAAS,GAAGT,MAAM,GAAGD,WAAW,CAAEC,MAAF,CAAd,GAA2B,EAAnD;AAEAQ,EAAAA,cAAc,CAACE,MAAf,CAAuB,CAAEC,GAAF,EAAON,GAAP,EAAYO,CAAZ,KAAmB;AACzC,QAAKD,GAAG,CAAEN,GAAF,CAAH,KAAeQ,SAApB,EAAgC;AAC/BF,MAAAA,GAAG,CAAEN,GAAF,CAAH,GAAa,EAAb;AACA;;AACD,QAAKO,CAAC,KAAKJ,cAAc,CAACM,MAAf,GAAwB,CAAnC,EAAuC;AACtCH,MAAAA,GAAG,CAAEN,GAAF,CAAH,GAAaC,KAAb;AACA;;AACD,WAAOK,GAAG,CAAEN,GAAF,CAAV;AACA,GARD,EAQGI,SARH;AAUA,SAAOA,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase } from 'change-case';\n\n/**\n * Converts a path to an array of its fragments.\n * Supports strings, numbers and arrays:\n *\n * 'foo' => [ 'foo' ]\n * 2 => [ '2' ]\n * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]\n *\n * @param {string|number|Array} path Path\n * @return {Array} Normalized path.\n */\nfunction normalizePath( path ) {\n\tif ( Array.isArray( path ) ) {\n\t\treturn path;\n\t} else if ( typeof path === 'number' ) {\n\t\treturn [ path.toString() ];\n\t}\n\n\treturn [ path ];\n}\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param {string} str String to convert.\n * @return {string} Kebab-cased string\n */\nexport function kebabCase( str ) {\n\tlet input = str;\n\tif ( typeof str !== 'string' ) {\n\t\tinput = str?.toString?.() ?? '';\n\t}\n\n\t// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n\tinput = input.replace( /['\\u2019]/, '' );\n\n\treturn paramCase( input, {\n\t\tsplitRegexp: [\n\t\t\t/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t],\n\t} );\n}\n\n/**\n * Clones an object.\n * Non-object values are returned unchanged.\n *\n * @param {*} object Object to clone.\n * @return {*} Cloned object, or original literal non-object value.\n */\nfunction cloneObject( object ) {\n\tif ( object && typeof object === 'object' ) {\n\t\treturn {\n\t\t\t...Object.fromEntries(\n\t\t\t\tObject.entries( object ).map( ( [ key, value ] ) => [\n\t\t\t\t\tkey,\n\t\t\t\t\tcloneObject( value ),\n\t\t\t\t] )\n\t\t\t),\n\t\t};\n\t}\n\n\treturn object;\n}\n\n/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\tconst normalizedPath = normalizePath( path );\n\tconst newObject = object ? cloneObject( object ) : {};\n\n\tnormalizedPath.reduce( ( acc, key, i ) => {\n\t\tif ( acc[ key ] === undefined ) {\n\t\t\tacc[ key ] = {};\n\t\t}\n\t\tif ( i === normalizedPath.length - 1 ) {\n\t\t\tacc[ key ] = value;\n\t\t}\n\t\treturn acc[ key ];\n\t}, newObject );\n\n\treturn newObject;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/object.js"],"names":["paramCase","normalizePath","path","Array","isArray","toString","kebabCase","str","input","replace","splitRegexp","cloneObject","object","map","Object","fromEntries","entries","key","value","setImmutably","normalizedPath","newObject","reduce","acc","i","undefined","Number","isInteger","length","getValueFromObjectPath","defaultValue","split","forEach","fieldName"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase } from 'change-case';\n\n/**\n * Converts a path to an array of its fragments.\n * Supports strings, numbers and arrays:\n *\n * 'foo' => [ 'foo' ]\n * 2 => [ '2' ]\n * [ 'foo', 'bar' ] => [ 'foo', 'bar' ]\n *\n * @param {string|number|Array} path Path\n * @return {Array} Normalized path.\n */\nfunction normalizePath( path ) {\n\tif ( Array.isArray( path ) ) {\n\t\treturn path;\n\t} else if ( typeof path === 'number' ) {\n\t\treturn [ path.toString() ];\n\t}\n\n\treturn [ path ];\n}\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param {string} str String to convert.\n * @return {string} Kebab-cased string\n */\nexport function kebabCase( str ) {\n\tlet input = str;\n\tif ( typeof str !== 'string' ) {\n\t\tinput = str?.toString?.() ?? '';\n\t}\n\n\t// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n\tinput = input.replace( /['\\u2019]/, '' );\n\n\treturn paramCase( input, {\n\t\tsplitRegexp: [\n\t\t\t/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t],\n\t} );\n}\n\n/**\n * Clones an object.\n * Arrays are also cloned as arrays.\n * Non-object values are returned unchanged.\n *\n * @param {*} object Object to clone.\n * @return {*} Cloned object, or original literal non-object value.\n */\nfunction cloneObject( object ) {\n\tif ( Array.isArray( object ) ) {\n\t\treturn object.map( cloneObject );\n\t}\n\n\tif ( object && typeof object === 'object' ) {\n\t\treturn {\n\t\t\t...Object.fromEntries(\n\t\t\t\tObject.entries( object ).map( ( [ key, value ] ) => [\n\t\t\t\t\tkey,\n\t\t\t\t\tcloneObject( value ),\n\t\t\t\t] )\n\t\t\t),\n\t\t};\n\t}\n\n\treturn object;\n}\n\n/**\n * Immutably sets a value inside an object. Like `lodash#set`, but returning a\n * new object. Treats nullish initial values as empty objects. Clones any\n * nested objects. Supports arrays, too.\n *\n * @param {Object}              object Object to set a value in.\n * @param {number|string|Array} path   Path in the object to modify.\n * @param {*}                   value  New value to set.\n * @return {Object} Cloned object with the new value set.\n */\nexport function setImmutably( object, path, value ) {\n\tconst normalizedPath = normalizePath( path );\n\tconst newObject = object ? cloneObject( object ) : {};\n\n\tnormalizedPath.reduce( ( acc, key, i ) => {\n\t\tif ( acc[ key ] === undefined ) {\n\t\t\tif ( Number.isInteger( path[ i + 1 ] ) ) {\n\t\t\t\tacc[ key ] = [];\n\t\t\t} else {\n\t\t\t\tacc[ key ] = {};\n\t\t\t}\n\t\t}\n\t\tif ( i === normalizedPath.length - 1 ) {\n\t\t\tacc[ key ] = value;\n\t\t}\n\t\treturn acc[ key ];\n\t}, newObject );\n\n\treturn newObject;\n}\n\n/**\n * Helper util to return a value from a certain path of the object.\n * Path is specified as either:\n * - a string of properties, separated by dots, for example: \"x.y\".\n * - an array of properties, for example `[ 'x', 'y' ]`.\n * You can also specify a default value in case the result is nullish.\n *\n * @param {Object}       object       Input object.\n * @param {string|Array} path         Path to the object property.\n * @param {*}            defaultValue Default value if the value at the specified path is nullish.\n * @return {*} Value of the object property at the specified path.\n */\nexport const getValueFromObjectPath = ( object, path, defaultValue ) => {\n\tconst normalizedPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tnormalizedPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n"]}

package/build-style/content-rtl.css

@@ -708,7 +708,8 @@
   opacity: 0.62;
 }
 :where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
-  margin-block-start: 0;
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/content.css

@@ -708,7 +708,8 @@
   opacity: 0.62;
 }
 :where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
-  margin-block-start: 0;
+  -webkit-margin-before: 0;
+          margin-block-start: 0;
 }
 .block-editor-default-block-appender .components-drop-zone__content-icon {
   display: none;

package/build-style/style-rtl.css

@@ -332,6 +332,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
   display: none;
 }
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  right: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to left, #fff, transparent);
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-right: 180px;
@@ -351,11 +359,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -473,7 +481,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1022,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   right: 0;
   transform-origin: top right;
@@ -1972,7 +1984,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2017,6 +2029,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
+  width: 100%;
+}
+.block-editor-link-control__search-item .components-menu-item__item mark {
+  font-weight: 600;
+  color: inherit;
+  background-color: transparent;
 }
 .block-editor-link-control__search-item .components-menu-item__shortcut {
   color: #757575;
@@ -2071,12 +2089,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
-  font-weight: 700;
+  font-weight: 600;
   color: inherit;
   background-color: transparent;
 }
@@ -2135,6 +2153,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

package/build-style/style.css

@@ -332,6 +332,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
   display: none;
 }
+.block-editor-block-contextual-toolbar.is-collapsed::after {
+  content: "";
+  position: absolute;
+  left: 100%;
+  width: 48px;
+  height: 100%;
+  background: linear-gradient(to right, #fff, transparent);
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
     margin-left: 180px;
@@ -351,11 +359,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
@@ -473,7 +481,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 240px - 256px);
+    width: auto;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
   }
 }
 
@@ -1011,6 +1022,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
 }
 .block-editor-block-preview__container .block-editor-block-preview__content {
+  width: 100%;
   top: 0;
   left: 0;
   transform-origin: top left;
@@ -1973,7 +1985,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
-  padding: 8px;
+  padding: 8px 16px 16px;
   order: 20;
 }
 
@@ -2018,6 +2030,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
+  width: 100%;
+}
+.block-editor-link-control__search-item .components-menu-item__item mark {
+  font-weight: 600;
+  color: inherit;
+  background-color: transparent;
 }
 .block-editor-link-control__search-item .components-menu-item__shortcut {
   color: #757575;
@@ -2072,12 +2090,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
-  margin-bottom: 0.2em;
   font-weight: 500;
   position: relative;
+  line-height: 24px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
-  font-weight: 700;
+  font-weight: 600;
   color: inherit;
   background-color: transparent;
 }
@@ -2136,6 +2154,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: row;
   width: 100%;
+  align-items: center;
 }
 
 .block-editor-link-control__search-item-bottom {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.5.0",
+	"version": "12.7.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,37 +32,38 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
+		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.37.0",
-		"@wordpress/api-fetch": "^6.34.0",
-		"@wordpress/blob": "^3.37.0",
-		"@wordpress/blocks": "^12.14.0",
-		"@wordpress/components": "^25.3.0",
-		"@wordpress/compose": "^6.14.0",
-		"@wordpress/data": "^9.7.0",
-		"@wordpress/date": "^4.37.0",
-		"@wordpress/deprecated": "^3.37.0",
-		"@wordpress/dom": "^3.37.0",
-		"@wordpress/element": "^5.14.0",
-		"@wordpress/escape-html": "^2.37.0",
-		"@wordpress/hooks": "^3.37.0",
-		"@wordpress/html-entities": "^3.37.0",
-		"@wordpress/i18n": "^4.37.0",
-		"@wordpress/icons": "^9.28.0",
-		"@wordpress/is-shallow-equal": "^4.37.0",
-		"@wordpress/keyboard-shortcuts": "^4.14.0",
-		"@wordpress/keycodes": "^3.37.0",
-		"@wordpress/notices": "^4.5.0",
-		"@wordpress/preferences": "^3.14.0",
-		"@wordpress/private-apis": "^0.19.0",
-		"@wordpress/rich-text": "^6.14.0",
-		"@wordpress/shortcode": "^3.37.0",
-		"@wordpress/style-engine": "^1.20.0",
-		"@wordpress/token-list": "^2.37.0",
-		"@wordpress/url": "^3.38.0",
-		"@wordpress/warning": "^2.37.0",
-		"@wordpress/wordcount": "^3.37.0",
+		"@wordpress/a11y": "^3.39.0",
+		"@wordpress/api-fetch": "^6.36.0",
+		"@wordpress/blob": "^3.39.0",
+		"@wordpress/blocks": "^12.16.0",
+		"@wordpress/components": "^25.5.0",
+		"@wordpress/compose": "^6.16.0",
+		"@wordpress/data": "^9.9.0",
+		"@wordpress/date": "^4.39.0",
+		"@wordpress/deprecated": "^3.39.0",
+		"@wordpress/dom": "^3.39.0",
+		"@wordpress/element": "^5.16.0",
+		"@wordpress/escape-html": "^2.39.0",
+		"@wordpress/hooks": "^3.39.0",
+		"@wordpress/html-entities": "^3.39.0",
+		"@wordpress/i18n": "^4.39.0",
+		"@wordpress/icons": "^9.30.0",
+		"@wordpress/is-shallow-equal": "^4.39.0",
+		"@wordpress/keyboard-shortcuts": "^4.16.0",
+		"@wordpress/keycodes": "^3.39.0",
+		"@wordpress/notices": "^4.7.0",
+		"@wordpress/preferences": "^3.16.0",
+		"@wordpress/private-apis": "^0.21.0",
+		"@wordpress/rich-text": "^6.16.0",
+		"@wordpress/shortcode": "^3.39.0",
+		"@wordpress/style-engine": "^1.22.0",
+		"@wordpress/token-list": "^2.39.0",
+		"@wordpress/url": "^3.40.0",
+		"@wordpress/warning": "^2.39.0",
+		"@wordpress/wordcount": "^3.39.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -71,7 +72,6 @@
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
 		"inherits": "^2.0.3",
-		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bcd13d59b22553b3c9dc5869077bff1e864cf9f5"
+	"gitHead": "b898cf1dc8e70841d1647ea0994ac6278acc18a7"
 }

package/src/autocompleters/block.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
+	parse,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -116,14 +117,28 @@ function createBlockCompleter() {
 			return ! ( /\S/.test( before ) || /\S/.test( after ) );
 		},
 		getOptionCompletion( inserterItem ) {
-			const { name, initialAttributes, innerBlocks } = inserterItem;
+			const {
+				name,
+				initialAttributes,
+				innerBlocks,
+				syncStatus,
+				content,
+			} = inserterItem;
+
 			return {
 				action: 'replace',
-				value: createBlock(
-					name,
-					initialAttributes,
-					createBlocksFromInnerBlocksTemplate( innerBlocks )
-				),
+				value:
+					syncStatus === 'unsynced'
+						? parse( content, {
+								__unstableSkipMigrationLogs: true,
+						  } )
+						: createBlock(
+								name,
+								initialAttributes,
+								createBlocksFromInnerBlocksTemplate(
+									innerBlocks
+								)
+						  ),
 			};
 		},
 	};

package/src/components/block-controls/README.md

@@ -0,0 +1,89 @@
+# BlockControls
+
+When the user selects a particular block, a toolbar positioned above the selected block displays a set of control buttons. Certain block-level controls are automatically included in the toolbar under specific circumstances. For example, there is a control for converting the block into a different type or when the focused element is a RichText component.
+
+With `BlockControls`, you can customize the toolbar to include controls specific to your block type. If the return value of your block type's `edit` function includes a `BlockControls` element, the controls nested inside it will be shown in the selected block's toolbar.
+
+![Screenshot of the block controls of a Paragraph block inside the block editor](https://raw.githubusercontent.com/WordPress/gutenberg/HEAD/docs/assets/toolbar-text.png)
+
+## Usage
+
+```jsx
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function MyBlockEdit( { attributes, setAttributes } ) {
+	const blockProps = useBlockProps( {
+		className: 'my-block__custom-class',
+	} );
+	const { contentPosition } = attributes;
+
+	return (
+		<div { ...blockProps }>
+			{
+				<BlockControls>
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+					/>
+				</BlockControls>
+			}
+		</div>
+	);
+}
+
+/// ...
+
+<MyBlockEdit />;
+```
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more information and block controls examples.
+
+Furthermore, the READMEs of various components inside the block editor package and the components package include examples that also utilize `BlockControls` and can be a good reference.
+
+### Props
+
+The component accepts the following props:
+
+### `group`
+
+Group of the block controls. Allows you to create and render multiple groups of block controls.
+
+- Type: `string`
+- Default: `default`
+- Required: No
+
+### `controls`
+
+Allows overriding the default `controls` if the `default` group is used. 
+
+See [this custom block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md) for more details and examples with block controls.
+
+- Type: `array`
+
+### `children`
+
+Additional control components to be rendered.
+
+- Type: `Element`
+- Required: No.
+
+
+### `__experimentalShareWithChildBlocks`
+
+Whether the additional block controls should be added to the block toolbars of child blocks.
+
+- Type: `boolean`
+- Default: `false`

package/src/components/block-draggable/index.js

@@ -22,16 +22,25 @@ const BlockDraggable = ( {
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
-				select( blockEditorStore );
-			const { getBlockType } = select( blocksStore );
+			const {
+				canMoveBlocks,
+				getBlockRootClientId,
+				getBlockName,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const { getBlockType, getActiveBlockVariation } =
+				select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
+			const variation = getActiveBlockVariation(
+				blockName,
+				getBlockAttributes( clientIds[ 0 ] )
+			);
 
 			return {
 				srcRootClientId: rootClientId,
 				isDraggable: canMoveBlocks( clientIds, rootClientId ),
-				icon: getBlockType( blockName )?.icon,
+				icon: variation?.icon || getBlockType( blockName )?.icon,
 			};
 		},
 		[ clientIds ]

package/src/components/block-draggable/index.native.js

@@ -109,8 +109,12 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		draggingScrollHandler( event );
 	};
 
-	const { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =
-		useBlockDropZone();
+	const {
+		onBlockDragOverWorklet,
+		onBlockDragEnd,
+		onBlockDrop,
+		targetBlockIndex,
+	} = useBlockDropZone();
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
@@ -184,7 +188,7 @@ const BlockDraggableWrapper = ( { children, isRTL } ) => {
 		chip.y.value = dragPosition.y;
 		currentYPosition.value = dragPosition.y;
 
-		runOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );
+		onBlockDragOverWorklet( { x, y: y + scroll.offsetY.value } );
 
 		// Update scrolling velocity
 		scrollOnDragOver( dragPosition.y );