@wordpress/block-editor 13.4.0 → 14.0.0

package/build-module/utils/get-editor-region.js

@@ -19,7 +19,7 @@ export default function getEditorRegion(editor) {
     return iframeDocument === editor.ownerDocument;
   })) !== null && _Array$from$find !== void 0 ? _Array$from$find : editor;
 
-  // The region is provivided by the editor, not the block-editor.
+  // The region is provided by the editor, not the block-editor.
   // We should send focus to the region if one is available to reuse the
   // same interface for navigating landmarks. If no region is available,
   // use the canvas instead.

package/build-module/utils/get-editor-region.js.map

@@ -1 +1 @@
-{"version":3,"names":["getEditorRegion","editor","_Array$from$find","_editorCanvas$closest","editorCanvas","Array","from","document","querySelectorAll","values","find","iframe","iframeDocument","contentDocument","contentWindow","ownerDocument","closest"],"sources":["@wordpress/block-editor/src/utils/get-editor-region.js"],"sourcesContent":["/**\n * Gets the editor region for a given editor canvas element or\n * returns the passed element if no region is found\n *\n * @param { Object } editor The editor canvas element.\n * @return { Object } The editor region or given editor element\n */\nexport default function getEditorRegion( editor ) {\n\tif ( ! editor ) {\n\t\treturn null;\n\t}\n\n\t// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure\n\t// we're focusing the region that contains this editor.\n\tconst editorCanvas =\n\t\tArray.from(\n\t\t\tdocument.querySelectorAll( 'iframe[name=\"editor-canvas\"]' ).values()\n\t\t).find( ( iframe ) => {\n\t\t\t// Find the iframe that contains our contentRef\n\t\t\tconst iframeDocument =\n\t\t\t\tiframe.contentDocument || iframe.contentWindow.document;\n\n\t\t\treturn iframeDocument === editor.ownerDocument;\n\t\t} ) ?? editor;\n\n\t// The region is provivided by the editor, not the block-editor.\n\t// We should send focus to the region if one is available to reuse the\n\t// same interface for navigating landmarks. If no region is available,\n\t// use the canvas instead.\n\treturn editorCanvas?.closest( '[role=\"region\"]' ) ?? editorCanvas;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,eAAeA,CAAEC,MAAM,EAAG;EAAA,IAAAC,gBAAA,EAAAC,qBAAA;EACjD,IAAK,CAAEF,MAAM,EAAG;IACf,OAAO,IAAI;EACZ;;EAEA;EACA;EACA,MAAMG,YAAY,IAAAF,gBAAA,GACjBG,KAAK,CAACC,IAAI,CACTC,QAAQ,CAACC,gBAAgB,CAAE,8BAA+B,CAAC,CAACC,MAAM,CAAC,CACpE,CAAC,CAACC,IAAI,CAAIC,MAAM,IAAM;IACrB;IACA,MAAMC,cAAc,GACnBD,MAAM,CAACE,eAAe,IAAIF,MAAM,CAACG,aAAa,CAACP,QAAQ;IAExD,OAAOK,cAAc,KAAKX,MAAM,CAACc,aAAa;EAC/C,CAAE,CAAC,cAAAb,gBAAA,cAAAA,gBAAA,GAAID,MAAM;;EAEd;EACA;EACA;EACA;EACA,QAAAE,qBAAA,GAAOC,YAAY,EAAEY,OAAO,CAAE,iBAAkB,CAAC,cAAAb,qBAAA,cAAAA,qBAAA,GAAIC,YAAY;AAClE","ignoreList":[]}
+{"version":3,"names":["getEditorRegion","editor","_Array$from$find","_editorCanvas$closest","editorCanvas","Array","from","document","querySelectorAll","values","find","iframe","iframeDocument","contentDocument","contentWindow","ownerDocument","closest"],"sources":["@wordpress/block-editor/src/utils/get-editor-region.js"],"sourcesContent":["/**\n * Gets the editor region for a given editor canvas element or\n * returns the passed element if no region is found\n *\n * @param { Object } editor The editor canvas element.\n * @return { Object } The editor region or given editor element\n */\nexport default function getEditorRegion( editor ) {\n\tif ( ! editor ) {\n\t\treturn null;\n\t}\n\n\t// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure\n\t// we're focusing the region that contains this editor.\n\tconst editorCanvas =\n\t\tArray.from(\n\t\t\tdocument.querySelectorAll( 'iframe[name=\"editor-canvas\"]' ).values()\n\t\t).find( ( iframe ) => {\n\t\t\t// Find the iframe that contains our contentRef\n\t\t\tconst iframeDocument =\n\t\t\t\tiframe.contentDocument || iframe.contentWindow.document;\n\n\t\t\treturn iframeDocument === editor.ownerDocument;\n\t\t} ) ?? editor;\n\n\t// The region is provided by the editor, not the block-editor.\n\t// We should send focus to the region if one is available to reuse the\n\t// same interface for navigating landmarks. If no region is available,\n\t// use the canvas instead.\n\treturn editorCanvas?.closest( '[role=\"region\"]' ) ?? editorCanvas;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,eAAeA,CAAEC,MAAM,EAAG;EAAA,IAAAC,gBAAA,EAAAC,qBAAA;EACjD,IAAK,CAAEF,MAAM,EAAG;IACf,OAAO,IAAI;EACZ;;EAEA;EACA;EACA,MAAMG,YAAY,IAAAF,gBAAA,GACjBG,KAAK,CAACC,IAAI,CACTC,QAAQ,CAACC,gBAAgB,CAAE,8BAA+B,CAAC,CAACC,MAAM,CAAC,CACpE,CAAC,CAACC,IAAI,CAAIC,MAAM,IAAM;IACrB;IACA,MAAMC,cAAc,GACnBD,MAAM,CAACE,eAAe,IAAIF,MAAM,CAACG,aAAa,CAACP,QAAQ;IAExD,OAAOK,cAAc,KAAKX,MAAM,CAACc,aAAa;EAC/C,CAAE,CAAC,cAAAb,gBAAA,cAAAA,gBAAA,GAAID,MAAM;;EAEd;EACA;EACA;EACA;EACA,QAAAE,qBAAA,GAAOC,YAAY,EAAEY,OAAO,CAAE,iBAAkB,CAAC,cAAAb,qBAAA,cAAAA,qBAAA,GAAIC,YAAY;AAClE","ignoreList":[]}

package/build-module/utils/get-px-from-css-unit.js

@@ -1,5 +1,5 @@
 /**
- * This function was accidentially exposed for mobile/native usage.
+ * This function was accidentally exposed for mobile/native usage.
  *
  * @deprecated
  *

package/build-module/utils/get-px-from-css-unit.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/block-editor/src/utils/get-px-from-css-unit.js"],"sourcesContent":["/**\n * This function was accidentially exposed for mobile/native usage.\n *\n * @deprecated\n *\n * @return {string} Empty string.\n */\nexport default () => '';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAe,MAAM,EAAE","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/block-editor/src/utils/get-px-from-css-unit.js"],"sourcesContent":["/**\n * This function was accidentally exposed for mobile/native usage.\n *\n * @deprecated\n *\n * @return {string} Empty string.\n */\nexport default () => '';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAe,MAAM,EAAE","ignoreList":[]}

package/build-style/content-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -641,17 +644,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  pointer-events: none;
-  background: currentColor;
-  opacity: 0.1;
-}
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   opacity: 0;
 }
