From bb97df7b5fc5cf41b19311922172e3ec816224cd Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 25 Sep 2017 06:28:45 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@41590 git-svn-id: http://core.svn.wordpress.org/trunk@41423 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/widgets-rtl.css | 67 +++- wp-admin/css/widgets-rtl.min.css | 2 +- wp-admin/css/widgets.css | 67 +++- wp-admin/css/widgets.min.css | 2 +- wp-admin/js/widgets/media-gallery-widget.js | 325 ++++++++++++++++++ .../js/widgets/media-gallery-widget.min.js | 1 + wp-admin/js/widgets/media-image-widget.js | 10 + wp-admin/js/widgets/media-image-widget.min.js | 2 +- wp-admin/js/widgets/media-widgets.js | 40 ++- wp-admin/js/widgets/media-widgets.min.js | 2 +- wp-includes/default-widgets.php | 3 + wp-includes/script-loader.php | 1 + wp-includes/version.php | 2 +- wp-includes/widgets.php | 2 + .../widgets/class-wp-widget-media-gallery.php | 224 ++++++++++++ wp-includes/widgets/class-wp-widget-media.php | 10 +- 16 files changed, 743 insertions(+), 17 deletions(-) create mode 100644 wp-admin/js/widgets/media-gallery-widget.js create mode 100644 wp-admin/js/widgets/media-gallery-widget.min.js create mode 100644 wp-includes/widgets/class-wp-widget-media-gallery.php diff --git a/wp-admin/css/widgets-rtl.css b/wp-admin/css/widgets-rtl.css index 4e8ff4cc5d..07c020d242 100644 --- a/wp-admin/css/widgets-rtl.css +++ b/wp-admin/css/widgets-rtl.css @@ -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%; diff --git a/wp-admin/css/widgets-rtl.min.css b/wp-admin/css/widgets-rtl.min.css index 6c436f8ffd..16d6e4b8c8 100644 --- a/wp-admin/css/widgets-rtl.min.css +++ b/wp-admin/css/widgets-rtl.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.widget.widget-dirty .widget-control-close-wrapper,.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.sidebar-name,.widget,.widget-placeholder{box-sizing:border-box}.widget{margin:0 auto 10px;position:relative}.widget-top{font-size:13px;font-weight:600;background:#f7f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;cursor:pointer;outline:0}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:16px}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#666}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a0a5aa}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:right;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-left:8px}.media-widget-control .placeholder{border:1px dashed #b4b9be;box-sizing:border-box;cursor:default;line-height:20px;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .media-widget-preview{background:#f1f1f1;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 0 0 3px}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:400 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid{border:1px solid red}.media-widget-image-link{margin:1em 0}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #b4b9be;margin:0 auto 10px;height:45px;width:100%}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative}.sidebar-name-arrow{position:absolute;top:0;left:0;bottom:0}.js .sidebar-name{cursor:pointer}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:nowrap}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#72777c}.inactive-sidebar .description,.widget-holder .description{color:#555d66}#widgets-right .widgets-holder-wrap .description{padding-right:7px;padding-left:7px}div.widget-liquid-left{margin:0;width:38%;float:right}div.widget-liquid-right{float:left;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 0 0 10px}#widgets-left .sidebar-name .sidebar-name-arrow:before{padding:9px}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget-action{display:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{right:auto}.widget-title-action{float:left;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 7px}div#widgets-right .sidebar-name .sidebar-name-arrow:before{top:2px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#72777c;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#ddd}#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-control-edit .add{display:none}.editwidget .widget-inside,.widget-control-edit{display:block;padding:0 15px}.widget-control-edit{color:#666;background:#EEE;line-height:43px;border-right:1px solid #DDD}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#444;border-right:0;outline:#444 solid 1px}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widget-description,.widget-inside,.widgets_access #access-on,.widgets_access .sidebar-name-arrow,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widget-inside{background:#fff}#removing-widget{display:none;font-weight:400;padding-right:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#00a0d2}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear;opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #ccc}.widgets-chooser li{padding:10px 35px 10px 15px;border-bottom:1px solid #ccc;background:#fff;margin:0;cursor:pointer;outline:0;position:relative;transition:background .2s ease-in-out}.widgets-chooser li:focus,.widgets-chooser li:hover{background:rgba(255,255,255,.7)}.widgets-chooser li:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#555d66;position:absolute;top:7px;right:5px}.widgets-chooser li:last-child{border:none}.widgets-chooser li.widgets-chooser-selected{background:#00a0d2;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#fff;position:absolute;top:7px;right:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}.widgets-chooser button{margin-left:5px}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;left:10px;right:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{right:auto;left:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4em}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #e5e5e5}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-left:none;padding-left:0}#widgets-left #available-widgets .widget-top,#widgets-left .inactive-sidebar .widgets-sortables,#widgets-left .sidebar-name{margin-left:0}div.widget-liquid-right{width:100%;float:none}div.widget{margin:0 auto 10px!important;max-width:480px}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:right}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:left}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:right;width:49%}#widgets-right .sidebars-column-1{margin-left:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file +.widget.widget-dirty .widget-control-close-wrapper,.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.js .sidebar-name,.media-widget-preview.media_gallery,.media-widget-preview.media_image,.widget-top .widget-action{cursor:pointer}.widget{margin:0 auto 10px;position:relative;box-sizing:border-box}.widget-top{font-size:13px;font-weight:600;background:#f7f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;outline:0}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:16px}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#666}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a0a5aa}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:right;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-left:8px}.media-widget-control .placeholder{border:1px dashed #b4b9be;box-sizing:border-box;cursor:pointer;line-height:20px;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .media-widget-preview{background:#f1f1f1;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 0 0 3px}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:400 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid{border:1px solid red}.media-widget-image-link{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-gallery-preview .gallery-item{box-sizing:border-box;width:50%;margin:0;padding:1.79104477%}.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:#fff}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #b4b9be;margin:0 auto 10px;height:45px;width:100%;box-sizing:border-box}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative;box-sizing:border-box}.sidebar-name-arrow{position:absolute;top:0;left:0;bottom:0}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:nowrap}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#72777c}.inactive-sidebar .description,.widget-holder .description{color:#555d66}#widgets-right .widgets-holder-wrap .description{padding-right:7px;padding-left:7px}div.widget-liquid-left{margin:0;width:38%;float:right}div.widget-liquid-right{float:left;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 0 0 10px}#widgets-left .sidebar-name .sidebar-name-arrow:before{padding:9px}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget-action{display:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{right:auto}.widget-title-action{float:left;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 7px}div#widgets-right .sidebar-name .sidebar-name-arrow:before{top:2px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#72777c;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#ddd}#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-control-edit .add{display:none}.editwidget .widget-inside,.widget-control-edit{display:block;padding:0 15px}.widget-control-edit{color:#666;background:#EEE;line-height:43px;border-right:1px solid #DDD}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#444;border-right:0;outline:#444 solid 1px}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widget-description,.widget-inside,.widgets_access #access-on,.widgets_access .sidebar-name-arrow,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widget-inside{background:#fff}#removing-widget{display:none;font-weight:400;padding-right:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#00a0d2}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear;opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #ccc}.widgets-chooser li{padding:10px 35px 10px 15px;border-bottom:1px solid #ccc;background:#fff;margin:0;cursor:pointer;outline:0;position:relative;transition:background .2s ease-in-out}.widgets-chooser li:focus,.widgets-chooser li:hover{background:rgba(255,255,255,.7)}.widgets-chooser li:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#555d66;position:absolute;top:7px;right:5px}.widgets-chooser li:last-child{border:none}.widgets-chooser li.widgets-chooser-selected{background:#00a0d2;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#fff;position:absolute;top:7px;right:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}.widgets-chooser button{margin-left:5px}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;left:10px;right:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{right:auto;left:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4em}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #e5e5e5}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-left:none;padding-left:0}#widgets-left #available-widgets .widget-top,#widgets-left .inactive-sidebar .widgets-sortables,#widgets-left .sidebar-name{margin-left:0}div.widget-liquid-right{width:100%;float:none}div.widget{margin:0 auto 10px!important;max-width:480px}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:right}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:left}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:right;width:49%}#widgets-right .sidebars-column-1{margin-left:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file diff --git a/wp-admin/css/widgets.css b/wp-admin/css/widgets.css index f31b63c881..e291590e70 100644 --- a/wp-admin/css/widgets.css +++ b/wp-admin/css/widgets.css @@ -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%; diff --git a/wp-admin/css/widgets.min.css b/wp-admin/css/widgets.min.css index 96ce9da6b3..0dc1112ac7 100644 --- a/wp-admin/css/widgets.min.css +++ b/wp-admin/css/widgets.min.css @@ -1,2 +1,2 @@ /*! This file is auto-generated */ -.widget.widget-dirty .widget-control-close-wrapper,.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.sidebar-name,.widget,.widget-placeholder{box-sizing:border-box}.widget{margin:0 auto 10px;position:relative}.widget-top{font-size:13px;font-weight:600;background:#f7f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;cursor:pointer;outline:0}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:16px}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#666}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a0a5aa}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:left;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-right:8px}.media-widget-control .placeholder{border:1px dashed #b4b9be;box-sizing:border-box;cursor:default;line-height:20px;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .media-widget-preview{background:#f1f1f1;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 3px 0 0}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:400 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid{border:1px solid red}.media-widget-image-link{margin:1em 0}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #b4b9be;margin:0 auto 10px;height:45px;width:100%}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative}.sidebar-name-arrow{position:absolute;top:0;right:0;bottom:0}.js .sidebar-name{cursor:pointer}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:nowrap}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#72777c}.inactive-sidebar .description,.widget-holder .description{color:#555d66}#widgets-right .widgets-holder-wrap .description{padding-left:7px;padding-right:7px}div.widget-liquid-left{margin:0;width:38%;float:left}div.widget-liquid-right{float:right;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 10px 0 0}#widgets-left .sidebar-name .sidebar-name-arrow:before{padding:9px}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget-action{display:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{left:auto}.widget-title-action{float:right;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 7px}div#widgets-right .sidebar-name .sidebar-name-arrow:before{top:2px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#72777c;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#ddd}#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-control-edit .add{display:none}.editwidget .widget-inside,.widget-control-edit{display:block;padding:0 15px}.widget-control-edit{color:#666;background:#EEE;line-height:43px;border-left:1px solid #DDD}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#444;border-left:0;outline:#444 solid 1px}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widget-description,.widget-inside,.widgets_access #access-on,.widgets_access .sidebar-name-arrow,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widget-inside{background:#fff}#removing-widget{display:none;font-weight:400;padding-left:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#00a0d2}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear;opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #ccc}.widgets-chooser li{padding:10px 15px 10px 35px;border-bottom:1px solid #ccc;background:#fff;margin:0;cursor:pointer;outline:0;position:relative;transition:background .2s ease-in-out}.widgets-chooser li:focus,.widgets-chooser li:hover{background:rgba(255,255,255,.7)}.widgets-chooser li:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#555d66;position:absolute;top:7px;left:5px}.widgets-chooser li:last-child{border:none}.widgets-chooser li.widgets-chooser-selected{background:#00a0d2;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#fff;position:absolute;top:7px;left:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}.widgets-chooser button{margin-right:5px}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;right:10px;left:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{left:auto;right:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4em}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #e5e5e5}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-right:none;padding-right:0}#widgets-left #available-widgets .widget-top,#widgets-left .inactive-sidebar .widgets-sortables,#widgets-left .sidebar-name{margin-right:0}div.widget-liquid-right{width:100%;float:none}div.widget{margin:0 auto 10px!important;max-width:480px}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:left}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:right}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:left;width:49%}#widgets-right .sidebars-column-1{margin-right:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file +.widget.widget-dirty .widget-control-close-wrapper,.wp-core-ui .media-widget-control .selected,.wp-core-ui .media-widget-control.selected .not-selected,.wp-core-ui .media-widget-control.selected .placeholder{display:none}.js .sidebar-name,.media-widget-preview.media_gallery,.media-widget-preview.media_image,.widget-top .widget-action{cursor:pointer}.widget{margin:0 auto 10px;position:relative;box-sizing:border-box}.widget-top{font-size:13px;font-weight:600;background:#f7f7f7}.widget-top .widget-action{border:0;margin:0;padding:10px;background:0 0;outline:0}.widget-title h3,.widget-title h4{margin:0;padding:15px;font-size:1em;line-height:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.widgets-holder-wrap .widget-inside{border-top:none;padding:1px 15px 15px;line-height:16px}#available-widgets .widget-description,#widgets-right a.widget-control-edit,.in-widget-title{color:#666}.deleting .widget-title,.deleting .widget-top .widget-action .toggle-indicator:before{color:#a0a5aa}.media-widget-control.selected .selected{display:inline-block}.media-widget-buttons{text-align:left;margin-top:0}.media-widget-control .media-widget-buttons .button{width:auto;height:auto;margin-top:12px;white-space:normal}.media-widget-buttons .button:first-child{margin-right:8px}.media-widget-control .placeholder{border:1px dashed #b4b9be;box-sizing:border-box;cursor:pointer;line-height:20px;padding:9px 0;position:relative;text-align:center;width:100%}.media-widget-control .media-widget-preview{background:#f1f1f1;text-align:center}.media-widget-control .media-widget-preview .notice{text-align:initial}.media-frame .media-widget-embed-notice p code,.media-widget-control .notice p code{padding:0 3px 0 0}.media-frame .media-widget-embed-notice{margin-top:16px}.media-widget-control .media-widget-preview img{max-width:100%;vertical-align:middle}.media-widget-control .media-widget-preview .wp-video-shortcode{background:#000}.media-frame.media-widget .media-toolbar-secondary{min-width:300px}.media-frame.media-widget .attachment-display-settings .setting.align,.media-frame.media-widget .checkbox-setting.autoplay,.media-frame.media-widget .embed-link-settings .setting.link-text,.media-frame.media-widget .embed-media-settings .setting.align,.media-frame.media-widget .image-details .embed-media-settings .setting.align,.media-frame.media-widget .replace-attachment{display:none}.media-widget-video-preview{width:100%}.media-widget-video-link{display:inline-block;min-height:132px;width:100%;background:#000}.media-widget-video-link .dashicons{font:400 60px/1 dashicons;position:relative;width:100%;top:-90px;color:#fff;text-decoration:none}.media-widget-video-link.no-poster .dashicons{top:30px}.media-frame #embed-url-field.invalid{border:1px solid red}.media-widget-image-link{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-gallery-preview .gallery-item{box-sizing:border-box;width:50%;margin:0;padding:1.79104477%}.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:#fff}.widget.ui-draggable-dragging{min-width:100%}.widget.ui-sortable-helper{opacity:.8}.widget-placeholder{border:1px dashed #b4b9be;margin:0 auto 10px;height:45px;width:100%;box-sizing:border-box}#widgets-right .widget-placeholder{margin-top:0}#widgets-right .closed .widget-placeholder{height:0;border:0;margin-top:-10px}.sidebar-name{position:relative;box-sizing:border-box}.sidebar-name-arrow{position:absolute;top:0;right:0;bottom:0}.sidebar-name h2,.sidebar-name h3{margin:0;padding:8px 10px;overflow:hidden;white-space:nowrap}.widgets-holder-wrap .description{padding:0 0 15px;margin:0;font-style:normal;color:#72777c}.inactive-sidebar .description,.widget-holder .description{color:#555d66}#widgets-right .widgets-holder-wrap .description{padding-left:7px;padding-right:7px}div.widget-liquid-left{margin:0;width:38%;float:left}div.widget-liquid-right{float:right;width:58%}div#widgets-left{padding-top:12px}div#widgets-left .closed .sidebar-name,div#widgets-left .inactive-sidebar.closed .sidebar-name{margin-bottom:10px}div#widgets-left .sidebar-name h2,div#widgets-left .sidebar-name h3{padding:10px 0;margin:0 10px 0 0}#widgets-left .sidebar-name .sidebar-name-arrow:before{padding:9px}#widgets-left .widgets-holder-wrap,div#widgets-left .widget-holder{background:0 0;border:none}#widgets-left .widgets-holder-wrap{border:none;box-shadow:none}#available-widgets .widget-action{display:none}#available-widgets .widget{margin:0}#available-widgets .widget:nth-child(odd){clear:both}#available-widgets .widget .widget-description{display:block;padding:10px 15px;font-size:12px;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}#available-widgets #widget-list{position:relative}#widgets-left .inactive-sidebar{clear:both;width:100%;background:0 0;padding:0;margin:0 0 20px;border:none;box-shadow:none}#widgets-left .inactive-sidebar.first{margin-top:40px}div#widgets-left .inactive-sidebar .widget.expanded{left:auto}.widget-title-action{float:right;position:relative}div#widgets-left .inactive-sidebar .widgets-sortables{min-height:42px;padding:0;background:0 0;margin:0;position:relative}div#widgets-right .sidebars-column-1,div#widgets-right .sidebars-column-2{max-width:450px}div#widgets-right .widgets-holder-wrap{margin:10px 0 0}div#widgets-right .sidebar-description{min-height:20px;margin-top:-5px}div#widgets-right .sidebar-name h2,div#widgets-right .sidebar-name h3{padding:15px 7px}div#widgets-right .sidebar-name .sidebar-name-arrow:before{top:2px}div#widgets-right .widget-top{padding:0}div#widgets-right .widgets-sortables{padding:0 8px;margin-bottom:9px;position:relative;min-height:123px}div#widgets-right .closed .widgets-sortables{min-height:0;margin-bottom:0}.remove-inactive-widgets .spinner,.sidebar-name .spinner{float:none;position:relative;top:-2px;margin:-5px 5px}#widgets-right .widgets-holder-wrap.widget-hover{border-color:#72777c;box-shadow:0 1px 2px rgba(0,0,0,.3)}.widgets_access #widgets-left .widget .widget-top{cursor:auto}.widgets_access #wpwrap .widget-control-edit,.widgets_access #wpwrap .widgets-holder-wrap.closed .sidebar-description,.widgets_access #wpwrap .widgets-holder-wrap.closed .widget{display:block}.widgets_access #widgets-left .widget .widget-top:hover,.widgets_access #widgets-right .widget .widget-top:hover{border-color:#ddd}#available-widgets .widget-control-edit .edit,#widgets-left .inactive-sidebar .widget-control-edit .add,#widgets-right .widget-control-edit .add{display:none}.editwidget .widget-inside,.widget-control-edit{display:block;padding:0 15px}.widget-control-edit{color:#666;background:#EEE;line-height:43px;border-left:1px solid #DDD}#widgets-left .widget-control-edit:hover,#widgets-right .widget-control-edit:hover{color:#fff;background:#444;border-left:0;outline:#444 solid 1px}.widgets-holder-wrap .sidebar-description,.widgets-holder-wrap .sidebar-name{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.editwidget{margin:0 auto}.editwidget .widget-control-actions{margin-top:20px}.js .closed br.clear,.js .widgets-holder-wrap.closed .description,.js .widgets-holder-wrap.closed .remove-inactive-widgets,.js .widgets-holder-wrap.closed .sidebar-description,.js .widgets-holder-wrap.closed .widget{display:none}.js .widgets-holder-wrap.closed .widget.ui-sortable-helper{display:block}#access-off,.no-js .widget-holder .description,.widget-control-noform,.widget-description,.widget-inside,.widgets_access #access-on,.widgets_access .sidebar-name-arrow,.widgets_access .widget-action,.widgets_access .widget-holder .description{display:none}.widget-inside{background:#fff}#removing-widget{display:none;font-weight:400;padding-left:15px;font-size:12px;line-height:1;color:#000}.js #removing-widget{color:#00a0d2}.widgets_access #widget-list,.widgets_access .widget-holder{padding-top:10px}.widgets_access #access-off{display:inline}.widgets_access .sidebar-name,.widgets_access .widget .widget-top{cursor:default}.widget-liquid-left #widgets-left.chooser #available-widgets .widget,.widget-liquid-left #widgets-left.chooser .inactive-sidebar{transition:opacity .1s linear;opacity:.2;pointer-events:none}.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question{opacity:1;pointer-events:auto}#available-widgets .widget-top:hover,#widgets-left .widget-in-question .widget-top,#widgets-left .widget-top:hover,.widgets-chooser ul,div#widgets-right .widget-top:hover{border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,.1)}.widgets-chooser ul.widgets-chooser-sidebars{margin:0;list-style-type:none;max-height:300px;overflow:auto}.widgets-chooser{display:none}.widgets-chooser ul{border:1px solid #ccc}.widgets-chooser li{padding:10px 15px 10px 35px;border-bottom:1px solid #ccc;background:#fff;margin:0;cursor:pointer;outline:0;position:relative;transition:background .2s ease-in-out}.widgets-chooser li:focus,.widgets-chooser li:hover{background:rgba(255,255,255,.7)}.widgets-chooser li:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#555d66;position:absolute;top:7px;left:5px}.widgets-chooser li:last-child{border:none}.widgets-chooser li.widgets-chooser-selected{background:#00a0d2;color:#fff}.widgets-chooser li.widgets-chooser-selected:before,.widgets-chooser li.widgets-chooser-selected:focus:before{content:"\f147";display:block;-webkit-font-smoothing:antialiased;font:400 26px/1 dashicons;color:#fff;position:absolute;top:7px;left:5px}.widgets-chooser .widgets-chooser-actions{padding:10px 0 12px;text-align:center}.widgets-chooser button{margin-right:5px}#available-widgets .widget .widget-top{cursor:pointer}#available-widgets .widget.ui-draggable-dragging .widget-top{cursor:move}.text-widget-fields{position:relative}.text-widget-fields [hidden]{display:none}.text-widget-fields .wp-pointer.wp-pointer-top{position:absolute;z-index:3;top:100px;right:10px;left:10px}.text-widget-fields .wp-pointer .wp-pointer-arrow{left:auto;right:15px}.text-widget-fields .wp-pointer .wp-pointer-buttons{line-height:1.4em}.custom-html-widget-fields>p>.CodeMirror{border:1px solid #e5e5e5}.custom-html-widget-fields code{padding-top:1px;padding-bottom:1px}ul.CodeMirror-hints{z-index:101}.widget-control-actions .custom-html-widget-save-button.button.validation-blocked{cursor:not-allowed}@media screen and (max-width:480px){div.widget-liquid-left{width:100%;float:none;border-right:none;padding-right:0}#widgets-left #available-widgets .widget-top,#widgets-left .inactive-sidebar .widgets-sortables,#widgets-left .sidebar-name{margin-right:0}div.widget-liquid-right{width:100%;float:none}div.widget{margin:0 auto 10px!important;max-width:480px}}@media screen and (max-width:320px){div.widget{max-width:320px}}@media only screen and (min-width:1250px){#widgets-left #available-widgets .widget{width:49%;float:left}.widget.ui-draggable-dragging{min-width:49%}#widgets-left #available-widgets .widget:nth-child(even){float:right}#widgets-right .sidebars-column-1,#widgets-right .sidebars-column-2{float:left;width:49%}#widgets-right .sidebars-column-1{margin-right:2%}#widgets-right.single-sidebar .sidebars-column-1,#widgets-right.single-sidebar .sidebars-column-2{float:none;width:100%;margin:0}} \ No newline at end of file diff --git a/wp-admin/js/widgets/media-gallery-widget.js b/wp-admin/js/widgets/media-gallery-widget.js new file mode 100644 index 0000000000..f569968e89 --- /dev/null +++ b/wp-admin/js/widgets/media-gallery-widget.js @@ -0,0 +1,325 @@ +/* eslint consistent-this: [ "error", "control" ] */ +(function( component ) { + 'use strict'; + + var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame; + + /** + * Custom gallery details frame. + * + * @since 4.9.0 + * @class GalleryDetailsMediaFrame + * @constructor + */ + GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend( { + + /** + * Create the default states. + * + * @since 4.9.0 + * @returns {void} + */ + createStates: function createStates() { + this.states.add([ + new wp.media.controller.Library({ + id: 'gallery', + title: wp.media.view.l10n.createGalleryTitle, + priority: 40, + toolbar: 'main-gallery', + filterable: 'uploaded', + multiple: 'add', + editable: true, + + library: wp.media.query( _.defaults({ + type: 'image' + }, this.options.library ) ) + }), + + // Gallery states. + new wp.media.controller.GalleryEdit({ + library: this.options.selection, + editing: this.options.editing, + menu: 'gallery' + }), + + new wp.media.controller.GalleryAdd() + ]); + } + } ); + + /** + * Gallery widget model. + * + * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @since 4.9.0 + * @class GalleryWidgetModel + * @constructor + */ + GalleryWidgetModel = component.MediaWidgetModel.extend( {} ); + + /** + * Gallery widget control. + * + * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports. + * + * @since 4.9.0 + * @class GalleryWidgetControl + * @constructor + */ + GalleryWidgetControl = component.MediaWidgetControl.extend( { + + /** + * View events. + * + * @since 4.9.0 + * @type {object} + */ + events: _.extend( {}, component.MediaWidgetControl.prototype.events, { + 'click .media-widget-gallery-preview': 'editMedia' + } ), + + /** + * Initialize. + * + * @since 4.9.0 + * @param {Object} options - Options. + * @param {Backbone.Model} options.model - Model. + * @param {jQuery} options.el - Control field container element. + * @param {jQuery} options.syncContainer - Container element where fields are synced for the server. + * @returns {void} + */ + initialize: function initialize( options ) { + var control = this; + + component.MediaWidgetControl.prototype.initialize.call( control, options ); + + _.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' ); + control.selectedAttachments = new wp.media.model.Attachments(); + control.model.on( 'change:ids', control.updateSelectedAttachments ); + control.selectedAttachments.on( 'change', control.renderPreview ); + control.selectedAttachments.on( 'reset', control.renderPreview ); + control.updateSelectedAttachments(); + }, + + /** + * Update the selected attachments if necessary. + * + * @since 4.9.0 + * @returns {void} + */ + updateSelectedAttachments: function updateSelectedAttachments() { + var control = this, newIds, oldIds, removedIds, addedIds, addedQuery; + + newIds = control.model.get( 'ids' ); + oldIds = _.pluck( control.selectedAttachments.models, 'id' ); + + removedIds = _.difference( oldIds, newIds ); + _.each( removedIds, function( removedId ) { + control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) ); + }); + + addedIds = _.difference( newIds, oldIds ); + if ( addedIds.length ) { + addedQuery = wp.media.query({ + order: 'ASC', + orderby: 'post__in', + perPage: -1, + post__in: newIds, + query: true, + type: 'image' + }); + addedQuery.more().done( function() { + control.selectedAttachments.reset( addedQuery.models ); + }); + } + }, + + /** + * Render preview. + * + * @since 4.9.0 + * @returns {void} + */ + renderPreview: function renderPreview() { + var control = this, previewContainer, previewTemplate, data; + + previewContainer = control.$el.find( '.media-widget-preview' ); + previewTemplate = wp.template( 'wp-media-widget-gallery-preview' ); + + data = control.previewTemplateProps.toJSON(); + data.attachments = {}; + control.selectedAttachments.each( function( attachment ) { + data.attachments[ attachment.id ] = attachment.toJSON(); + } ); + + previewContainer.html( previewTemplate( data ) ); + }, + + /** + * Determine whether there are selected attachments. + * + * @since 4.9.0 + * @returns {boolean} Selected. + */ + isSelected: function isSelected() { + var control = this; + + if ( control.model.get( 'error' ) ) { + return false; + } + + return control.model.get( 'ids' ).length > 0; + }, + + /** + * Open the media select frame to edit images. + * + * @since 4.9.0 + * @returns {void} + */ + editMedia: function editMedia() { + var control = this, selection, mediaFrame, mediaFrameProps; + + selection = new wp.media.model.Selection( control.selectedAttachments.models, { + multiple: true + }); + + mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() ); + selection.gallery = new Backbone.Model( _.pick( mediaFrameProps, 'columns', 'link', 'size', '_orderbyRandom' ) ); + if ( mediaFrameProps.size ) { + control.displaySettings.set( 'size', mediaFrameProps.size ); + } + mediaFrame = new GalleryDetailsMediaFrame({ + frame: 'manage', + text: control.l10n.add_to_widget, + selection: selection, + mimeType: control.mime_type, + selectedDisplaySettings: control.displaySettings, + showDisplaySettings: control.showDisplaySettings, + metadata: mediaFrameProps, + editing: true, + multiple: true, + state: 'gallery-edit' + }); + wp.media.frame = mediaFrame; // See wp.media(). + + // Handle selection of a media item. + mediaFrame.on( 'update', function onUpdate( newSelection ) { + var state = mediaFrame.state(), resultSelection; + + resultSelection = newSelection || state.get( 'selection' ); + if ( ! resultSelection ) { + return; + } + + // Copy orderby_random from gallery state. + if ( resultSelection.gallery ) { + control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) ); + } + + // Directly update selectedAttachments to prevent needing to do additional request. + control.selectedAttachments.reset( resultSelection.models ); + + // Update models in the widget instance. + control.model.set( { + ids: _.pluck( resultSelection.models, 'id' ) + } ); + } ); + + mediaFrame.$el.addClass( 'media-widget' ); + mediaFrame.open(); + + if ( selection ) { + selection.on( 'destroy', control.handleAttachmentDestroy ); + } + }, + + /** + * Open the media select frame to chose an item. + * + * @since 4.9.0 + * @returns {void} + */ + selectMedia: function selectMedia() { + var control = this, selection, mediaFrame, mediaFrameProps; + selection = new wp.media.model.Selection( control.selectedAttachments.models, { + multiple: true + }); + + mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() ); + if ( mediaFrameProps.size ) { + control.displaySettings.set( 'size', mediaFrameProps.size ); + } + mediaFrame = new GalleryDetailsMediaFrame({ + frame: 'select', + text: control.l10n.add_to_widget, + selection: selection, + mimeType: control.mime_type, + selectedDisplaySettings: control.displaySettings, + showDisplaySettings: control.showDisplaySettings, + metadata: mediaFrameProps, + state: 'gallery' + }); + wp.media.frame = mediaFrame; // See wp.media(). + + // Handle selection of a media item. + mediaFrame.on( 'update', function onUpdate( newSelection ) { + var state = mediaFrame.state(), resultSelection; + + resultSelection = newSelection || state.get( 'selection' ); + if ( ! resultSelection ) { + return; + } + + // Copy orderby_random from gallery state. + if ( resultSelection.gallery ) { + control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) ); + } + + // Directly update selectedAttachments to prevent needing to do additional request. + control.selectedAttachments.reset( resultSelection.models ); + + // Update widget instance. + control.model.set( { + ids: _.pluck( resultSelection.models, 'id' ) + } ); + } ); + + mediaFrame.$el.addClass( 'media-widget' ); + mediaFrame.open(); + + if ( selection ) { + selection.on( 'destroy', control.handleAttachmentDestroy ); + } + + /* + * Make sure focus is set inside of modal so that hitting Esc will close + * the modal and not inadvertently cause the widget to collapse in the customizer. + */ + mediaFrame.$el.find( ':focusable:first' ).focus(); + }, + + /** + * Clear the selected attachment when it is deleted in the media select frame. + * + * @since 4.9.0 + * @param {wp.media.models.Attachment} attachment - Attachment. + * @returns {void} + */ + handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) { + var control = this; + control.model.set( { + ids: _.difference( + control.model.get( 'ids' ), + [ attachment.id ] + ) + } ); + } + } ); + + // Exports. + component.controlConstructors.media_gallery = GalleryWidgetControl; + component.modelConstructors.media_gallery = GalleryWidgetModel; + +})( wp.mediaWidgets ); diff --git a/wp-admin/js/widgets/media-gallery-widget.min.js b/wp-admin/js/widgets/media-gallery-widget.min.js new file mode 100644 index 0000000000..212c7dde9e --- /dev/null +++ b/wp-admin/js/widgets/media-gallery-widget.min.js @@ -0,0 +1 @@ +!function(a){"use strict";var b,c,d;d=wp.media.view.MediaFrame.Post.extend({createStates:function(){this.states.add([new wp.media.controller.Library({id:"gallery",title:wp.media.view.l10n.createGalleryTitle,priority:40,toolbar:"main-gallery",filterable:"uploaded",multiple:"add",editable:!0,library:wp.media.query(_.defaults({type:"image"},this.options.library))}),new wp.media.controller.GalleryEdit({library:this.options.selection,editing:this.options.editing,menu:"gallery"}),new wp.media.controller.GalleryAdd])}}),b=a.MediaWidgetModel.extend({}),c=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-gallery-preview":"editMedia"}),initialize:function(b){var c=this;a.MediaWidgetControl.prototype.initialize.call(c,b),_.bindAll(c,"updateSelectedAttachments","handleAttachmentDestroy"),c.selectedAttachments=new wp.media.model.Attachments,c.model.on("change:ids",c.updateSelectedAttachments),c.selectedAttachments.on("change",c.renderPreview),c.selectedAttachments.on("reset",c.renderPreview),c.updateSelectedAttachments()},updateSelectedAttachments:function(){var a,b,c,d,e,f=this;a=f.model.get("ids"),b=_.pluck(f.selectedAttachments.models,"id"),c=_.difference(b,a),_.each(c,function(a){f.selectedAttachments.remove(f.selectedAttachments.get(a))}),d=_.difference(a,b),d.length&&(e=wp.media.query({order:"ASC",orderby:"post__in",perPage:-1,post__in:a,query:!0,type:"image"}),e.more().done(function(){f.selectedAttachments.reset(e.models)}))},renderPreview:function(){var a,b,c,d=this;a=d.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-gallery-preview"),c=d.previewTemplateProps.toJSON(),c.attachments={},d.selectedAttachments.each(function(a){c.attachments[a.id]=a.toJSON()}),a.html(b(c))},isSelected:function(){var a=this;return!a.model.get("error")&&a.model.get("ids").length>0},editMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),a.gallery=new Backbone.Model(_.pick(c,"columns","link","size","_orderbyRandom")),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"manage",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,editing:!0,multiple:!0,state:"gallery-edit"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy)},selectMedia:function(){var a,b,c,e=this;a=new wp.media.model.Selection(e.selectedAttachments.models,{multiple:!0}),c=e.mapModelToMediaFrameProps(e.model.toJSON()),c.size&&e.displaySettings.set("size",c.size),b=new d({frame:"select",text:e.l10n.add_to_widget,selection:a,mimeType:e.mime_type,selectedDisplaySettings:e.displaySettings,showDisplaySettings:e.showDisplaySettings,metadata:c,state:"gallery"}),wp.media.frame=b,b.on("update",function(a){var c,d=b.state();c=a||d.get("selection"),c&&(c.gallery&&e.model.set(e.mapMediaToModelProps(c.gallery.toJSON())),e.selectedAttachments.reset(c.models),e.model.set({ids:_.pluck(c.models,"id")}))}),b.$el.addClass("media-widget"),b.open(),a&&a.on("destroy",e.handleAttachmentDestroy),b.$el.find(":focusable:first").focus()},handleAttachmentDestroy:function(a){var b=this;b.model.set({ids:_.difference(b.model.get("ids"),[a.id])})}}),a.controlConstructors.media_gallery=c,a.modelConstructors.media_gallery=b}(wp.mediaWidgets); \ No newline at end of file diff --git a/wp-admin/js/widgets/media-image-widget.js b/wp-admin/js/widgets/media-image-widget.js index ddbe6b3e24..78b257feae 100644 --- a/wp-admin/js/widgets/media-image-widget.js +++ b/wp-admin/js/widgets/media-image-widget.js @@ -24,6 +24,15 @@ */ ImageWidgetControl = component.MediaWidgetControl.extend({ + /** + * View events. + * + * @type {object} + */ + events: _.extend( {}, component.MediaWidgetControl.prototype.events, { + 'click .media-widget-preview.populated': 'editMedia' + } ), + /** * Render preview. * @@ -38,6 +47,7 @@ previewContainer = control.$el.find( '.media-widget-preview' ); previewTemplate = wp.template( 'wp-media-widget-image-preview' ); previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) ); + previewContainer.addClass( 'populated' ); linkInput = control.$el.find( '.link' ); if ( ! linkInput.is( document.activeElement ) ) { diff --git a/wp-admin/js/widgets/media-image-widget.min.js b/wp-admin/js/widgets/media-image-widget.min.js index 654d2a12f2..901d5c4126 100644 --- a/wp-admin/js/widgets/media-image-widget.min.js +++ b/wp-admin/js/widgets/media-image-widget.min.js @@ -1 +1 @@ -!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery); \ No newline at end of file +!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({events:_.extend({},a.MediaWidgetControl.prototype.events,{"click .media-widget-preview.populated":"editMedia"}),renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),a.addClass("populated"),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery); \ No newline at end of file diff --git a/wp-admin/js/widgets/media-widgets.js b/wp-admin/js/widgets/media-widgets.js index e3bc41c480..5e7383c6fc 100644 --- a/wp-admin/js/widgets/media-widgets.js +++ b/wp-admin/js/widgets/media-widgets.js @@ -429,6 +429,7 @@ wp.mediaWidgets = ( function( $ ) { events: { 'click .notice-missing-attachment a': 'handleMediaLibraryLinkClick', 'click .select-media': 'selectMedia', + 'click .placeholder': 'selectMedia', 'click .edit-media': 'editMedia' }, @@ -591,17 +592,25 @@ wp.mediaWidgets = ( function( $ ) { syncModelToInputs: function syncModelToInputs() { var control = this; control.syncContainer.find( '.media-widget-instance-property' ).each( function() { - var input = $( this ), value; - value = control.model.get( input.data( 'property' ) ); + var input = $( this ), value, propertyName; + propertyName = input.data( 'property' ); + value = control.model.get( propertyName ); if ( _.isUndefined( value ) ) { return; } - value = String( value ); - if ( input.val() === value ) { - return; + + if ( 'array' === control.model.schema[ propertyName ].type && _.isArray( value ) ) { + value = value.join( ',' ); + } else if ( 'boolean' === control.model.schema[ propertyName ].type ) { + value = value ? '1' : ''; // Because in PHP, strval( true ) === '1' && strval( false ) === ''. + } else { + value = String( value ); + } + + if ( input.val() !== value ) { + input.val( value ); + input.trigger( 'change' ); } - input.val( value ); - input.trigger( 'change' ); }); }, @@ -1002,7 +1011,22 @@ wp.mediaWidgets = ( function( $ ) { return; } type = model.schema[ name ].type; - if ( 'integer' === type ) { + if ( 'array' === type ) { + castedAttrs[ name ] = value; + if ( ! _.isArray( castedAttrs[ name ] ) ) { + castedAttrs[ name ] = castedAttrs[ name ].split( /,/ ); // Good enough for parsing an ID list. + } + if ( model.schema[ name ].items && 'integer' === model.schema[ name ].items.type ) { + castedAttrs[ name ] = _.filter( + _.map( castedAttrs[ name ], function( id ) { + return parseInt( id, 10 ); + }, + function( id ) { + return 'number' === typeof id; + } + ) ); + } + } else if ( 'integer' === type ) { castedAttrs[ name ] = parseInt( value, 10 ); } else if ( 'boolean' === type ) { castedAttrs[ name ] = ! ( ! value || '0' === value || 'false' === value ); diff --git a/wp-admin/js/widgets/media-widgets.min.js b/wp-admin/js/widgets/media-widgets.min.js index aa5533e9b3..d208b4faca 100644 --- a/wp-admin/js/widgets/media-widgets.min.js +++ b/wp-admin/js/widgets/media-widgets.min.js @@ -1 +1 @@ -wp.mediaWidgets=function(a){"use strict";var b={};return b.controlConstructors={},b.modelConstructors={},b.PersistentDisplaySettingsLibrary=wp.media.controller.Library.extend({initialize:function(a){_.bindAll(this,"handleDisplaySettingChange"),wp.media.controller.Library.prototype.initialize.call(this,a)},handleDisplaySettingChange:function(a){this.get("selectedDisplaySettings").set(a.attributes)},display:function(a){var b,c=this.get("selectedDisplaySettings");return b=wp.media.controller.Library.prototype.display.call(this,a),b.off("change",this.handleDisplaySettingChange),b.set(c.attributes),"custom"===c.get("link_type")&&(b.linkUrl=c.get("link_url")),b.on("change",this.handleDisplaySettingChange),b}}),b.MediaEmbedView=wp.media.view.Embed.extend({refresh:function(){var b;b="image"===this.controller.options.mimeType?wp.media.view.EmbedImage:wp.media.view.EmbedLink.extend({setAddToWidgetButtonDisabled:function(a){this.views.parent.views.parent.views.get(".media-frame-toolbar")[0].$el.find(".media-button-select").prop("disabled",a)},setErrorNotice:function(b){var c,d=this;c=d.views.parent.$el.find("> .notice:first-child"),b?(c.length||(c=a('
'),c.hide(),d.views.parent.$el.prepend(c)),c.empty(),c.append(a("

