@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.76cff8c98.0

package/build-style/style-rtl.css

@@ -83,6 +83,10 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+/**
+ * Creates a checkerboard pattern background to indicate transparency.
+ * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
+ */
 :root {
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
@@ -621,10 +625,10 @@ iframe[name=editor-canvas] {
 .block-editor-block-allowed-blocks-modal__actions {
   background-color: #fff;
   border-top: 1px solid #ddd;
-  bottom: -32px;
+  bottom: -24px;
   right: 0;
-  margin: 0 -32px -32px;
-  padding: 16px 32px;
+  margin: 0 -24px -24px;
+  padding: 16px 24px;
   position: sticky;
   z-index: 1;
 }
@@ -637,6 +641,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-breadcrumb li {
   display: inline-flex;
   margin: 0;
+  white-space: nowrap;
 }
 .block-editor-block-breadcrumb li .block-editor-block-breadcrumb__separator {
   fill: currentColor;
@@ -660,9 +665,7 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-block-card {
-  align-items: flex-start;
   color: #1e1e1e;
-  display: flex;
   padding: 16px;
 }
 .block-editor-block-card.is-parent {
@@ -1173,6 +1176,10 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
+.block-editor-block-styles {
+  grid-column: 1/-1;
+}
+
 .block-editor-block-styles__variants {
   display: flex;
   flex-wrap: wrap;
@@ -1461,12 +1468,12 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-variation-transforms {
   box-sizing: border-box;
-  padding: 0 52px 16px 16px;
+  padding: 0 16px 16px;
 }
 .block-editor-block-variation-transforms:where(fieldset) {
   border: 0;
-  padding: 0;
   margin: 0;
+  min-inline-size: 0;
 }
 
 .block-editor-block-variation-transforms__button {
@@ -1488,12 +1495,6 @@ iframe[name=editor-canvas] {
 .components-border-radius-control legend {
   margin-bottom: 0;
 }
-.components-border-radius-control .components-border-radius-control__input-controls-wrapper {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  margin-left: 12px;
-}
 .components-border-radius-control .components-border-radius-control__linked-button {
   display: flex;
   justify-content: center;
@@ -1502,15 +1503,6 @@ iframe[name=editor-canvas] {
   margin-left: 0;
 }
 
-.components-border-radius-control__custom-select-control,
-.components-border-radius-control__range-control {
-  flex: 1;
-}
-
-.components-border-radius-control__icon {
-  flex: 0 0 auto;
-}
-
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -1536,6 +1528,9 @@ iframe[name=editor-canvas] {
   margin-bottom: inherit;
 }
 
+.block-editor-panel-color-gradient-settings__dropdown-content {
+  min-height: 160px;
+}
 .block-editor-panel-color-gradient-settings__dropdown-content .block-editor-color-gradient-control__panel {
   width: 260px;
   padding: 16px;
@@ -1627,147 +1622,6 @@ iframe[name=editor-canvas] {
   }
 }
 
-.block-editor-content-only-controls__link {
-  width: 100%;
-  box-shadow: inset 0 0 0 1px #ccc;
-}
-.block-editor-content-only-controls__link:focus:not(:disabled) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
-.block-editor-content-only-controls__link-row {
-  align-items: center;
-}
-
-.block-editor-content-only-controls__link-title {
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.block-editor-content-only-controls__media {
-  width: 100%;
-  box-shadow: inset 0 0 0 1px #ccc;
-}
-.block-editor-content-only-controls__media:focus:not(:disabled) {
-  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-
-.block-editor-content-only-controls__media-replace-flow {
-  display: block;
-}
-
-.block-editor-content-only-controls__media-row {
-  align-items: center;
-}
-
-.block-editor-content-only-controls__media-placeholder {
-  width: 24px;
-  height: 24px;
-  border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-  display: inline-block;
-  padding: 0;
-  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
-}
-
-.block-editor-content-only-controls__media-title {
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-block-editor-content-only-controls__media-thumbnail {
-  width: 100%;
-  height: 100%;
-  border-radius: 2px;
-  align-self: center;
-}
-
-.block-editor-content-only-controls__rich-text {
-  width: 100%;
-  margin: 0;
-  background: #fff;
-  color: #1e1e1e;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  padding: 6px 8px;
-  /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
-  /* Override core line-height. To be reviewed. */
-  line-height: normal;
-  box-shadow: 0 0 0 transparent;
-  border-radius: 2px;
-  border: 1px solid #949494;
-}
-@media not (prefers-reduced-motion) {
-  .block-editor-content-only-controls__rich-text {
-    transition: box-shadow 0.1s linear;
-  }
-}
-@media (min-width: 600px) {
-  .block-editor-content-only-controls__rich-text {
-    font-size: 13px;
-    /* Override core line-height. To be reviewed. */
-    line-height: normal;
-  }
-}
-.block-editor-content-only-controls__rich-text:focus {
-  border-color: var(--wp-admin-theme-color, #3858e9);
-  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
-  outline: 2px solid transparent;
-}
-.block-editor-content-only-controls__rich-text::-webkit-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.block-editor-content-only-controls__rich-text::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.block-editor-content-only-controls__rich-text:-ms-input-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-.block-editor-content-only-controls__rich-text {
-  border-color: #949494;
-}
-.block-editor-content-only-controls__rich-text::placeholder {
-  color: color-mix(in srgb, #1e1e1e, transparent 38%);
-}
-.block-editor-content-only-controls__rich-text {
-  min-height: 40px;
-  padding: 12px;
-}
-
-.block-editor-content-only-controls__screen.components-navigator-screen {
-  padding: 8px 0 16px 0;
-}
-.block-editor-content-only-controls__screen {
-  border-top: 1px solid #e0e0e0;
-}
-.block-editor-content-only-controls__screen .components-tools-panel {
-  border-top: none;
-  padding-top: 8px;
-}
-
-.block-editor-content-only-controls__button-panel {
-  padding: 4px;
-  font-weight: 500 !important;
-}
-
-.block-editor-content-only-controls__back-button,
-.block-editor-content-only-controls__drill-down-button {
-  width: 100%;
-}
-
-.block-editor-content-only-controls__fields-container {
-  padding: 0 16px;
-}
-
-.block-editor-content-only-controls__fields-header {
-  padding: 8px 0;
-  margin-bottom: 4px;
-}
-
 .block-editor-date-format-picker {
   margin: 0 0 16px;
   padding: 0;
@@ -1796,6 +1650,13 @@ block-editor-content-only-controls__media-thumbnail {
   background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
 }
 
+.block-editor-fit-text-size-warning {
+  margin: 8px 0 0 0;
+}
+.block-editor-fit-text-size-warning .components-notice__content {
+  margin-left: 0;
+}
+
 .components-font-appearance-control [role=option] {
   color: #1e1e1e;
   text-transform: capitalize;
@@ -2301,15 +2162,15 @@ block-editor-content-only-controls__media-thumbnail {
 .show-icon-labels .block-editor-link-control .components-button.has-icon::before {
   content: attr(aria-label);
 }
-.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top {
+.show-icon-labels .block-editor-link-control .block-editor-link-control__preview {
   gap: 4px;
   flex-wrap: wrap;
 }
-.show-icon-labels .block-editor-link-control .block-editor-link-control__search-item-top .components-button.has-icon {
+.show-icon-labels .block-editor-link-control .block-editor-link-control__preview .components-button.has-icon {
   width: auto;
   padding: 4px;
 }
-.show-icon-labels .block-editor-link-control .is-preview .block-editor-link-control__search-item-header {
+.show-icon-labels .block-editor-link-control .block-editor-link-control__preview .block-editor-link-control_link-information {
   min-width: 100%;
   margin-left: 0;
 }
@@ -2403,86 +2264,62 @@ block-editor-content-only-controls__media-thumbnail {
 .block-editor-link-control__search-item[aria-selected] {
   background: #f0f0f0;
 }
-.block-editor-link-control__search-item.is-current {
-  flex-direction: column;
+
+.block-editor-link-control__preview {
   background: transparent;
   border: 0;
-  width: 100%;
-  cursor: default;
   padding: 16px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-header {
-  display: block;
-  flex-direction: row;
-  align-items: center;
+.block-editor-link-control__preview .block-editor-link-control__link-information {
   margin-left: 8px;
-  gap: 8px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info {
+.block-editor-link-control__preview .block-editor-link-control__link-information .block-editor-link-control__preview-info {
   color: #757575;
   line-height: 1.1;
   font-size: 12px;
   word-break: break-all;
 }
-.block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header {
-  display: flex;
-  flex: 1;
-}
-.block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header {
-  align-items: center;
-}
-.block-editor-link-control__search-item.is-url-title .block-editor-link-control__search-item-title {
+.block-editor-link-control__preview.is-url-title .block-editor-link-control__preview-title {
   word-break: break-all;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-details {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 4px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+.block-editor-link-control__preview .block-editor-link-control__preview-icon {
+  position: relative;
+  flex-shrink: 0;
   background-color: #f0f0f0;
   width: 32px;
   height: 32px;
   border-radius: 2px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
-  position: relative;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-icon img {
+.block-editor-link-control__preview .block-editor-link-control__preview-icon img {
   width: 16px;
 }
-.block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-icon {
+.block-editor-link-control__preview.is-error .block-editor-link-control__preview-icon {
   top: 0;
   width: 32px;
   max-height: 32px;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title {
+.block-editor-link-control__preview .block-editor-link-control__preview-title {
   line-height: 1.1;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
+.block-editor-link-control__preview .block-editor-link-control__preview-title:focus {
   box-shadow: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
+.block-editor-link-control__preview .block-editor-link-control__preview-title:focus-visible {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
   text-decoration: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
+.block-editor-link-control__preview .block-editor-link-control__preview-title mark {
   font-weight: 600;
   color: inherit;
   background-color: transparent;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title span {
+.block-editor-link-control__preview .block-editor-link-control__preview-title span {
   font-weight: normal;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-title .components-external-link__icon {
+.block-editor-link-control__preview .block-editor-link-control__preview-title .components-external-link__icon {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2493,18 +2330,11 @@ block-editor-content-only-controls__media-thumbnail {
   border: 0;
 }
 
-.block-editor-link-control__search-item-top {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  align-items: center;
-}
-
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon svg,
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon img {
+.block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon svg,
+.block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon img {
   opacity: 0;
 }
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon::before {
+.block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
   content: "";
   display: block;
   background-color: #f0f0f0;
@@ -2516,7 +2346,7 @@ block-editor-content-only-controls__media-thumbnail {
   border-radius: 100%;
 }
 @media not (prefers-reduced-motion) {
-  .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon::before {
+  .block-editor-link-control__preview.is-fetching .block-editor-link-control__preview-icon::before {
     animation: loadingpulse 1s linear infinite;
     animation-delay: 0.5s;
   }
@@ -2547,7 +2377,7 @@ block-editor-content-only-controls__media-thumbnail {
 .block-editor-link-control__search-create {
   align-items: center;
 }
-.block-editor-link-control__search-create .block-editor-link-control__search-item-title {
+.block-editor-link-control__search-create .block-editor-link-control__preview-title {
   margin-bottom: 0;
 }
 .block-editor-link-control__search-create .block-editor-link-control__search-item-icon {
@@ -2633,6 +2463,72 @@ block-editor-content-only-controls__media-thumbnail {
   left: 12px;
 }
 
+/**
+ * Link Picker Styles
+ */
+.link-preview-button.components-button {
+  width: 100%;
+  height: auto;
+  padding: 12px;
+  box-shadow: inset 0 0 0 1px #949494;
+  border-color: #949494;
+}
+
+.link-preview-button__image-container {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.link-preview-button__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.link-preview-button__content {
+  min-width: 0;
+  flex: 1;
+}
+
+.link-preview-button__details {
+  min-width: 0;
+  flex: 1;
+}
+
+.link-preview-button__title,
+.link-preview-button__hint {
+  min-width: 0;
+  display: block;
+  width: 100%;
+  text-align: right;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.link-preview-button__title {
+  margin-top: 4px;
+  font-weight: 500;
+  color: #1e1e1e;
+  display: block;
+}
+
+.link-preview-button__hint {
+  font-size: 12px;
+  color: #757575;
+  font-weight: 400;
+}
+
+.link-preview-button__icon {
+  color: #1e1e1e;
+}
+
+.link-preview-button__badges {
+  margin-top: 8px;
+}
+
 .block-editor-list-view-tree {
   width: 100%;
   border-collapse: collapse;
@@ -3129,11 +3025,15 @@ block-editor-content-only-controls__media-thumbnail {
 }
 
 .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
-  border-top: 1px solid #1e1e1e;
+  border-top: 1px solid #ddd;
   margin-top: 8px;
   padding-bottom: 8px;
 }
 
+.block-editor-media-replace-flow__options.is-variant-toolbar .block-editor-media-replace-flow__media-upload-menu:not(:empty) + .block-editor-media-flow__url-input {
+  border-top-color: #1e1e1e;
+}
+
 .block-editor-media-flow__url-input {
   margin-left: -8px;
   margin-right: -8px;
@@ -3155,7 +3055,7 @@ block-editor-content-only-controls__media-thumbnail {
   justify-content: flex-end;
   padding: 16px var(--wp-admin-border-width-focus) var(--wp-admin-border-width-focus);
 }
-.block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__search-item.is-current {
+.block-editor-media-flow__url-input .block-editor-link-control .block-editor-link-control__preview.is-current {
   width: auto;
   padding: 0;
 }
@@ -3240,6 +3140,14 @@ block-editor-content-only-controls__media-thumbnail {
   word-wrap: normal !important;
 }
 
+.preset-input-control__wrapper > * {
+  flex: 1;
+}
+.preset-input-control__wrapper > .preset-input-control__icon,
+.preset-input-control__wrapper > .preset-input-control__custom-toggle {
+  flex: none;
+}
+
 .components-popover.block-editor-rich-text__inline-format-toolbar {
   z-index: 99998;
 }
@@ -3522,6 +3430,141 @@ block-editor-content-only-controls__media-thumbnail {
   font-size: 12px;
 }
 
+.block-editor-content-only-controls__link {
+  width: 100%;
+  box-shadow: inset 0 0 0 1px #ccc;
+}
+.block-editor-content-only-controls__link:focus:not(:disabled) {
+  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+
+.block-editor-content-only-controls__link-row {
+  align-items: center;
+}
+
+.block-editor-content-only-controls__link-title {
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.block-editor-content-only-controls__media {
+  width: 100%;
+  box-shadow: inset 0 0 0 1px #ccc;
+  padding: 8px;
+}
+.block-editor-content-only-controls__media:focus:not(:disabled) {
+  box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+
+.block-editor-content-only-controls__media-replace-flow {
+  display: block;
+}
+
+.block-editor-content-only-controls__media-row {
+  align-items: center;
+}
+
+.block-editor-content-only-controls__media-placeholder {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+  display: inline-block;
+  padding: 0;
+  background: #fff linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
+.block-editor-content-only-controls__media-title {
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.block-editor-content-only-controls__media-thumbnail {
+  width: 24px;
+  height: 24px;
+  border-radius: 2px;
+  align-self: center;
+}
+.block-editor-content-only-controls__media-thumbnail img {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
+
+.block-editor-content-only-controls__rich-text {
+  width: 100%;
+  margin: 0;
+  background: #fff;
+  color: #1e1e1e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  padding: 6px 8px;
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px;
+  /* Override core line-height. To be reviewed. */
+  line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-content-only-controls__rich-text {
+    transition: box-shadow 0.1s linear;
+  }
+}
+@media (min-width: 600px) {
+  .block-editor-content-only-controls__rich-text {
+    font-size: 13px;
+    /* Override core line-height. To be reviewed. */
+    line-height: normal;
+  }
+}
+.block-editor-content-only-controls__rich-text:focus {
+  border-color: var(--wp-admin-theme-color, #3858e9);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color, #3858e9);
+  outline: 2px solid transparent;
+}
+.block-editor-content-only-controls__rich-text::placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.block-editor-content-only-controls__rich-text {
+  border-color: #949494;
+}
+.block-editor-content-only-controls__rich-text::placeholder {
+  color: color-mix(in srgb, #1e1e1e, transparent 38%);
+}
+.block-editor-content-only-controls__rich-text {
+  min-height: 40px;
+  padding: 12px;
+}
+
+.block-editor-block-fields__container {
+  padding: 0 16px;
+}
+.block-editor-block-fields__container:first-of-type {
+  padding-block-start: 8px;
+  border-top: 1px solid #e0e0e0;
+}
+.block-editor-block-fields__container:last-of-type {
+  padding-block-end: 16px;
+}
+
+.block-editor-block-fields__header {
+  padding: 8px 0;
+  margin-bottom: 4px;
+}
+
+.block-editor-block-fields__header-icon {
+  flex: 0 0 24px;
+}
+
+.block-editor-block-fields__header-title {
+  flex: 1;
+}
+
 .block-editor-hooks__block-hooks {
   /**
    * Un-reverse the flex direction for the toggle's label.
@@ -3551,9 +3594,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   grid-column: span 2;
   margin-top: 16px;
 }
-.color-block-support-panel .block-editor-contrast-checker .components-notice__content {
-  margin-left: 0;
-}
 .color-block-support-panel {
   /* Increased specificity required to remove the slot wrapper's row gap */
 }
@@ -4454,11 +4494,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   padding: 0;
   margin: 0;
 }
-.spacing-sizes-control .spacing-sizes-control__custom-value-input,
+.spacing-sizes-control .spacing-sizes-control__unit-control,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
-.spacing-sizes-control .spacing-sizes-control__range-control,
+.spacing-sizes-control .spacing-sizes-control__preset-range,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
   flex: 1;
   margin-bottom: 0;
@@ -4469,140 +4509,14 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   margin-bottom: 12px;
 }
 
-.spacing-sizes-control__dropdown {
-  height: 24px;
-}
-
-.spacing-sizes-control__custom-select-control,
-.spacing-sizes-control__custom-value-input {
-  flex: 1;
+.spacing-sizes-control__wrapper {
+  align-items: center;
 }
 
-.spacing-sizes-control__icon,
-.spacing-sizes-control__custom-toggle {
-  flex: 0 0 auto;
+.spacing-sizes-control__dropdown {
+  height: 24px;
 }
 
-.spacing-sizes-control__icon {
+.spacing-sizes-control__wrapper .preset-input-control__icon {
   margin-right: -4px;
-}
-
-body.admin-color-light {
-  --wp-admin-theme-color: #0085ba;
-  --wp-admin-theme-color--rgb: 0, 133, 186;
-  --wp-admin-theme-color-darker-10: rgb(0, 114.7661290323, 160.5);
-  --wp-admin-theme-color-darker-10--rgb: 0, 114.7661290323, 160.5;
-  --wp-admin-theme-color-darker-20: rgb(0, 96.5322580645, 135);
-  --wp-admin-theme-color-darker-20--rgb: 0, 96.5322580645, 135;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-light {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-modern {
-  --wp-admin-theme-color: #3858e9;
-  --wp-admin-theme-color--rgb: 56, 88, 233;
-  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
-  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
-  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
-  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-modern {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-blue {
-  --wp-admin-theme-color: #096484;
-  --wp-admin-theme-color--rgb: 9, 100, 132;
-  --wp-admin-theme-color-darker-10: rgb(7.3723404255, 81.914893617, 108.1276595745);
-  --wp-admin-theme-color-darker-10--rgb: 7.3723404255, 81.914893617, 108.1276595745;
-  --wp-admin-theme-color-darker-20: rgb(5.7446808511, 63.829787234, 84.2553191489);
-  --wp-admin-theme-color-darker-20--rgb: 5.7446808511, 63.829787234, 84.2553191489;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-blue {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-coffee {
-  --wp-admin-theme-color: #46403c;
-  --wp-admin-theme-color--rgb: 70, 64, 60;
-  --wp-admin-theme-color-darker-10: rgb(56.2692307692, 51.4461538462, 48.2307692308);
-  --wp-admin-theme-color-darker-10--rgb: 56.2692307692, 51.4461538462, 48.2307692308;
-  --wp-admin-theme-color-darker-20: rgb(42.5384615385, 38.8923076923, 36.4615384615);
-  --wp-admin-theme-color-darker-20--rgb: 42.5384615385, 38.8923076923, 36.4615384615;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-coffee {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-ectoplasm {
-  --wp-admin-theme-color: #523f6d;
-  --wp-admin-theme-color--rgb: 82, 63, 109;
-  --wp-admin-theme-color-darker-10: rgb(69.8430232558, 53.6598837209, 92.8401162791);
-  --wp-admin-theme-color-darker-10--rgb: 69.8430232558, 53.6598837209, 92.8401162791;
-  --wp-admin-theme-color-darker-20: rgb(57.6860465116, 44.3197674419, 76.6802325581);
-  --wp-admin-theme-color-darker-20--rgb: 57.6860465116, 44.3197674419, 76.6802325581;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-ectoplasm {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-midnight {
-  --wp-admin-theme-color: #e14d43;
-  --wp-admin-theme-color--rgb: 225, 77, 67;
-  --wp-admin-theme-color-darker-10: rgb(221.4908256881, 56.1788990826, 45.0091743119);
-  --wp-admin-theme-color-darker-10--rgb: 221.4908256881, 56.1788990826, 45.0091743119;
-  --wp-admin-theme-color-darker-20: rgb(207.8348623853, 44.2201834862, 33.1651376147);
-  --wp-admin-theme-color-darker-20--rgb: 207.8348623853, 44.2201834862, 33.1651376147;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-midnight {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-ocean {
-  --wp-admin-theme-color: #627c83;
-  --wp-admin-theme-color--rgb: 98, 124, 131;
-  --wp-admin-theme-color-darker-10: rgb(87.0873362445, 110.192139738, 116.4126637555);
-  --wp-admin-theme-color-darker-10--rgb: 87.0873362445, 110.192139738, 116.4126637555;
-  --wp-admin-theme-color-darker-20: rgb(76.1746724891, 96.384279476, 101.8253275109);
-  --wp-admin-theme-color-darker-20--rgb: 76.1746724891, 96.384279476, 101.8253275109;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-ocean {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-body.admin-color-sunrise {
-  --wp-admin-theme-color: #dd823b;
-  --wp-admin-theme-color--rgb: 221, 130, 59;
-  --wp-admin-theme-color-darker-10: rgb(216.8782608696, 116.1847826087, 37.6217391304);
-  --wp-admin-theme-color-darker-10--rgb: 216.8782608696, 116.1847826087, 37.6217391304;
-  --wp-admin-theme-color-darker-20: rgb(195.147826087, 104.5434782609, 33.852173913);
-  --wp-admin-theme-color-darker-20--rgb: 195.147826087, 104.5434782609, 33.852173913;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  body.admin-color-sunrise {
-    --wp-admin-border-width-focus: 1.5px;
-  }
 }