@wordpress/edit-site 6.14.0 → 6.15.0

package/build-style/posts.css

@@ -164,13 +164,11 @@
   }
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
   .dataviews__view-actions,
 .dataviews-filters__container {
     padding: 12px 24px;
   }
-
   .dataviews-no-results,
 .dataviews-loading {
     padding-left: 24px;
@@ -512,7 +510,6 @@
 }
 
 .dataviews-search {
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -534,13 +531,11 @@
   }
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
   .dataviews-footer {
     padding: 12px 24px;
   }
 }
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 560px) {
   .dataviews-footer {
     flex-direction: column !important;
@@ -631,7 +626,6 @@
   display: none;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
   .dataviews-settings-section.dataviews-settings-section {
     grid-template-columns: repeat(2, 1fr);
@@ -676,6 +670,7 @@
   grid-template-rows: max-content;
   padding: 0 48px 24px;
   transition: padding ease-out 0.1s;
+  container-type: inline-size;
 }
 @media (prefers-reduced-motion: reduce) {
   .dataviews-view-grid {
@@ -697,16 +692,21 @@
   align-items: center;
 }
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
-  width: -moz-fit-content;
   width: fit-content;
 }
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
-.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after,
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__media::after {
   box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 }
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__media:focus::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
 .dataviews-view-grid .dataviews-view-grid__media {
   width: 100%;
   min-height: 200px;
@@ -764,37 +764,36 @@
 .dataviews-view-grid .dataviews-view-grid__badge-fields:not(:empty) {
   padding-bottom: 12px;
 }
-.dataviews-view-grid .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value {
-  width: -moz-fit-content;
-  width: fit-content;
-  background: #f0f0f0;
-  padding: 0 8px;
-  min-height: 24px;
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-}
 
 .dataviews-view-grid.dataviews-view-grid {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
+  /**
+   * Breakpoints were adjusted from media queries breakpoints to account for
+   * the sidebar width. This was done to match the existing styles we had.
+   */
 }
-@media (min-width: 480px) {
+@container (max-width: 480px) {
+  .dataviews-view-grid.dataviews-view-grid {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+@container (min-width: 480px) {
   .dataviews-view-grid.dataviews-view-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
-@media (min-width: 1080px) {
+@container (min-width: 780px) {
   .dataviews-view-grid.dataviews-view-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
-@media (min-width: 1440px) {
+@container (min-width: 1140px) {
   .dataviews-view-grid.dataviews-view-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
-@media (min-width: 1920px) {
+@container (min-width: 1520px) {
   .dataviews-view-grid.dataviews-view-grid {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
@@ -818,81 +817,74 @@
   top: 8px;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-  .dataviews-view-grid {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-}
 .dataviews-view-grid__media--clickable {
   cursor: pointer;
 }
 
-ul.dataviews-view-list {
+div.dataviews-view-list {
   list-style-type: none;
 }
 
 .dataviews-view-list {
   margin: 0 0 auto;
 }
-.dataviews-view-list li {
+.dataviews-view-list div[role=row] {
   margin: 0;
   border-top: 1px solid #f0f0f0;
 }
-.dataviews-view-list li .dataviews-view-list__item-wrapper {
+.dataviews-view-list div[role=row] .dataviews-view-list__item-wrapper {
   position: relative;
   padding: 16px 24px;
   box-sizing: border-box;
 }
-.dataviews-view-list li .dataviews-view-list__item-actions {
+.dataviews-view-list div[role=row] .dataviews-view-list__item-actions {
   flex: 0;
   overflow: hidden;
 }
-.dataviews-view-list li .dataviews-view-list__item-actions > div {
+.dataviews-view-list div[role=row] .dataviews-view-list__item-actions > div {
   height: 24px;
 }
-.dataviews-view-list li .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list div[role=row] .dataviews-view-list__item-actions .components-button {
   position: relative;
   z-index: 1;
   opacity: 0;
 }
-.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
+.dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions {
   flex-basis: min-content;
   overflow: unset;
   padding-inline-end: 4px;
 }
-.dataviews-view-list li:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
+.dataviews-view-list div[role=row]:where(.is-selected, .is-hovered, :focus-within) .dataviews-view-list__item-actions .components-button {
   opacity: 1;
 }
-.dataviews-view-list li.is-selected.is-selected {
+.dataviews-view-list div[role=row].is-selected.is-selected {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
-.dataviews-view-list li.is-selected.is-selected + li {
+.dataviews-view-list div[role=row].is-selected.is-selected + div[role=row] {
   border-top: 1px solid rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
-.dataviews-view-list li:not(.is-selected) .dataviews-view-list__title-field {
+.dataviews-view-list div[role=row]:not(.is-selected) .dataviews-view-list__title-field {
   color: #1e1e1e;
 }
-.dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected).is-hovered, .dataviews-view-list li:not(.is-selected):focus-within {
+.dataviews-view-list div[role=row]:not(.is-selected):hover, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered, .dataviews-view-list div[role=row]:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
   background-color: #f8f8f8;
 }
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__title-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__title-field,
-.dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__title-field,
-.dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
+.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__title-field,
+.dataviews-view-list div[role=row]:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__title-field,
+.dataviews-view-list div[role=row]:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__title-field,
+.dataviews-view-list div[role=row]:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper,
-.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper {
+.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper,
+.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.04);
   color: #1e1e1e;
 }
-.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list li.is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
-.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
-.dataviews-view-list li.is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
+.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
+.dataviews-view-list div[role=row].is-selected .dataviews-view-list__item-wrapper .dataviews-view-list__fields,
+.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__title-field,
+.dataviews-view-list div[role=row].is-selected:focus-within .dataviews-view-list__item-wrapper .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
@@ -1135,13 +1127,11 @@ ul.dataviews-view-list {
   padding-right: 0;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
   .dataviews-view-table tr td:first-child,
 .dataviews-view-table tr th:first-child {
     padding-left: 24px;
   }
-
   .dataviews-view-table tr td:last-child,
 .dataviews-view-table tr th:last-child {
     padding-right: 24px;
@@ -1351,12 +1341,20 @@ ul.dataviews-view-list {
   }
   .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     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;
   }
+}
+@media (min-width: 782px) and (not (prefers-reduced-motion)) {
+  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
+    transition: border-radius, box-shadow 0.4s;
+  }
+}
+@media (min-width: 782px) {
   .edit-site-layout:not(.is-full-canvas) .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
     border-radius: 8px;
   }
+}
+@media (min-width: 782px) {
   .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);
   }
@@ -1420,7 +1418,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   outline-offset: 4px;
 }
 .edit-site-layout__view-mode-toggle.components-button::before {
-  transition: box-shadow 0.1s ease;
   content: "";
   display: block;
   position: absolute;
@@ -1431,10 +1428,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   border-radius: 4px;
   box-shadow: none;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .edit-site-layout__view-mode-toggle.components-button::before {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: box-shadow 0.1s ease;
   }
 }
 .edit-site-layout__view-mode-toggle.components-button .edit-site-layout__view-mode-toggle-icon {
@@ -1496,12 +1492,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   height: calc(100% - 60px);
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container: edit-site-page/inline-size;
-  transition: width ease-out 0.2s;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .edit-site-page {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: width ease-out 0.2s;
   }
 }
 @media (min-width: 782px) {
@@ -1517,12 +1511,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   position: sticky;
   top: 0;
   z-index: 2;
-  transition: padding ease-out 0.1s;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .edit-site-page-header {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: padding ease-out 0.1s;
   }
 }
 .edit-site-page-header .components-heading {
@@ -1540,7 +1532,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-bottom: 8px;
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
   .edit-site-page-header {
     padding: 16px 24px;
@@ -1590,7 +1581,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _usxp5_slide-from-right {
+@keyframes _15iyx_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -1600,7 +1591,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _usxp5_slide-from-left {
+@keyframes _15iyx_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -1656,10 +1647,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _usxp5_slide-from-left;
+  animation-name: _15iyx_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _usxp5_slide-from-right;
+  animation-name: _15iyx_slide-from-right;
 }
 
 .edit-site-site-hub {
@@ -1716,12 +1707,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   opacity: 0;
   position: absolute;
   right: 0;
-  transition: opacity 0.1s linear;
 }
-@media (prefers-reduced-motion: reduce) {
+@media not (prefers-reduced-motion) {
   .edit-site-site-hub__title .components-button::after {
-    transition-duration: 0s;
-    transition-delay: 0s;
+    transition: opacity 0.1s linear;
   }
 }
 .edit-site-site-hub__title .components-button:hover::after, .edit-site-site-hub__title .components-button:focus::after, .edit-site-site-hub__title .components-button:active::after {
@@ -1772,6 +1761,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-editor-canvas-container {
   height: 100%;
+  background-color: #ddd;
 }
 .edit-site-editor-canvas-container iframe {
   display: block;
@@ -1791,7 +1781,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   position: absolute;
   right: 0;
   top: 0;
-  transition: all 0.3s;
+}
+@media not (prefers-reduced-motion) {
+  .edit-site-editor-canvas-container__section {
+    transition: all 0.3s;
+  }
 }
 
 .edit-site-editor-canvas-container__close-button {