",{html:b})),c.slideDown("fast")):c.length&&c.slideUp("fast")},fetch:function(){var b,c,d,e,f,g,h,i=this;return i.dfd&&"pending"===i.dfd.state()&&i.dfd.abort(),i.model.get("url")?(b=function(b){i.renderoEmbed({data:{body:b}}),a("#embed-url-field").removeClass("invalid"),i.setErrorNotice(""),i.setAddToWidgetButtonDisabled(!1)},e=document.createElement("a"),e.href=i.model.get("url"),(c=e.pathname.toLowerCase().match(/\.(\w+)$/))?(d=c[1],void(wp.media.view.settings.embedMimes[d]?0!==wp.media.view.settings.embedMimes[d].indexOf(i.controller.options.mimeType)?i.renderFail():b(""):i.renderFail())):"video"!==this.controller.options.mimeType||/vimeo|youtu\.?be/.test(e.host)?(f=i.model.get("url"),g=/https?:\/\/www\.youtube\.com\/embed\/([^\/]+)/,h=g.exec(f),h&&(f="https://www.youtube.com/watch?v="+h[1],i.model.attributes.url=f),i.dfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:f,maxwidth:i.model.get("width"),maxheight:i.model.get("height"),discover:!1},type:"GET",dataType:"json",context:i}),i.dfd.done(function(a){return i.controller.options.mimeType!==a.type?void i.renderFail():void b(a.html)}),void i.dfd.fail(_.bind(i.renderFail,i))):void i.renderFail()):void i.setErrorNotice("")},renderFail:function(){var b=this;a("#embed-url-field").addClass("invalid"),b.setErrorNotice(b.controller.options.invalidEmbedTypeError||"ERROR"),b.setAddToWidgetButtonDisabled(!0)}}),this.settings(new b({controller:this.controller,model:this.model.props,priority:40}))}}),b.MediaFrameSelect=wp.media.view.MediaFrame.Post.extend({createStates:function(){var a=this.options.mimeType,c=[];_.each(wp.media.view.settings.embedMimes,function(b){0===b.indexOf(a)&&c.push(b)}),c.length>0&&(a=c),this.states.add([new b.PersistentDisplaySettingsLibrary({id:"insert",title:this.options.title,selection:this.options.selection,priority:20,toolbar:"main-insert",filterable:"dates",library:wp.media.query({type:a}),multiple:!1,editable:!0,selectedDisplaySettings:this.options.selectedDisplaySettings,displaySettings:!!_.isUndefined(this.options.showDisplaySettings)||this.options.showDisplaySettings,displayUserSettings:!1}),new wp.media.controller.EditImage({model:this.options.editImage}),new wp.media.controller.Embed({metadata:this.options.metadata,type:"image"===this.options.mimeType?"image":"link",invalidEmbedTypeError:this.options.invalidEmbedTypeError})])},mainInsertToolbar:function(a){var b=this;a.set("insert",{style:"primary",priority:80,text:b.options.text,requires:{selection:!0},click:function(){var a=b.state(),c=a.get("selection");b.close(),a.trigger("insert",c).reset()}})},mainEmbedToolbar:function(a){a.view=new wp.media.view.Toolbar.Embed({controller:this,text:this.options.text,event:"insert"})},embedContent:function(){var a=new b.MediaEmbedView({controller:this,model:this.state()}).render();this.content.set(a),wp.media.isTouchDevice||a.url.focus()}}),b.MediaWidgetControl=Backbone.View.extend({l10n:{add_to_widget:"{{add_to_widget}}",add_media:"{{add_media}}"},id_base:"",mime_type:"",events:{"click .notice-missing-attachment a":"handleMediaLibraryLinkClick","click .select-media":"selectMedia","click .edit-media":"editMedia"},showDisplaySettings:!0,initialize:function(c){var d=this;if(Backbone.View.prototype.initialize.call(d,c),!(d.model instanceof b.MediaWidgetModel))throw new Error("Missing options.model");if(!c.el)throw new Error("Missing options.el");if(!c.syncContainer)throw new Error("Missing options.syncContainer");if(d.syncContainer=c.syncContainer,d.$el.addClass("media-widget-control"),_.bindAll(d,"syncModelToInputs","render","updateSelectedAttachment","renderPreview"),!d.id_base&&(_.find(b.controlConstructors,function(a,b){return d instanceof a&&(d.id_base=b,!0)}),!d.id_base))throw new Error("Missing id_base.");d.previewTemplateProps=new Backbone.Model(d.mapModelToPreviewTemplateProps()),d.selectedAttachment=new wp.media.model.Attachment,d.renderPreview=_.debounce(d.renderPreview),d.listenTo(d.previewTemplateProps,"change",d.renderPreview),d.model.on("change:attachment_id",d.updateSelectedAttachment),d.model.on("change:url",d.updateSelectedAttachment),d.updateSelectedAttachment(),d.listenTo(d.model,"change",d.syncModelToInputs),d.listenTo(d.model,"change",d.syncModelToPreviewProps),d.listenTo(d.model,"change",d.render),d.$el.on("input change",".title",function(){d.model.set({title:a.trim(a(this).val())})}),d.$el.on("input change",".link",function(){var b=a.trim(a(this).val()),c="custom";d.selectedAttachment.get("linkUrl")===b||d.selectedAttachment.get("link")===b?c="post":d.selectedAttachment.get("url")===b&&(c="file"),d.model.set({link_url:b,link_type:c}),d.displaySettings.set({link:c,linkUrl:b})}),d.displaySettings=new Backbone.Model(_.pick(d.mapModelToMediaFrameProps(_.extend(d.model.defaults(),d.model.toJSON())),_.keys(wp.media.view.settings.defaultProps)))},updateSelectedAttachment:function(){var a,b=this;0===b.model.get("attachment_id")?(b.selectedAttachment.clear(),b.model.set("error",!1)):b.model.get("attachment_id")!==b.selectedAttachment.get("id")&&(a=new wp.media.model.Attachment({id:b.model.get("attachment_id")}),a.fetch().done(function(){b.model.set("error",!1),b.selectedAttachment.set(a.toJSON())}).fail(function(){b.model.set("error","missing_attachment")}))},syncModelToPreviewProps:function(){var a=this;a.previewTemplateProps.set(a.mapModelToPreviewTemplateProps())},syncModelToInputs:function(){var b=this;b.syncContainer.find(".media-widget-instance-property").each(function(){var c,d=a(this);c=b.model.get(d.data("property")),_.isUndefined(c)||(c=String(c),d.val()!==c&&(d.val(c),d.trigger("change")))})},template:function(){var b=this;if(!a("#tmpl-widget-media-"+b.id_base+"-control").length)throw new Error("Missing widget control template for "+b.id_base);return wp.template("widget-media-"+b.id_base+"-control")},render:function(){var a,b=this;b.templateRendered||(b.$el.html(b.template()(b.model.toJSON())),b.renderPreview(),b.templateRendered=!0),a=b.$el.find(".title"),a.is(document.activeElement)||a.val(b.model.get("title")),b.$el.toggleClass("selected",b.isSelected())},renderPreview:function(){throw new Error("renderPreview must be implemented")},isSelected:function(){var a=this;return!a.model.get("error")&&Boolean(a.model.get("attachment_id")||a.model.get("url"))},handleMediaLibraryLinkClick:function(a){var b=this;a.preventDefault(),b.selectMedia()},selectMedia:function(){var c,d,e,f,g=this,h=[];g.isSelected()&&0!==g.model.get("attachment_id")&&h.push(g.selectedAttachment),c=new wp.media.model.Selection(h,{multiple:!1}),f=g.mapModelToMediaFrameProps(g.model.toJSON()),f.size&&g.displaySettings.set("size",f.size),d=new b.MediaFrameSelect({title:g.l10n.add_media,frame:"post",text:g.l10n.add_to_widget,selection:c,mimeType:g.mime_type,selectedDisplaySettings:g.displaySettings,showDisplaySettings:g.showDisplaySettings,metadata:f,state:g.isSelected()&&0===g.model.get("attachment_id")?"embed":"insert",invalidEmbedTypeError:g.l10n.unsupported_file_type}),wp.media.frame=d,d.on("insert",function(){var a={},b=d.state();"embed"===b.get("id")?_.extend(a,{id:0},b.props.toJSON()):_.extend(a,b.get("selection").first().toJSON()),g.selectedAttachment.set(a),g.model.set("error",!1),g.model.set(g.getModelPropsFromMediaFrame(d))}),e=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(b){return"delete"===b?e.apply(this,arguments):a.Deferred().rejectWith(this).promise()},d.on("close",function(){wp.media.model.Attachment.prototype.sync=e}),d.$el.addClass("media-widget"),d.open(),c&&c.on("destroy",function(a){g.model.get("attachment_id")===a.get("id")&&g.model.set({attachment_id:0,url:""})}),d.$el.find(".media-frame-menu .media-menu-item.active").focus()},getModelPropsFromMediaFrame:function(a){var b,c,d,e=this;if(b=a.state(),"insert"===b.get("id"))c=b.get("selection").first().toJSON(),c.postUrl=c.link,e.showDisplaySettings&&_.extend(c,a.content.get(".attachments-browser").sidebar.get("display").model.toJSON()),c.sizes&&c.size&&c.sizes[c.size]&&(c.url=c.sizes[c.size].url);else{if("embed"!==b.get("id"))throw new Error("Unexpected state: "+b.get("id"));c=_.extend(b.props.toJSON(),{attachment_id:0},e.model.getEmbedResetProps())}return c.id&&(c.attachment_id=c.id),d=e.mapMediaToModelProps(c),_.each(wp.media.view.settings.embedExts,function(a){a in e.model.schema&&d.url!==d[a]&&(d[a]="")}),d},mapMediaToModelProps:function(a){var b,c=this,d={},e={};return _.each(c.model.schema,function(a,b){"title"!==b&&(d[a.media_prop||b]=b)}),_.each(a,function(a,b){var f=d[b]||b;c.model.schema[f]&&(e[f]=a)}),"custom"===a.size&&(e.width=a.customWidth,e.height=a.customHeight),"post"===a.link?e.link_url=a.postUrl||a.linkUrl:"file"===a.link&&(e.link_url=a.url),!a.attachment_id&&a.id&&(e.attachment_id=a.id),a.url&&(b=a.url.replace(/#.*$/,"").replace(/\?.*$/,"").split(".").pop().toLowerCase(),b in c.model.schema&&(e[b]=a.url)),_.omit(e,"title")},mapModelToMediaFrameProps:function(a){var b=this,c={};return _.each(a,function(a,d){var e=b.model.schema[d]||{};c[e.media_prop||d]=a}),c.attachment_id=c.id,"custom"===c.size&&(c.customWidth=b.model.get("width"),c.customHeight=b.model.get("height")),c},mapModelToPreviewTemplateProps:function(){var a=this,b={};return _.each(a.model.schema,function(c,d){c.hasOwnProperty("should_preview_update")&&!c.should_preview_update||(b[d]=a.model.get(d))}),b.error=a.model.get("error"),b},editMedia:function(){throw new Error("editMedia not implemented")}}),b.MediaWidgetModel=Backbone.Model.extend({idAttribute:"widget_id",schema:{title:{type:"string","default":""},attachment_id:{type:"integer","default":0},url:{type:"string","default":""}},defaults:function(){var a={};return _.each(this.schema,function(b,c){a[c]=b["default"]}),a},set:function(a,b,c){var d,e,f,g=this;return null===a?g:("object"==typeof a?(d=a,e=b):(d={},d[a]=b,e=c),f={},_.each(d,function(a,b){var c;return g.schema[b]?(c=g.schema[b].type,void("integer"===c?f[b]=parseInt(a,10):"boolean"===c?f[b]=!(!a||"0"===a||"false"===a):f[b]=a)):void(f[b]=a)}),Backbone.Model.prototype.set.call(this,f,e))},getEmbedResetProps:function(){return{id:0}}}),b.modelCollection=new(Backbone.Collection.extend({model:b.MediaWidgetModel})),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l,m,n,o,p=50;g=d.find("> .widget-inside > .form, > .widget-inside > form"),h=g.find("> .id_base").val(),n=g.find("> .widget-id").val(),b.widgetControls[n]||(i=b.controlConstructors[h],i&&(j=b.modelConstructors[h]||b.MediaWidgetModel,e=a("

