@wordpress/block-editor 14.3.6 → 14.5.0

package/build-style/content.css

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -182,12 +191,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   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,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus {
   outline: none;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after,
 .block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]):focus::after {
   content: "";
   position: absolute;
@@ -202,53 +211,21 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   outline-offset: calc(1 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1;
 }
-.block-editor-block-list__layout .is-block-moving-mode.block-editor-block-list__block.is-selected::after {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  pointer-events: none;
-  transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-  right: 0;
-  left: 0;
-  top: -14px;
-  border-radius: 2px;
-  border-top: 4px solid #ccc;
-  bottom: auto;
-  box-shadow: none;
-}
-.block-editor-block-list__layout .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected::after {
-  border-color: var(--wp-admin-theme-color);
-}
-.has-multi-selection .block-editor-block-list__layout {
-  -webkit-user-select: none;
-          user-select: none;
-}
 .block-editor-block-list__layout [class^=components-] {
   -webkit-user-select: text;
           user-select: text;
 }
 
-.is-block-moving-mode.block-editor-block-list__block-selection-button {
-  opacity: 0;
-  font-size: 1px;
-  height: 1px;
-  padding: 0;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
   position: relative;
   overflow-wrap: break-word;
   pointer-events: auto;
-  -webkit-user-select: text;
-          user-select: text;
   /**
    * Notices
    */
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-editing-disabled {
   pointer-events: none;
-  -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;
@@ -289,12 +266,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 .block-editor-block-list__layout .block-editor-block-list__block.has-warning.is-multi-selected::after {
   background-color: transparent;
 }
-.block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay::after {
-  display: none;
-}
-.block-editor-block-list__layout .block-editor-block-list__block.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay .block-editor-block-list__layout.has-overlay::after {
-  display: block;
-}
 .block-editor-block-list__layout .block-editor-block-list__block.is-reusable.has-child-selected::after {
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 }
@@ -354,7 +325,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     background-color: rgba(var(--wp-admin-theme-color--rgb), 0);
   }
 }
-.is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+.is-root-container:not([inert]) .block-editor-block-list__block.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;
@@ -369,7 +340,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   top: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .is-root-container:not([inert]) .block-editor-block-list__block.is-reusable.is-selected .block-editor-block-list__block.has-editable-outline::after {
+  .is-root-container:not([inert]) .block-editor-block-list__block.is-selected .block-editor-block-list__block.has-editable-outline::after {
     animation-name: block-editor-is-editable__animation_reduce-motion;
     animation-delay: 0s;
   }
@@ -500,13 +471,14 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   font-size: 13px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   color: #000;
   font-weight: normal;
 }
 .is-zoomed-out .block-editor-block-list__zoom-out-separator {
-  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
+  font-size: calc(13px / var(--wp-block-editor-iframe-zoom-out-scale));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;
@@ -803,26 +775,9 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   border: 0.01px solid transparent;
 }
 
-.block-editor-iframe__container {
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-}
-
-.block-editor-iframe__scale-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.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: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s scale 0s;
 }
 @media (prefers-reduced-motion: reduce) {
   .block-editor-iframe__html {
@@ -830,9 +785,13 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
     transition-delay: 0s;
   }
 }
+.block-editor-iframe__html.zoom-out-animation {
+  transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), transform 0s;
+}
 
 .block-editor-iframe__html.is-zoomed-out {
-  transform: scale(var(--wp-block-editor-iframe-zoom-out-scale));
+  transform: translateX(calc(( var(--wp-block-editor-iframe-zoom-out-outer-container-width) - var(--wp-block-editor-iframe-zoom-out-container-width, 100vw)) / 2 / var(--wp-block-editor-iframe-zoom-out-scale)));
+  scale: var(--wp-block-editor-iframe-zoom-out-scale);
   background-color: #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) / var(--wp-block-editor-iframe-zoom-out-scale)) + 2px));
   padding-top: calc(var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale));
@@ -851,16 +810,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   flex: 1;
 }
 
-.block-editor-block-list__layout.has-overlay::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 60;
-}
-
 .block-editor-media-placeholder__url-input-form {
   min-width: 260px;
 }

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

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */

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

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */

package/build-style/style-rtl.css

@@ -29,6 +29,9 @@
 /**
  * Fonts & basic variables.
  */
+/**
+ * Typography
+ */
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
@@ -43,7 +46,10 @@
  * Dimensions.
  */
 /**
- * Editor widths.
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
  */
 /**
  * Block & Editor UI.
@@ -67,6 +73,9 @@
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Typography
+ */
 /**
  * Breakpoint mixins
  */
@@ -270,13 +279,6 @@ iframe[name=editor-canvas] {
   height: 100%;
   display: block;
   background-color: transparent;
-  transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-}
-@media (prefers-reduced-motion: reduce) {
-  iframe[name=editor-canvas] {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
 }
 
 .block-editor-block-icon {
@@ -416,79 +418,16 @@ iframe[name=editor-canvas] {
   background: #1e1e1e;
 }
 
-/**
- * Block Label for Navigation/Selection Mode
- */
-.block-editor-block-list__block-selection-button {
-  display: inline-flex;
-  padding: 0 12px;
-  z-index: 22;
-  border-radius: 2px;
-  background-color: #1e1e1e;
-  font-size: 13px;
-  height: 48px;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content {
-  margin: auto;
-  display: inline-flex;
-  align-items: center;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-list__block-selection-button__content > .components-flex__item {
-  margin-left: 6px;
-}
-.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle {
-  cursor: grab;
-  padding: 0;
-  height: 24px;
-  min-width: 24px;
-  margin-right: -2px;
-}
-.block-editor-block-list__block-selection-button .components-button.has-icon.block-selection-button_drag-handle svg {
-  min-width: 18px;
-  min-height: 18px;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-icon {
-  font-size: 13px;
-  color: #fff;
-  height: 48px;
-}
-.block-editor-block-list__block-selection-button .components-button {
-  min-width: 36px;
-  color: #fff;
-  height: 48px;
-  display: flex;
-}
-.block-editor-block-list__block-selection-button .components-button:focus {
-  box-shadow: none;
-  border: none;
-}
-.block-editor-block-list__block-selection-button .components-button:active {
-  color: #fff;
-}
-.block-editor-block-list__block-selection-button .components-button[aria-disabled=true]:hover {
-  color: #fff;
-}
-.block-editor-block-list__block-selection-button .block-selection-button_select-button.components-button {
-  padding: 0;
-}
-.block-editor-block-list__block-selection-button .block-editor-block-mover {
-  background: unset;
-  border: none;
-}
-
 @keyframes hide-during-dragging {
   to {
     position: fixed;
     transform: translate(-9999px, 9999px);
   }
 }
-.components-popover.block-editor-block-list__block-popover .block-editor-block-list__block-selection-button,
 .components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   pointer-events: all;
   margin-top: 8px;
   margin-bottom: 8px;
-}
-.components-popover.block-editor-block-list__block-popover .block-editor-block-contextual-toolbar {
   border: 1px solid #1e1e1e;
   border-radius: 2px;
   overflow: visible;
@@ -568,13 +507,6 @@ iframe[name=editor-canvas] {
   height: 40px;
 }
 
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-  visibility: hidden;
-}
-.block-editor-block-tools__zoom-out-mode-inserter-button.is-visible {
-  visibility: visible;
-}
-
 .block-editor-block-lock-modal {
   z-index: 1000001;
 }
@@ -774,7 +706,7 @@ iframe[name=editor-canvas] {
 .block-editor-block-draggable-chip {
   background-color: #1e1e1e;
   border-radius: 2px;
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
   color: #fff;
   cursor: grabbing;
   display: inline-flex;
@@ -833,7 +765,7 @@ iframe[name=editor-canvas] {
 .block-draggable-invalid-drag-token .block-editor-block-draggable-chip__disabled.block-editor-block-draggable-chip__disabled {
   background-color: #757575;
   opacity: 1;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 }
 
 .block-editor-block-mover__move-button-container {
@@ -1002,27 +934,14 @@ iframe[name=editor-canvas] {
   padding: 4px;
   justify-content: center;
 }
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary {
-  width: auto;
-  height: 32px;
-  justify-content: center;
-}
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:disabled {
-  color: #949494;
-  background: none;
-}
-.block-editor-patterns__grid-pagination-wrapper .block-editor-patterns__grid-pagination .components-button.is-tertiary:hover:not(:disabled) {
-  color: #fff;
-  background-color: #757575;
-}
 
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button {
+.show-icon-labels .block-editor-patterns__grid-pagination-button {
   width: auto;
 }
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button span {
+.show-icon-labels .block-editor-patterns__grid-pagination-button span {
   display: none;
 }
-.show-icon-labels .block-editor-patterns__grid-pagination .components-button::before {
+.show-icon-labels .block-editor-patterns__grid-pagination-button::before {
   content: attr(aria-label);
 }
 
@@ -1919,6 +1838,22 @@ iframe[name=editor-canvas] {
   padding: 0;
 }
 
+.block-editor-iframe__container {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+}
+
+.block-editor-iframe__scale-container {
+  height: 100%;
+}
+
+.block-editor-iframe__scale-container.is-zoomed-out {
+  width: var(--wp-block-editor-iframe-zoom-out-outer-container-width, 100vw);
+  position: absolute;
+  left: 0;
+}
+
 .block-editor-image-size-control {
   margin-bottom: 1em;
 }
@@ -2033,12 +1968,11 @@ iframe[name=editor-canvas] {
 .block-editor-block-types-list__item-title {
   padding: 4px 2px 8px;
   font-size: 12px;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
 }
 
-.show-icon-labels .block-editor-block-inspector__tabs [role=tablist] .components-button {
-  justify-content: center;
+.block-editor-block-inspector__tabs [role=tablist] {
+  width: 100%;
 }
 
 .block-editor-inspector-popover-header {
@@ -2590,16 +2524,6 @@ iframe[name=editor-canvas] {
   text-decoration: none;
   transition: box-shadow 0.1s linear;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block-contents.is-dropping-before::before {
-  content: "";
-  position: absolute;
-  pointer-events: none;
-  transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-  top: -2px;
-  left: 0;
-  right: 0;
-  border-top: 4px solid var(--wp-admin-theme-color);
-}
 .components-modal__content .block-editor-list-view-leaf .block-editor-list-view-block-contents {
   padding-right: 0;
   padding-left: 0;
@@ -3041,7 +2965,6 @@ 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%);
   height: 1px;
   margin: -1px;
@@ -3061,10 +2984,14 @@ iframe[name=editor-canvas] {
   margin-bottom: 8px;
   box-shadow: none;
   outline: none;
+  border-radius: 2px;
 }
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar {
   border-radius: 2px;
 }
+.components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar-group {
+  background: none;
+}
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-toolbar__control,
 .components-popover.block-editor-rich-text__inline-format-toolbar .components-dropdown-menu__toggle {
   min-width: 48px;
@@ -3144,6 +3071,11 @@ iframe[name=editor-canvas] {
   min-width: 280px;
 }
 
+.block-editor-tool-selector__menu .components-menu-item__info {
+  margin-right: 36px;
+  text-align: right;
+}
+
 .block-editor-block-list__block .block-editor-url-input,
 .components-popover .block-editor-url-input,
 .block-editor-url-input {
@@ -3478,9 +3410,12 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 }
 .block-editor-block-toolbar > :last-child,
 .block-editor-block-toolbar > :last-child .components-toolbar-group,
-.block-editor-block-toolbar > :last-child .components-toolbar {
+.block-editor-block-toolbar > :last-child .components-toolbar, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2), .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, .block-editor-block-toolbar:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar {
   border-left: none;
 }
+.block-editor-block-toolbar .components-toolbar-group:empty {
+  display: none;
+}
 
 .block-editor-block-contextual-toolbar {
   position: sticky;
@@ -3863,68 +3798,16 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
 
 .block-editor-inserter__media-tabs-container,
 .block-editor-inserter__block-patterns-tabs-container {
+  flex-grow: 1;
   padding: 16px;
-  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .block-editor-inserter__category-tablist {
-  display: flex;
-  flex-direction: column;
-  border: none;
   margin-bottom: 8px;
 }
-.block-editor-inserter__category-tablist div[role=listitem]:last-child {
-  margin-top: auto;
-}
-.block-editor-inserter__category-tablist[aria-orientation=vertical]::after {
-  content: none;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab {
-  padding: 8px 12px 8px 4px;
-  text-align: right;
-  font-weight: inherit;
-  display: block;
-  position: relative;
-  height: auto;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] {
-  color: var(--wp-admin-theme-color);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] .components-flex-item {
-  filter: brightness(0.95);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true] svg {
-  fill: var(--wp-admin-theme-color);
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab[aria-selected=true]::after {
-  content: "";
-  display: block;
-  outline: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  border-radius: 2px;
-  opacity: 0.04;
-  background: var(--wp-admin-theme-color);
-  height: 100%;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus-visible, .block-editor-inserter__category-tablist .block-editor-inserter__category-tab:focus:not(:disabled) {
-  border-radius: 2px;
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  outline: 2px solid transparent;
-  outline-offset: 0;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab::before {
-  display: none;
-}
-.block-editor-inserter__category-tablist .block-editor-inserter__category-tab::after {
-  display: none;
-}
 
 .block-editor-inserter__category-panel {
   outline: 1px solid transparent;