Changeset 41590 for trunk/src/wp-admin/css/widgets.css

Timestamp:

09/25/2017 06:27:32 AM (7 years ago)

Author:

westonruter

Message:

Widgets: Introduce Gallery widget for displaying image galleries.

• Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager.
• Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends WP_Widget_Media in the same way as is done for image, audio, and video widgets.
• Model syncing logic is updated to support booleans and arrays (of integers).
• Placeholder areas in media widgets are now clickable shortcuts for selecting media.
• Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media.

Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce.
See #32417.
Fixes #41914.

File:

• trunk/src/wp-admin/css/widgets.css (modified) (2 diffs)

trunk/src/wp-admin/css/widgets.css

@@ -88 +88 @@
     border: 1px dashed #b4b9be;
     box-sizing: border-box;
-    cursor: default;
+    cursor: pointer;
     line-height: 20px;
     padding: 9px 0;
@@ -162 +162 @@
     margin: 1em 0;
 }
+
+.media-widget-gallery-preview {
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+
+.media-widget-preview.media_gallery,
+.media-widget-preview.media_image {
+    cursor: pointer;
+}
+
+.media-widget-gallery-preview .gallery-item {
+    box-sizing: border-box;
+    width: 50%;
+    margin: 0;
+    padding: 1.79104477%;
+}
+
+/*
+ * Use targeted nth-last-child selectors to control the size of each image
+ * based on how many gallery items are present in the grid.
+ * See: https://alistapart.com/article/quantity-queries-for-css
+ */
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
+.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
+.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
+    max-width: 33.33%;
+}
+
+.media-widget-gallery-preview .gallery-item img {
+    height: auto;
+    vertical-align: bottom;
+}
+
+.media-widget-gallery-preview .gallery-icon {
+    position: relative;
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    box-sizing: border-box;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    background-color: rgba( 0, 0, 0, .5 );
+}
+
+.media-widget-gallery-preview .gallery-icon-placeholder-text {
+    font-weight: 600;
+    font-size: 2em;
+    color: white;
+}
+
 
 /* Widget Dragging Helpers */