@wordpress/block-editor 12.18.1 → 12.19.0

package/build-module/utils/object.js

@@ -51,20 +51,4 @@ export const getValueFromObjectPath = (object, path, defaultValue) => {
   });
   return (_value = value) !== null && _value !== void 0 ? _value : defaultValue;
 };
-
-/**
- * Helper util to filter out objects with duplicate values for a given property.
- *
- * @param {Object[]} array    Array of objects to filter.
- * @param {string}   property Property to filter unique values by.
- *
- * @return {Object[]} Array of objects with unique values for the specified property.
- */
-export function uniqByProperty(array, property) {
-  const seen = new Set();
-  return array.filter(item => {
-    const value = item[property];
-    return seen.has(value) ? false : seen.add(value);
-  });
-}
 //# sourceMappingURL=object.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName","uniqByProperty","array","property","seen","Set","filter","item","has","add"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\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\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\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 arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n\n/**\n * Helper util to filter out objects with duplicate values for a given property.\n *\n * @param {Object[]} array    Array of objects to filter.\n * @param {string}   property Property to filter unique values by.\n *\n * @return {Object[]} Array of objects with unique values for the specified property.\n */\nexport function uniqByProperty( array, property ) {\n\tconst seen = new Set();\n\treturn array.filter( ( item ) => {\n\t\tconst value = item[ property ];\n\t\treturn seen.has( value ) ? false : seen.add( value );\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,cAAcA,CAAEC,KAAK,EAAEC,QAAQ,EAAG;EACjD,MAAMC,IAAI,GAAG,IAAIC,GAAG,CAAC,CAAC;EACtB,OAAOH,KAAK,CAACI,MAAM,CAAIC,IAAI,IAAM;IAChC,MAAMrB,KAAK,GAAGqB,IAAI,CAAEJ,QAAQ,CAAE;IAC9B,OAAOC,IAAI,CAACI,GAAG,CAAEtB,KAAM,CAAC,GAAG,KAAK,GAAGkB,IAAI,CAACK,GAAG,CAAEvB,KAAM,CAAC;EACrD,CAAE,CAAC;AACJ"}
+{"version":3,"names":["setImmutably","object","path","value","Array","isArray","leaf","pop","prev","key","lvl","getValueFromObjectPath","defaultValue","_value","arrayPath","split","forEach","fieldName"],"sources":["@wordpress/block-editor/src/utils/object.js"],"sourcesContent":["/**\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\t// Normalize path\n\tpath = Array.isArray( path ) ? [ ...path ] : [ path ];\n\n\t// Shallowly clone the base of the object\n\tobject = Array.isArray( object ) ? [ ...object ] : { ...object };\n\n\tconst leaf = path.pop();\n\n\t// Traverse object from root to leaf, shallowly cloning at each level\n\tlet prev = object;\n\tfor ( const key of path ) {\n\t\tconst lvl = prev[ key ];\n\t\tprev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };\n\t}\n\n\tprev[ leaf ] = value;\n\n\treturn object;\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 arrayPath = Array.isArray( path ) ? path : path.split( '.' );\n\tlet value = object;\n\tarrayPath.forEach( ( fieldName ) => {\n\t\tvalue = value?.[ fieldName ];\n\t} );\n\treturn value ?? defaultValue;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,YAAYA,CAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAG;EACnD;EACAD,IAAI,GAAGE,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAG,CAAE,GAAGA,IAAI,CAAE,GAAG,CAAEA,IAAI,CAAE;;EAErD;EACAD,MAAM,GAAGG,KAAK,CAACC,OAAO,CAAEJ,MAAO,CAAC,GAAG,CAAE,GAAGA,MAAM,CAAE,GAAG;IAAE,GAAGA;EAAO,CAAC;EAEhE,MAAMK,IAAI,GAAGJ,IAAI,CAACK,GAAG,CAAC,CAAC;;EAEvB;EACA,IAAIC,IAAI,GAAGP,MAAM;EACjB,KAAM,MAAMQ,GAAG,IAAIP,IAAI,EAAG;IACzB,MAAMQ,GAAG,GAAGF,IAAI,CAAEC,GAAG,CAAE;IACvBD,IAAI,GAAGA,IAAI,CAAEC,GAAG,CAAE,GAAGL,KAAK,CAACC,OAAO,CAAEK,GAAI,CAAC,GAAG,CAAE,GAAGA,GAAG,CAAE,GAAG;MAAE,GAAGA;IAAI,CAAC;EACpE;EAEAF,IAAI,CAAEF,IAAI,CAAE,GAAGH,KAAK;EAEpB,OAAOF,MAAM;AACd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMU,sBAAsB,GAAGA,CAAEV,MAAM,EAAEC,IAAI,EAAEU,YAAY,KAAM;EAAA,IAAAC,MAAA;EACvE,MAAMC,SAAS,GAAGV,KAAK,CAACC,OAAO,CAAEH,IAAK,CAAC,GAAGA,IAAI,GAAGA,IAAI,CAACa,KAAK,CAAE,GAAI,CAAC;EAClE,IAAIZ,KAAK,GAAGF,MAAM;EAClBa,SAAS,CAACE,OAAO,CAAIC,SAAS,IAAM;IACnCd,KAAK,GAAGA,KAAK,GAAIc,SAAS,CAAE;EAC7B,CAAE,CAAC;EACH,QAAAJ,MAAA,GAAOV,KAAK,cAAAU,MAAA,cAAAA,MAAA,GAAID,YAAY;AAC7B,CAAC"}

package/build-style/content-rtl.css

@@ -336,25 +336,33 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border-radius: 2px;
 }
 
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after {
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+  from {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+  }
+  to {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+  }
+}
+.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
   content: "";