"),f=d.find(".widget-content:first"),f.before(e),k={},f.find(".media-widget-instance-property").each(function(){var b=a(this);k[b.data("property")]=b.val()}),k.widget_id=n,m=new j(k),l=new i({el:e,syncContainer:f,model:m}),o=function(){d.hasClass("open")?l.render():setTimeout(o,p)},o(),b.modelCollection.add([m]),b.widgetControls[m.get("widget_id")]=l))},b.setupAccessibleMode=function(){var c,d,e,f,g,h,i,j,k;c=a(".editwidget > form"),0!==c.length&&(e=c.find("> .widget-control-actions > .id_base").val(),g=b.controlConstructors[e],g&&(d=c.find("> .widget-control-actions > .widget-id").val(),h=b.modelConstructors[e]||b.MediaWidgetModel,j=a("
"),k=c.find("> .widget-inside"),k.before(j),i={},k.find(".media-widget-instance-property").each(function(){var b=a(this);i[b.data("property")]=b.val()}),i.widget_id=d,f=new g({el:j,syncContainer:k,model:new h(i)}),b.modelCollection.add([f.model]),b.widgetControls[f.model.get("widget_id")]=f,f.render()))},b.handleWidgetUpdated=function(c,d){var e,f,g,h,i={};e=d.find("> .widget-inside > .form, > .widget-inside > form"),g=e.find("> .widget-id").val(),h=b.widgetControls[g],h&&(f=e.find("> .widget-content"),f.find(".media-widget-instance-property").each(function(){var b=a(this).data("property");i[b]=a(this).val()}),h.stopListening(h.model,"change",h.syncModelToInputs),h.model.set(i),h.listenTo(h.model,"change",h.syncModelToInputs))},b.init=function(){var c=a(document);c.on("widget-added",b.handleWidgetAdded),c.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery); \ No newline at end of file +wp.mediaWidgets=function(a){"use strict";var b={};return b.controlConstructors={},b.modelConstructors={},b.PersistentDisplaySettingsLibrary=wp.media.controller.Library.extend({initialize:function(a){_.bindAll(this,"handleDisplaySettingChange"),wp.media.controller.Library.prototype.initialize.call(this,a)},handleDisplaySettingChange:function(a){this.get("selectedDisplaySettings").set(a.attributes)},display:function(a){var b,c=this.get("selectedDisplaySettings");return b=wp.media.controller.Library.prototype.display.call(this,a),b.off("change",this.handleDisplaySettingChange),b.set(c.attributes),"custom"===c.get("link_type")&&(b.linkUrl=c.get("link_url")),b.on("change",this.handleDisplaySettingChange),b}}),b.MediaEmbedView=wp.media.view.Embed.extend({refresh:function(){var b;b="image"===this.controller.options.mimeType?wp.media.view.EmbedImage:wp.media.view.EmbedLink.extend({setAddToWidgetButtonDisabled:function(a){this.views.parent.views.parent.views.get(".media-frame-toolbar")[0].$el.find(".media-button-select").prop("disabled",a)},setErrorNotice:function(b){var c,d=this;c=d.views.parent.$el.find("> .notice:first-child"),b?(c.length||(c=a('
'),c.hide(),d.views.parent.$el.prepend(c)),c.empty(),c.append(a("

