@wordpress/edit-widgets 6.32.0 → 6.32.1-next.b8c8708f3.0

package/build-style/style.css

@@ -2,10 +2,7 @@
  * Colors
  */
 /**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
+ * Typography
  */
 /**
  * SCSS Variables.
@@ -49,6 +46,62 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: var(--wp-block-synced-color);
+  --wp-editor-canvas-background: #ddd;
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 160.5;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
 /**
  * Colors
  */
@@ -94,6 +147,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -109,9 +165,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -134,6 +187,75 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.admin-ui-page {
+  display: flex;
+  height: 100%;
+  background-color: #fff;
+  color: #2f2f2f;
+  position: relative;
+  z-index: 1;
+  flex-flow: column;
+  container: admin-ui-page/inline-size;
+}
+
+@media not (prefers-reduced-motion) {
+  .admin-ui-page {
+    transition: width ease-out 0.2s;
+  }
+}
+.admin-ui-page__header {
+  padding: 16px 48px;
+  border-bottom: 1px solid #f0f0f0;
+  background: #fff;
+  position: sticky;
+  top: 0;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__header {
+    padding: 16px 24px;
+  }
+}
+.admin-ui-page__header-subtitle {
+  padding-block-end: 8px;
+  color: #757575;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
+  margin: 0;
+}
+
+.admin-ui-page__content {
+  flex-grow: 1;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-ui-page__content.has-padding {
+  padding: 16px 20px;
+}
+
+@container (max-width: 430px) {
+  .admin-ui-page__content.has-padding {
+    padding: 16px 24px;
+  }
+}
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
+  width: auto;
+  padding: 0 8px;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
+  display: none;
+}
+
+.show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 /**
  * Colors
  */
@@ -179,6 +301,19 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+.interface-complementary-area-header {
+  background: #fff;
+  padding-right: 8px;
+  gap: 4px;
+}
+
+.interface-complementary-area-header .interface-complementary-area-header__title {
+  margin: 0 auto 0 0;
+}
+
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -194,9 +329,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -219,39 +351,13 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-:root {
-  --wp-block-synced-color: #7a00df;
-  --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: var(--wp-block-synced-color);
-  --wp-admin-theme-color: #007cba;
-  --wp-admin-theme-color--rgb: 0, 124, 186;
-  --wp-admin-theme-color-darker-10: #006ba1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
-  --wp-admin-theme-color-darker-20: #005a87;
-  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
-  --wp-admin-border-width-focus: 2px;
-}
-@media (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
-  }
-}
-
-.interface-complementary-area-header {
-  background: #fff;
-  padding-right: 8px;
-  gap: 4px;
-}
-.interface-complementary-area-header .interface-complementary-area-header__title {
-  margin: 0 auto 0 0;
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
   height: 100%;
   overflow: auto;
 }
+
 @media (min-width: 600px) {
   .interface-complementary-area {
     -webkit-overflow-scrolling: touch;
@@ -267,23 +373,28 @@
   position: relative;
   z-index: 0;
 }
+
 .interface-complementary-area .components-panel__header {
   position: sticky;
   top: 0;
   z-index: 1;
 }
+
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 0;
 }
+
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;
 }
+
 .interface-complementary-area h2 {
   font-size: 13px;
   font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area h3 {
   font-size: 11px;
   text-transform: uppercase;
@@ -291,20 +402,24 @@
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area hr {
   border-top: none;
   border-bottom: 1px solid #f0f0f0;
   margin: 1.5em 0;
 }
+
 .interface-complementary-area div.components-toolbar-group,
 .interface-complementary-area div.components-toolbar {
   box-shadow: none;
   margin-bottom: 1.5em;
 }
+
 .interface-complementary-area div.components-toolbar-group:last-child,
 .interface-complementary-area div.components-toolbar:last-child {
   margin-bottom: 0;
 }
+
 .interface-complementary-area .block-editor-skip-to-selected-block:focus {
   top: auto;
   right: 10px;
@@ -322,26 +437,25 @@
     height: calc(100% + 32px);
   }
   body.js.is-fullscreen-mode #adminmenumain,
-body.js.is-fullscreen-mode #wpadminbar {
+  body.js.is-fullscreen-mode #wpadminbar {
     display: none;
   }
   body.js.is-fullscreen-mode #wpcontent,
-body.js.is-fullscreen-mode #wpfooter {
+  body.js.is-fullscreen-mode #wpfooter {
     margin-left: 0;
   }
 }
-
 html.interface-interface-skeleton__html-container {
   position: fixed;
   width: 100%;
 }
