@wordpress/block-editor 12.9.0 → 12.10.0

package/build-module/store/utils.js

@@ -7,13 +7,9 @@
  */
 export function mapRichTextSettings(attributeDefinition) {
   const {
-    multiline: multilineTag,
-    __unstableMultilineWrapperTags: multilineWrapperTags,
     __unstablePreserveWhiteSpace: preserveWhiteSpace
   } = attributeDefinition;
   return {
-    multilineTag,
-    multilineWrapperTags,
     preserveWhiteSpace
   };
 }

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

@@ -1 +1 @@
-{"version":3,"names":["mapRichTextSettings","attributeDefinition","multiline","multilineTag","__unstableMultilineWrapperTags","multilineWrapperTags","__unstablePreserveWhiteSpace","preserveWhiteSpace"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * Helper function that maps attribute definition properties to the\n * ones used by RichText utils like `create, toHTMLString, etc..`.\n *\n * @param {Object} attributeDefinition A block's attribute definition object.\n * @return {Object} The mapped object.\n */\nexport function mapRichTextSettings( attributeDefinition ) {\n\tconst {\n\t\tmultiline: multilineTag,\n\t\t__unstableMultilineWrapperTags: multilineWrapperTags,\n\t\t__unstablePreserveWhiteSpace: preserveWhiteSpace,\n\t} = attributeDefinition;\n\treturn {\n\t\tmultilineTag,\n\t\tmultilineWrapperTags,\n\t\tpreserveWhiteSpace,\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAAEC,mBAAmB,EAAG;EAC1D,MAAM;IACLC,SAAS,EAAEC,YAAY;IACvBC,8BAA8B,EAAEC,oBAAoB;IACpDC,4BAA4B,EAAEC;EAC/B,CAAC,GAAGN,mBAAmB;EACvB,OAAO;IACNE,YAAY;IACZE,oBAAoB;IACpBE;EACD,CAAC;AACF"}
+{"version":3,"names":["mapRichTextSettings","attributeDefinition","__unstablePreserveWhiteSpace","preserveWhiteSpace"],"sources":["@wordpress/block-editor/src/store/utils.js"],"sourcesContent":["/**\n * Helper function that maps attribute definition properties to the\n * ones used by RichText utils like `create, toHTMLString, etc..`.\n *\n * @param {Object} attributeDefinition A block's attribute definition object.\n * @return {Object} The mapped object.\n */\nexport function mapRichTextSettings( attributeDefinition ) {\n\tconst { __unstablePreserveWhiteSpace: preserveWhiteSpace } =\n\t\tattributeDefinition;\n\treturn { preserveWhiteSpace };\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAAEC,mBAAmB,EAAG;EAC1D,MAAM;IAAEC,4BAA4B,EAAEC;EAAmB,CAAC,GACzDF,mBAAmB;EACpB,OAAO;IAAEE;EAAmB,CAAC;AAC9B"}

package/build-style/content-rtl.css

@@ -456,7 +456,6 @@
 }
 
 .block-editor-iframe__body {
-  background-color: #fff;
   transition: all 0.3s;
   transform-origin: top center;
 }

package/build-style/content.css

@@ -456,7 +456,6 @@
 }
 
 .block-editor-iframe__body {
-  background-color: #fff;
   transition: all 0.3s;
   transform-origin: top center;
 }

package/build-style/style-rtl.css

@@ -267,44 +267,6 @@
 /**
  * Block Toolbar when contextual.
  */
-.block-editor-block-contextual-toolbar.is-fixed {
-  /* Set left position when auto-fold is not on the body element. */
-  right: 0;
-}
-@media (min-width: 783px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-.auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
-}
-@media (min-width: 783px) {
-  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-@media (min-width: 961px) {
-  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
-    right: 160px;
-  }
-}
-
-/* Sidebar manually collapsed. */
-.folded .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0;
-}
-@media (min-width: 783px) {
-  .folded .block-editor-block-contextual-toolbar.is-fixed {
-    right: 36px;
-  }
-}
-
-body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-  right: 0 !important;
-}
-
 .block-editor-block-contextual-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -316,11 +278,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   border-left-color: #1e1e1e;
 }
 .block-editor-block-contextual-toolbar.is-fixed {
-  position: sticky;
-  top: 0;
-  z-index: 31;
-  display: block;
-  width: 100%;
   overflow: hidden;
   border: none;
   border-bottom: 1px solid #e0e0e0;
@@ -343,32 +300,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   background: linear-gradient(to left, #fff, transparent);
 }
 @media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 180px;
-    position: fixed;
-    top: 32px;
-    min-height: initial;
-    border-bottom: none;
-    display: flex;
-    height: 60px;
-    align-items: center;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 240px;
-    top: 0;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    width: initial;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed:empty {
-    width: initial;
-  }
   .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar {
     flex-grow: initial;
     width: initial;
@@ -429,12 +360,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     height: 24px;
     top: -1px;
   }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 80px;
-  }
-  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    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;
   }
@@ -449,12 +374,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     background-color: #ddd;
     position: relative;
   }