",{html:b})),c.slideDown("fast")):c.length&&c.slideUp("fast")},fetch:function(){var b,c,d,e,f,g,h,i=this;return i.dfd&&"pending"===i.dfd.state()&&i.dfd.abort(),i.model.get("url")?(b=function(b){i.renderoEmbed({data:{body:b}}),a("#embed-url-field").removeClass("invalid"),i.setErrorNotice(""),i.setAddToWidgetButtonDisabled(!1)},e=document.createElement("a"),e.href=i.model.get("url"),(c=e.pathname.toLowerCase().match(/\.(\w+)$/))?(d=c[1],void(wp.media.view.settings.embedMimes[d]?0!==wp.media.view.settings.embedMimes[d].indexOf(i.controller.options.mimeType)?i.renderFail():b(""):i.renderFail())):"video"!==this.controller.options.mimeType||/vimeo|youtu\.?be/.test(e.host)?(f=i.model.get("url"),g=/https?:\/\/www\.youtube\.com\/embed\/([^\/]+)/,h=g.exec(f),h&&(f="https://www.youtube.com/watch?v="+h[1],i.model.attributes.url=f),i.dfd=wp.apiRequest({url:wp.media.view.settings.oEmbedProxyUrl,data:{url:f,maxwidth:i.model.get("width"),maxheight:i.model.get("height"),discover:!1},type:"GET",dataType:"json",context:i}),i.dfd.done(function(a){return i.controller.options.mimeType!==a.type?void i.renderFail():void b(a.html)}),void i.dfd.fail(_.bind(i.renderFail,i))):void i.renderFail()):void i.setErrorNotice("")},renderFail:function(){var b=this;a("#embed-url-field").addClass("invalid"),b.setErrorNotice(b.controller.options.invalidEmbedTypeError||"ERROR"),b.setAddToWidgetButtonDisabled(!0)}}),this.settings(new b({controller:this.controller,model:this.model.props,priority:40}))}}),b.MediaFrameSelect=wp.media.view.MediaFrame.Post.extend({createStates:function(){var a=this.options.mimeType,c=[];_.each(wp.media.view.settings.embedMimes,function(b){0===b.indexOf(a)&&c.push(b)}),c.length>0&&(a=c),this.states.add([new b.PersistentDisplaySettingsLibrary({id:"insert",title:this.options.title,selection:this.options.selection,priority:20,toolbar:"main-insert",filterable:"dates",library:wp.media.query({type:a}),multiple:!1,editable:!0,selectedDisplaySettings:this.options.selectedDisplaySettings,displaySettings:!!_.isUndefined(this.options.showDisplaySettings)||this.options.showDisplaySettings,displayUserSettings:!1}),new wp.media.controller.EditImage({model:this.options.editImage}),new wp.media.controller.Embed({metadata:this.options.metadata,type:"image"===this.options.mimeType?"image":"link",invalidEmbedTypeError:this.options.invalidEmbedTypeError})])},mainInsertToolbar:function(a){var b=this;a.set("insert",{style:"primary",priority:80,text:b.options.text,requires:{selection:!0},click:function(){var a=b.state(),c=a.get("selection");b.close(),a.trigger("insert",c).reset()}})},mainEmbedToolbar:function(a){a.view=new wp.media.view.Toolbar.Embed({controller:this,text:this.options.text,event:"insert"})},embedContent:function(){var a=new b.MediaEmbedView({controller:this,model:this.state()}).render();this.content.set(a),wp.media.isTouchDevice||a.url.focus()}}),b.MediaWidgetControl=Backbone.View.extend({l10n:{add_to_widget:"{{add_to_widget}}",add_media:"{{add_media}}"},id_base:"",mime_type:"",events:{"click .notice-missing-attachment a":"handleMediaLibraryLinkClick","click .select-media":"selectMedia","click .placeholder":"selectMedia","click .edit-media":"editMedia"},showDisplaySettings:!0,initialize:function(c){var d=this;if(Backbone.View.prototype.initialize.call(d,c),!(d.model instanceof b.MediaWidgetModel))throw new Error("Missing options.model");if(!c.el)throw new Error("Missing options.el");if(!c.syncContainer)throw new Error("Missing options.syncContainer");if(d.syncContainer=c.syncContainer,d.$el.addClass("media-widget-control"),_.bindAll(d,"syncModelToInputs","render","updateSelectedAttachment","renderPreview"),!d.id_base&&(_.find(b.controlConstructors,function(a,b){return d instanceof a&&(d.id_base=b,!0)}),!d.id_base))throw new Error("Missing id_base.");d.previewTemplateProps=new Backbone.Model(d.mapModelToPreviewTemplateProps()),d.selectedAttachment=new wp.media.model.Attachment,d.renderPreview=_.debounce(d.renderPreview),d.listenTo(d.previewTemplateProps,"change",d.renderPreview),d.model.on("change:attachment_id",d.updateSelectedAttachment),d.model.on("change:url",d.updateSelectedAttachment),d.updateSelectedAttachment(),d.listenTo(d.model,"change",d.syncModelToInputs),d.listenTo(d.model,"change",d.syncModelToPreviewProps),d.listenTo(d.model,"change",d.render),d.$el.on("input change",".title",function(){d.model.set({title:a.trim(a(this).val())})}),d.$el.on("input change",".link",function(){var b=a.trim(a(this).val()),c="custom";d.selectedAttachment.get("linkUrl")===b||d.selectedAttachment.get("link")===b?c="post":d.selectedAttachment.get("url")===b&&(c="file"),d.model.set({link_url:b,link_type:c}),d.displaySettings.set({link:c,linkUrl:b})}),d.displaySettings=new Backbone.Model(_.pick(d.mapModelToMediaFrameProps(_.extend(d.model.defaults(),d.model.toJSON())),_.keys(wp.media.view.settings.defaultProps)))},updateSelectedAttachment:function(){var a,b=this;0===b.model.get("attachment_id")?(b.selectedAttachment.clear(),b.model.set("error",!1)):b.model.get("attachment_id")!==b.selectedAttachment.get("id")&&(a=new wp.media.model.Attachment({id:b.model.get("attachment_id")}),a.fetch().done(function(){b.model.set("error",!1),b.selectedAttachment.set(a.toJSON())}).fail(function(){b.model.set("error","missing_attachment")}))},syncModelToPreviewProps:function(){var a=this;a.previewTemplateProps.set(a.mapModelToPreviewTemplateProps())},syncModelToInputs:function(){var b=this;b.syncContainer.find(".media-widget-instance-property").each(function(){var c,d,e=a(this);d=e.data("property"),c=b.model.get(d),_.isUndefined(c)||(c="array"===b.model.schema[d].type&&_.isArray(c)?c.join(","):"boolean"===b.model.schema[d].type?c?"1":"":String(c),e.val()!==c&&(e.val(c),e.trigger("change")))})},template:function(){var b=this;if(!a("#tmpl-widget-media-"+b.id_base+"-control").length)throw new Error("Missing widget control template for "+b.id_base);return wp.template("widget-media-"+b.id_base+"-control")},render:function(){var a,b=this;b.templateRendered||(b.$el.html(b.template()(b.model.toJSON())),b.renderPreview(),b.templateRendered=!0),a=b.$el.find(".title"),a.is(document.activeElement)||a.val(b.model.get("title")),b.$el.toggleClass("selected",b.isSelected())},renderPreview:function(){throw new Error("renderPreview must be implemented")},isSelected:function(){var a=this;return!a.model.get("error")&&Boolean(a.model.get("attachment_id")||a.model.get("url"))},handleMediaLibraryLinkClick:function(a){var b=this;a.preventDefault(),b.selectMedia()},selectMedia:function(){var c,d,e,f,g=this,h=[];g.isSelected()&&0!==g.model.get("attachment_id")&&h.push(g.selectedAttachment),c=new wp.media.model.Selection(h,{multiple:!1}),f=g.mapModelToMediaFrameProps(g.model.toJSON()),f.size&&g.displaySettings.set("size",f.size),d=new b.MediaFrameSelect({title:g.l10n.add_media,frame:"post",text:g.l10n.add_to_widget,selection:c,mimeType:g.mime_type,selectedDisplaySettings:g.displaySettings,showDisplaySettings:g.showDisplaySettings,metadata:f,state:g.isSelected()&&0===g.model.get("attachment_id")?"embed":"insert",invalidEmbedTypeError:g.l10n.unsupported_file_type}),wp.media.frame=d,d.on("insert",function(){var a={},b=d.state();"embed"===b.get("id")?_.extend(a,{id:0},b.props.toJSON()):_.extend(a,b.get("selection").first().toJSON()),g.selectedAttachment.set(a),g.model.set("error",!1),g.model.set(g.getModelPropsFromMediaFrame(d))}),e=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(b){return"delete"===b?e.apply(this,arguments):a.Deferred().rejectWith(this).promise()},d.on("close",function(){wp.media.model.Attachment.prototype.sync=e}),d.$el.addClass("media-widget"),d.open(),c&&c.on("destroy",function(a){g.model.get("attachment_id")===a.get("id")&&g.model.set({attachment_id:0,url:""})}),d.$el.find(".media-frame-menu .media-menu-item.active").focus()},getModelPropsFromMediaFrame:function(a){var b,c,d,e=this;if(b=a.state(),"insert"===b.get("id"))c=b.get("selection").first().toJSON(),c.postUrl=c.link,e.showDisplaySettings&&_.extend(c,a.content.get(".attachments-browser").sidebar.get("display").model.toJSON()),c.sizes&&c.size&&c.sizes[c.size]&&(c.url=c.sizes[c.size].url);else{if("embed"!==b.get("id"))throw new Error("Unexpected state: "+b.get("id"));c=_.extend(b.props.toJSON(),{attachment_id:0},e.model.getEmbedResetProps())}return c.id&&(c.attachment_id=c.id),d=e.mapMediaToModelProps(c),_.each(wp.media.view.settings.embedExts,function(a){a in e.model.schema&&d.url!==d[a]&&(d[a]="")}),d},mapMediaToModelProps:function(a){var b,c=this,d={},e={};return _.each(c.model.schema,function(a,b){"title"!==b&&(d[a.media_prop||b]=b)}),_.each(a,function(a,b){var f=d[b]||b;c.model.schema[f]&&(e[f]=a)}),"custom"===a.size&&(e.width=a.customWidth,e.height=a.customHeight),"post"===a.link?e.link_url=a.postUrl||a.linkUrl:"file"===a.link&&(e.link_url=a.url),!a.attachment_id&&a.id&&(e.attachment_id=a.id),a.url&&(b=a.url.replace(/#.*$/,"").replace(/\?.*$/,"").split(".").pop().toLowerCase(),b in c.model.schema&&(e[b]=a.url)),_.omit(e,"title")},mapModelToMediaFrameProps:function(a){var b=this,c={};return _.each(a,function(a,d){var e=b.model.schema[d]||{};c[e.media_prop||d]=a}),c.attachment_id=c.id,"custom"===c.size&&(c.customWidth=b.model.get("width"),c.customHeight=b.model.get("height")),c},mapModelToPreviewTemplateProps:function(){var a=this,b={};return _.each(a.model.schema,function(c,d){c.hasOwnProperty("should_preview_update")&&!c.should_preview_update||(b[d]=a.model.get(d))}),b.error=a.model.get("error"),b},editMedia:function(){throw new Error("editMedia not implemented")}}),b.MediaWidgetModel=Backbone.Model.extend({idAttribute:"widget_id",schema:{title:{type:"string","default":""},attachment_id:{type:"integer","default":0},url:{type:"string","default":""}},defaults:function(){var a={};return _.each(this.schema,function(b,c){a[c]=b["default"]}),a},set:function(a,b,c){var d,e,f,g=this;return null===a?g:("object"==typeof a?(d=a,e=b):(d={},d[a]=b,e=c),f={},_.each(d,function(a,b){var c;return g.schema[b]?(c=g.schema[b].type,void("array"===c?(f[b]=a,_.isArray(f[b])||(f[b]=f[b].split(/,/)),g.schema[b].items&&"integer"===g.schema[b].items.type&&(f[b]=_.filter(_.map(f[b],function(a){return parseInt(a,10)},function(a){return"number"==typeof a})))):"integer"===c?f[b]=parseInt(a,10):"boolean"===c?f[b]=!(!a||"0"===a||"false"===a):f[b]=a)):void(f[b]=a)}),Backbone.Model.prototype.set.call(this,f,e))},getEmbedResetProps:function(){return{id:0}}}),b.modelCollection=new(Backbone.Collection.extend({model:b.MediaWidgetModel})),b.widgetControls={},b.handleWidgetAdded=function(c,d){var e,f,g,h,i,j,k,l,m,n,o,p=50;g=d.find("> .widget-inside > .form, > .widget-inside > form"),h=g.find("> .id_base").val(),n=g.find("> .widget-id").val(),b.widgetControls[n]||(i=b.controlConstructors[h],i&&(j=b.modelConstructors[h]||b.MediaWidgetModel,e=a("

