@wordpress/block-library 5.0.1 → 6.0.1

package/build-style/editor-rtl.css

@@ -74,10 +74,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-#start-resizable-editor-section {
-  display: none;
-}
-
 ul.wp-block-archives {
   padding-right: 2.5em;
 }
@@ -230,12 +226,12 @@ div[data-type="core/button"] {
 
 @media (min-width: 600px) {
   .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:nth-child(even) {
-    margin-right: 32px;
+    margin-right: var(--wp--style--block-gap, 2em);
   }
 }
 @media (min-width: 782px) {
   .editor-styles-wrapper .block-editor-block-list__block.wp-block-column:not(:first-child) {
-    margin-right: 32px;
+    margin-right: var(--wp--style--block-gap, 2em);
   }
 }
 .block-editor-block-list__block.wp-block-column.wp-block-column {
@@ -748,27 +744,91 @@ div[data-type="core/freeform"].is-selected .block-library-classic__toolbar {
   display: block;
 }
 
-.wp-block-gallery li {
-  list-style-type: none;
+figure.wp-block-gallery {
+  display: block;
+  margin: 0;
 }
-.wp-block-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label {
+figure.wp-block-gallery.has-nested-images .components-drop-zone {
   display: none;
+  pointer-events: none;
 }
-.wp-block-gallery .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
-  margin-bottom: 0;
+figure.wp-block-gallery > .blocks-gallery-caption {
+  flex: 0 0 100%;
 }
-
-figure.wp-block-gallery {
+figure.wp-block-gallery > .blocks-gallery-media-placeholder-wrapper {
+  flex-basis: 100%;
+}
+figure.wp-block-gallery .wp-block-image .components-notice.is-error {
   display: block;
+}
+figure.wp-block-gallery .wp-block-image .components-notice__content {
+  margin: 4px 0;
+}
+figure.wp-block-gallery .wp-block-image .components-notice__dismiss {
+  position: absolute;
+  top: 0;
+  left: 5px;
+}
+figure.wp-block-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label {
+  display: none;
+}
+figure.wp-block-gallery .block-editor-media-placeholder.is-appender .block-editor-media-placeholder__button {
+  margin-bottom: 0;
+}
+figure.wp-block-gallery .block-editor-media-placeholder {
   margin: 0;
 }
+figure.wp-block-gallery .block-editor-media-placeholder::before {
+  box-shadow: 0 0 0 1px #fff inset, 0 0 0 3px var(--wp-admin-theme-color) inset;
+  content: "";
+  outline: 2px solid transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+figure.wp-block-gallery .block-editor-media-placeholder .components-placeholder__label {
+  display: flex;
+}
+figure.wp-block-gallery .block-editor-media-placeholder figcaption {
+  z-index: 2;
+}
+figure.wp-block-gallery .components-spinner {
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  margin-top: -9px;
+  margin-right: -9px;
+}
 
-.blocks-gallery-grid.blocks-gallery-grid {
-  padding-right: 0;
-  margin-right: 0;
-  margin-bottom: 0;
+/**
+ * Gallery inspector controls settings.
+ */
+.gallery-settings-buttons .components-button:first-child {
+  margin-left: 8px;
+}
+
+.gallery-image-sizes .components-base-control__label {
+  display: block;
+  margin-bottom: 4px;
+}
+.gallery-image-sizes .gallery-image-sizes__loading {
+  display: flex;
+  align-items: center;
+  color: #757575;
+  font-size: 12px;
+}
+.gallery-image-sizes .components-spinner {
+  margin: 0 4px 0 8px;
 }
 
+/**
+ * Deprecated css past this point. This can be removed once all galleries are migrated
+ * to V2.
+ */
 .blocks-gallery-item figure:not(.is-selected):focus,
 .blocks-gallery-item img:focus {
   outline: none;
@@ -783,10 +843,6 @@ figure.wp-block-gallery {
   bottom: 0;
   right: 0;
   z-index: 1;
-  pointer-events: none;
-}
-.blocks-gallery-item figure.is-selected figcaption {
-  z-index: 2;
 }
 .blocks-gallery-item figure.is-transient img {
   opacity: 0.3;
@@ -845,12 +901,20 @@ figure.wp-block-gallery {
   left: -2px;
 }
 
-.blocks-gallery-item .components-spinner {
-  position: absolute;
-  top: 50%;
-  right: 50%;
-  margin-top: -9px;
-  margin-right: -9px;
+.wp-block-gallery ul.blocks-gallery-grid {
+  padding: 0;
+  margin: 0;
+}
+
+.wp-block-update-gallery-modal {
+  max-width: 400px;
+}
+.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+.wp-block-update-gallery-modal .wp-block-update-gallery-modal-buttons .components-button {
+  margin-right: 12px;
 }
 
 /**
@@ -870,23 +934,6 @@ figure.wp-block-gallery {
   margin-bottom: 18px;
 }
 
-.block-library-heading-level-dropdown .components-popover__content {
-  min-width: 230px;
-}
-.block-library-heading-level-dropdown .components-popover__content > div {
-  padding: 0;
-}
-
-.block-library-heading-level-toolbar {
-  border: none;
-}
-.block-library-heading-level-toolbar .components-toolbar-group {
-  flex-wrap: nowrap;
-}
-
-.block-library-html__edit {
-  margin-bottom: 28px;
-}
 .block-library-html__edit .block-library-html__preview-overlay {
   position: absolute;
   width: 100%;
@@ -895,22 +942,26 @@ figure.wp-block-gallery {
   right: 0;
 }
 .block-library-html__edit .block-editor-plain-text {
-  font-family: Menlo, Consolas, monaco, monospace;
-  color: #1e1e1e;
-  padding: 0.8em 1em;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  font-family: Menlo, Consolas, monaco, monospace !important;
+  color: #1e1e1e !important;
+  background: #fff !important;
+  padding: 12px !important;
+  border: 1px solid #1e1e1e !important;
+  box-shadow: none !important;
+  border-radius: 2px !important;
   max-height: 250px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
-  font-size: 16px;
+  font-size: 16px !important;
 }
 @media (min-width: 600px) {
   .block-library-html__edit .block-editor-plain-text {
-    font-size: 13px;
+    font-size: 13px !important;
   }
 }
 .block-library-html__edit .block-editor-plain-text:focus {
-  box-shadow: none;
+  border-color: var(--wp-admin-theme-color) !important;
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+  outline: 2px solid transparent !important;
 }
 
 figure.wp-block-image:not(.wp-block) {
@@ -1135,6 +1186,10 @@ figure.wp-block-image:not(.wp-block) {
   margin-right: 0;
   padding-right: 0;
 }
+.editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block {
+  margin-right: revert;
+  margin-left: revert;
+}
 
 .wp-block-navigation-link__label {
   display: inline-block;
@@ -1149,22 +1204,22 @@ figure.wp-block-image:not(.wp-block) {
 }
 
 .wp-block-navigation__container,
-.wp-block-navigation-link {
+.wp-block-navigation-item {
   background-color: inherit;
 }
 
-.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation-link__container {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover > .wp-block-navigation__submenu-container {
   opacity: 0;
   visibility: hidden;
 }
 
-.has-child.is-selected > .wp-block-navigation-link__container, .has-child.has-child-selected > .wp-block-navigation-link__container {
+.has-child.is-selected > .wp-block-navigation__submenu-container, .has-child.has-child-selected > .wp-block-navigation__submenu-container {
   display: flex;
   opacity: 1;
   visibility: visible;
 }
 
-.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation-link__container {
+.is-dragging-components-draggable .has-child.is-dragging-within > .wp-block-navigation__submenu-container {
   opacity: 1;
   visibility: visible;
 }
@@ -1280,11 +1335,11 @@ figure.wp-block-image:not(.wp-block) {
   width: 100%;
   overflow: hidden;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link {
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item {
   position: relative;
   min-width: 72px;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link::before {
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item::before {
   display: block;
   content: "";
   border-radius: 2px;
@@ -1298,7 +1353,7 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon svg {
   fill: currentColor;
 }
-.wp-block-navigation-placeholder__preview .wp-block-navigation-link.wp-block-navigation-link,
+.wp-block-navigation-placeholder__preview .wp-block-navigation-item.wp-block-navigation-item,
 .wp-block-navigation-placeholder__preview .wp-block-navigation-placeholder__preview-search-icon {
   opacity: 0.3;
 }
@@ -1308,6 +1363,7 @@ figure.wp-block-image:not(.wp-block) {
   width: 0;
   overflow: hidden;
   flex-wrap: nowrap;
+  flex: 0;
 }
 .is-vertical.is-selected .wp-block-navigation-placeholder__preview {
   display: none;
@@ -1496,7 +1552,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-top: 16px;
 }
 
-.wp-block-navigation-link__container {
+.wp-block-navigation__submenu-container {
   border-radius: 0;
   min-height: 36px;
 }
@@ -1507,32 +1563,33 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-navigation .has-child {
   cursor: pointer;
 }
-.wp-block-navigation .has-child .submenu-container,
-.wp-block-navigation .has-child .wp-block-navigation-link__container {
+.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
   z-index: 28;
 }
-.wp-block-navigation .has-child:hover .submenu-container,
-.wp-block-navigation .has-child:hover .wp-block-navigation-link__container {
+.wp-block-navigation .has-child:hover .wp-block-navigation__submenu-container {
   z-index: 29;
 }
-.wp-block-navigation .has-child.is-selected > .wp-block-navigation-link__container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation-link__container {
+.wp-block-navigation .has-child.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.has-child-selected > .wp-block-navigation__submenu-container {
   visibility: visible !important;
   opacity: 1 !important;
+  min-width: 200px !important;
+  height: auto !important;
+  width: auto !important;
 }
 
 /**
  * Navigation Items.
  */
-.wp-block-navigation-link .wp-block-navigation-link__container {
+.wp-block-navigation-item .wp-block-navigation__submenu-container {
   display: block;
 }
-.wp-block-navigation-link .wp-block-navigation-link__content {
+.wp-block-navigation-item .wp-block-navigation-item__content {
   cursor: text;
 }
-.wp-block-navigation-link.is-editing, .wp-block-navigation-link.is-selected {
+.wp-block-navigation-item.is-editing, .wp-block-navigation-item.is-selected {
   min-width: 20px;
 }
-.wp-block-navigation-link .block-list-appender {
+.wp-block-navigation-item .block-list-appender {
   margin-top: 16px;
   margin-left: auto;
   margin-bottom: 16px;
@@ -1548,17 +1605,57 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
  */
 .wp-block-navigation-link__placeholder {
   position: relative;
+  text-decoration: none !important;
+  box-shadow: none !important;
+  background-image: none !important;
 }
-.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text {
-  background-image: linear-gradient(-45deg, transparent 20%, currentColor 30%, currentColor 36%, transparent 46%), linear-gradient(-135deg, transparent 54%, currentColor 64%, currentColor 70%, transparent 80%);
+.wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
+  --wp-underline-color: var(--wp-admin-theme-color);
+  background-image: linear-gradient(-45deg, transparent 20%, var(--wp-underline-color) 30%, var(--wp-underline-color) 36%, transparent 46%), linear-gradient(-135deg, transparent 54%, var(--wp-underline-color) 64%, var(--wp-underline-color) 70%, transparent 80%);
   background-position: 100% 100%;
   background-size: 6px 3px;
   background-repeat: repeat-x;
+  padding-bottom: 0.1em;
+}
+.is-dark-theme .wp-block-navigation-link__placeholder .wp-block-navigation-link__placeholder-text span {
+  --wp-underline-color: #fff;
 }
-.wp-block-navigation-link__placeholder.wp-block-navigation-link__content {
+.wp-block-navigation-link__placeholder.wp-block-navigation-item__content {
   cursor: pointer;
 }
 
+.wp-block-navigation-submenu {
+  display: block;
+}
+.wp-block-navigation-submenu .wp-block-navigation__submenu-container {
+  z-index: 28;
+}
+.wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container {
+  visibility: visible !important;
+  opacity: 1 !important;
+  min-width: 200px !important;
+  height: auto !important;
+  width: auto !important;
+  position: absolute;
+  right: -1em;
+  top: 100%;
+}
+@media (min-width: 782px) {
+  .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
+    right: 100%;
+    top: -1px;
+  }
+  .wp-block-navigation-submenu.is-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before, .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
+    content: "";
+    position: absolute;
+    left: 100%;
+    height: 100%;
+    display: block;
+    width: 0.5em;
+    background: transparent;
+  }
+}
+
 .block-editor-block-list__block[data-type="core/nextpage"] {
   max-width: 100%;
   text-align: center;
@@ -1630,6 +1727,14 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   margin-right: 12px;
 }
 
+.wp-block-page-list .open-on-click:focus-within > .wp-block-navigation__submenu-container {
+  visibility: visible;
+  opacity: 1;
+  width: auto;
+  height: auto;
+  min-width: 200px;
+}
+
 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
   min-height: auto !important;
 }
@@ -1642,17 +1747,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   opacity: 0;
 }
 
-.wp-block-post-content__placeholder {
-  height: 100px;
-  border: 1px dashed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.wp-block-post-content__placeholder span {
-  font-style: italic;
-}
-
 .wp-block-post-excerpt .wp-block-post-excerpt__excerpt.is-inline {
   display: inline-block;
 }
@@ -2305,10 +2399,8 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 0 56px 16px 16px;
 }
 
-.wp-block > .wp-block-query-pagination {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
+.wp-block[data-align=center] > .wp-block-query-pagination {
+  justify-content: center;
 }
 
 .editor-styles-wrapper .wp-block-query-pagination {
@@ -2325,7 +2417,6 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 .wp-block-query-pagination > .wp-block-query-pagination-next,
 .wp-block-query-pagination > .wp-block-query-pagination-previous,
 .wp-block-query-pagination > .wp-block-query-pagination-numbers {
-  display: inline-block;
   margin-right: 0;
   margin-top: 0.5em;
   margin-right: 0.5em;
@@ -2371,15 +2462,11 @@ div[data-type="core/post-featured-image"] img {
   margin: 0;
 }
 
-.block-library-post-featured-image-scale-controls {
-  margin-top: 16px;
-}
-.block-library-post-featured-image-scale-controls .components-flex {
-  border: 1px solid #757575;
+.block-library-post-featured-image-dimension-controls {
+  margin-bottom: 8px;
 }
-.block-library-post-featured-image-scale-controls button {
-  width: 100%;
-  display: block;
+.block-library-post-featured-image-dimension-controls.scale-control-is-visible {
+  margin-bottom: 16px;
 }
 
 .wp-block-term-description__placeholder {
@@ -2388,135 +2475,34 @@ div[data-type="core/post-featured-image"] img {
 }
 
 :root .editor-styles-wrapper {
+  /*
+   * Our classes uses the same values we set for gradient value attributes,
+   * and we can not use spacing because of WP multi site kses rule.
+   */
   /* stylelint-disable function-comma-space-after */
   /* stylelint-enable function-comma-space-after */
 }
-:root .editor-styles-wrapper .has-pale-pink-background-color {
-  background-color: #f78da7;
-}
-:root .editor-styles-wrapper .has-vivid-red-background-color {
-  background-color: #cf2e2e;
-}
-:root .editor-styles-wrapper .has-luminous-vivid-orange-background-color {
-  background-color: #ff6900;
-}
-:root .editor-styles-wrapper .has-luminous-vivid-amber-background-color {
-  background-color: #fcb900;
-}
-:root .editor-styles-wrapper .has-light-green-cyan-background-color {
-  background-color: #7bdcb5;
-}
-:root .editor-styles-wrapper .has-vivid-green-cyan-background-color {
-  background-color: #00d084;
-}
-:root .editor-styles-wrapper .has-pale-cyan-blue-background-color {
-  background-color: #8ed1fc;
-}
-:root .editor-styles-wrapper .has-vivid-cyan-blue-background-color {
-  background-color: #0693e3;
-}
-:root .editor-styles-wrapper .has-vivid-purple-background-color {
-  background-color: #9b51e0;
-}
-:root .editor-styles-wrapper .has-white-background-color {
-  background-color: #fff;
-}
 :root .editor-styles-wrapper .has-very-light-gray-background-color {
   background-color: #eee;
 }
-:root .editor-styles-wrapper .has-cyan-bluish-gray-background-color {
-  background-color: #abb8c3;
-}
 :root .editor-styles-wrapper .has-very-dark-gray-background-color {
   background-color: #313131;
 }
-:root .editor-styles-wrapper .has-black-background-color {
-  background-color: #000;
-}
-:root .editor-styles-wrapper .has-pale-pink-color {
-  color: #f78da7;
-}
-:root .editor-styles-wrapper .has-vivid-red-color {
-  color: #cf2e2e;
-}
-:root .editor-styles-wrapper .has-luminous-vivid-orange-color {
-  color: #ff6900;
-}
-:root .editor-styles-wrapper .has-luminous-vivid-amber-color {
-  color: #fcb900;
-}
-:root .editor-styles-wrapper .has-light-green-cyan-color {
-  color: #7bdcb5;
-}
-:root .editor-styles-wrapper .has-vivid-green-cyan-color {
-  color: #00d084;
-}
-:root .editor-styles-wrapper .has-pale-cyan-blue-color {
-  color: #8ed1fc;
-}
-:root .editor-styles-wrapper .has-vivid-cyan-blue-color {
-  color: #0693e3;
-}
-:root .editor-styles-wrapper .has-vivid-purple-color {
-  color: #9b51e0;
-}
-:root .editor-styles-wrapper .has-white-color {
-  color: #fff;
-}
 :root .editor-styles-wrapper .has-very-light-gray-color {
   color: #eee;
 }
-:root .editor-styles-wrapper .has-cyan-bluish-gray-color {
-  color: #abb8c3;
-}
 :root .editor-styles-wrapper .has-very-dark-gray-color {
   color: #313131;
 }
-:root .editor-styles-wrapper .has-black-color {
-  color: #000;
-}
-:root .editor-styles-wrapper .has-vivid-cyan-blue-to-vivid-purple-gradient-background {
-  background: linear-gradient(-135deg, #0693e3 0%, #9b51e0 100%);
-}
 :root .editor-styles-wrapper .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
   background: linear-gradient(-135deg, #00d084 0%, #0693e3 100%);
 }
-:root .editor-styles-wrapper .has-light-green-cyan-to-vivid-green-cyan-gradient-background {
-  background: linear-gradient(-135deg, #7adcb4 0%, #00d082 100%);
-}
-:root .editor-styles-wrapper .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
-  background: linear-gradient(-135deg, #fcb900 0%, #ff6900 100%);
-}
-:root .editor-styles-wrapper .has-luminous-vivid-orange-to-vivid-red-gradient-background {
-  background: linear-gradient(-135deg, #ff6900 0%, #cf2e2e 100%);
-}
-:root .editor-styles-wrapper .has-very-light-gray-to-cyan-bluish-gray-gradient-background {
-  background: linear-gradient(-135deg, #eeeeee 0%, #a9b8c3 100%);
-}
-:root .editor-styles-wrapper .has-cool-to-warm-spectrum-gradient-background {
-  background: linear-gradient(-135deg, #4aeadc 0%, #9778d1 20%, #cf2aba 40%, #ee2c82 60%, #fb6962 80%, #fef84c 100%);
-}
-:root .editor-styles-wrapper .has-blush-light-purple-gradient-background {
-  background: linear-gradient(-135deg, #ffceec 0%, #9896f0 100%);
-}
-:root .editor-styles-wrapper .has-blush-bordeaux-gradient-background {
-  background: linear-gradient(-135deg, #fecda5 0%, #fe2d2d 50%, #6b003e 100%);
-}
 :root .editor-styles-wrapper .has-purple-crush-gradient-background {
   background: linear-gradient(-135deg, #34e2e4 0%, #4721fb 50%, #ab1dfe 100%);
 }
-:root .editor-styles-wrapper .has-luminous-dusk-gradient-background {
-  background: linear-gradient(-135deg, #ffcb70 0%, #c751c0 50%, #4158d0 100%);
-}
 :root .editor-styles-wrapper .has-hazy-dawn-gradient-background {
   background: linear-gradient(-135deg, #faaca8 0%, #dad0ec 100%);
 }
-:root .editor-styles-wrapper .has-pale-ocean-gradient-background {
-  background: linear-gradient(-135deg, #fff5cb 0%, #b6e3d4 50%, #33a7b5 100%);
-}
-:root .editor-styles-wrapper .has-electric-grass-gradient-background {
-  background: linear-gradient(-135deg, #caf880 0%, #71ce7e 100%);
-}
 :root .editor-styles-wrapper .has-subdued-olive-gradient-background {
   background: linear-gradient(-135deg, #fafae1 0%, #67a671 100%);
 }
@@ -2557,7 +2543,4 @@ div[data-type="core/post-featured-image"] img {
  *
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
- */
-#end-resizable-editor-section {
-  display: none;
-}
+ */