Skip to content

Commit 666912e

Browse files
westonruterwestonruter
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@41590 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 5c959aa commit 666912e

12 files changed

Lines changed: 965 additions & 12 deletions

File tree

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

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
.media-widget-control .placeholder {
8888
border: 1px dashed #b4b9be;
8989
box-sizing: border-box;
90-
cursor: default;
90+
cursor: pointer;
9191
line-height: 20px;
9292
padding: 9px 0;
9393
position: relative;
@@ -162,6 +162,71 @@
162162
margin: 1em 0;
163163
}
164164

165+
.media-widget-gallery-preview {
166+
display: -webkit-box;
167+
display: flex;
168+
-webkit-box-pack: start;
169+
justify-content: flex-start;
170+
flex-wrap: wrap;
171+
}
172+
173+
.media-widget-preview.media_gallery,
174+
.media-widget-preview.media_image {
175+
cursor: pointer;
176+
}
177+
178+
.media-widget-gallery-preview .gallery-item {
179+
box-sizing: border-box;
180+
width: 50%;
181+
margin: 0;
182+
padding: 1.79104477%;
183+
}
184+
185+
/*
186+
* Use targeted nth-last-child selectors to control the size of each image
187+
* based on how many gallery items are present in the grid.
188+
* See: https://alistapart.com/article/quantity-queries-for-css
189+
*/
190+
.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child,
191+
.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item,
192+
.media-widget-gallery-preview .gallery-item:nth-last-child(n+5),
193+
.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item,
194+
.media-widget-gallery-preview .gallery-item:nth-last-child(n+6),
195+
.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item {
196+
max-width: 33.33%;
197+
}
198+
199+
.media-widget-gallery-preview .gallery-item img {
200+
height: auto;
201+
vertical-align: bottom;
202+
}
203+
204+
.media-widget-gallery-preview .gallery-icon {
205+
position: relative;
206+
}
207+
208+
.media-widget-gallery-preview .gallery-icon-placeholder {
209+
position: absolute;
210+
top: 0;
211+
bottom: 0;
212+
width: 100%;
213+
box-sizing: border-box;
214+
display: -webkit-box;
215+
display: flex;
216+
-webkit-box-align: center;
217+
align-items: center;
218+
-webkit-box-pack: center;
219+
justify-content: center;
220+
background-color: rgba( 0, 0, 0, .5 );
221+
}
222+
223+
.media-widget-gallery-preview .gallery-icon-placeholder-text {
224+
font-weight: 600;
225+
font-size: 2em;
226+
color: white;
227+
}
228+
229+
165230
/* Widget Dragging Helpers */
166231
.widget.ui-draggable-dragging {
167232
min-width: 100%;

0 commit comments

Comments
 (0)