"),f=d.find(".widget-content:first"),f.before(e),k={},f.find(".media-widget-instance-property").each(function(){var b=a(this);k[b.data("property")]=b.val()}),k.widget_id=n,m=new j(k),l=new i({el:e,syncContainer:f,model:m}),o=function(){d.hasClass("open")?l.render():setTimeout(o,p)},o(),b.modelCollection.add([m]),b.widgetControls[m.get("widget_id")]=l))},b.setupAccessibleMode=function(){var c,d,e,f,g,h,i,j,k;c=a(".editwidget > form"),0!==c.length&&(e=c.find("> .widget-control-actions > .id_base").val(),g=b.controlConstructors[e],g&&(d=c.find("> .widget-control-actions > .widget-id").val(),h=b.modelConstructors[e]||b.MediaWidgetModel,j=a("
"),k=c.find("> .widget-inside"),k.before(j),i={},k.find(".media-widget-instance-property").each(function(){var b=a(this);i[b.data("property")]=b.val()}),i.widget_id=d,f=new g({el:j,syncContainer:k,model:new h(i)}),b.modelCollection.add([f.model]),b.widgetControls[f.model.get("widget_id")]=f,f.render()))},b.handleWidgetUpdated=function(c,d){var e,f,g,h,i={};e=d.find("> .widget-inside > .form, > .widget-inside > form"),g=e.find("> .widget-id").val(),h=b.widgetControls[g],h&&(f=e.find("> .widget-content"),f.find(".media-widget-instance-property").each(function(){var b=a(this).data("property");i[b]=a(this).val()}),h.stopListening(h.model,"change",h.syncModelToInputs),h.model.set(i),h.listenTo(h.model,"change",h.syncModelToInputs))},b.init=function(){var c=a(document);c.on("widget-added",b.handleWidgetAdded),c.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}),a(window).on("load",function(){b.setupAccessibleMode()}))})},b}(jQuery); \ No newline at end of file diff --git a/wp-includes/default-widgets.php b/wp-includes/default-widgets.php index 7c8a903c56..767002b642 100644 --- a/wp-includes/default-widgets.php +++ b/wp-includes/default-widgets.php @@ -31,6 +31,9 @@ require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-image.php' ); /** WP_Widget_Media_Video class */ require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-video.php' ); +/** WP_Widget_Media_Gallery class */ +require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-gallery.php' ); + /** WP_Widget_Meta class */ require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-meta.php' ); diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index c85822c807..fa1ada70fb 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -699,6 +699,7 @@ function wp_default_scripts( &$scripts ) { $scripts->add( 'media-audio-widget', "/wp-admin/js/widgets/media-audio-widget$suffix.js", array( 'media-widgets', 'media-audiovideo' ) ); $scripts->add( 'media-image-widget', "/wp-admin/js/widgets/media-image-widget$suffix.js", array( 'media-widgets' ) ); + $scripts->add( 'media-gallery-widget', "/wp-admin/js/widgets/media-gallery-widget$suffix.js", array( 'media-widgets' ) ); $scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo', 'wp-api-request' ) ); $scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util', 'wp-a11y' ) ); $scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'code-editor', 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) ); diff --git a/wp-includes/version.php b/wp-includes/version.php index 79f61124ee..892cef12c6 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -4,7 +4,7 @@ * * @global string $wp_version */ -$wp_version = '4.9-alpha-41589'; +$wp_version = '4.9-alpha-41590'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. diff --git a/wp-includes/widgets.php b/wp-includes/widgets.php index fe0e058d9a..e4fcc527b7 100644 --- a/wp-includes/widgets.php +++ b/wp-includes/widgets.php @@ -1609,6 +1609,8 @@ function wp_widgets_init() { register_widget( 'WP_Widget_Media_Image' ); + register_widget( 'WP_Widget_Media_Gallery' ); + register_widget( 'WP_Widget_Media_Video' ); register_widget( 'WP_Widget_Meta' ); diff --git a/wp-includes/widgets/class-wp-widget-media-gallery.php b/wp-includes/widgets/class-wp-widget-media-gallery.php new file mode 100644 index 0000000000..5c07c4fc6b --- /dev/null +++ b/wp-includes/widgets/class-wp-widget-media-gallery.php @@ -0,0 +1,224 @@ + __( 'Displays an image gallery.' ), + 'mime_type' => 'image', + ) ); + + $this->l10n = array_merge( $this->l10n, array( + 'no_media_selected' => __( 'No images selected' ), + 'add_media' => _x( 'Select Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), + 'replace_media' => _x( 'Replace Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), + 'edit_media' => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), + ) ); + } + + /** + * Get schema for properties of a widget instance (item). + * + * @since 4.9.0 + * + * @see WP_REST_Controller::get_item_schema() + * @see WP_REST_Controller::get_additional_fields() + * @link https://core.trac.wordpress.org/ticket/35574 + * @return array Schema for properties. + */ + public function get_instance_schema() { + return array( + 'title' => array( + 'type' => 'string', + 'default' => '', + 'sanitize_callback' => 'sanitize_text_field', + 'description' => __( 'Title for the widget' ), + 'should_preview_update' => false, + ), + 'ids' => array( + 'type' => 'array', + 'items' => array( + 'type' => 'integer', + ), + 'default' => array(), + 'sanitize_callback' => 'wp_parse_id_list', + ), + 'columns' => array( + 'type' => 'integer', + 'default' => 3, + 'minimum' => 1, + 'maximum' => 9, + ), + 'size' => array( + 'type' => 'string', + 'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ), + 'default' => 'thumbnail', + ), + 'link_type' => array( + 'type' => 'string', + 'enum' => array( 'none', 'file', 'post' ), + 'default' => 'none', + 'media_prop' => 'link', + 'should_preview_update' => false, + ), + 'orderby_random' => array( + 'type' => 'boolean', + 'default' => false, + 'media_prop' => '_orderbyRandom', + 'should_preview_update' => false, + ), + ); + } + + /** + * Render the media on the frontend. + * + * @since 4.9.0 + * + * @param array $instance Widget instance props. + * @return void + */ + public function render_media( $instance ) { + $instance = array_merge( wp_list_pluck( $this->get_instance_schema(), 'default' ), $instance ); + + $shortcode_atts = array( + 'ids' => $instance['ids'], + 'columns' => $instance['columns'], + 'link' => $instance['link_type'], + 'size' => $instance['size'], + ); + + // @codeCoverageIgnoreStart + if ( $instance['orderby_random'] ) { + $shortcode_atts['orderby'] = 'rand'; + } + + // @codeCoverageIgnoreEnd + echo gallery_shortcode( $shortcode_atts ); + } + + /** + * Loads the required media files for the media manager and scripts for media widgets. + * + * @since 4.9.0 + */ + public function enqueue_admin_scripts() { + parent::enqueue_admin_scripts(); + + $handle = 'media-gallery-widget'; + wp_enqueue_script( $handle ); + + $exported_schema = array(); + foreach ( $this->get_instance_schema() as $field => $field_schema ) { + $exported_schema[ $field ] = wp_array_slice_assoc( $field_schema, array( 'type', 'default', 'enum', 'minimum', 'format', 'media_prop', 'should_preview_update', 'items' ) ); + } + wp_add_inline_script( + $handle, + sprintf( + 'wp.mediaWidgets.modelConstructors[ %s ].prototype.schema = %s;', + wp_json_encode( $this->id_base ), + wp_json_encode( $exported_schema ) + ) + ); + + wp_add_inline_script( + $handle, + sprintf( + ' + wp.mediaWidgets.controlConstructors[ %1$s ].prototype.mime_type = %2$s; + _.extend( wp.mediaWidgets.controlConstructors[ %1$s ].prototype.l10n, %3$s ); + ', + wp_json_encode( $this->id_base ), + wp_json_encode( $this->widget_options['mime_type'] ), + wp_json_encode( $this->l10n ) + ) + ); + } + + /** + * Render form template scripts. + * + * @since 4.9.0 + */ + public function render_control_template_scripts() { + parent::render_control_template_scripts(); + ?> + + get_field_name( $name ) ); ?>" id="get_field_id( $name ) ); // Needed specifically by wpWidgets.appendTitle(). ?>" - value="" + value="" />

-
+
l10n['no_media_selected'] ); ?>