@wordpress/block-editor 12.4.0 → 12.6.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

@@ -707,6 +707,10 @@
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+  -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

@@ -707,6 +707,10 @@
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child {
+  -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

@@ -160,7 +160,8 @@
   margin-bottom: 8px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
-.block-editor-block-inspector .components-query-controls .components-base-control {
+.block-editor-block-inspector .components-query-controls .components-base-control,
+.block-editor-block-inspector .components-range-control .components-base-control {
   margin-bottom: 0;
 }
 .block-editor-block-inspector .components-panel__body {
@@ -328,44 +329,77 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-left-color: #e0e0e0;
 }
+.block-editor-block-contextual-toolbar:has(.block-editor-block-toolbar:empty) {
+  display: none;
+}
 @media (min-width: 782px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 64px;
+    margin-right: 180px;
     position: fixed;
-    top: 40px;
+    top: 39px;
     min-height: initial;
     border-bottom: none;
     display: flex;
   }
   .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-right: 216px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 120px;
-    top: 8px;
+    margin-right: 240px;
+    top: 7px;
   }
   .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
     width: initial;
-    margin-right: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers {
+    flex-grow: initial;
+    width: initial;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar.is-showing-movers::before {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-left: 0;
+    background-color: #ddd;
+    position: relative;
+    right: -2px;
+    top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
     border: none;
   }
-  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::before {
     content: "";
     width: 1px;
     height: 24px;
     margin-top: 12px;
-    margin-bottom: 12px;
+    margin-left: 8px;
     background-color: #ddd;
-    position: absolute;
-    right: 44px;
+    position: relative;
+    right: 0;
     top: -1px;
   }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
     border: none;
   }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    width: 256px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon svg {
+    display: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar .components-button.has-icon::after {
+    content: attr(aria-label);
+    font-size: 12px;
+  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
     content: "";
     width: 1px;
@@ -373,20 +407,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: 12px;
     background-color: #ddd;
     position: relative;
-    right: -12px;
+    right: -8px;
     height: 24px;
+    top: -1px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 64px;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 384px;
+    margin-right: 80px;
   }
   .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 128px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 448px;
+    margin-right: 144px;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
     right: 0;
@@ -444,7 +473,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 @media (min-width: 960px) {
   .block-editor-block-contextual-toolbar.is-fixed {
-    width: initial;
+    width: calc(100% - 240px - 256px);
   }
 }
 
@@ -765,6 +794,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   padding: 0 13px;
   -webkit-user-select: none;
           user-select: none;
+  width: max-content;
 }
 .block-editor-block-draggable-chip svg {
   fill: currentColor;
@@ -1869,6 +1899,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-input-wrapper {
+  margin-bottom: 8px;
   position: relative;
 }
 
@@ -1883,15 +1914,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__field {
   margin: 16px;
 }
-.block-editor-link-control__field > .components-base-control__field {
-  display: flex;
-  align-items: center;
-}
-.block-editor-link-control__field .components-base-control__label {
-  margin-left: 16px;
-  margin-bottom: 0;
-  min-width: 29px;
-}
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -1903,13 +1925,14 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  width: calc(100% - 32px);
   display: block;
-  padding: 11px 16px;
+  border: 1px solid #949494;
+  border-radius: 2px;
+  height: 40px;
   margin: 0;
+  padding: 8px 16px;
   position: relative;
-  border: 1px solid #ddd;
-  border-radius: 2px;
+  width: 100%;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
@@ -1949,12 +1972,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex-direction: row-reverse;
   justify-content: flex-start;
   gap: 8px;
+  padding: 8px;
   order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
   position: relative;
-  margin-top: -15px;
 }
 .block-editor-link-control__search-results-wrapper::before, .block-editor-link-control__search-results-wrapper::after {
   content: "";
@@ -1977,8 +2000,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__search-results {
-  margin: 0;
-  padding: 8px 16px 8px;
+  margin-top: -16px;
+  padding: 8px;
   max-height: 200px;
   overflow-y: auto;
 }
@@ -1986,35 +2009,29 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   opacity: 0.2;
 }
 
-.block-editor-link-control__search-item {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  font-size: 13px;
-  cursor: pointer;
-  background: #fff;
-  width: 100%;
-  border: none;
-  text-align: right;
-  padding: 12px 16px;
-  border-radius: 2px;
+.block-editor-link-control__search-item.components-button.components-menu-item__button {
   height: auto;
+  text-align: right;
 }
-.block-editor-link-control__search-item:hover, .block-editor-link-control__search-item:focus {
-  background-color: #f0f0f0;
+.block-editor-link-control__search-item .components-menu-item__item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
 }
-.block-editor-link-control__search-item:hover .block-editor-link-control__search-item-type, .block-editor-link-control__search-item:focus .block-editor-link-control__search-item-type {
-  background: #fff;
+.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:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
+.block-editor-link-control__search-item .components-menu-item__shortcut {
+  color: #757575;
+  text-transform: capitalize;
+  white-space: nowrap;
 }
-.block-editor-link-control__search-item.is-selected {
+.block-editor-link-control__search-item[aria-selected] {
   background: #f0f0f0;
 }
-.block-editor-link-control__search-item.is-selected .block-editor-link-control__search-item-type {
-  background: #fff;
-}
 .block-editor-link-control__search-item.is-current {
   flex-direction: column;
   background: transparent;
@@ -2043,7 +2060,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  top: 0.2em;
   margin-left: 8px;
   max-height: 24px;
   flex-shrink: 0;
@@ -2059,17 +2075,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 32px;
   max-height: 32px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info .components-external-link__icon,
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
-  position: absolute;
-  left: 0;
-  margin-top: 0;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
   display: block;
   margin-bottom: 0.2em;
@@ -2077,7 +2082,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   position: relative;
 }
 .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;
 }
@@ -2087,25 +2092,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-info {
-  display: block;
-  color: #757575;
-  font-size: 0.9em;
-  line-height: 1.3;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-error-notice {
-  font-style: italic;
-  font-size: 1.1em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-type {
-  display: block;
-  padding: 3px 6px;
-  margin-right: auto;
-  font-size: 0.9em;
-  background-color: #f0f0f0;
-  border-radius: 2px;
-  white-space: nowrap;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-description {
   padding-top: 12px;
   margin: 0;
@@ -2220,10 +2206,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: 0;
 }
 
-.block-editor-link-control__search-results div[role=menu] > .block-editor-link-control__search-item.block-editor-link-control__search-item {
-  padding: 10px;
-}
-
 .block-editor-link-control__drawer {
   display: flex;
   order: 30;
@@ -2235,48 +2217,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
-  margin-top: 16px;
-  padding-top: 16px;
   position: relative;
 }
-.block-editor-link-control__drawer-inner::after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: #ddd;
-  position: absolute;
-  right: -16px;
-  left: -16px;
-  top: 0;
-}
-
-.block-editor-link-control__tools {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
-  padding: 16px;
-  margin-top: calc(var(--wp-admin-border-width-focus) * -1);
-  padding-top: var(--wp-admin-border-width-focus);
-  overflow: hidden;
-}
 
 .block-editor-link-control__unlink {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.block-editor-link-control__settings {
-  flex: 1;
-  margin: 0;
-}
-.is-alternate .block-editor-link-control__settings {
-  border-top: 1px solid #1e1e1e;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 16px;
+  flex: 1;
+  padding: 8px 24px 8px 0;
 }
 .block-editor-link-control__setting input {
   margin-right: 0;
@@ -2285,6 +2237,37 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-bottom: 0;
 }
 
+.block-editor-link-control__tools {
+  padding: 8px 8px 0 8px;
+  margin-top: -16px;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle {
+  padding-right: 0;
+  gap: 0;
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+  visibility: visible;
+  transition: transform 0.1s ease;
+  transform: rotate(-90deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+  visibility: visible;
+  transform: rotate(0deg);
+  transition: transform 0.1s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=false] svg {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
 .block-editor-link-control .block-editor-link-control__search-input .components-spinner {
   display: block;
 }
@@ -2658,8 +2641,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-list-view-drop-indicator .block-editor-list-view-drop-indicator__line {
   background: var(--wp-admin-theme-color);
-  height: 6px;
-  border: 1px solid #fff;
+  height: 4px;
   border-radius: 4px;
 }
 
@@ -4119,6 +4101,32 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-inserter__hint {
+  margin: 16px 16px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint {
+  align-items: top;
+  background: #f0f0f0;
+  border-radius: 2px;
+  color: #1e1e1e;
+  display: flex;
+  flex-direction: row;
+  max-width: 380px;
+}
+
+.reusable-blocks-menu-items__rename-hint-content {
+  margin: 12px 12px 12px 0;
+}
+
+.reusable-blocks-menu-items__rename-hint-dismiss {
+  margin: 4px 0 4px 4px;
+}
+
+.components-menu-group .reusable-blocks-menu-items__rename-hint {
+  margin: 0;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }