@wordpress/block-editor 12.17.0 → 12.18.0

package/build-style/style-rtl.css

@@ -98,7 +98,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -125,10 +125,17 @@
 iframe[name=editor-canvas] {
   width: 100%;
   height: 100%;
-  background-color: #fff;
   display: block;
 }
 
+iframe[name=editor-canvas]:not(.has-history) {
+  background-color: #fff;
+}
+
+iframe[name=editor-canvas].has-history {
+  padding: 48px 48px 0;
+}
+
 .block-editor-block-icon {
   display: flex;
   align-items: center;
@@ -380,14 +387,14 @@ iframe[name=editor-canvas] {
   padding-right: 6px;
   background-color: #fff;
 }
+.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector {
-  position: static;
-  margin-top: -1px;
+  position: relative;
+  right: auto;
   margin-right: -1px;
-  margin-bottom: -1px;
-}
-.show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
-  position: static;
 }
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-mover__move-button-container,
 .show-icon-labels .components-popover.block-editor-block-list__block-popover .block-editor-block-toolbar__block-controls .block-editor-block-mover {
@@ -1037,10 +1044,6 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
-.show-icon-labels .block-editor-block-toolbar .block-editor-block-switcher .components-button.has-icon::after {
-  font-size: 14px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
   display: flex;
 }
@@ -1177,6 +1180,12 @@ iframe[name=editor-canvas] {
   cursor: pointer;
 }
 
+.block-editor-block-switcher__no-transforms {
+  color: #757575;
+  padding: 6px 8px;
+  margin: 0;
+}
+
 .block-editor-block-types-list > [role=presentation] {
   overflow: hidden;
   display: flex;
@@ -1492,10 +1501,6 @@ iframe[name=editor-canvas] {
   flex-shrink: 0;
 }
 
-.block-editor-contrast-checker > .components-notice {
-  margin: 0;
-}
-
 .block-editor-date-format-picker {
   margin-bottom: 16px;
 }
@@ -1808,10 +1813,6 @@ iframe[name=editor-canvas] {
   position: relative;
 }
 
-.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
-  flex: 1;
-}
-
 .block-editor-link-control__field {
   margin: 16px;
 }
@@ -1866,6 +1867,9 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__field input[type=text]:-ms-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
+.has-actions .block-editor-link-control__field input[type=text], .has-actions .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
+  padding-left: 16px;
+}
 
 .block-editor-link-control__search-error {
   margin: -8px 16px 16px;
@@ -1954,10 +1958,14 @@ iframe[name=editor-canvas] {
   flex-direction: row;
   align-items: flex-start;
   margin-left: 8px;
+  gap: 8px;
   white-space: pre-wrap;
   overflow-wrap: break-word;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-info {
+  color: #757575;
+  line-height: 1.1;
+  font-size: 12px;
   word-break: break-all;
 }
 .block-editor-link-control__search-item.is-preview .block-editor-link-control__search-item-header {
@@ -1970,14 +1978,24 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__search-item.is-url-title .block-editor-link-control__search-item-title {
   word-break: break-all;
 }
+.block-editor-link-control__search-item .block-editor-link-control__search-item-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 4px;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+  background-color: #f0f0f0;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
-  margin-left: 8px;
-  max-height: 24px;
   flex-shrink: 0;
-  width: 24px;
   display: flex;
   justify-content: center;
+  align-items: center;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon img {
   width: 16px;
@@ -1988,10 +2006,13 @@ iframe[name=editor-canvas] {
   max-height: 32px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  display: block;
-  font-weight: 500;
-  position: relative;
-  line-height: 24px;
+  border-radius: 2px;
+  line-height: 1.1;
+}
+.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  text-decoration: none;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title mark {
   font-weight: 600;
@@ -2004,51 +2025,6 @@ iframe[name=editor-canvas] {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title svg {
   display: none;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description {
-  padding-top: 12px;
-  margin: 0;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder {
-  margin-top: 12px;
-  padding-top: 0;
-  height: 28px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::before, .block-editor-link-control__search-item .block-editor-link-control__search-item-description.is-placeholder::after {
-  display: block;
-  content: "";
-  height: 0.7em;
-  width: 100%;
-  background-color: #f0f0f0;
-  border-radius: 3px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-description .components-text {
-  font-size: 0.9em;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image {
-  display: flex;
-  width: 100%;
-  background-color: #f0f0f0;
-  justify-content: center;
-  height: 140px;
-  max-height: 140px;
-  overflow: hidden;
-  border-radius: 2px;
-  margin-top: 12px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image.is-placeholder {
-  background-color: #f0f0f0;
-  border-radius: 3px;
-}
-.block-editor-link-control__search-item .block-editor-link-control__search-item-image img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
 
 .block-editor-link-control__search-item-top {
   display: flex;
@@ -2057,19 +2033,6 @@ iframe[name=editor-canvas] {
   align-items: center;
 }
 
-.block-editor-link-control__search-item-bottom {
-  transition: opacity 1.5s;
-  width: 100%;
-}
-
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::before, .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-description::after {
-  animation: loadingpulse 1s linear infinite;
-  animation-delay: 0.5s;
-}
-.block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-image {
-  animation: loadingpulse 1s linear infinite;
-  animation-delay: 0.5s;
-}
 .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon svg,
 .block-editor-link-control__search-item.is-fetching .block-editor-link-control__search-item-icon img {
   opacity: 0;
@@ -2222,9 +2185,13 @@ iframe[name=editor-canvas] {
   margin: -12px -6px 0;
   width: calc(100% + 12px);
 }
+.block-editor-list-view-tree.is-dragging tbody {
+  pointer-events: none;
+}
 
 .block-editor-list-view-leaf {
   position: relative;
+  transform: translateY(0);
 }
 .block-editor-list-view-leaf.is-draggable, .block-editor-list-view-leaf.is-draggable .block-editor-list-view-block-contents {
   cursor: grab;
@@ -2302,6 +2269,72 @@ iframe[name=editor-canvas] {
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
   border-radius: 0;
 }
+.block-editor-list-view-leaf.is-displacement-normal {
+  transition: transform 0.2s;
+  transform: translateY(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-normal {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-displacement-up {
+  transition: transform 0.2s;
+  transform: translateY(-36px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-up {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-displacement-down {
+  transition: transform 0.2s;
+  transform: translateY(36px);
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-displacement-down {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks {
+  transition: transform 0.2s;
+  transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
+  transition: transform 0.2s;
+  transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-up {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
+  transition: transform 0.2s;
+  transform: translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-list-view-leaf.is-after-dragged-blocks.is-displacement-down {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.block-editor-list-view-leaf.is-dragging {
+  opacity: 0;
+  right: 0;
+  pointer-events: none;
+  z-index: -9999;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   display: flex;
   align-items: center;
@@ -2327,9 +2360,11 @@ iframe[name=editor-canvas] {
   padding-right: 0;
   padding-left: 0;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents,
 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus {
   box-shadow: none;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view-block-contents::after,
 .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
   content: "";
   position: absolute;
@@ -2342,19 +2377,14 @@ iframe[name=editor-canvas] {
   z-index: 2;
   pointer-events: none;
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
-  box-shadow: none;
-}
 .block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
   left: 0;
 }
+.block-editor-list-view-leaf.is-nesting .block-editor-list-view__menu,
 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   z-index: 1;
 }
-.is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
-  box-shadow: none;
-}
 .block-editor-list-view-leaf.is-visible .block-editor-list-view-block-contents {
   opacity: 1;
   animation: edit-post__fade-in-animation 0.2s ease-out 0s;
@@ -2503,6 +2533,10 @@ iframe[name=editor-canvas] {
   box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 }
 
+.block-editor-list-view-draggable-chip {
+  opacity: 0.8;
+}
+
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
@@ -2594,6 +2628,22 @@ iframe[name=editor-canvas] {
   border-radius: 4px;
 }
 
+.block-editor-list-view-drop-indicator--preview {
+  pointer-events: none;
+}
+.block-editor-list-view-drop-indicator--preview .components-popover__content {
+  overflow: hidden !important;
+}
+.block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
+  height: 36px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.block-editor-list-view-drop-indicator--preview .block-editor-list-view-drop-indicator__line--darker {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.09);
+}
+
 .block-editor-list-view-placeholder {
   padding: 0;
   margin: 0;
@@ -2745,7 +2795,8 @@ iframe[name=editor-canvas] {
 .block-editor-responsive-block-control .components-base-control__help {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -3384,6 +3435,8 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector {
   position: relative;
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 .block-editor-block-contextual-toolbar .block-editor-block-parent-selector::after {
   content: "·";
@@ -3392,10 +3445,6 @@ iframe[name=editor-canvas] {
   left: 0;
   bottom: 16px;
 }
-.block-editor-block-contextual-toolbar .block-editor-block-parent-selector__button {
-  position: relative;
-  top: -1px;
-}
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
@@ -3457,6 +3506,22 @@ iframe[name=editor-canvas] {
 .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
 }
+@media (min-width: 600px) {
+  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
+    position: relative;
+  }
+  .show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container::before {
+    content: "";
+    height: 1px;
+    width: 100%;
+    background: #1e1e1e;
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(50%, 0);
+    margin-top: -0.5px;
+  }
+}
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
 .show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
   padding-right: 6px;
@@ -3476,16 +3541,6 @@ iframe[name=editor-canvas] {
   padding-right: 12px;
   padding-left: 12px;
 }
-@media (min-width: 600px) {
-  .show-icon-labels .is-up-button.is-up-button.is-up-button {
-    margin-left: 0;
-    border-radius: 0;
-    order: 1;
-  }
-  .show-icon-labels .is-down-button.is-down-button.is-down-button {
-    order: 2;
-  }
-}
 .show-icon-labels .block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
   width: auto;
 }
@@ -4254,7 +4309,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4269,7 +4324,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4284,7 +4339,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4299,7 +4354,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4314,7 +4369,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4329,7 +4384,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4344,7 +4399,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4359,7 +4414,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }