@wordpress/block-editor 12.18.2 → 12.19.0

package/build-style/content-rtl.css

@@ -336,25 +336,33 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border-radius: 2px;
 }
 
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after {
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+  from {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+  }
+  to {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+  }
+}
+.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
   content: "";
-  border-style: dotted;
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  right: 1px;
-  left: 1px;
-  bottom: 1px;
-  border: 1px dotted var(--wp-admin-theme-color);
-  border-radius: 1px;
+  top: 0;
+  right: 0;
+  left: 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;
 }
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-  border: none;
+@media (prefers-reduced-motion: reduce) {
+  .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {

package/build-style/content.css

@@ -336,25 +336,33 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border-radius: 2px;
 }
 
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected)::after {
+@keyframes block-editor-has-editable-outline__fade-out-animation {
+  from {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 1);
+  }
+  to {
+    border-color: rgba(var(--wp-admin-theme-color--rgb), 0);
+  }
+}
+.is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
   content: "";
-  border-style: dotted;
   position: absolute;
   pointer-events: none;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
-  border: 1px dotted var(--wp-admin-theme-color);
-  border-radius: 1px;
+  top: 0;
+  left: 0;
+  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;
 }
-.is-template-locked:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after, .is-template-locked:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after,
-.block-editor-block-list__block:hover:has(> .block-editor-block-list__block.is-editing-disabled) > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected).is-hovered::after {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
-  border: none;
+@media (prefers-reduced-motion: reduce) {
+  .is-root-container:not([inert]) .block-editor-block-list__block.has-editable-outline::after {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {

package/build-style/style-rtl.css

@@ -133,7 +133,7 @@ iframe[name=editor-canvas]:not(.has-editor-padding) {
 }
 
 iframe[name=editor-canvas].has-editor-padding {
-  padding: 48px 48px 0;
+  padding: 24px 24px 0;
 }
 
 .block-editor-block-icon {
@@ -539,13 +539,15 @@ iframe[name=editor-canvas].has-editor-padding {
 }
 .block-editor-block-card__title.block-editor-block-card__title {
   font-size: 13px;
-  line-height: 24px;
+  line-height: 1.4;
   margin: 0;
+  padding: 3px 0;
 }
 
 .block-editor-block-card__description {
   display: block;
   font-size: 13px;
+  line-height: 1.4;
   margin-top: 4px;
 }
 
@@ -700,13 +702,14 @@ iframe[name=editor-canvas].has-editor-padding {
   display: flex;
   padding: 0;
   border: none;
+  justify-content: center;
 }
 @media (min-width: 600px) {
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
     flex-direction: column;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > * {
-    height: 24px;
+    height: 20px;
     width: 100%;
     min-width: 0 !important;
   }
@@ -714,11 +717,11 @@ iframe[name=editor-canvas].has-editor-padding {
     height: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
-    top: 5px;
+    top: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-down-button svg {
-    bottom: 5px;
+    bottom: 3px;
     flex-shrink: 0;
   }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container {
@@ -1539,38 +1542,37 @@ iframe[name=editor-canvas].has-editor-padding {
   text-transform: capitalize;
 }
 
-.block-editor-global-styles-effects-panel__toggle-icon {
+.block-editor-global-styles__toggle-icon {
   fill: currentColor;
 }
 
-.block-editor-global-styles-effects-panel__shadow-popover-container {
+.block-editor-global-styles__shadow-popover-container {
   width: 230px;
 }
 
 .block-editor-global-styles-filters-panel__dropdown,
-.block-editor-global-styles-effects-panel__shadow-dropdown {
+.block-editor-global-styles__shadow-dropdown {
   display: block;
   padding: 0;
 }
 .block-editor-global-styles-filters-panel__dropdown button,
-.block-editor-global-styles-effects-panel__shadow-dropdown button {
+.block-editor-global-styles__shadow-dropdown button {
   width: 100%;
   padding: 8px;
 }
 .block-editor-global-styles-filters-panel__dropdown button.is-open,
-.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
+.block-editor-global-styles__shadow-dropdown button.is-open {
   background-color: #f0f0f0;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+.block-editor-global-styles__shadow-indicator-wrapper {
   padding: 6px;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.block-editor-global-styles-effects-panel__shadow-indicator {
+.block-editor-global-styles__shadow-indicator {
   color: #2f2f2f;
   border: #e0e0e0 1px solid;
   border-radius: 2px;
@@ -1956,7 +1958,7 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-link-control__search-item .block-editor-link-control__search-item-header {
   display: block;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   margin-left: 8px;
   gap: 8px;
   white-space: pre-wrap;
@@ -2009,6 +2011,9 @@ iframe[name=editor-canvas].has-editor-padding {
   border-radius: 2px;
   line-height: 1.1;
 }
+.block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
+  box-shadow: none;
+}
 .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;
@@ -2097,11 +2102,6 @@ iframe[name=editor-canvas].has-editor-padding {
   position: relative;
 }
 
-.block-editor-link-control__unlink {
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
 .block-editor-link-control__setting {
   margin-bottom: 0;
   flex: 1;
@@ -2170,11 +2170,6 @@ iframe[name=editor-canvas].has-editor-padding {
   left: 12px;
 }
 
-.block-editor-link-control__search-item-action {
-  margin-right: auto;
-  flex-shrink: 0;
-}
-
 .block-editor-list-view-tree {
   width: 100%;
   border-collapse: collapse;
@@ -2692,7 +2687,7 @@ iframe[name=editor-canvas].has-editor-padding {
   margin-bottom: 8px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control {
-  width: 200px;
+  width: 300px;
 }
 .block-editor-media-flow__url-input .block-editor-link-control .block-editor-url-input {
   padding: 0;
@@ -2916,8 +2911,6 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-url-input input[type=text] {
   width: 100%;
   padding: 8px 12px 8px 8px;
-  border: none;
-  border-radius: 0;
   margin-right: 0;
   margin-left: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
@@ -2930,6 +2923,11 @@ iframe[name=editor-canvas].has-editor-padding {
     width: 300px;
   }
 }
+.block-editor-block-list__block .block-editor-url-input input[type=text]:not(:focus),
+.components-popover .block-editor-url-input input[type=text]:not(:focus),
+.block-editor-url-input input[type=text]:not(:focus) {
+  border-color: transparent;
+}
 @media (min-width: 600px) {
   .block-editor-block-list__block .block-editor-url-input input[type=text],
 .components-popover .block-editor-url-input input[type=text],
@@ -3100,7 +3098,6 @@ iframe[name=editor-canvas].has-editor-padding {
 
 .block-editor-url-popover__input-container {
   padding: 8px;
-  padding-right: 16px;
 }
 
 .block-editor-url-popover__row {
@@ -3110,7 +3107,7 @@ iframe[name=editor-canvas].has-editor-padding {
 
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
   flex-grow: 1;
-  gap: 4px;
+  gap: 8px;
 }
 
 .block-editor-url-popover__additional-controls .components-button.has-icon {
@@ -3150,6 +3147,7 @@ iframe[name=editor-canvas].has-editor-padding {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-left: 8px;
+  max-width: 350px;
 }
 .block-editor-url-popover__link-viewer-url.has-invalid-link {
   color: #cc1818;
@@ -3159,27 +3157,18 @@ iframe[name=editor-canvas].has-editor-padding {
   display: flex;
   align-items: center;
   min-width: 350px;
-  overflow: hidden;
   white-space: nowrap;
 }
-.block-editor-url-popover__expand-on-click .fullscreen-icon {
-  padding-left: 4px;
-}
-.block-editor-url-popover__expand-on-click .fullscreen-icon > svg {
-  width: 24px;
-  height: 24px;
-}
 .block-editor-url-popover__expand-on-click .text {
   flex-grow: 1;
 }
 .block-editor-url-popover__expand-on-click .text p {
   margin: 0;
+  line-height: 16px;
 }
-.block-editor-url-popover__expand-on-click .description {
-  color: #949494;
-}
-.block-editor-url-popover__expand-on-click .remove-link {
-  margin-left: 8px;
+.block-editor-url-popover__expand-on-click .text p.description {
+  color: #757575;
+  font-size: 12px;
 }
 
 .html-anchor-control .components-external-link {
@@ -3436,6 +3425,35 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: #e0e0e0 transparent;
+  will-change: transform;
+  scrollbar-gutter: auto;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar::-webkit-scrollbar-thumb {
+  background-color: #e0e0e0;
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus::-webkit-scrollbar-thumb, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within::-webkit-scrollbar-thumb {
+  background-color: #949494;
+}
+.block-editor-block-contextual-toolbar .block-editor-block-toolbar:hover, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus, .block-editor-block-contextual-toolbar .block-editor-block-toolbar:focus-within {
+  scrollbar-color: #949494 transparent;
+}
+@media (hover: none) {
+  .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
+    scrollbar-color: #949494 transparent;
+  }
 }
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child::after,
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
@@ -3460,7 +3478,10 @@ iframe[name=editor-canvas].has-editor-padding {
   position: absolute;
   font-size: 16px;
   left: 0;
-  bottom: 16px;
+  height: 32px;
+  top: 0;
+  display: inline-flex;
+  align-items: center;
 }
 
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
@@ -3673,9 +3694,6 @@ iframe[name=editor-canvas].has-editor-padding {
 .block-editor-inserter__search {
   padding: 16px 16px 0 16px;
 }
-.block-editor-inserter__search .components-search-control__icon {
-  left: 20px;
-}
 
 .block-editor-inserter__tabs {
   flex-grow: 1;
@@ -4135,13 +4153,8 @@ iframe[name=editor-canvas].has-editor-padding {
   justify-content: center;
   flex: 1;
 }
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control input[type=search].components-search-control__input {
-  background: #fff;
-}
-.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search.components-search-control button.components-button {
-  min-width: auto;
-  padding-right: 2px;
-  padding-left: 2px;
+.block-editor-inserter__media-panel .block-editor-inserter__media-panel-search:not(:focus-within) {
+  --wp-components-color-background: #fff;
 }
 
 .block-editor-inserter__media-list {