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
2026-08-11 12:20:22 +00:00 · 2017-09-25 06:27:32 +00:00
parent 5c959aa5d8
commit 666912edf9
12 changed files with 965 additions and 12 deletions
@@ -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&#8217;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&#8217;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&#8217;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&#8217;t deleted.","media_library_state_multi":"","media_library_state_single":"","unsupported_file_type":"Looks like this isn&#8217;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>
@@ -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 );
+		});
+	});
+
+})();