@wordpress/block-editor 14.1.0 → 14.2.1-next.1f6eadc42.0

package/build-style/content-rtl.css

@@ -284,7 +284,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   left: 0;
   bottom: 0;
   right: 0;
-  border-radius: 2px;
   background-color: rgba(255, 255, 255, 0.4);
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
@@ -492,6 +491,23 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
+.block-editor-block-list__zoom-out-separator {
+  /* same color as the iframe's background */
+  background: #ddd;
+  margin-right: -1px;
+  margin-left: -1px;
+  transition: background-color 0.3s ease;
+}
+.block-editor-block-list__zoom-out-separator.is-dragged-over {
+  background: #ccc;
+}
+
+.has-global-padding > .block-editor-block-list__zoom-out-separator,
+.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
+  max-width: none;
+  margin: 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) !important;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-left: auto;
@@ -635,7 +651,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   right: 0;
   pointer-events: none;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   opacity: 0;
@@ -693,7 +708,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
-  border-radius: 2px;
   color: #fff;
   padding: 0;
   min-width: 24px;
@@ -944,18 +958,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   flex-wrap: wrap;
   align-items: baseline;
   width: 100%;
+  gap: 12px;
 }
 .block-editor-warning .block-editor-warning__actions {
   align-items: center;
   display: flex;
-  margin-top: 1em;
-}
-.block-editor-warning .block-editor-warning__action {
-  margin: 0 0 0 8px;
-}
-
-.block-editor-warning__secondary {
-  margin: auto 8px auto 0;
+  gap: 8px;
 }
 
 .components-popover.block-editor-warning__dropdown {

package/build-style/content.css

@@ -284,7 +284,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   right: 0;
   bottom: 0;
   left: 0;
-  border-radius: 2px;
   background-color: rgba(255, 255, 255, 0.4);
 }
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
@@ -492,6 +491,23 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-bottom: auto;
 }
 
+.block-editor-block-list__zoom-out-separator {
+  /* same color as the iframe's background */
+  background: #ddd;
+  margin-left: -1px;
+  margin-right: -1px;
+  transition: background-color 0.3s ease;
+}
+.block-editor-block-list__zoom-out-separator.is-dragged-over {
+  background: #ccc;
+}
+
+.has-global-padding > .block-editor-block-list__zoom-out-separator,
+.block-editor-block-list__layout.is-root-container.has-global-padding > .block-editor-block-list__zoom-out-separator {
+  max-width: none;
+  margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
+}
+
 .is-vertical .block-list-appender {
   width: 24px;
   margin-right: auto;
@@ -635,7 +651,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   left: 0;
   pointer-events: none;
   border: 1px dashed currentColor;
-  border-radius: 2px;
 }
 .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-constrained.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .block-editor-block-list__block:not(.is-selected) > .is-layout-flow.wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
   opacity: 0;
@@ -693,7 +708,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 }
 .block-editor-default-block-appender .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
-  border-radius: 2px;
   color: #fff;
   padding: 0;
   min-width: 24px;
@@ -944,18 +958,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   flex-wrap: wrap;
   align-items: baseline;
   width: 100%;