@@ -814,8 +806,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 
 .block-editor-iframe__html {
+  border: 0 solid #ddd;
   transform-origin: top center;
-  transition: transform 0.3s;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {

package/build-style/content.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -641,17 +644,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child::after::before, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child::after::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  background: currentColor;
-  opacity: 0.1;
-}
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   opacity: 0;
 }
@@ -814,8 +806,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 
 .block-editor-iframe__html {
+  border: 0 solid #ddd;
   transform-origin: top center;
-  transition: transform 0.3s;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {

package/build-style/default-editor-styles-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/default-editor-styles.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */

package/build-style/style-rtl.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -110,6 +113,9 @@
 .block-editor-autocompleters__block .block-editor-block-icon {
   margin-left: 8px;
 }
+.block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
+  color: inherit !important;
+}
 
 .block-editor-autocompleters__link {
   white-space: nowrap;
@@ -128,6 +134,13 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -1706,10 +1719,6 @@ iframe[name=editor-canvas] {
   min-width: 260px;
   overflow-x: hidden;
 }
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
-  margin-bottom: 0;
-}
 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
   background-color: #f0f0f0;
   width: 100%;
@@ -1723,12 +1732,6 @@ iframe[name=editor-canvas] {
   content: none;
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-  height: 0;
-  width: 0;
-  position: absolute;
-}
-
 .modal-open .block-editor-global-styles-background-panel__popover {
   z-index: 159890;
 }
@@ -1826,7 +1829,6 @@ iframe[name=editor-canvas] {
 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
   width: 24px;
   min-width: 0 !important;
-  overflow: hidden;
   padding-right: 0;
   padding-left: 0;
 }
@@ -1870,7 +1872,7 @@ iframe[name=editor-canvas] {
     justify-content: space-around;
   }
   .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-    height: 20px;
+    height: 20px !important;
     width: 100%;
     min-width: 0 !important;
   }