+
 @media (min-width: 782px) {
   html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
 }
-
 .interface-interface-skeleton {
   display: flex;
   flex-direction: row;
@@ -353,6 +467,7 @@ html.interface-interface-skeleton__html-container {
   right: 0;
   bottom: 0;
 }
+
 @media (min-width: 783px) {
   .interface-interface-skeleton {
     top: 32px;
@@ -361,7 +476,6 @@ html.interface-interface-skeleton__html-container {
     top: 0;
   }
 }
-
 .interface-interface-skeleton__editor {
   display: flex;
   flex-direction: column;
@@ -372,13 +486,14 @@ html.interface-interface-skeleton__html-container {
 .interface-interface-skeleton { /* Set left position when auto-fold is not on the body element. */
   left: 0;
 }
+
 @media (min-width: 783px) {
   .interface-interface-skeleton {
     left: 160px;
   }
 }
-
 .auto-fold .interface-interface-skeleton { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */ }
+
 @media (min-width: 783px) {
   .auto-fold .interface-interface-skeleton {
     left: 36px;
@@ -389,17 +504,16 @@ html.interface-interface-skeleton__html-container {
     left: 160px;
   }
 }
-
 /* Sidebar manually collapsed. */
 .folded .interface-interface-skeleton {
   left: 0;
 }
+
 @media (min-width: 783px) {
   .folded .interface-interface-skeleton {
     left: 36px;
   }
 }
-
 body.is-fullscreen-mode .interface-interface-skeleton {
   left: 0 !important;
 }
@@ -411,12 +525,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   overscroll-behavior-y: none;
 }
+
 @media (min-width: 782px) {
   .has-footer .interface-interface-skeleton__body {
     padding-bottom: 25px;
   }
 }
-
 .interface-interface-skeleton__content {
   flex-grow: 1;
   display: flex;
@@ -424,12 +538,12 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   z-index: 20;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__content {
     z-index: auto;
   }
 }
-
 .interface-interface-skeleton__secondary-sidebar,
 .interface-interface-skeleton__sidebar {
   flex-shrink: 0;
@@ -442,35 +556,35 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   width: auto;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar,
-.interface-interface-skeleton__sidebar {
+  .interface-interface-skeleton__sidebar {
     position: relative !important;
   }
 }
-
 .interface-interface-skeleton__sidebar {
   border-top: 1px solid #e0e0e0;
   overflow: hidden;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
     box-shadow: -1px 0 0 0 rgba(0, 0, 0, 0.133);
     outline: 1px solid transparent;
   }
 }
-
 .interface-interface-skeleton__secondary-sidebar {
   border-top: 1px solid #e0e0e0;
   right: 0;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
     box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.133);
     outline: 1px solid transparent;
   }
 }
-
 .interface-interface-skeleton__header {
   flex-shrink: 0;
   height: auto;
@@ -493,6 +607,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   z-index: 90;
   display: none;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__footer {
     display: flex;
@@ -519,6 +634,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   background: #fff;
   width: 100vw;
 }
+
 @media (min-width: 782px) {
   .interface-interface-skeleton__actions {
     width: 280px;
@@ -528,9 +644,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   top: auto;
   bottom: 0;
 }
+
 .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
   top: 46px;
 }
+
 @media (min-width: 782px) {
   .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-left: 1px solid #ddd;
@@ -540,27 +658,32 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     top: 0;
   }
 }
-
 .interface-pinned-items {
   display: flex;
-  gap: 8px;
 }
+
 .interface-pinned-items .components-button {
   display: none;
   margin: 0;
 }
+
 .interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"] {
   display: flex;
 }
+
 .interface-pinned-items .components-button svg {
   max-width: 24px;
   max-height: 24px;
 }
+
 @media (min-width: 600px) {
   .interface-pinned-items .components-button {
     display: flex;
   }
 }
+.interface-pinned-items {
+  gap: 8px;
+}
 
 .wp-block[data-type="core/widget-area"] {
   max-width: 700px;
@@ -696,13 +819,15 @@ body.is-dragging-components-draggable .wp-block[data-type="core/widget-area"] .c
   display: flex;
   align-items: center;
   padding-right: 4px;
-  gap: 8px;
 }
 @media (min-width: 600px) {
   .edit-widgets-header__actions {
     padding-right: 8px;
   }
 }
+.edit-widgets-header__actions {
+  gap: 8px;
+}
 
 .edit-widgets-header-toolbar {
   gap: 8px;
@@ -969,8 +1094,6 @@ body.is-fullscreen-mode .edit-widgets-notices__snackbar {
 body.js.appearance_page_gutenberg-widgets,
 body.js.widgets-php {
   background: #fff;
-  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
-     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
 }
 body.js.appearance_page_gutenberg-widgets #wpcontent,
 body.js.widgets-php #wpcontent {
@@ -980,6 +1103,11 @@ body.js.appearance_page_gutenberg-widgets #wpbody-content,
 body.js.widgets-php #wpbody-content {
   padding-bottom: 0;
 }
+body.js.appearance_page_gutenberg-widgets,
+body.js.widgets-php {
+  /* We hide legacy notices in Gutenberg Based Pages, because they were not designed in a way that scaled well.
+     Plugins can use Gutenberg notices if they need to pass on information to the user when they are editing. */
+}
 body.js.appearance_page_gutenberg-widgets #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta),
 body.js.widgets-php #wpbody-content > div:not(.blocks-widgets-container):not(#screen-meta) {
   display: none;
@@ -1048,10 +1176,10 @@ body.js.widgets-php .media-frame select.attachment-filters:last-of-type {
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;
-  --wp-admin-theme-color-darker-10: #0073a1;
-  --wp-admin-theme-color-darker-10--rgb: 0, 115, 161;
-  --wp-admin-theme-color-darker-20: #006187;
-  --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
+  --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) {
@@ -1063,10 +1191,10 @@ body.admin-color-light {
 body.admin-color-modern {
   --wp-admin-theme-color: #3858e9;
   --wp-admin-theme-color--rgb: 56, 88, 233;
-  --wp-admin-theme-color-darker-10: #2145e6;
-  --wp-admin-theme-color-darker-10--rgb: 33, 69, 230;
-  --wp-admin-theme-color-darker-20: #183ad6;
-  --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
+  --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) {
@@ -1078,10 +1206,10 @@ body.admin-color-modern {
 body.admin-color-blue {
   --wp-admin-theme-color: #096484;
   --wp-admin-theme-color--rgb: 9, 100, 132;
-  --wp-admin-theme-color-darker-10: #07526c;
-  --wp-admin-theme-color-darker-10--rgb: 7, 82, 108;
-  --wp-admin-theme-color-darker-20: #064054;
-  --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
+  --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) {
@@ -1093,10 +1221,10 @@ body.admin-color-blue {
 body.admin-color-coffee {
   --wp-admin-theme-color: #46403c;
   --wp-admin-theme-color--rgb: 70, 64, 60;
-  --wp-admin-theme-color-darker-10: #383330;
-  --wp-admin-theme-color-darker-10--rgb: 56, 51, 48;
-  --wp-admin-theme-color-darker-20: #2b2724;
-  --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
+  --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) {
@@ -1108,10 +1236,10 @@ body.admin-color-coffee {
 body.admin-color-ectoplasm {
   --wp-admin-theme-color: #523f6d;
   --wp-admin-theme-color--rgb: 82, 63, 109;
-  --wp-admin-theme-color-darker-10: #46365d;
-  --wp-admin-theme-color-darker-10--rgb: 70, 54, 93;
-  --wp-admin-theme-color-darker-20: #3a2c4d;
-  --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
+  --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) {
@@ -1123,10 +1251,10 @@ body.admin-color-ectoplasm {
 body.admin-color-midnight {
   --wp-admin-theme-color: #e14d43;
   --wp-admin-theme-color--rgb: 225, 77, 67;
-  --wp-admin-theme-color-darker-10: #dd382d;
-  --wp-admin-theme-color-darker-10--rgb: 221, 56, 45;
-  --wp-admin-theme-color-darker-20: #d02c21;
-  --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
+  --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) {
@@ -1138,10 +1266,10 @@ body.admin-color-midnight {
 body.admin-color-ocean {
   --wp-admin-theme-color: #627c83;
   --wp-admin-theme-color--rgb: 98, 124, 131;
-  --wp-admin-theme-color-darker-10: #576e74;
-  --wp-admin-theme-color-darker-10--rgb: 87, 110, 116;
-  --wp-admin-theme-color-darker-20: #4c6066;
-  --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
+  --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) {
@@ -1153,10 +1281,10 @@ body.admin-color-ocean {
 body.admin-color-sunrise {
   --wp-admin-theme-color: #dd823b;
   --wp-admin-theme-color--rgb: 221, 130, 59;
-  --wp-admin-theme-color-darker-10: #d97426;
-  --wp-admin-theme-color-darker-10--rgb: 217, 116, 38;
-  --wp-admin-theme-color-darker-20: #c36922;
-  --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
+  --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) {