-  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed {
-    margin-right: 153.6px;
-  }
-  .blocks-widgets-container .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
-    margin-right: 268.8px;
-  }
   .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
     position: relative;
     top: -1px;
@@ -484,25 +403,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
     margin-bottom: -1px;
   }
 }
-@media (min-width: 782px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 180px);
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% + 40px - 180px);
-  }
-}
-@media (min-width: 960px) {
-  .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
-    width: auto;
-  }
-  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
-    width: calc(100% - 280px - 256px);
-  }
-}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -963,7 +863,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
 }
-.block-editor-block-patterns-list__list-item[draggable=true] .block-editor-block-preview__container {
+.block-editor-block-patterns-list__list-item[draggable=true] {
   cursor: grab;
 }
 
@@ -977,20 +877,65 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
-  padding-top: 8px;
-  font-size: 12px;
-  text-align: center;
+  text-align: right;
+  flex-grow: 1;
 }
 .block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
-  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #1e1e1e;
 }
 .block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) #1e1e1e;
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
-  color: var(--wp-admin-theme-color);
+.block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:hover .block-editor-block-preview__container, .block-editor-block-patterns-list__item.block-editor-block-patterns-list__list-item-synced:focus .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-block-synced-color), 0 15px 25px rgba(0, 0, 0, 0.07);
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-details {
+  align-items: center;
+  margin-top: 8px;
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper {
+  min-width: 24px;
+  height: 24px;
+}
+.block-editor-block-patterns-list__item .block-editor-patterns__pattern-icon-wrapper .block-editor-patterns__pattern-icon {
+  fill: var(--wp-block-synced-color);
+}
+
+.block-editor-patterns__grid-pagination {
+  border-top: 1px solid #2f2f2f;
+  padding: 4px;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary {
+  width: auto;
+  height: 32px;
+  justify-content: center;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
+  color: #949494;
+  background: none;
+}
+.block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
+  color: #fff;
+  background-color: #757575;
+}
+
+.show-icon-labels .block-editor-patterns__grid-pagination {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-previous,
+.show-icon-labels .block-editor-patterns__grid-pagination .block-editor-patterns__grid-pagination-next {
+  flex-direction: column;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button {
+  width: auto;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button span {
+  display: none;
+}
+.show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
+  content: attr(aria-label);
 }
 
 .components-popover.block-editor-block-popover {
@@ -1100,13 +1045,13 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item {
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #ccc;
+  box-shadow: inset 0 0 0 1px #ddd;
   display: inline-block;
   width: calc(50% - 4px);
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:hover {
   color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 1px #ccc;
+  box-shadow: inset 0 0 0 1px #ddd;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:hover {
   background-color: #1e1e1e;
@@ -1116,8 +1061,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   color: #fff;
 }
 .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item:focus, .block-editor-block-styles__variants button.components-button.block-editor-block-styles__item.is-active:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
+  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));
 }
 .block-editor-block-styles__variants .block-editor-block-styles__item-text {
   word-break: break-all;
@@ -1928,7 +1872,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   position: relative;
 }
 
-.block-editor-link-control__search-input-container {
+.block-editor-link-control__search-input-container,
+.block-editor-link-control__search-input-wrapper {
   position: relative;
 }
 
@@ -1974,7 +1919,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-link-control__field input[type=text]:focus, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:focus {
   border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-link-control__field input[type=text]::-webkit-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-webkit-input-placeholder {
@@ -1992,6 +1937,16 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: -8px 16px 16px;
 }
 
+.block-editor-link-control__search-enter {
+  position: absolute;
+  left: 19px;
+  top: 3px;
+}
+.block-editor-link-control__search-enter svg {
+  position: relative;
+  top: -2px;
+}
+
 .block-editor-link-control__search-actions {
   display: flex;
   flex-direction: row-reverse;
@@ -2255,16 +2210,16 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 
 .block-editor-link-control__setting {
-  margin-bottom: 16px;
+  margin-bottom: 0;
   flex: 1;
   padding: 8px 24px 8px 0;
 }
+.block-editor-link-control__setting .components-base-control__field {
+  display: flex;
+}
 .block-editor-link-control__setting input {
   margin-right: 0;
 }
-.block-editor-link-control__setting.block-editor-link-control__setting:last-child {
-  margin-bottom: 0;
-}
 .is-preview .block-editor-link-control__setting {
   padding: 20px 0 8px 8px;
 }
@@ -2277,6 +2232,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   padding-right: 0;
   gap: 0;
 }
+.block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] {
+  color: #1e1e1e;
+}
 .block-editor-link-control__tools .components-button.block-editor-link-control__drawer-toggle[aria-expanded=true] svg {
   visibility: visible;
   transition: transform 0.1s ease;
@@ -2308,7 +2266,12 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   right: auto;
   bottom: auto;
   top: calc(50% - 16px / 2);
-  left: 16px;
+  left: 40px;
+}
+
+.block-editor-link-control .block-editor-link-control__search-input-wrapper.has-actions .components-spinner {
+  top: calc(50% + 16px / 4);
+  left: 12px;
 }
 
 .block-editor-link-control__search-item-action {
@@ -2582,8 +2545,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.3);
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock,
-.block-editor-list-view-leaf .block-editor-list-view-block-select-button__sticky {
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__images {
@@ -3044,7 +3006,7 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 }
 .block-editor-url-input__input[type=text]:focus {
   border-color: var(--wp-admin-theme-color);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .block-editor-url-input__input[type=text]::-webkit-input-placeholder {
@@ -3221,6 +3183,69 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-top: 8px;
 }
 
+.block-editor-hooks__block-hooks {
+  /**
+   * Since we're displaying the block icon alongside the block name,
+   * we need to right-align the toggle.
+   */
+  /**
+   * Un-reverse the flex direction for the toggle's label.
+   */
+}
+.block-editor-hooks__block-hooks .components-toggle-control .components-h-stack {
+  flex-direction: row-reverse;
+}
+.block-editor-hooks__block-hooks .components-toggle-control .components-h-stack .components-h-stack {
+  flex-direction: row;
+}
+
+.block-editor-hooks__background__inspector-upload-container {
+  position: relative;
+}
+.block-editor-hooks__background__inspector-upload-container .components-drop-zone__content-icon {
+  display: none;
+}
+
+.block-editor-hooks__background__inspector-upload-container button.components-button,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button {
+  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ccc;
+  width: 100%;
+  display: block;
+  height: 40px;
+}
+.block-editor-hooks__background__inspector-upload-container button.components-button:hover,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
+.block-editor-hooks__background__inspector-upload-container button.components-button:focus,
+.block-editor-hooks__background__inspector-media-replace-container button.components-button:focus {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.block-editor-hooks__background__inspector-upload-container .block-editor-hooks__background__inspector-media-replace-title,
+.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-media-replace-title {
+  word-break: break-all;
+  white-space: normal;
+  text-align: start;
+  text-align-last: center;
+}
+
+.block-editor-hooks__background__inspector-media-replace-container .components-dropdown {
+  display: block;
+}
+.block-editor-hooks__background__inspector-media-replace-container img {
+  width: 20px;
+  min-width: 20px;
+  aspect-ratio: 1;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  border-radius: 50% !important;
+}
+.block-editor-hooks__background__inspector-media-replace-container .block-editor-hooks__background__inspector-readonly-logo-preview {
+  padding: 6px 12px;
+  display: flex;
+  height: 40px;
+}
+
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3329,6 +3354,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   grid-column: span 1;
 }
 
+.block-editor-block-rename-modal {
+  z-index: 1000001;
+}
+
 /**
  * Block Toolbar
  */
@@ -3775,12 +3804,18 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   background: var(--wp-admin-theme-color);
 }
 
-.block-editor-inserter__block-patterns-tabs-container {
+.block-editor-inserter__block-patterns-tabs-container,
+.block-editor-block-patterns-explorer__sidebar {
   height: 100%;
 }
-.block-editor-inserter__block-patterns-tabs-container nav {
+.block-editor-inserter__block-patterns-tabs-container nav,
+.block-editor-block-patterns-explorer__sidebar nav {
   height: 100%;
 }
+.block-editor-inserter__block-patterns-tabs-container .block-editor-block-patterns__source-filter select.components-select-control__input,
+.block-editor-block-patterns-explorer__sidebar .block-editor-block-patterns__source-filter select.components-select-control__input {
+  height: 40px;
+}
 
 .block-editor-inserter__block-patterns-tabs {
   display: flex;
@@ -3816,10 +3851,11 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-inserter__patterns-category-dialog .block-editor-block-patterns-list {
   margin-top: 24px;
 }
-.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container {
+
+.block-editor-block-patterns-list__list-item .block-editor-block-preview__container {
   box-shadow: 0 15px 25px rgba(0, 0, 0, 0.07);
 }
-.block-editor-inserter__patterns-category-dialog .block-editor-block-preview__container:hover {
+.block-editor-block-patterns-list__list-item:hover .block-editor-block-preview__container {
   box-shadow: 0 0 0 2px #1e1e1e, 0 15px 25px rgba(0, 0, 0, 0.07);
 }
 
@@ -3944,6 +3980,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin-right: 280px;
   padding: 24px 0 32px;
 }
+.block-editor-block-patterns-explorer__list .block-editor-patterns__sync-status-filter .components-input-control__container {
+  width: 380px;
+}
 .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
   display: grid;
   grid-gap: 32px;
@@ -4183,6 +4222,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   margin: 0;
 }
 
+.block-editor-patterns__sync-status-filter .components-input-control__container select.components-select-control__input {
+  height: 40px;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }
@@ -4271,13 +4314,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   z-index: 3;
 }
 
-.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
-  margin-top: 8px;
-}
-
 .spacing-sizes-control__header {
   height: 16px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 .spacing-sizes-control__dropdown {
@@ -4294,6 +4333,10 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   flex: 0 0 auto;
 }
 
+.spacing-sizes-control__icon {
+  margin-right: -4px;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;