@@ -1884,13 +1886,43 @@ iframe[name=editor-canvas] {
   }
 }
 
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-  border-left: 1px solid #757575;
-  padding-left: 12px;
+@media (min-width: 600px) {
+  .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
+    height: 40px;
+    position: relative;
+    top: -5px;
+  }
 }
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-  border-right: 1px solid #757575;
-  padding-right: 12px;
+
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
+  position: relative;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    background: #e0e0e0;
+    position: absolute;
+    top: 0;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    background: #1e1e1e;
+  }
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
+  padding-left: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
+  left: 0;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
+  right: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
@@ -1910,6 +1942,18 @@ iframe[name=editor-canvas] {
     background: #1e1e1e;
   }
 }
+.show-icon-labels .block-editor-grid-item-mover-button {
+  white-space: nowrap;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
+  height: 24px;
+  background: #ddd;
+  top: 4px;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
+  background: #ddd;
+  width: calc(100% - 24px);
+}
 
 .block-editor-height-control {
   border: 0;
@@ -3165,17 +3209,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar {
+  background-color: #fff;
   height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
 }
-@media (min-width: 782px) {
-  .block-editor-tabbed-sidebar {
-    width: 350px;
-  }
-}
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {
   border-bottom: 1px solid #ddd;
@@ -3192,20 +3232,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar__tablist {
-  box-sizing: border-box;
-  flex-grow: 1;
   margin-bottom: -1px;
-  width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-  flex-grow: 1;
-  margin-bottom: -1px;
-}
-.block-editor-tabbed-sidebar__tab[id$=reusable] {
-  flex-grow: inherit;
-  padding-right: 16px;
-  padding-left: 16px;
 }
 
 .block-editor-tabbed-sidebar__tabpanel {
@@ -3496,10 +3523,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-  color: #757575;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3510,6 +3533,7 @@ iframe[name=editor-canvas] {
    */
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
   flex-direction: row-reverse;
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
@@ -3521,6 +3545,18 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
+div.block-editor-bindings__panel {
+  grid-template-columns: auto;
+}
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+  color: inherit;
+}
+
+.block-editor-bindings__popover .block-editor-bindings__source-label {
+  grid-column: 2;
+  margin: 8px 0;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3859,6 +3895,11 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3916,6 +3957,11 @@ iframe[name=editor-canvas] {
   position: relative;
   overflow: visible;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__menu.show-panel {
+    width: 630px;
+  }
+}
 
 .block-editor-inserter__inline-elements {
   margin-top: -1px;
@@ -4110,14 +4156,13 @@ iframe[name=editor-canvas] {
   .block-editor-inserter__category-panel {
     border-right: 1px solid #e0e0e0;
     padding: 0;
-    right: 100%;
-    width: 300px;
+    right: 350px;
+    width: 280px;
     position: absolute;
     top: -1px;
     height: calc(100% + 1px);
     background: #f0f0f0;
     border-top: 1px solid #e0e0e0;
-    box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
   .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
@@ -4446,9 +4491,6 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
-.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
-  box-shadow: none;
-}
 
 @media (max-width: 959px) {
   .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {

package/build-style/style.css

@@ -33,6 +33,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -110,6 +113,9 @@
 .block-editor-autocompleters__block .block-editor-block-icon {
   margin-right: 8px;
 }
+.block-editor-autocompleters__block[aria-selected=true] .block-editor-block-icon {
+  color: inherit !important;
+}
 
 .block-editor-autocompleters__link {
   white-space: nowrap;
@@ -128,6 +134,13 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
+  transition: all 0.5s cubic-bezier(0.65, 0, 0.45, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  iframe[name=editor-canvas] {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 
 .block-editor-block-icon {
@@ -1707,10 +1720,6 @@ iframe[name=editor-canvas] {
   min-width: 260px;
   overflow-x: hidden;
 }
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-base-control__help,
-.block-editor-global-styles-background-panel__dropdown-content-wrapper .components-toggle-control {
-  margin-bottom: 0;
-}
 .block-editor-global-styles-background-panel__dropdown-content-wrapper .components-focal-point-picker-wrapper {
   background-color: #f0f0f0;
   width: 100%;
@@ -1724,12 +1733,6 @@ iframe[name=editor-canvas] {
   content: none;
 }
 
-.block-editor-global-styles-background-panel__hidden-tools-panel-item {
-  height: 0;
-  width: 0;
-  position: absolute;
-}
-
 .modal-open .block-editor-global-styles-background-panel__popover {
   z-index: 159890;
 }
@@ -1827,7 +1830,6 @@ iframe[name=editor-canvas] {
 .block-editor-grid-item-mover__move-button-container .block-editor-grid-item-mover-button {
   width: 24px;
   min-width: 0 !important;
-  overflow: hidden;
   padding-left: 0;
   padding-right: 0;
 }
@@ -1871,7 +1873,7 @@ iframe[name=editor-canvas] {
     justify-content: space-around;
   }
   .block-editor-grid-item-mover__move-vertical-button-container > .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-    height: 20px;
+    height: 20px !important;
     width: 100%;
     min-width: 0 !important;
   }
@@ -1885,13 +1887,43 @@ iframe[name=editor-canvas] {
   }
 }
 
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-  border-right: 1px solid #757575;
-  padding-right: 12px;
+@media (min-width: 600px) {
+  .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container {
+    height: 40px;
+    position: relative;
+    top: -5px;
+  }
 }
-.show-icon-labels .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-  border-left: 1px solid #757575;
-  padding-left: 12px;
+
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container {
+  position: relative;
+}
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    content: "";
+    height: 100%;
+    width: 1px;
+    background: #e0e0e0;
+    position: absolute;
+    top: 0;
+  }
+}
+@media (min-width: 782px) {
+  .show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container::before {
+    background: #1e1e1e;
+  }
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left {
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-left::before {
+  right: 0;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right {
+  padding-left: 6px;
+}
+.show-icon-labels .block-editor-grid-item-mover__move-horizontal-button-container.is-right::before {
+  left: 0;
 }
 @media (min-width: 600px) {
   .show-icon-labels .block-editor-grid-item-mover__move-vertical-button-container::before {
@@ -1911,6 +1943,18 @@ iframe[name=editor-canvas] {
     background: #1e1e1e;
   }
 }
+.show-icon-labels .block-editor-grid-item-mover-button {
+  white-space: nowrap;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-horizontal-button-container::before {
+  height: 24px;
+  background: #ddd;
+  top: 4px;
+}
+.show-icon-labels .editor-collapsible-block-toolbar .block-editor-grid-item-mover__move-vertical-button-container::before {
+  background: #ddd;
+  width: calc(100% - 24px);
+}
 
 .block-editor-height-control {
   border: 0;
@@ -3166,17 +3210,13 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar {
+  background-color: #fff;
   height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
 }
-@media (min-width: 782px) {
-  .block-editor-tabbed-sidebar {
-    width: 350px;
-  }
-}
 
 .block-editor-tabbed-sidebar__tablist-and-close-button {
   border-bottom: 1px solid #ddd;
@@ -3193,20 +3233,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-tabbed-sidebar__tablist {
-  box-sizing: border-box;
-  flex-grow: 1;
   margin-bottom: -1px;
-  width: 100%;
-}
-
-.block-editor-tabbed-sidebar__tab {
-  flex-grow: 1;
-  margin-bottom: -1px;
-}
-.block-editor-tabbed-sidebar__tab[id$=reusable] {
-  flex-grow: inherit;
-  padding-left: 16px;
-  padding-right: 16px;
 }
 
 .block-editor-tabbed-sidebar__tabpanel {
@@ -3497,10 +3524,6 @@ iframe[name=editor-canvas] {
   font-size: 12px;
 }
 
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-  color: #757575;
-}
-
 .block-editor-hooks__block-hooks {
   /**
    * Since we're displaying the block icon alongside the block name,
@@ -3511,6 +3534,7 @@ iframe[name=editor-canvas] {
    */
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
   flex-direction: row-reverse;
 }
 .block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
@@ -3522,6 +3546,18 @@ iframe[name=editor-canvas] {
   margin-bottom: 16px;
 }
 
+div.block-editor-bindings__panel {
+  grid-template-columns: auto;
+}
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+  color: inherit;
+}
+
+.block-editor-bindings__popover .block-editor-bindings__source-label {
+  grid-column: 2;
+  margin: 8px 0;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3860,6 +3896,11 @@ iframe[name=editor-canvas] {
 .block-editor-inserter__main-area.show-as-tabs {
   gap: 0;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__main-area .block-editor-tabbed-sidebar {
+    width: 350px;
+  }
+}
 
 .block-editor-inserter__popover.is-quick .components-popover__content {
   border: none;
@@ -3917,6 +3958,11 @@ iframe[name=editor-canvas] {
   position: relative;
   overflow: visible;
 }
+@media (min-width: 782px) {
+  .block-editor-inserter__menu.show-panel {
+    width: 630px;
+  }
+}
 
 .block-editor-inserter__inline-elements {
   margin-top: -1px;
@@ -4111,14 +4157,13 @@ iframe[name=editor-canvas] {
   .block-editor-inserter__category-panel {
     border-left: 1px solid #e0e0e0;
     padding: 0;
-    left: 100%;
-    width: 300px;
+    left: 350px;
+    width: 280px;
     position: absolute;
     top: -1px;
     height: calc(100% + 1px);
     background: #f0f0f0;
     border-top: 1px solid #e0e0e0;
-    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
   }
   .block-editor-inserter__category-panel .block-editor-inserter__media-list,
 .block-editor-inserter__category-panel .block-editor-block-patterns-list {
@@ -4447,9 +4492,6 @@ iframe[name=editor-canvas] {
     height: 100%;
   }
 }
-.block-editor-inserter__menu.is-zoom-out .block-editor-inserter__category-panel {
-  box-shadow: none;
-}
 
 @media (max-width: 959px) {
   .show-icon-labels .block-editor-block-patterns-explorer .block-editor-patterns__grid-pagination {