@wordpress/editor 14.40.2-next.v.202602241322.0 → 14.40.2

package/build-style/style.css

@@ -107,100 +107,11 @@
   }
 }
 
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * Typography
- */
-/**
- * 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.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .admin-ui-page {
   display: flex;
   height: 100%;
-  background-color: #fff;
-  color: #2f2f2f;
+  background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
+  color: var(--wpds-color-fg-content-neutral, #1e1e1e);
   position: relative;
   z-index: 1;
   flex-flow: column;
@@ -208,25 +119,34 @@
 }
 
 .admin-ui-page__header {
-  padding: 16px 24px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+  border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+  background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
   position: sticky;
   top: 0;
   z-index: 1;
 }
 
+.admin-ui-page__header-title {
+  font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-font-size-xl, 20px);
+  font-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-xl, 32px);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-ui-page__sidebar-toggle-slot:empty {
   display: none;
 }
 
 .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;
+  padding-block-end: var(--wpds-dimension-padding-xs, 4px);
+  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+  font-size: var(--wpds-font-size-md, 13px);
+  line-height: var(--wpds-font-line-height-md, 24px);
   margin: 0;
 }
 
@@ -238,12 +158,12 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 24px;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
-  padding: 0 8px;
+  padding: 0 var(--wpds-dimension-padding-xs, 4px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
@@ -252,9 +172,54 @@
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
-  font-size: 12px;
+  font-size: var(--wpds-font-size-sm, 12px);
 }
 
+/**
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * 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.
+ */
 .admin-ui-breadcrumbs__list {
   list-style: none;
   padding: 0;
@@ -1182,6 +1147,7 @@ button.font-library__upload-area {
   background: #fff;
   padding: 12px;
   border-top: 1px solid #ddd;
+  box-sizing: border-box;
 }
 
 .global-styles-ui-variations_item {
@@ -1614,6 +1580,25 @@ button.font-library__upload-area {
     transition: padding ease-out 0.1s;
   }
 }
+.dataviews-no-results.is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-no-results.is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
+@keyframes dataviews-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
 .dataviews-loading-more {
   text-align: center;
 }
@@ -2292,17 +2277,28 @@ button.font-library__upload-area {
   z-index: 2;
 }
 
+.dataviews-footer .is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-footer .is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
 @container (max-width: 560px) {
-  .dataviews-footer {
+  .dataviews-footer__content {
     flex-direction: column !important;
   }
-  .dataviews-footer .dataviews-bulk-actions-footer__container {
+  .dataviews-footer__content .dataviews-bulk-actions-footer__container {
     width: 100%;
   }
-  .dataviews-footer .dataviews-bulk-actions-footer__item-count {
+  .dataviews-footer__content .dataviews-bulk-actions-footer__item-count {
     flex-grow: 1;
   }
-  .dataviews-footer .dataviews-pagination {
+  .dataviews-footer__content .dataviews-pagination {
     width: 100%;
     justify-content: space-between;
   }
@@ -2323,6 +2319,10 @@ button.font-library__upload-area {
   z-index: 1000001;
 }
 
+.dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+  padding: 0 4px;
+}
+
 .dataviews-selection-checkbox {
   --checkbox-input-size: 24px;
 }
@@ -2597,6 +2597,17 @@ button.font-library__upload-area {
   padding-bottom: 12px;
 }
 
+.dataviews-view-grid.is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid.is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
   display: none;
@@ -2951,6 +2962,17 @@ div.dataviews-view-list {
   line-height: 24px;
 }
 
+.dataviews-view-list.is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-view-list.is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
 .dataviews-view-list__group-header {
   font-size: 15px;
   font-weight: 499;
@@ -3120,6 +3142,7 @@ div.dataviews-view-list {
 
 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
   justify-content: flex-end;
+  font-variant-numeric: tabular-nums;
 }
 
 .dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
@@ -3232,10 +3255,21 @@ div.dataviews-view-list {
 }
 
 /* Column width intents via colgroup: make non-primary columns shrink-to-fit */
-.dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data):not(.dataviews-view-table__col-expand) {
+.dataviews-view-table col[class^=dataviews-view-table__col-]:not(.dataviews-view-table__col-first-data) {
   width: 1%;
 }
 
+.dataviews-view-table.is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-view-table.is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
 .dataviews-view-picker-grid .dataviews-view-picker-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -3628,6 +3662,17 @@ div.dataviews-view-list {
   background-color: #ddd;
 }
 
+.dataviews-view-activity.is-refreshing {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-view-activity.is-refreshing {
+    opacity: 1;
+    animation: dataviews-pulse 1s ease-in-out infinite;
+  }
+}
 .dataviews-view-activity + .dataviews-pagination {
   justify-content: space-between;
 }
@@ -3687,7 +3732,7 @@ div.dataviews-view-list {
 
 .dataforms-layouts-panel__field-trigger--label-side {
   flex-direction: row;
-  gap: var(--wpds-dimension-gap-md);
+  gap: var(--wpds-dimension-gap-md, 12px);
 }
 
 .dataforms-layouts-panel__field-trigger--label-top {
@@ -3717,7 +3762,7 @@ div.dataviews-view-list {
 
 .dataforms-layouts-panel__field-trigger.is-disabled .dataforms-layouts-panel__field-control {
   color: #757575;
-  font-weight: var(--wpds-font-weight-regular);
+  font-weight: var(--wpds-font-weight-regular, 400);
 }
 
 .dataforms-layouts-panel__field-trigger--edit-always .dataforms-layouts-panel__field-trigger-icon {
@@ -3734,12 +3779,12 @@ div.dataviews-view-list {
   color: var(--wp-admin-theme-color);
   flex: 0 0 auto;
   opacity: 0;
-  border-radius: var(--wpds-border-radius-xs);
+  border-radius: var(--wpds-border-radius-xs, 1px);
 }
 
 .dataforms-layouts-panel__field-trigger-icon:focus-visible {
   opacity: 1;
-  outline: var(--wpds-border-width-focus) solid var(--wp-admin-theme-color);
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wp-admin-theme-color);
 }
 
 .dataforms-layouts-panel__field-dropdown-anchor {
@@ -3759,6 +3804,7 @@ div.dataviews-view-list {
   line-height: 20px;
   hyphens: auto;
   color: #757575;
+  text-transform: capitalize;
 }
 
 .dataforms-layouts-panel__field-label .components-base-control__label {
@@ -3790,11 +3836,11 @@ div.dataviews-view-list {
   flex-grow: 1;
   min-width: 0;
   min-height: 24px;
-  line-height: var(--wpds-font-line-height-md);
+  line-height: var(--wpds-font-line-height-md, 24px);
   display: flex;
   align-items: center;
   overflow: hidden;
-  font-weight: var(--wpds-font-weight-medium);
+  font-weight: var(--wpds-font-weight-medium, 499);
 }
 
 .dataforms-layouts-panel__field-control > * {
@@ -3839,8 +3885,9 @@ div.dataviews-view-list {
 }
 
 .dataforms-layouts-regular__field .components-base-control__label,
-.dataforms-layouts-regular__field .components-input-control__label {
-  color: #757575;
+.dataforms-layouts-regular__field .components-input-control__label,
+.dataforms-layouts-regular__field .components-form-token-field__label {
+  color: #1e1e1e;
 }
 
 .dataforms-layouts-regular__field-label {
@@ -4282,6 +4329,204 @@ div.dataviews-view-list {
   font-size: 12px;
 }
 
+.editor-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+}
+
+.editor-avatar__image {
+  box-sizing: border-box;
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  border: 0;
+  background-color: var(--wp-admin-theme-color, #3858e9);
+  overflow: hidden;
+  overflow: clip;
+  flex-shrink: 0;
+  font-size: 0;
+  color: #fff;
+}
+.is-small > .editor-avatar__image {
+  width: 24px;
+  height: 24px;
+}
+.has-avatar-border-color > .editor-avatar__image {
+  border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color);
+  background-clip: padding-box;
+}
+.has-avatar-border-color > .editor-avatar__image::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) #fff;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.editor-avatar__img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  opacity: 0;
+}
+.has-src > .editor-avatar__image > .editor-avatar__img {
+  opacity: 1;
+}
+
+.editor-avatar:not(.has-src) > .editor-avatar__image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 499;
+  border: 0;
+  background-clip: border-box;
+}
+.editor-avatar:not(.has-src) > .editor-avatar__image::after {
+  content: none;
+}
+
+.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
+  background-color: var(--editor-avatar-outline-color);
+}
+
+.editor-avatar__name {
+  font-size: 13px;
+  font-weight: 499;
+  line-height: 20px;
+  color: var(--editor-avatar-name-color, #fff);
+  min-width: 0;
+  padding-bottom: 2px;
+  overflow: hidden;
+  opacity: 0;
+  white-space: nowrap;
+  transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
+}
+
+.editor-avatar.is-badge {
+  display: inline-grid;
+  grid-template-columns: min-content 0fr;
+  column-gap: 0;
+  padding-inline-end: 0;
+  background-color: var(--wp-admin-theme-color, #3858e9);
+  transition: grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1), column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1), padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);
+}
+.editor-avatar.is-badge:hover {
+  grid-template-columns: min-content 1fr;
+  column-gap: 4px;
+  padding-inline-end: 8px;
+  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+}
+.editor-avatar.is-badge:hover .editor-avatar__name {
+  opacity: 1;
+  transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
+}
+
+.editor-avatar.is-badge.has-avatar-border-color {
+  background-color: var(--editor-avatar-outline-color);
+}
+
+.editor-avatar.is-dimmed > .editor-avatar__image {
+  opacity: 0.5;
+  background-color: #757575;
+}
+
+.editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image {
+  border-color: #757575;
+}
+
+.editor-avatar.is-dimmed .editor-avatar__img {
+  filter: grayscale(1);
+}
+
+.editor-avatar__status-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  color: #1e1e1e;
+  fill: #1e1e1e;
+}
+.is-small > .editor-avatar__status-indicator {
+  width: 24px;
+  height: 24px;
+}
+.editor-avatar__status-indicator svg {
+  width: 75%;
+  height: 75%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-avatar.is-badge,
+  .editor-avatar__name {
+    transition: none;
+  }
+}
+.editor-avatar-group {
+  display: flex;
+  align-items: center;
+}
+.editor-avatar-group > .editor-avatar + .editor-avatar {
+  margin-inline-start: -8px;
+}
+.editor-avatar-group > .editor-avatar {
+  position: relative;
+}
+.editor-avatar-group > .editor-avatar:nth-child(1) {
+  z-index: 10;
+}
+.editor-avatar-group > .editor-avatar:nth-child(2) {
+  z-index: 9;
+}
+.editor-avatar-group > .editor-avatar:nth-child(3) {
+  z-index: 8;
+}
+.editor-avatar-group > .editor-avatar:nth-child(4) {
+  z-index: 7;
+}
+.editor-avatar-group > .editor-avatar:nth-child(5) {
+  z-index: 6;
+}
+.editor-avatar-group > .editor-avatar:nth-child(6) {
+  z-index: 5;
+}
+.editor-avatar-group > .editor-avatar:nth-child(7) {
+  z-index: 4;
+}
+.editor-avatar-group > .editor-avatar:nth-child(8) {
+  z-index: 3;
+}
+.editor-avatar-group > .editor-avatar:nth-child(9) {
+  z-index: 2;
+}
+.editor-avatar-group > .editor-avatar:nth-child(10) {
+  z-index: 1;
+}
+
+.editor-avatar-group__overflow {
+  margin-inline-start: 4px;
+  margin-inline-end: 4px;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1e1e1e;
+  white-space: nowrap;
+}
+
 .editor-collapsible-block-toolbar {
   overflow: hidden;
   display: flex;
@@ -4382,7 +4627,7 @@ div.dataviews-view-list {
 }
 @media not (prefers-reduced-motion) {
   .editor-document-bar .components-button {
-    transition: all 0.1s ease-out;
+    transition: background-color 0.1s ease-out;
   }
 }
 .editor-document-bar .components-button:hover {
@@ -5495,10 +5740,6 @@ div.dataviews-view-list {
   padding: 16px;
 }
 
-.editor-private-post-last-revision__button {
-  display: inline-block;
-}
-
 .editor-post-locked-modal__buttons {
   margin-top: 24px;
 }
@@ -5525,6 +5766,7 @@ div.dataviews-view-list {
   padding: 6px 0;
   line-height: 20px;
   hyphens: auto;
+  word-break: break-word;
 }
 
 .editor-post-panel__row-control {
@@ -5808,7 +6050,7 @@ div.dataviews-view-list {
 .revision-diff-markers {
   position: relative;
   flex-shrink: 0;
-  width: 12px;
+  width: max(16px, 1rem);
   background: rgba(0, 0, 0, 0.05);
 }
 .revision-diff-markers .revision-diff-marker {
@@ -5824,10 +6066,10 @@ div.dataviews-view-list {
   background: #00a32a;
 }
 .revision-diff-markers .revision-diff-marker.is-removed {
-  background: #d63638;
+  background: repeating-linear-gradient(45deg, #d63638, #d63638 3px, rgba(214, 54, 56, 0.45) 3px, rgba(214, 54, 56, 0.45) 6px);
 }
 .revision-diff-markers .revision-diff-marker.is-modified {
-  background: #dba617;
+  background: repeating-linear-gradient(-45deg, #dba617, #dba617 3px, rgba(219, 166, 23, 0.45) 3px, rgba(219, 166, 23, 0.45) 6px);
 }
 .revision-diff-markers .revision-diff-marker:hover {
   opacity: 0.7;
@@ -5837,6 +6079,20 @@ div.dataviews-view-list {
   outline-offset: -2px;
 }
 
+.editor-revision-fields-diff__value {
+  word-break: break-word;
+}
+
+.editor-revision-fields-diff__added {
+  background-color: color-mix(in srgb, currentColor 5%, #00a32a 15%);
+  text-decoration: none;
+}
+
+.editor-revision-fields-diff__removed {
+  text-decoration: line-through;
+  color: #d63638;
+}
+
 .editor-post-saved-state {
   display: flex;
   align-items: center;
@@ -5951,16 +6207,16 @@ div.dataviews-view-list {
   margin-right: 8px;
 }
 
-.editor-sync-connection-modal__container {
-  align-items: center;
-  display: flex;
-  margin: auto;
-  max-width: 30rem;
+.editor-sync-connection-error-modal {
+  z-index: 1000001;
 }
 
-.editor-sync-connection-modal__description {
-  font-size: 1.3rem;
-  text-align: center;
+.editor-sync-connection-error-modal p {
+  margin: 0;
+}
+
+.editor-sync-connection-error-modal__retry-countdown {
+  color: #757575;
 }
 
 .editor-post-template__swap-template-modal {