@wordpress/block-library 5.0.1 → 6.0.1

package/build-style/gallery/editor-rtl.css

@@ -74,27 +74,91 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.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;
@@ -109,10 +173,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;
@@ -171,10 +231,18 @@ 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;
 }

package/build-style/gallery/editor.css

@@ -74,27 +74,91 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.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;
+  right: 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;
+  right: 0;
+  bottom: 0;
+  left: 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%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px;
+}
 
-.blocks-gallery-grid.blocks-gallery-grid {
-  padding-left: 0;
-  margin-left: 0;
-  margin-bottom: 0;
+/**
+ * Gallery inspector controls settings.
+ */
+.gallery-settings-buttons .components-button:first-child {
+  margin-right: 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 8px 0 4px;
 }
 
+/**
+ * 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;
@@ -109,10 +173,6 @@ figure.wp-block-gallery {
   bottom: 0;
   left: 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;
@@ -171,10 +231,18 @@ figure.wp-block-gallery {
   right: -2px;
 }
 
-.blocks-gallery-item .components-spinner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -9px;
-  margin-left: -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-left: 12px;
 }

package/build-style/gallery/style-rtl.css

@@ -92,7 +92,6 @@
   flex-direction: column;
   justify-content: center;
   position: relative;
-  align-self: flex-start;
   width: calc(50% - 1em);
 }
 .wp-block-gallery .blocks-gallery-image:nth-of-type(even),
@@ -107,16 +106,9 @@
 .blocks-gallery-grid .blocks-gallery-item figure {
   margin: 0;
   height: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery .blocks-gallery-image figure,
-.wp-block-gallery .blocks-gallery-item figure,
-.blocks-gallery-grid .blocks-gallery-image figure,
-.blocks-gallery-grid .blocks-gallery-item figure {
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
-  }
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
 }
 .wp-block-gallery .blocks-gallery-image img,
 .wp-block-gallery .blocks-gallery-item img,
@@ -125,15 +117,7 @@
   display: block;
   max-width: 100%;
   height: auto;
-  width: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery .blocks-gallery-image img,
-.wp-block-gallery .blocks-gallery-item img,
-.blocks-gallery-grid .blocks-gallery-image img,
-.blocks-gallery-grid .blocks-gallery-item img {
-    width: auto;
-  }
+  width: auto;
 }
 .wp-block-gallery .blocks-gallery-image figcaption,
 .wp-block-gallery .blocks-gallery-item figcaption,
@@ -151,6 +135,7 @@
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
   box-sizing: border-box;
   margin: 0;
+  z-index: 2;
 }
 .wp-block-gallery .blocks-gallery-image figcaption img,
 .wp-block-gallery .blocks-gallery-item figcaption img,
@@ -162,11 +147,6 @@
 .blocks-gallery-grid figcaption {
   flex-grow: 1;
 }
-.wp-block-gallery.is-cropped .blocks-gallery-image, .wp-block-gallery.is-cropped .blocks-gallery-item,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item {
-  align-self: inherit;
-}
 .wp-block-gallery.is-cropped .blocks-gallery-image a,
 .wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a,
 .wp-block-gallery.is-cropped .blocks-gallery-item img,
@@ -175,20 +155,10 @@
 .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
 .blocks-gallery-grid.is-cropped .blocks-gallery-item img {
   width: 100%;
-}
-@supports (position: sticky) {
-  .wp-block-gallery.is-cropped .blocks-gallery-image a,
-.wp-block-gallery.is-cropped .blocks-gallery-image img, .wp-block-gallery.is-cropped .blocks-gallery-item a,
-.wp-block-gallery.is-cropped .blocks-gallery-item img,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image a,
-.blocks-gallery-grid.is-cropped .blocks-gallery-image img,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item a,
-.blocks-gallery-grid.is-cropped .blocks-gallery-item img {
-    height: 100%;
-    flex: 1;
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
+  height: 100%;
+  flex: 1;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 .wp-block-gallery.columns-1 .blocks-gallery-image, .wp-block-gallery.columns-1 .blocks-gallery-item,
 .blocks-gallery-grid.columns-1 .blocks-gallery-image,
@@ -289,4 +259,197 @@
 .wp-block-gallery.aligncenter .blocks-gallery-item figure,
 .blocks-gallery-grid.aligncenter .blocks-gallery-item figure {
   justify-content: center;
+}
+
+.wp-block-gallery:not(.is-cropped) .blocks-gallery-item {
+  align-self: flex-start;
+}
+
+.wp-block-gallery.has-nested-images {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
+  margin: 0 0 var(--gallery-block--gutter-size, 16px) var(--gallery-block--gutter-size, 16px);
+  width: calc(50% - (var(--gallery-block--gutter-size, 16px) / 2));
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):last-of-type:not(#individual-image) {
+  margin-left: 0;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):nth-of-type(even) {
+  margin-left: 0;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image {
+  display: flex;
+  flex-grow: 1;
+  justify-content: center;
+  position: relative;
+  margin-top: auto;
+  margin-bottom: auto;
+  flex-direction: column;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image > div,
+.wp-block-gallery.has-nested-images figure.wp-block-image > a {
+  margin: 0;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  width: auto;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.3) 70%, transparent);
+  bottom: 0;
+  color: #fff;
+  font-size: 13px;
+  right: 0;
+  margin-bottom: 0;
+  max-height: 60%;
+  overflow: auto;
+  padding: 0 8px 8px;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image figcaption img {
+  display: inline;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > div,
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded > a {
+  flex: 1 1 auto;
+}
+.wp-block-gallery.has-nested-images figure.wp-block-image.is-style-rounded figcaption {
+  flex: initial;
+  background: none;
+  color: inherit;
+  margin: 0;
+  padding: 10px 10px 9px;
+  position: relative;
+}
+.wp-block-gallery.has-nested-images figcaption {
+  flex-grow: 1;
+  flex-basis: 100%;
+  text-align: center;
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) img {
+  margin-bottom: var(--gallery-block--gutter-size, 16px);
+}
+.wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) figcaption {
+  bottom: var(--gallery-block--gutter-size, 16px);
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
+  align-self: inherit;
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > div:not(.components-drop-zone),
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a {
+  display: flex;
+}
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
+.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
+  width: 100%;
+  flex: 1 0 0%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image) {
+  margin-left: 0;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(33.3333333333% - (var(--gallery-block--gutter-size, 16px) * 0.6666666667));
+  }
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(25% - (var(--gallery-block--gutter-size, 16px) * 0.75));
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(20% - (var(--gallery-block--gutter-size, 16px) * 0.8));
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(16.6666666667% - (var(--gallery-block--gutter-size, 16px) * 0.8333333333));
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(14.2857142857% - (var(--gallery-block--gutter-size, 16px) * 0.8571428571));
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(12.5% - (var(--gallery-block--gutter-size, 16px) * 0.875));
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+  }
+  .wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image:not(#individual-image):nth-of-type(1n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image):nth-of-type(2n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image):nth-of-type(3n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image):nth-of-type(4n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image):nth-of-type(5n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image):nth-of-type(6n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image):nth-of-type(7n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image):nth-of-type(8n) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
+    margin-left: var(--gallery-block--gutter-size, 16px);
+    width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * 0.6666666667));
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
+    margin-left: 0;
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
+.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
+    width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5));
+  }
+  .wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {
+    width: 100%;
+  }
+}
+.wp-block-gallery.has-nested-images.alignleft, .wp-block-gallery.has-nested-images.alignright {
+  max-width: 420px;
+  width: 100%;
+}
+.wp-block-gallery.has-nested-images.aligncenter {
+  justify-content: center;
 }