@wordpress/block-editor 12.24.0 → 12.26.0

package/build-style/content.css

@@ -141,7 +141,7 @@
     opacity: 0.4;
   }
 }
-/* stylelint-disable */
+/* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
   background-color: transparent;
@@ -151,9 +151,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-list__layout {
   position: relative;
 }
-.block-editor-block-list__layout:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-  border-radius: 2px;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::selection, .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) ::selection {
   background: transparent;
 }
@@ -168,7 +165,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   left: 0;
   background: var(--wp-admin-theme-color);
   opacity: 0.4;
-  border-radius: 2px;
   animation: selection-overlay__fade-in-animation 0.1s ease-out;
   animation-fill-mode: forwards;
   outline: 2px solid transparent;
@@ -180,7 +176,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   }
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected).is-highlighted::after {
-  box-shadow: none;
+  outline-color: transparent;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected,
@@ -192,20 +188,21 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
   content: "";
   position: absolute;
-  z-index: 1;
   pointer-events: none;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  left: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 1px;
-  outline: 2px solid transparent;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  z-index: 1;
 }
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff;
+  outline-color: #fff;
 }
 .block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
   content: "";
@@ -255,6 +252,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   -webkit-user-select: none;
           user-select: none;
 }
+.block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.is-selected, .block-editor-block-list__layout .block-editor-block-list__block.has-negative-margin.has-child-selected {
+  z-index: 20;
+}
 .block-editor-block-list__layout .block-editor-block-list__block .reusable-block-edit-panel * {
   z-index: 1;
 }
@@ -305,36 +305,39 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   float: none;
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered {
-  cursor: default;
-}
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-  border-radius: 1px;
-}
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected {
   cursor: default;
 }
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
   cursor: unset;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected::after {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text):not([contenteditable=true]).is-selected::after {
   content: "";
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-radius: 2px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  outline-offset: calc((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+}
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-hovered::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-selected::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.is-highlighted::after {
+  outline-color: var(--wp-block-synced-color);
+}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  outline-color: var(--wp-block-synced-color);
+}
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.block-editor-block-list__block:not([contenteditable]):focus::after,
+.is-dark-theme .is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable.block-editor-block-list__block:not([contenteditable]):focus::after {
+  outline-color: #fff;
 }
 
 @keyframes block-editor-is-editable__animation {
@@ -362,7 +365,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   animation-timing-function: ease-out;
   animation-delay: 0.1s;
   animation-fill-mode: backwards;
-  border-radius: 2px;
   bottom: 0;
   content: "";
   left: 0;
@@ -405,20 +407,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   z-index: 21;
 }
 
-body.is-zoomed-out {
-  display: flex;
-  flex-direction: column;
-}
-body.is-zoomed-out > .is-root-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-body.is-zoomed-out > .is-root-container > main {
-  flex: 1;
-}
-
 .wp-site-blocks > [data-align=left] {
   float: left;
   margin-right: 2em;
@@ -508,21 +496,6 @@ body.is-zoomed-out > .is-root-container > main {
   margin-bottom: auto;
 }
 
-.block-editor-iframe__html {
-  transform-origin: top center;
-  transition: all 0.3s;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-iframe__html {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-
-.block-editor-iframe__html[style*=scale] {
-  background-color: #ddd;
-}
-
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -542,38 +515,13 @@ body.is-zoomed-out > .is-root-container > main {
 .block-editor-block-list__block.has-block-overlay {
   cursor: default;
 }
-.block-editor-block-list__block.has-block-overlay::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  border: none;
-  border-radius: 2px;
-  z-index: 10;
-}
-.block-editor-block-list__block.has-block-overlay:not(.is-multi-selected)::after {
-  content: none !important;
-}
-.block-editor-block-list__block.has-block-overlay:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before, .block-editor-block-list__block.has-block-overlay.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
-  background: rgba(var(--wp-block-synced-color--rgb), 0.04);
-  box-shadow: 0 0 0 1px var(--wp-block-synced-color) inset;
-}
-.block-editor-block-list__block.has-block-overlay.is-selected:not(.is-dragging-blocks)::before {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) inset;
-}
 .block-editor-block-list__block.has-block-overlay .block-editor-block-list__block {
   pointer-events: none;
 }
-.block-editor-iframe__body.is-zoomed-out .block-editor-block-list__block.has-block-overlay::before {
-  width: calc(100vw);
-  left: calc(( 100% - 100vw ) / 2);
+.block-editor-block-list__block.has-block-overlay .block-editor-block-list__block.has-block-overlay::before {
+  left: 0;
+  right: 0;
+  width: auto;
 }
 
 .block-editor-block-list__layout .is-dragging {
@@ -607,70 +555,48 @@ body.is-zoomed-out > .is-root-container > main {
   display: none;
 }
 
-.block-editor-block-variation-picker .components-placeholder__instructions {
-  margin-bottom: 0;
-}
-.block-editor-block-variation-picker .components-placeholder__fieldset {
-  flex-direction: column;
-}
-.block-editor-block-variation-picker.has-many-variations .components-placeholder__fieldset {
-  max-width: 90%;
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+  list-style: none;
   display: flex;
   justify-content: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
-  margin: 16px 0;
   padding: 0;
-  list-style: none;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li {
-  list-style: none;
-  margin: 8px 20px 0 0;
-  flex-shrink: 1;
-  width: 75px;
-  text-align: center;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations > li button {
-  display: inline-flex;
-  margin-right: 0;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation {
-  padding: 8px;
-}
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations .block-editor-block-variation-picker__variation-label {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  margin: 0;
+  gap: 8px;
   font-size: 12px;
-  display: block;
-  line-height: 1.4;
 }
-
-.block-editor-block-variation-picker__variation {
-  width: 100%;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon {
-  justify-content: center;
+.block-editor-block-variation-picker__variations svg,
+.block-editor-block-variation-picker__skip svg,
+.wp-block-group-placeholder__variations svg {
+  fill: #ccc !important;
+}
+.block-editor-block-variation-picker__variations .components-button,
+.block-editor-block-variation-picker__skip .components-button,
+.wp-block-group-placeholder__variations .components-button {
+  padding: 4px;
+}
+.block-editor-block-variation-picker__variations .components-button:hover,
+.block-editor-block-variation-picker__skip .components-button:hover,
+.wp-block-group-placeholder__variations .components-button:hover {
+  background: none !important;
+}
+.block-editor-block-variation-picker__variations .components-button:hover svg,
+.block-editor-block-variation-picker__skip .components-button:hover svg,
+.wp-block-group-placeholder__variations .components-button:hover svg {
+  fill: var(--wp-admin-theme-color) !important;
+}
+.block-editor-block-variation-picker__variations > li,
+.block-editor-block-variation-picker__skip > li,
+.wp-block-group-placeholder__variations > li {
   width: auto;
-}
-.block-editor-block-variation-picker__variation.components-button.has-icon.is-secondary {
-  background-color: #fff;
-}
-.block-editor-block-variation-picker__variation.components-button {
-  height: auto;
-  padding: 0;
-}
-.block-editor-block-variation-picker__variation::before {
-  content: "";
-  padding-bottom: 100%;
-}
-.block-editor-block-variation-picker__variation:first-child {
-  margin-left: 0;
-}
-.block-editor-block-variation-picker__variation:last-child {
-  margin-right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
 }
 
 .block-editor-button-block-appender {
@@ -866,6 +792,54 @@ body.is-zoomed-out > .is-root-container > main {
   cursor: text;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  width: 100%;
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+  margin-left: calc(-1 * (var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2);
+}
+
+.block-editor-iframe__html {
+  transform-origin: top center;
+  transition: transform 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .block-editor-iframe__html {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+
+.block-editor-iframe__html.is-zoomed-out {
+  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  background-color: #ddd;
+  border: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)) solid #ddd;
+  margin-bottom: calc(-1 * calc(calc(var(--wp-block-editor-iframe-zoom-out-content-height) * (1 - var(--wp-block-editor-iframe-zoom-out-scale))) + calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size)) + 2px));
+}
+.block-editor-iframe__html.is-zoomed-out body {
+  min-height: calc((var(--wp-block-editor-iframe-zoom-out-inner-height) - calc(2 * var(--wp-block-editor-iframe-zoom-out-frame-size))) / var(--wp-block-editor-iframe-zoom-out-scale));
+  display: flex;
+  flex-direction: column;
+}
+.block-editor-iframe__html.is-zoomed-out body > .is-root-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.block-editor-iframe__html.is-zoomed-out body > .is-root-container > main {
+  flex: 1;
+}
+
 .block-editor-block-list__layout.has-overlay::after {
   content: "";
   position: absolute;
@@ -876,10 +850,6 @@ body.is-zoomed-out > .is-root-container > main {
   z-index: 60;
 }
 
-.block-editor-media-placeholder__url-input-container .block-editor-media-placeholder__button {
-  margin-bottom: 0;
-}
-
 .block-editor-media-placeholder__url-input-form {
   display: flex;
 }
@@ -901,10 +871,6 @@ body.is-zoomed-out > .is-root-container > main {
   flex-shrink: 1;
 }
 
-.block-editor-media-placeholder__button {
-  margin-bottom: 0.5rem;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
   margin: 1em;
   display: block;