@wordpress/edit-site 6.8.8 → 6.10.0

package/build-style/posts-rtl.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -811,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  left: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-right: 8px;
-  margin-left: 24px;
-  box-shadow: 12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: 12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -881,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -932,6 +945,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1139,8 +1153,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -1275,13 +1288,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 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);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -1395,6 +1411,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 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);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -1511,7 +1528,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _dq5dx_slide-from-right {
+@keyframes _1afg1_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1521,7 +1538,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _dq5dx_slide-from-left {
+@keyframes _1afg1_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1577,10 +1594,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _dq5dx_slide-from-left;
+  animation-name: _1afg1_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _dq5dx_slide-from-right;
+  animation-name: _1afg1_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -1702,8 +1719,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   left: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }
 

package/build-style/posts.css

@@ -30,6 +30,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -44,7 +47,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -68,6 +74,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -357,7 +366,6 @@
 }
 
 .dataviews-filters__search-widget-listbox {
-  max-height: 184px;
   padding: 4px;
   overflow: auto;
 }
@@ -577,11 +585,10 @@
   margin: 0;
 }
 
-.dataviews-view-config .components-popover__content {
+.dataviews-view-config {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
-  padding: 16px;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -646,6 +653,15 @@
   top: unset;
 }
 
+.dataforms-layouts-panel__field-dropdown .dataforms-combined-edit {
+  border: none;
+  padding: 0;
+}
+
+.dataforms-combined-edit__field {
+  flex: 1 1 auto;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -811,44 +827,31 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list li {
   margin: 0;
-  cursor: pointer;
   border-top: 1px solid #f0f0f0;
 }
 .dataviews-view-list li .dataviews-view-list__item-wrapper {
   position: relative;
-  border-radius: 4px;
-}
-.dataviews-view-list li .dataviews-view-list__item-wrapper > * {
-  width: 100%;
+  padding: 16px 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions {
-  position: absolute;
-  top: 16px;
-  right: 0;
+  flex: 0;
+  overflow: hidden;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions > div {
   height: 24px;
 }
 .dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+  position: relative;
+  z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:has(.dataviews-view-list__fields:empty) .dataviews-view-list__item-actions {
-  top: 50%;
-  transform: translateY(-50%);
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions {
-  background: #f8f8f8;
-  padding-left: 8px;
-  margin-right: 24px;
-  box-shadow: -12px 0 8px 0 #f8f8f8;
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+  flex-basis: min-content;
+  overflow: unset;
+  margin-inline: 8px 0;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions .components-button, .dataviews-view-list li.is-hovered .dataviews-view-list__item-actions .components-button, .dataviews-view-list li:focus-within .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
-  position: static;
-}
-.dataviews-view-list li.is-selected .dataviews-view-list__item-actions {
-  background-color: #f7f8ff;
-  box-shadow: -12px 0 8px 0 #f7f8ff;
 }
 .dataviews-view-list li.is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
@@ -881,26 +884,36 @@ ul.dataviews-view-list {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
-  box-sizing: border-box;
-  padding: 16px 24px;
-  width: 100%;
+  position: absolute;
+  z-index: 1;
+  inset: 0;
   scroll-margin: 8px 0;
+  appearance: none;
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+}
+.dataviews-view-list .dataviews-view-list__item:focus-visible {
+  outline: none;
 }
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: var(--wp-admin-border-width-focus);
-  right: var(--wp-admin-border-width-focus);
-  bottom: var(--wp-admin-border-width-focus);
-  left: var(--wp-admin-border-width-focus);
+  inset: var(--wp-admin-border-width-focus);
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   border-radius: 2px;
+  outline: 2px solid transparent;
 }
-.dataviews-view-list .dataviews-view-list__item .dataviews-view-list__primary-field {
+.dataviews-view-list .dataviews-view-list__primary-field {
+  flex: 1;
   min-height: 24px;
   line-height: 24px;
   overflow: hidden;
 }
+.dataviews-view-list .dataviews-view-list__primary-field:has(a, button) {
+  z-index: 1;
+}
 .dataviews-view-list .dataviews-view-list__media-wrapper {
   width: 52px;
   height: 52px;
@@ -932,6 +945,7 @@ ul.dataviews-view-list {
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
   min-height: 52px;
+  flex-grow: 1;
 }
 .dataviews-view-list .dataviews-view-list__fields {
   color: #757575;
@@ -1139,8 +1153,7 @@ ul.dataviews-view-list {
   align-items: center;
   padding: 6px 0;
   line-height: 20px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
 .dataforms-layouts-panel__field-control {
@@ -1275,13 +1288,16 @@ ul.dataviews-view-list {
     width: calc(100% - 16px);
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-    transition: border-radius 0.4s;
+    box-shadow: 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);
+    transition: border-radius, box-shadow 0.4s;
     overflow: hidden;
   }
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content:hover {
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+  }
 }
 .edit-site-layout.is-full-canvas .edit-site-layout__canvas {
   top: 0;
@@ -1395,6 +1411,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   flex-grow: 1;
   margin: 0;
   overflow: hidden;
+  box-shadow: 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);
 }
 @media (min-width: 782px) {
   .edit-site-layout__area {
@@ -1511,7 +1528,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _dq5dx_slide-from-right {
+@keyframes _1afg1_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1521,7 +1538,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _dq5dx_slide-from-left {
+@keyframes _1afg1_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1577,10 +1594,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _dq5dx_slide-from-left;
+  animation-name: _1afg1_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _dq5dx_slide-from-right;
+  animation-name: _1afg1_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -1702,8 +1719,8 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-editor-canvas-container__close-button {
   position: absolute;
   right: 8px;
-  top: 6px;
-  z-index: 1;
+  top: 8px;
+  z-index: 2;
   background: #fff;
 }