vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-03-30 18:24:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Widgets: Introduce Gallery widget for displaying image galleries.

Browse Source 
* 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
This commit is contained in:
Weston Ruter
2017-09-25 06:27:32 +00:00
parent 5c959aa5d8
commit 666912edf9
12 changed files with 965 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/wp-admin/css/widgets.css
View File

@@ -87,7 +87,7 @@
.media-widget-control .placeholder {
border: 1px dashed #b4b9be;
box-sizing: border-box;
cursor: default;
cursor: pointer;
line-height: 20px;
padding: 9px 0;
position: relative;
@@ -162,6 +162,71 @@
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 */
.widget.ui-draggable-dragging {
min-width: 100%;