@wordpress/block-editor 12.23.0 → 12.25.0

package/build-style/content.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -255,6 +255,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,10 +308,10 @@ _::-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 {
+.is-outline-mode .block-editor-block-list__block.is-hovered {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered::after {
+.is-outline-mode .block-editor-block-list__block.is-hovered::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -319,13 +322,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   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 {
+.is-outline-mode .block-editor-block-list__block.is-selected {
   cursor: default;
 }
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-selected.rich-text {
+.is-outline-mode .block-editor-block-list__block.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.is-selected::after {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -337,31 +340,43 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border-radius: 2px;
 }
 
-@keyframes block-editor-has-editable-outline__fade-out-animation {
+@keyframes block-editor-is-editable__animation {
   from {
-    border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
   }
   to {
-    border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+  }
+}
+@keyframes block-editor-is-editable__animation_reduce-motion {
+  0% {
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+  }
+  99% {
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+  }
+  100% {
+    background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
   }
 }
-.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+  animation-name: block-editor-is-editable__animation;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-delay: 0.1s;
+  animation-fill-mode: backwards;
+  border-radius: 2px;
+  bottom: 0;
   content: "";
-  position: absolute;
-  pointer-events: none;
-  top: 0;
   left: 0;
+  pointer-events: none;
+  position: absolute;
   right: 0;
-  bottom: 0;
-  border: 1px dotted rgba(var(--wp-admin-theme-color--rgb), 1);
-  border-radius: 2px;
-  animation: block-editor-has-editable-outline__fade-out-animation 0.3s ease-out;
-  animation-delay: 1s;
-  animation-fill-mode: forwards;
+  top: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
-    animation-duration: 1ms;
+  .is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+    animation-name: block-editor-is-editable__animation_reduce-motion;
     animation-delay: 0s;
   }
 }
@@ -497,8 +512,14 @@ body.is-zoomed-out > .is-root-container > main {
 }
 
 .block-editor-iframe__html {
-  transition: all 0.3s;
   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] {
@@ -589,70 +610,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 {
@@ -755,7 +754,7 @@ body.is-zoomed-out > .is-root-container > main {
 .block-editor-default-block-appender .block-editor-default-block-appender__content {
   opacity: 0.62;
 }
-:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child:first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child:first-child {
+:where(body .is-layout-constrained) .block-editor-default-block-appender > :first-child, :where(.wp-site-blocks) .block-editor-default-block-appender > :first-child {
   margin-block-start: 0;
   margin-block-end: 0;
 }
@@ -858,10 +857,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;
 }
@@ -883,10 +878,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;

package/build-style/default-editor-styles-rtl.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/build-style/default-editor-styles.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {