@wordpress/edit-post 8.32.0 → 8.32.1-next.ff1cebbba.0

package/build-style/style-rtl.css

@@ -1,11 +1,5 @@
 /**
- * Colors
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
- * Colors
+ * Typography
  */
 /**
  * SCSS Variables.
@@ -14,51 +8,9 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
 /**
  * Colors
  */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
 /**
  * Fonts & basic variables.
  */
@@ -109,9 +61,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -134,6 +83,25 @@
 /**
  * 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
  */
@@ -179,6 +147,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoints & Media Queries
  */
@@ -194,9 +165,6 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
-/**
- * Typography
- */
 /**
  * Breakpoint mixins
  */
@@ -219,23 +187,74 @@
 /**
  * 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;
+.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 (min-resolution: 192dpi) {
-  :root {
-    --wp-admin-border-width-focus: 1.5px;
+
+@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;
+}
 
 .edit-post-fullscreen-mode-close__view-mode-toggle {
   top: 0;
@@ -306,14 +325,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsl(0deg, 0%, 80%);
+  background-color: hsl(0, 0%, 80%);
   pointer-events: none;
 }
 .edit-post-fullscreen-mode-close__back-icon svg {
   fill: currentColor;
 }
 .edit-post-fullscreen-mode-close__back-icon.has-site-icon {
-  background-color: hsla(0deg, 0%, 100%, 0.6);
+  background-color: hsla(0, 0%, 100%, 0.6);
   backdrop-filter: saturate(180%) blur(15px);
 }
 
@@ -414,12 +433,12 @@
     height: 36px;
   }
 }
-.edit-post-meta-boxes-main__liner {
-  isolation: isolate;
-}
 .edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
   overflow: auto;
 }
+.edit-post-meta-boxes-main__liner {
+  isolation: isolate;
+}
 .is-resizing.edit-post-meta-boxes-main .edit-post-meta-boxes-main__liner {
   display: unset;
 }
@@ -489,8 +508,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
    * other elements (such as .button) are unaffected by Gutenberg's style
    * because of their higher specificity.
    */
-  /* Match width and positioning of the meta boxes. Override default styles. */
-  /* Override Default meta box stylings */
 }
 .edit-post-meta-boxes-area__container,
 .edit-post-meta-boxes-area .inside {
@@ -504,11 +521,17 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   border-top: 1px solid #ddd;
   border-bottom: 0;
 }
+.edit-post-meta-boxes-area {
+  /* Match width and positioning of the meta boxes. Override default styles. */
+}
 .edit-post-meta-boxes-area #poststuff {
   margin: 0 auto;
   padding-top: 0;
   min-width: auto;
 }
+.edit-post-meta-boxes-area {
+  /* Override Default meta box stylings */
+}
 .edit-post-meta-boxes-area #poststuff h3.hndle,
 .edit-post-meta-boxes-area #poststuff .stuffbox > h3,
 .edit-post-meta-boxes-area #poststuff h2.hndle { /* WordPress selectors yolo */
@@ -610,8 +633,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
 
 body.js.block-editor-page {
   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.block-editor-page #wpcontent {
   padding-right: 0;
@@ -619,6 +640,10 @@ body.js.block-editor-page #wpcontent {
 body.js.block-editor-page #wpbody-content {
   padding-bottom: 0;
 }
+body.js.block-editor-page {
+  /* 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.block-editor-page #wpbody-content > div:not(.block-editor):not(#screen-meta) {
   display: none;
 }
@@ -682,10 +707,10 @@ body.js.block-editor-page .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) {
@@ -697,10 +722,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) {
@@ -712,10 +737,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) {
@@ -727,10 +752,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) {
@@ -742,10 +767,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) {
@@ -757,10 +782,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) {
@@ -772,10 +797,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) {
@@ -787,10 +812,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) {