Widgets: Introduce Gallery widget for displaying image galleries.
* Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager. * Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends `WP_Widget_Media` in the same way as is done for image, audio, and video widgets. * Model syncing logic is updated to support booleans and arrays (of integers). * Placeholder areas in media widgets are now clickable shortcuts for selecting media. * Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media. Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce. See #32417. Fixes #41914. git-svn-id: https://develop.svn.wordpress.org/trunk@41590 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
parent
5c959aa5d8
commit
666912edf9
@ -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%;
|
||||
|
||||
325
src/wp-admin/js/widgets/media-gallery-widget.js
Normal file
325
src/wp-admin/js/widgets/media-gallery-widget.js
Normal file
@ -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 );
|
||||
@ -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 ) ) {
|
||||
|
||||
@ -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 );
|
||||
|
||||
@ -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' );
|
||||
|
||||
|
||||
@ -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' ) );
|
||||
|
||||
@ -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' );
|
||||
|
||||
224
src/wp-includes/widgets/class-wp-widget-media-gallery.php
Normal file
224
src/wp-includes/widgets/class-wp-widget-media-gallery.php
Normal file
@ -0,0 +1,224 @@
|
||||
<?php
|
||||
/**
|
||||
* Widget API: WP_Widget_Media_Gallery class
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Widgets
|
||||
* @since 4.9.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Core class that implements a gallery widget.
|
||||
*
|
||||
* @since 4.9.0
|
||||
*
|
||||
* @see WP_Widget
|
||||
*/
|
||||
class WP_Widget_Media_Gallery extends WP_Widget_Media {
|
||||
|
||||
/**
|
||||
* Constructor.
|
||||
*
|
||||
* @since 4.9.0
|
||||
*/
|
||||
public function __construct() {
|
||||
parent::__construct( 'media_gallery', __( 'Gallery' ), array(
|
||||
'description' => __( '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();
|
||||
?>
|
||||
<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
|
||||
<# var describedById = 'describedBy-' + String( Math.random() ); #>
|
||||
<# if ( data.ids.length ) { #>
|
||||
<div class="gallery media-widget-gallery-preview">
|
||||
<# _.each( data.ids, function( id, index ) { #>
|
||||
<#
|
||||
var attachment = data.attachments[ id ];
|
||||
if ( ! attachment ) {
|
||||
return;
|
||||
}
|
||||
#>
|
||||
<# if ( index < 6 ) { #>
|
||||
<dl class="gallery-item">
|
||||
<dt class="gallery-icon">
|
||||
<# if ( attachment.sizes.thumbnail ) { #>
|
||||
<img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
|
||||
<# } else { #>
|
||||
<img src="{{ attachment.url }}" alt="" />
|
||||
<# } #>
|
||||
<# if ( index === 5 && data.ids.length > 6 ) { #>
|
||||
<div class="gallery-icon-placeholder">
|
||||
<p class="gallery-icon-placeholder-text">+{{ data.ids.length - 5 }}</p>
|
||||
</div>
|
||||
<# } #>
|
||||
</dt>
|
||||
</dl>
|
||||
<# } #>
|
||||
<# } ); #>
|
||||
</div>
|
||||
<# } else { #>
|
||||
<div class="attachment-media-view">
|
||||
<p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p>
|
||||
</div>
|
||||
<# } #>
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the widget has content to show.
|
||||
*
|
||||
* @since 4.9.0
|
||||
* @access protected
|
||||
*
|
||||
* @param array $instance Widget instance props.
|
||||
* @return bool Whether widget has content.
|
||||
*/
|
||||
protected function has_content( $instance ) {
|
||||
if ( ! empty( $instance['ids'] ) ) {
|
||||
$attachments = wp_parse_id_list( $instance['ids'] );
|
||||
foreach ( $attachments as $attachment ) {
|
||||
if ( 'attachment' !== get_post_type( $attachment ) ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -257,6 +257,12 @@ abstract class WP_Widget_Media extends WP_Widget {
|
||||
continue;
|
||||
}
|
||||
$value = $new_instance[ $field ];
|
||||
|
||||
// Workaround for rest_validate_value_from_schema() due to the fact that rest_is_boolean( '' ) === false, while rest_is_boolean( '1' ) is true.
|
||||
if ( 'boolean' === $field_schema['type'] && '' === $value ) {
|
||||
$value = false;
|
||||
}
|
||||
|
||||
if ( true !== rest_validate_value_from_schema( $value, $field_schema, $field ) ) {
|
||||
continue;
|
||||
}
|
||||
@ -316,7 +322,7 @@ abstract class WP_Widget_Media extends WP_Widget {
|
||||
class="media-widget-instance-property"
|
||||
name="<?php echo esc_attr( $this->get_field_name( $name ) ); ?>"
|
||||
id="<?php echo esc_attr( $this->get_field_id( $name ) ); // Needed specifically by wpWidgets.appendTitle(). ?>"
|
||||
value="<?php echo esc_attr( strval( $value ) ); ?>"
|
||||
value="<?php echo esc_attr( is_array( $value ) ? join( ',', $value ) : strval( $value ) ); ?>"
|
||||
/>
|
||||
<?php
|
||||
endforeach;
|
||||
@ -388,7 +394,7 @@ abstract class WP_Widget_Media extends WP_Widget {
|
||||
<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
|
||||
<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
|
||||
</p>
|
||||
<div class="media-widget-preview">
|
||||
<div class="media-widget-preview <?php echo esc_attr( $this->id_base ); ?>">
|
||||
<div class="attachment-media-view">
|
||||
<div class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></div>
|
||||
</div>
|
||||
|
||||
201
tests/phpunit/tests/widgets/media-gallery-widget.php
Normal file
201
tests/phpunit/tests/widgets/media-gallery-widget.php
Normal file
@ -0,0 +1,201 @@
|
||||
<?php
|
||||
/**
|
||||
* Unit tests covering WP_Widget_Media_Gallery functionality.
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage widgets
|
||||
*/
|
||||
|
||||
/**
|
||||
* Test wp-includes/widgets/class-wp-widget-gallery.php
|
||||
*
|
||||
* @group widgets
|
||||
*/
|
||||
class Test_WP_Widget_Media_Gallery extends WP_UnitTestCase {
|
||||
|
||||
/**
|
||||
* Clean up global scope.
|
||||
*
|
||||
* @global WP_Scripts $wp_scripts
|
||||
* @global WP_Styles $wp_styles
|
||||
*/
|
||||
public function clean_up_global_scope() {
|
||||
global $wp_scripts, $wp_styles;
|
||||
parent::clean_up_global_scope();
|
||||
$wp_scripts = null;
|
||||
$wp_styles = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Test get_instance_schema method.
|
||||
*
|
||||
* @covers WP_Widget_Media_Gallery::get_instance_schema()
|
||||
*/
|
||||
public function test_get_instance_schema() {
|
||||
$widget = new WP_Widget_Media_Gallery();
|
||||
$schema = $widget->get_instance_schema();
|
||||
|
||||
$this->assertEqualSets(
|
||||
array(
|
||||
'title',
|
||||
'ids',
|
||||
'columns',
|
||||
'size',
|
||||
'link_type',
|
||||
'orderby_random',
|
||||
),
|
||||
array_keys( $schema )
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test update() method.
|
||||
*
|
||||
* @covers WP_Widget_Media_Gallery::render_media()
|
||||
*/
|
||||
public function test_render_media() {
|
||||
$widget = new WP_Widget_Media_Gallery();
|
||||
|
||||
$attachments = array();
|
||||
foreach ( array( 'canola.jpg', 'waffles.jpg' ) as $filename ) {
|
||||
$test_image = '/tmp/' . $filename;
|
||||
copy( DIR_TESTDATA . '/images/canola.jpg', $test_image );
|
||||
$attachment_id = self::factory()->attachment->create_object( array(
|
||||
'file' => $test_image,
|
||||
'post_parent' => 0,
|
||||
'post_mime_type' => 'image/jpeg',
|
||||
'post_title' => 'Canola',
|
||||
) );
|
||||
wp_update_attachment_metadata( $attachment_id, wp_generate_attachment_metadata( $attachment_id, $test_image ) );
|
||||
$attachments[ $filename ] = $attachment_id;
|
||||
}
|
||||
|
||||
$instance = wp_list_pluck( $widget->get_instance_schema(), 'default' );
|
||||
$instance['size'] = 'thumbnail';
|
||||
$instance['columns'] = 3;
|
||||
$instance['ids'] = array_values( $attachments );
|
||||
ob_start();
|
||||
$widget->render_media( $instance );
|
||||
$output = ob_get_clean();
|
||||
|
||||
$this->assertContains( 'gallery-columns-3', $output );
|
||||
$this->assertContains( 'gallery-size-thumbnail', $output );
|
||||
$this->assertContains( 'canola', $output );
|
||||
$this->assertContains( 'waffles', $output );
|
||||
}
|
||||
|
||||
/**
|
||||
* Test enqueue_admin_scripts() method.
|
||||
*
|
||||
* @covers WP_Widget_Media_Gallery::enqueue_admin_scripts()
|
||||
*/
|
||||
public function test_enqueue_admin_scripts() {
|
||||
set_current_screen( 'widgets.php' );
|
||||
$widget = new WP_Widget_Media_Gallery();
|
||||
|
||||
$this->assertFalse( wp_script_is( 'media-gallery-widget' ) );
|
||||
|
||||
$widget->enqueue_admin_scripts();
|
||||
|
||||
$this->assertTrue( wp_script_is( 'media-gallery-widget' ) );
|
||||
|
||||
$after = join( '', wp_scripts()->registered['media-gallery-widget']->extra['after'] );
|
||||
$this->assertContains( 'wp.mediaWidgets.modelConstructors[ "media_gallery" ].prototype', $after );
|
||||
}
|
||||
|
||||
/**
|
||||
* Test update() method.
|
||||
*
|
||||
* @covers WP_Widget_Media_Gallery::update()
|
||||
*/
|
||||
public function test_update() {
|
||||
$widget = new WP_Widget_Media_Gallery();
|
||||
$schema = $widget->get_instance_schema();
|
||||
$instance = wp_list_pluck( $schema, 'default' );
|
||||
|
||||
// Field: title.
|
||||
$instance['title'] = 'Hello <b>World</b> ';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertEquals( 'Hello World', $instance['title'] );
|
||||
|
||||
// Field: ids.
|
||||
$instance['ids'] = '1,2,3';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( array( 1, 2, 3 ), $instance['ids'] );
|
||||
|
||||
$instance['ids'] = array( 1, 2, '3' );
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( array( 1, 2, 3 ), $instance['ids'] );
|
||||
|
||||
$instance['ids'] = array( 'too', 'bad' );
|
||||
$instance = $widget->update( $instance, array( 'ids' => array( 2, 3 ) ) );
|
||||
$this->assertSame( array( 2, 3 ), $instance['ids'] );
|
||||
|
||||
// Field: columns.
|
||||
$instance['columns'] = 4;
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( 4, $instance['columns'] );
|
||||
|
||||
$instance['columns'] = '2';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( 2, $instance['columns'] );
|
||||
|
||||
$instance['columns'] = -1; // Under min of 1.
|
||||
$instance = $widget->update( $instance, array( 'columns' => 3 ) );
|
||||
$this->assertSame( 3, $instance['columns'] );
|
||||
|
||||
$instance['columns'] = 10; // Over max of 9.
|
||||
$instance = $widget->update( $instance, array( 'columns' => 3 ) );
|
||||
$this->assertSame( 3, $instance['columns'] );
|
||||
|
||||
// Field: size.
|
||||
$instance['size'] = 'large';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( 'large', $instance['size'] );
|
||||
|
||||
$instance['size'] = 'bad';
|
||||
$instance = $widget->update( $instance, array( 'size' => 'thumbnail' ) );
|
||||
$this->assertSame( 'thumbnail', $instance['size'] );
|
||||
|
||||
// Field: link_type.
|
||||
$instance['link_type'] = 'none';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertSame( 'none', $instance['link_type'] );
|
||||
|
||||
$instance['link_type'] = 'unknown';
|
||||
$instance = $widget->update( $instance, array( 'link_type' => 'file' ) );
|
||||
$this->assertSame( 'file', $instance['link_type'] );
|
||||
|
||||
// Field: orderby_random.
|
||||
$instance['orderby_random'] = '1';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertTrue( $instance['orderby_random'] );
|
||||
|
||||
$instance['orderby_random'] = true;
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertTrue( $instance['orderby_random'] );
|
||||
|
||||
$instance['orderby_random'] = '';
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertFalse( $instance['orderby_random'] );
|
||||
|
||||
$instance['orderby_random'] = false;
|
||||
$instance = $widget->update( $instance, array() );
|
||||
$this->assertFalse( $instance['orderby_random'] );
|
||||
}
|
||||
|
||||
/**
|
||||
* Test render_control_template_scripts() method.
|
||||
*
|
||||
* @covers WP_Widget_Media_Gallery::render_control_template_scripts()
|
||||
*/
|
||||
public function test_render_control_template_scripts() {
|
||||
$widget = new WP_Widget_Media_Gallery();
|
||||
|
||||
ob_start();
|
||||
$widget->render_control_template_scripts();
|
||||
$output = ob_get_clean();
|
||||
|
||||
$this->assertContains( '<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">', $output );
|
||||
}
|
||||
}
|
||||
@ -119,6 +119,13 @@
|
||||
wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.mime_type = "audio";
|
||||
_.extend( wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.l10n, {"no_media_selected":"No audio selected","select_media":"Select File","change_media":"Change Audio","edit_media":"Edit Audio","add_to_widget":"Add to Widget","missing_attachment":"We can’t find that audio file. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn’t deleted.","media_library_state_multi":{"0":"Audio Widget (%d)","1":"Audio Widget (%d)","singular":"Audio Widget (%d)","plural":"Audio Widget (%d)","context":null,"domain":null},"media_library_state_single":"Audio Widget"} );
|
||||
</script>
|
||||
<script type='text/javascript' src='../../src/wp-admin/js/widgets/media-gallery-widget.js'></script>
|
||||
<script type='text/javascript'>
|
||||
wp.mediaWidgets.modelConstructors[ "media_gallery" ].prototype.schema = {"title":{"type":"string","default":"","should_preview_update":false},"ids":{"type":"string","default":""},"columns":{"type":"integer","default":3},"size":{"type":"string","default":"thumbnail","enum":["thumbnail","medium","medium_large","large","post-thumbnail","full","custom"]},"link_type":{"type":"string","default":"none","enum":["none","file","post"],"media_prop":"link","should_preview_update":false},"orderby_random":{"type":"boolean","default":false,"media_prop":"_orderbyRandom","should_preview_update":false},"attachments":{"type":"string","default":""}};
|
||||
wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.mime_type = "image";
|
||||
|
||||
_.extend( wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.l10n, {"no_media_selected":"No images selected","add_media":"Add Media","replace_media":"Replace Media","edit_media":"Edit Gallery","add_to_widget":"Add to Widget","missing_attachment":"We can’t find that gallery. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn’t deleted.","media_library_state_multi":"","media_library_state_single":"","unsupported_file_type":"Looks like this isn’t the correct kind of file. Please link to an appropriate file instead.","select_media":"Select Images","change_media":"Add Image"} );
|
||||
</script>
|
||||
|
||||
<!-- Unit tests -->
|
||||
<script src="wp-admin/js/password-strength-meter.js"></script>
|
||||
@ -136,6 +143,7 @@
|
||||
<script src="wp-admin/js/nav-menu.js"></script>
|
||||
<script src="wp-admin/js/widgets/test-media-widgets.js"></script>
|
||||
<script src="wp-admin/js/widgets/test-media-image-widget.js"></script>
|
||||
<script src="wp-admin/js/widgets/test-media-gallery-widget.js"></script>
|
||||
<script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
|
||||
|
||||
<!-- Customizer templates for sections -->
|
||||
@ -569,7 +577,7 @@
|
||||
</div><!-- #available-widgets-list -->
|
||||
</div><!-- #available-widgets -->
|
||||
</div><!-- #widgets-left -->
|
||||
|
||||
|
||||
<script type="text/html" id="tmpl-widget-media-media_image-control">
|
||||
<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
|
||||
<p>
|
||||
@ -811,6 +819,60 @@
|
||||
<div class="media-frame-uploader"></div>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-widget-media-media_gallery-control">
|
||||
<# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
|
||||
<p>
|
||||
<label for="{{ elementIdPrefix }}title">Title:</label>
|
||||
<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
|
||||
</p>
|
||||
<div class="media-widget-preview">
|
||||
<div class="attachment-media-view">
|
||||
<div class="placeholder">No images selected</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="media-widget-buttons">
|
||||
<button type="button" class="button edit-media selected">
|
||||
Edit Gallery </button>
|
||||
<button type="button" class="button change-media select-media selected">
|
||||
Replace Media </button>
|
||||
<button type="button" class="button select-media not-selected">
|
||||
Add Media </button>
|
||||
</p>
|
||||
<div class="media-widget-fields">
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
|
||||
<# var describedById = 'describedBy-' + String( Math.random() ); #>
|
||||
<# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
|
||||
<# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
|
||||
<div class="gallery gallery-columns-{{ data.columns }}">
|
||||
<# _.each( data.attachments, function( attachment, index ) { #>
|
||||
<dl class="gallery-item">
|
||||
<dt class="gallery-icon">
|
||||
<# if ( attachment.sizes.thumbnail ) { #>
|
||||
<img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
|
||||
<# } else { #>
|
||||
<img src="{{ attachment.url }}" alt="" />
|
||||
<# } #>
|
||||
</dt>
|
||||
<# if ( attachment.caption ) { #>
|
||||
<dd class="wp-caption-text gallery-caption">
|
||||
{{{ data.verifyHTML( attachment.caption ) }}}
|
||||
</dd>
|
||||
<# } #>
|
||||
</dl>
|
||||
<# if ( index % data.columns === data.columns - 1 ) { #>
|
||||
<br style="clear: both;">
|
||||
<# } #>
|
||||
<# } ); #>
|
||||
</div>
|
||||
<# } else { #>
|
||||
<div class="attachment-media-view">
|
||||
<p class="placeholder">No images selected</p>
|
||||
</div>
|
||||
<# } #>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-media-modal">
|
||||
<div class="media-modal wp-core-ui">
|
||||
<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button>
|
||||
|
||||
30
tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js
Normal file
30
tests/qunit/wp-admin/js/widgets/test-media-gallery-widget.js
Normal file
@ -0,0 +1,30 @@
|
||||
/* global wp */
|
||||
/* jshint qunit: true */
|
||||
/* eslint-env qunit */
|
||||
/* eslint-disable no-magic-numbers */
|
||||
|
||||
( function() {
|
||||
'use strict';
|
||||
|
||||
module( 'Gallery Media Widget' );
|
||||
|
||||
test( 'gallery widget control', function() {
|
||||
var GalleryWidgetControl;
|
||||
equal( typeof wp.mediaWidgets.controlConstructors.media_gallery, 'function', 'wp.mediaWidgets.controlConstructors.media_gallery is a function' );
|
||||
GalleryWidgetControl = wp.mediaWidgets.controlConstructors.media_gallery;
|
||||
ok( GalleryWidgetControl.prototype instanceof wp.mediaWidgets.MediaWidgetControl, 'wp.mediaWidgets.controlConstructors.media_gallery subclasses wp.mediaWidgets.MediaWidgetControl' );
|
||||
});
|
||||
|
||||
test( 'gallery media model', function() {
|
||||
var GalleryWidgetModel, galleryWidgetModelInstance;
|
||||
equal( typeof wp.mediaWidgets.modelConstructors.media_gallery, 'function', 'wp.mediaWidgets.modelConstructors.media_gallery is a function' );
|
||||
GalleryWidgetModel = wp.mediaWidgets.modelConstructors.media_gallery;
|
||||
ok( GalleryWidgetModel.prototype instanceof wp.mediaWidgets.MediaWidgetModel, 'wp.mediaWidgets.modelConstructors.media_gallery subclasses wp.mediaWidgets.MediaWidgetModel' );
|
||||
|
||||
galleryWidgetModelInstance = new GalleryWidgetModel();
|
||||
_.each( galleryWidgetModelInstance.attributes, function( value, key ) {
|
||||
equal( value, GalleryWidgetModel.prototype.schema[ key ][ 'default' ], 'Should properly set default for ' + key );
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user