-  border-style: dotted;
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  border: 1px dotted var(--wp-admin-theme-color);
-  border-radius: 1px;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
+  border-radius: 2px;
+  animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
+  animation-delay: 1s;
+  animation-fill-mode: forwards;
 }
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-  border: none;
+@media (prefers-reduced-motion: reduce) {
+  .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {

package/build-style/content.css

@@ -336,25 +336,33 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border-radius: 2px;
 }
 
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after {
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+  from {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+  }
+  to {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+  }
+}
+.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
   content: "";
-  border-style: dotted;
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  border: 1px dotted var(--wp-admin-theme-color);
-  border-radius: 1px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
+  border-radius: 2px;
+  animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
+  animation-delay: 1s;
+  animation-fill-mode: forwards;
 }
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-  border: none;
+@media (prefers-reduced-motion: reduce) {
+  .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {

package/build-style/style-rtl.css

@@ -128,12 +128,12 @@ iframe[name=editor-canvas] {
   display: block;
 }
 
-iframe[name=editor-canvas]:not(.has-history) {
+iframe[name=editor-canvas]:not(.has-editor-padding) {
   background-color: #fff;
 }
 
-iframe[name=editor-canvas].has-history {
-  padding: 48px 48px 0;
+iframe[name=editor-canvas].has-editor-padding {
+  padding: 24px 24px 0;
 }
 
 .block-editor-block-icon {
@@ -539,13 +539,15 @@ iframe[name=editor-canvas].has-history {
 }
 .block-editor-block-card__title.block-editor-block-card__title {
   font-size: 13px;
-  line-height: 24px;
+  line-height: 1.4;
   margin: 0;
+  padding: 3px 0;
 }
 
 .block-editor-block-card__description {
   display: block;
   font-size: 13px;
+  line-height: 1.4;
   margin-top: 4px;
 }
 
@@ -700,13 +702,14 @@ iframe[name=editor-canvas].has-history {
   display: flex;
   padding: 0;
   border: none;
+  justify-content: center;
 }
 @media (min-width: 600px) {
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
-    height: 24px;
+    height: 20px;
     width: 100%;
     min-width: 0 !important;
   }
@@ -714,11 +717,11 @@ iframe[name=editor-canvas].has-history {
     height: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
-    top: 5px;
+    top: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
-    bottom: 5px;
+    bottom: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
@@ -1539,38 +1542,37 @@ iframe[name=editor-canvas].has-history {
   text-transform: capitalize;
 }
 
-.block-editor-global-styles-effects-panel__toggle-icon {
+.block-editor-global-styles__toggle-icon {
   fill: currentColor;
 }
 
-.block-editor-global-styles-effects-panel__shadow-popover-container {
+.block-editor-global-styles__shadow-popover-container {
   width: 230px;
 }
 
 .block-editor-global-styles-filters-panel__dropdown,
-.block-editor-global-styles-effects-panel__shadow-dropdown {
+.block-editor-global-styles__shadow-dropdown {
   display: block;
   padding: 0;
 }
 .block-editor-global-styles-filters-panel__dropdown button,
-.block-editor-global-styles-effects-panel__shadow-dropdown button {
+.block-editor-global-styles__shadow-dropdown button {
   width: 100%;
   padding: 8px;
 }
 .block-editor-global-styles-filters-panel__dropdown button.is-open,
-.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
+.block-editor-global-styles__shadow-dropdown button.is-open {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+.block-editor-global-styles__shadow-indicator-wrapper {
   padding: 6px;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator {
+.block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
@@ -1956,7 +1958,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-header {
   display: block;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   margin-left: 8px;
   gap: 8px;
   white-space: pre-wrap;
@@ -2009,6 +2011,9 @@ iframe[name=editor-canvas].has-history {
   border-radius: 2px;
   line-height: 1.1;
 }
+.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
+  box-shadow: none;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 2px solid transparent;
@@ -2097,11 +2102,6 @@ iframe[name=editor-canvas].has-history {
   position: relative;
 }
 
-.block-editor-link-control__unlink {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
@@ -2170,11 +2170,6 @@ iframe[name=editor-canvas].has-history {
   left: 12px;
 }
 
-.block-editor-link-control__search-item-action {
-  margin-right: auto;
-  flex-shrink: 0;
-}
-
 .block-editor-list-view-tree {
   width: 100%;
   border-collapse: collapse;
@@ -2916,8 +2911,6 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-input input[type=text] {
   width: 100%;
   padding: 8px 12px 8px 8px;
-  border: none;
-  border-radius: 0;
   margin-right: 0;
   margin-left: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -2930,6 +2923,11 @@ iframe[name=editor-canvas].has-history {
     width: 300px;
   }
 }
+.block-editor-block-list__block .block-editor-url-input input[type=text]:not(:focus),
+.components-popover .block-editor-url-input input[type=text]:not(:focus),
+.block-editor-url-input input[type=text]:not(:focus) {
+  border-color: transparent;
+}
 @media (min-width: 600px) {
   .block-editor-block-list__block .block-editor-url-input input[type=text],
 .components-popover .block-editor-url-input input[type=text],
@@ -3094,47 +3092,36 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__additional-controls {
-  border-top: 1px solid #ddd;
-}
-
-.block-editor-url-popover__additional-controls > div[role=menu] .components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary) > svg {
-  box-shadow: none;
+  border-top: 1px solid #1e1e1e;
+  padding: 8px 8px;
 }
 
-.block-editor-url-popover__additional-controls div[role=menu] > .components-button {
-  padding-right: 12px;
+.block-editor-url-popover__input-container {
+  padding: 8px;
 }
 
 .block-editor-url-popover__row {
   display: flex;
+  gap: 4px;
 }
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
   flex-grow: 1;
+  gap: 8px;
 }
 
-.block-editor-url-popover .components-button.has-icon {
-  padding: 3px;
-}
-.block-editor-url-popover .components-button.has-icon > svg {
-  padding: 5px;
-  border-radius: 2px;
-  height: 30px;
-  width: 30px;
-}
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus {
-  box-shadow: none;
+.block-editor-url-popover__additional-controls .components-button.has-icon {
+  padding-right: 8px;
+  padding-left: 8px;
+  height: auto;
+  text-align: right;
 }
-.block-editor-url-popover .components-button.has-icon:not(:disabled):focus > svg {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline: 2px solid transparent;
+.block-editor-url-popover__additional-controls .components-button.has-icon > svg {
+  margin-left: 8px;
 }
 
 .block-editor-url-popover__settings-toggle {
   flex-shrink: 0;
-  border-radius: 0;
-  border-right: 1px solid #ddd;
-  margin-right: 1px;
 }
 .block-editor-url-popover__settings-toggle[aria-expanded=true] .dashicon {
   transform: rotate(-180deg);
@@ -3143,7 +3130,7 @@ iframe[name=editor-canvas].has-history {
 .block-editor-url-popover__settings {
   display: block;
   padding: 16px;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #1e1e1e;
 }
 
 .block-editor-url-popover__link-editor,
@@ -3152,19 +3139,38 @@ iframe[name=editor-canvas].has-history {
 }
 
 .block-editor-url-popover__link-viewer-url {
-  margin: 7px;
+  display: flex;
+  align-items: center;
   flex-grow: 1;
   flex-shrink: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 150px;
-  max-width: 500px;
+  margin-left: 8px;
+  max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
   color: #cc1818;
 }
 
+.block-editor-url-popover__expand-on-click {
+  display: flex;
+  align-items: center;
+  min-width: 350px;
+  white-space: nowrap;
+}
+.block-editor-url-popover__expand-on-click .text {
+  flex-grow: 1;
+}
+.block-editor-url-popover__expand-on-click .text p {
+  margin: 0;
+  line-height: 16px;
+}
+.block-editor-url-popover__expand-on-click .text p.description {
+  color: #757575;
+  font-size: 12px;
+}
+
 .html-anchor-control .components-external-link {
   display: block;
   margin-top: 8px;
@@ -3419,6 +3425,35 @@ iframe[name=editor-canvas].has-history {
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: #e0e0e0 transparent;
+  will-change: transform;
+  scrollbar-gutter: auto;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
+  background-color: #e0e0e0;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+    scrollbar-color: #949494 transparent;
+  }
 }
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
@@ -3443,7 +3478,10 @@ iframe[name=editor-canvas].has-history {
   position: absolute;
   font-size: 16px;
   left: 0;
-  bottom: 16px;
+  height: 32px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
 }
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
@@ -3656,9 +3694,6 @@ iframe[name=editor-canvas].has-history {
 .block-editor-inserter__search {
   padding: 16px 16px 0 16px;
 }
-.block-editor-inserter__search .components-search-control__icon {
-  left: 20px;
-}
 
 .block-editor-inserter__tabs {
   flex-grow: 1;
@@ -4118,13 +4153,8 @@ iframe[name=editor-canvas].has-history {
   justify-content: center;
   flex: 1;
 }
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control input[type=search].components-search-control__input {
-  background: #fff;
-}
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control button.components-button {
-  min-width: auto;
-  padding-right: 2px;
-  padding-left: 2px;
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
+  --wp-components-color-background: #fff;
 }
 
 .block-editor-inserter__media-list {