+  gap: 12px;
 }
 .block-editor-warning .block-editor-warning__actions {
   align-items: center;
   display: flex;
-  margin-top: 1em;
-}
-.block-editor-warning .block-editor-warning__action {
-  margin: 0 8px 0 0;
-}
-
-.block-editor-warning__secondary {
-  margin: auto 0 auto 8px;
+  gap: 8px;
 }
 
 .components-popover.block-editor-warning__dropdown {

package/build-style/style-rtl.css

@@ -174,11 +174,8 @@ iframe[name=editor-canvas] {
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
-.block-editor-block-inspector .components-base-control {
-  margin-bottom: 24px;
-}
-.block-editor-block-inspector .components-base-control:last-child {
-  margin-bottom: 8px;
+.block-editor-block-inspector .components-base-control:where(:not(:last-child)) {
+  margin-bottom: 16px;
 }
 .block-editor-block-inspector .components-focal-point-picker-control .components-base-control,
 .block-editor-block-inspector .components-query-controls .components-base-control,
@@ -263,7 +260,6 @@ iframe[name=editor-canvas] {
 .block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle.components-button.has-icon,
 .block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon {
   background: #1e1e1e;
-  border-radius: 2px;
   color: #fff;
   padding: 0;
   min-width: 24px;
@@ -524,37 +520,11 @@ iframe[name=editor-canvas] {
   display: none;
 }
 
-.block-editor-block-breadcrumb__button.components-button {
-  height: 24px;
-  line-height: 24px;
-  padding: 0;
-  position: relative;
-}
-.block-editor-block-breadcrumb__button.components-button:hover:not(:disabled) {
-  text-decoration: underline;
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus {
-  box-shadow: none;
-}
-.block-editor-block-breadcrumb__button.components-button:focus::before {
-  content: "";
-  display: block;
-  position: absolute;
-  border-radius: 2px;
-  top: 1px;
-  left: 1px;
-  bottom: 1px;
-  right: 1px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-}
-
 .block-editor-block-breadcrumb__current {
   cursor: default;
 }
 
-.block-editor-block-breadcrumb__button.components-button,
+.block-editor-block-breadcrumb__button.block-editor-block-breadcrumb__button,
 .block-editor-block-breadcrumb__current {
   color: #1e1e1e;
   padding: 0 8px;
@@ -851,12 +821,12 @@ iframe[name=editor-canvas] {
   display: flex;
   align-items: center;
   overflow: hidden;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item .block-editor-block-preview__container::after {
   outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
-  border-radius: 2px;
+  border-radius: 4px;
 }
 .block-editor-block-patterns-list__item:hover:not(:focus) .block-editor-block-preview__container::after {
   outline-color: rgba(0, 0, 0, 0.3);
@@ -1079,33 +1049,11 @@ iframe[name=editor-canvas] {
   min-width: 24px !important;
 }
 
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled {
-  opacity: 1;
-}
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled,
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled .block-editor-block-icon.has-colors {
+.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true] {
   color: #1e1e1e;
 }
-
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon .block-editor-block-icon {
-  height: 100%;
-  position: relative;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  min-width: 100%;
-}
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon::before {
-  top: 8px;
-  left: 8px;
-  bottom: 8px;
-  right: 8px;
+.components-button.block-editor-block-switcher__no-switcher-icon[aria-disabled=true]:hover {
+  color: #1e1e1e;
 }
 
 .components-popover.block-editor-block-switcher__popover .components-popover__content {
@@ -1128,7 +1076,7 @@ iframe[name=editor-canvas] {
   width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
-  border-radius: 2px;
+  border-radius: 4px;
   outline: none;
   box-shadow: none;
   overflow: auto;
@@ -1275,7 +1223,7 @@ iframe[name=editor-canvas] {
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
-  border-radius: 2px;
+  border-radius: 4px;
   border: 1px solid #ddd;
 }
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__content {
@@ -1636,7 +1584,6 @@ iframe[name=editor-canvas] {
 
 .block-editor-global-styles-background-panel__image-tools-panel-item {
   border: 1px solid #ddd;
-  border-radius: 2px;
   grid-column: 1/-1;
   position: relative;
 }
@@ -2003,7 +1950,6 @@ iframe[name=editor-canvas] {
   cursor: pointer;
   background: transparent;
   word-break: break-word;
-  border-radius: 2px;
   transition: all 0.05s ease-in-out;
   position: relative;
   height: auto;
@@ -2049,7 +1995,6 @@ iframe[name=editor-canvas] {
 
 .block-editor-block-types-list__item-icon {
   padding: 12px 20px;
-  border-radius: 2px;
   color: #1e1e1e;
   transition: all 0.05s ease-in-out;
 }
@@ -2186,7 +2131,6 @@ iframe[name=editor-canvas] {
   line-height: normal;
   display: block;
   border: 1px solid #949494;
-  border-radius: 2px;
   height: 40px;
   margin: 0;
   padding: 8px 16px 8px 40px;
@@ -2356,7 +2300,6 @@ iframe[name=editor-canvas] {
   max-height: 32px;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title {
-  border-radius: 2px;
   line-height: 1.1;
 }
 .block-editor-link-control__search-item .block-editor-link-control__search-item-title:focus {
@@ -2685,7 +2628,6 @@ iframe[name=editor-canvas] {
   height: 32px;
   padding: 6px 0 6px 4px;
   text-align: right;
-  border-radius: 2px;
   position: relative;
   white-space: nowrap;
 }
@@ -2730,7 +2672,7 @@ iframe[name=editor-canvas] {
 }
 .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;
+  animation: edit-post__fade-in-animation 0.08s linear 0s;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2846,7 +2788,7 @@ iframe[name=editor-canvas] {
   left: 0;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 1px;
   padding: 2px 6px;
   max-width: 100%;
   box-sizing: border-box;
@@ -2865,7 +2807,7 @@ iframe[name=editor-canvas] {
   background-size: cover;
   width: 18px;
   height: 18px;
-  border-radius: 2px;
+  border-radius: 1px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__image:not(:only-child) {
   box-shadow: 0 0 0 2px #fff;
@@ -2993,7 +2935,6 @@ iframe[name=editor-canvas] {
   background-color: #1e1e1e;
   color: #fff;
   margin: 8px 24px 0 0;
-  border-radius: 2px;
   height: 24px;
   min-width: 24px;
   padding: 0;
@@ -3539,15 +3480,10 @@ iframe[name=editor-canvas] {
 div.block-editor-bindings__panel {
   grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 }
-div.block-editor-bindings__panel button:hover .block-editor-bindings__item-explanation {
+div.block-editor-bindings__panel button:hover .block-editor-bindings__item span {
   color: inherit;
 }
 
-.block-editor-bindings__popover .block-editor-bindings__source-label {
-  grid-column: 2;
-  margin: 8px 0;
-}
-
 .border-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -3585,32 +3521,14 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   grid-column: span 1;
 }
 
-.block-editor-hooks__layout-controls {
-  display: flex;
-  margin-bottom: 8px;
-}
-.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit {
-  display: flex;
-  margin-left: 24px;
-}
-.block-editor-hooks__layout-controls .block-editor-hooks__layout-controls-unit svg {
-  margin: auto 8px 4px 0;
-}
-
-.block-editor-block-inspector .block-editor-hooks__layout-controls-unit-input {
+.block-editor-hooks__layout-constrained .components-base-control {
   margin-bottom: 0;
 }
 
-.block-editor-hooks__layout-controls-reset {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 24px;
-}
-
-.block-editor-hooks__layout-controls-helptext {
+.block-editor-hooks__layout-constrained-helptext {
   color: #757575;
   font-size: 12px;
-  margin-bottom: 16px;
+  margin-bottom: 0;
 }
 
 .block-editor-hooks__flex-layout-justification-controls,
@@ -3622,10 +3540,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   margin-bottom: 8px;
 }
 
-.block-editor-hooks__toggle-control.block-editor-hooks__toggle-control {
-  margin-bottom: 16px;
-}
-
 .block-editor__spacing-visualizer {
   position: absolute;
   top: 0;
@@ -3697,9 +3611,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .block-editor-block-contextual-toolbar.components-accessible-toolbar {
   border: none;
-  border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
 }
+.block-editor-block-contextual-toolbar.is-unstyled {
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
+}
 .block-editor-block-contextual-toolbar .block-editor-block-toolbar {
   overflow: auto;
   overflow-y: hidden;
@@ -3903,11 +3819,11 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:first-child {
   border-top: 1px solid #ccc;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *:last-child {
   border-bottom: 1px solid #ccc;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
 }
 .block-editor-inserter__popover.is-quick .components-popover__content .block-editor-inserter__quick-inserter > *.components-button {
   border: 1px solid #1e1e1e;
@@ -4009,15 +3925,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   text-align: left;
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-  margin: auto 16px 16px;
-}
-
-.block-editor-inserter__manage-reusable-blocks {
-  justify-content: center;
-  width: 100%;
-}
-
 .block-editor-inserter__no-results,
 .block-editor-inserter__patterns-loading {
   padding: 32px;
@@ -4388,7 +4295,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 }
 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button {
   background: #fff;
-  border-radius: 2px;
   display: none;
 }
 .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button.is-opened, .block-editor-inserter__media-list__list-item .block-editor-inserter__media-list__item-preview-options > button:focus {
@@ -4413,7 +4319,6 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   max-width: 100%;
   outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
-  border-radius: 2px;
 }
 .block-editor-inserter__media-list__item .block-editor-inserter__media-list__item-preview .block-editor-inserter__media-list__item-preview-spinner {
   display: flex;
@@ -4500,6 +4405,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
   flex-direction: column;
 }
 
+.block-editor-tabbed-sidebar__tabpanel .block-editor-inserter__help-text {
+  padding: 0 24px 16px;
+}
+
 .spacing-sizes-control .spacing-sizes-control__custom-value-input,
 .spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
@@ -4525,6 +4434,7 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item-expla
 .spacing-sizes-control .spacing-sizes-control__range-control,
 .spacing-sizes-control .spacing-sizes-control__custom-value-range {
   flex: 1;
+  margin-bottom: 0;
 }
 .spacing-sizes-control .components-range-control__mark {
   transform: translateX(50%);