This repository has been archived by the owner. It is now read-only.

Gallery Widget #120

Merged
merged 43 commits into from Sep 19, 2017
Commits
Jump to file or symbol
Failed to load files and symbols.
+78 −16
Diff settings

Always

Just for now

Viewing a subset of changes. View all

Update the widget preview design.

This is an initial implementation of the enhanced widget preview
design proposed in #62.

See: https://cloud.githubusercontent.com/assets/2846578/25029086/e8b7efa2-2087-11e7-8ea6-43679a3a2fb8.png
  • Loading branch information...
joemcgill committed Sep 8, 2017
commit cfe62b4988b6a8c71de9db9cc394cecfdac78bf0
Copy path View file
@@ -24,7 +24,8 @@
* @package WordPress
*/
define( 'WP_CORE_MEDIA_WIDGETS_MERGED', file_exists( ABSPATH . 'wp-includes/widgets/class-wp-widget-media.php' ) );
define( 'WP_CORE_MEDIA_WIDGETS_MERGED', file_exists( ABSPATH . 'wp-includes/widgets/class-wp-widget-media.php' ) );
define( 'WP_CORE_GALLERY_WIDGET_MERGED', file_exists( ABSPATH . 'wp-includes/widgets/class-wp-widget-media-gallery.php' ) );
define( 'WP_CORE_VISUAL_TEXT_WIDGET_MERGED', file_exists( ABSPATH . 'wp-admin/js/widgets/text-widgets.js' ) );
// Register WP-CLI command for generating QUnit test suite.
@@ -106,6 +107,22 @@ function wp32417_default_styles( WP_Styles $styles ) {
}
add_action( 'wp_default_styles', 'wp32417_default_styles' );
/**
* Register gallery widget preview styles.
*
* @codeCoverageIgnore
*/
function wp32417_enqueue_gallery_styles() {
$handle = 'media-gallery-widget';
$src = plugin_dir_url( __FILE__ ) . 'wp-admin/css/widgets/media-gallery-widget.css';
wp_enqueue_style( $handle, $src );
}
if ( ! WP_CORE_GALLERY_WIDGET_MERGED ) {
add_action( 'customize_controls_print_styles', 'wp32417_enqueue_gallery_styles' );
}
/**
* Style fixes for default themes.
*
@@ -0,0 +1,44 @@
.media-widget-gallery-preview {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.media-widget-gallery-preview .gallery-item {
box-sizing: border-box;
width: 50%;
margin: 0;
padding: 1.79104477%;
}
/*
* Use targetted 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-placeholder {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
width: 150px;
height: 100%;
background-color: #ededed;
border: 1px solid #dbdbdb;
font-weight: 600;
}
@@ -40,6 +40,7 @@ public function __construct() {
),
'media_library_state_multi' => '',
'media_library_state_single' => '',
'media_gallery_more' => __( '+ More' ),
) );
}
@@ -167,24 +168,24 @@ public function render_control_template_scripts() {
<# var describedById = 'describedBy-' + String( Math.random() ); #>
<# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>

This comment has been minimized.

@timmyc

timmyc Aug 17, 2017

Collaborator

Not sure if we need to be concerned or not, but should we verify that data.attachments is an Array here?

This comment has been minimized.

@timmyc

timmyc Aug 23, 2017

Collaborator

Strike that comment, I see the check further down now :)

<# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
<div class="gallery gallery-columns-{{ data.columns }}">
<div class="gallery media-widget-gallery-preview">
<# _.each( data.attachments, function( attachment, index ) { #>

This comment has been minimized.

@timmyc

timmyc Aug 17, 2017

Collaborator

As mentioned in the #120 (comment) I posted, we will likely want to revisit this preview logic and maybe only show the first 2-3 images in a larger gallery.

<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="" />
<# if ( index < 6 ) { #>
<dl class="gallery-item">
<# if ( index < 5 ) { #>
<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>
<# } else { #>
<img src="{{ attachment.url }}" alt="" />
<dt class="gallery-icon-placeholder">
<p class="gallery-icon-placeholder-text"><?php echo esc_html( $this->l10n['media_gallery_more'] ); ?></p>
</dt>
<# } #>
</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;">
</dl>
<# } #>
<# } ); #>
</div>
ProTip! Use n and p to navigate between commits in a pull request.