@wordpress/block-editor 7.0.4 → 8.0.0

package/build-style/style-rtl.css

@@ -986,8 +986,17 @@
   font-size: 13px;
 }
 
-.is-dragging {
-  display: none !important;
+.block-editor-block-list__layout .is-dragging {
+  background-color: currentColor !important;
+  opacity: 0.05 !important;
+  border-radius: 2px !important;
+  pointer-events: none !important;
+}
+.block-editor-block-list__layout .is-dragging::selection {
+  background: transparent !important;
+}
+.block-editor-block-list__layout .is-dragging::after {
+  content: none !important;
 }
 
 .block-editor-block-mobile-toolbar {
@@ -1148,7 +1157,7 @@
 
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
-  margin-top: 16px;
+  margin-bottom: 24px;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
@@ -1159,23 +1168,28 @@
 
 .block-editor-block-patterns-list__item {
   height: 100%;
+}
+.block-editor-block-patterns-list__item .block-editor-block-preview__container {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
   border-radius: 2px;
-  transition: all 0.05s ease-in-out;
-  position: relative;
-  border: 1px solid transparent;
+  border: 1px solid #f0f0f0;
+}
+.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
 }
-.block-editor-block-patterns-list__item:hover {
+.block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
   border: 1px solid var(--wp-admin-theme-color);
 }
-.block-editor-block-patterns-list__item:focus {
+.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-
-.block-editor-block-patterns-list__item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: center;
+.block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
+  color: var(--wp-admin-theme-color);
 }
 
 .block-editor-block-preview__container {
@@ -1778,13 +1792,9 @@
 }
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
-    margin-left: 0;
-  }
-  .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper {
-    margin-left: calc((100% - (28px * 6)) / 5);
-  }
-  .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) {
-    margin-left: 0;
+    display: grid;
+    grid-template-columns: repeat(6, 28px);
+    justify-content: space-between;
   }
 }
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
@@ -1839,21 +1849,26 @@
   left: 0;
 }
 
-.block-editor-duotone-control__popover .components-popover__content {
-  border: 1px solid #1e1e1e;
-  min-width: 214px;
-}
-.block-editor-duotone-control__popover .components-circular-option-picker {
-  padding: 12px;
+.block-editor-duotone-control__popover > .components-popover__content > div {
+  padding: 16px;
+  width: 280px;
 }
 .block-editor-duotone-control__popover .components-menu-group__label {
-  padding: 12px 12px 0 12px;
-  width: 100%;
-  box-sizing: border-box;
+  padding: 0;
+}
+.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
+  margin: 16px 0 12px;
+}
+.block-editor-duotone-control__popover .components-circular-option-picker__swatches {
+  display: grid;
+  grid-template-columns: repeat(6, 28px);
+  gap: 12px;
+  justify-content: space-between;
 }
 
-.block-editor-duotone-control__popover > .components-popover__content {
-  width: 334px;
+.block-editor-duotone-control__description {
+  margin: 16px 0;
+  font-size: 12px;
 }
 
 .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
@@ -1909,7 +1924,27 @@
   position: relative;
 }
 
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+.block-editor-link-control__search-input-container {
+  position: relative;
+}
+
+.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
+  flex: 1;
+}
+
+.block-editor-link-control__field {
+  margin: 16px;
+}
+.block-editor-link-control__field > .components-base-control__field {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+.block-editor-link-control__field .components-base-control__label {
+  margin-left: 16px;
+  margin-bottom: 0;
+}
+.block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -1924,42 +1959,39 @@
   display: block;
   padding: 11px 16px;
   padding-left: 36px;
-  margin: 16px;
+  margin: 0;
   position: relative;
   border: 1px solid #ddd;
   border-radius: 2px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+  .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+  .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus {
+.block-editor-link-control__field input[type=text]:focus, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder {
+.block-editor-link-control__field input[type=text]::-webkit-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder {
+.block-editor-link-control__field input[type=text]::-moz-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder {
+.block-editor-link-control__field input[type=text]:-ms-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input .components-base-control__field {
-  margin-bottom: 0;
-}
 
 .block-editor-link-control__search-error {
   margin: -8px 16px 16px;
@@ -1972,14 +2004,13 @@
    * when suggestions are rendered.
    *
    * Compensate for:
-   *  - Input margin ($grid-unit-20)
    *  - Border (1px)
    *  - Vertically, for the difference in height between the input (40px) and
    *    the icon buttons.
    *  - Horizontally, pad to the minimum of: default input padding, or the
    *    equivalent of the vertical padding.
    */
-  top: 19px;
+  top: 3px;
   left: 19px;
 }
 
@@ -2069,7 +2100,6 @@
   flex-direction: row;
   align-items: flex-start;
   margin-left: 8px;
-  overflow: hidden;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -2080,9 +2110,6 @@
 .block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header {
   align-items: center;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-details {
-  overflow: hidden;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
   top: 0.2em;
@@ -2492,9 +2519,6 @@
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
   border-radius: 0;
 }
-.block-editor-list-view-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
-  border-radius: 0 0 2px 2px;
-}
 .block-editor-list-view-leaf.is-dragging {
   display: none;
 }
@@ -2542,6 +2566,9 @@
 .is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
   box-shadow: none;
 }
+.block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
+  left: 0;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   z-index: 1;
@@ -2799,6 +2826,12 @@
   box-shadow: none;
 }
 
+.block-editor-list-view-placeholder {
+  padding: 0;
+  margin: 0;
+  height: 36px;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3077,10 +3110,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-decoration-and-transform {
-  display: flex;
-}
-
 .block-editor-text-transform-control {
   flex: 0 0 50%;
 }
@@ -3468,7 +3497,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   font-size: 12px;
 }
 
-.block-editor-hooks__flex-layout-justification-controls legend {
+.block-editor-hooks__flex-layout-justification-controls,
+.block-editor-hooks__flex-layout-orientation-controls {
+  margin-bottom: 12px;
+}
+.block-editor-hooks__flex-layout-justification-controls legend,
+.block-editor-hooks__flex-layout-orientation-controls legend {
   margin-bottom: 8px;
 }
 
@@ -3486,6 +3520,19 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-bottom: 8px;
 }
 
+.typography-block-support-panel .components-font-appearance-control,
+.typography-block-support-panel .components-font-size-picker__controls,
+.typography-block-support-panel .block-editor-text-decoration-control__buttons,
+.typography-block-support-panel .block-editor-text-transform-control__buttons {
+  margin-bottom: 0;
+}
+.typography-block-support-panel .block-editor-line-height-control input {
+  max-width: 100%;
+}
+.typography-block-support-panel .single-column {
+  grid-column: span 1;
+}
+
 /**
  * Block Toolbar
  */
@@ -3792,7 +3839,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-  line-height: 1.2;
+  height: 36px;
+  line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -3917,6 +3965,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-template-columns: 1fr 1fr;
   grid-gap: 8px;
 }
+.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
+}
+.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-preview__container {
+  min-height: 100px;
+}
 
 .block-editor-inserter__quick-inserter-separator {
   border-top: 1px solid #ddd;
@@ -3946,6 +4000,55 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-color: var(--wp-admin-theme-color);
 }
 
+.block-editor-block-patterns-explorer__sidebar {
+  position: absolute;
+  top: 60px;
+  right: 0;
+  bottom: 0;
+  width: 280px;
+  padding: 24px 32px 32px;
+  overflow-x: visible;
+  overflow-y: scroll;
+}
+.block-editor-block-patterns-explorer__sidebar__categories-list__item {
+  display: block;
+  width: 100%;
+  height: 48px;
+  text-align: right;
+}
+.block-editor-block-patterns-explorer__search {
+  margin-bottom: 32px;
+}
+.block-editor-block-patterns-explorer__search-results-count {
+  padding-bottom: 32px;
+}
+.block-editor-block-patterns-explorer__list {
+  margin-right: 248px;
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+  display: grid;
+  grid-gap: 32px;
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 1080px) {
+  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1440px) {
+  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  min-height: 240px;
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-preview__container {
+  height: inherit;
+  min-height: 100px;
+  max-height: 800px;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }