WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/25/2017 06:27:32 AM (2 years ago)
Author:
westonruter
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/qunit/index.html

    r41375 r41590  
    120120            _.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"} );
    121121        </script>
     122        <script type='text/javascript' src='../../src/wp-admin/js/widgets/media-gallery-widget.js'></script>
     123        <script type='text/javascript'>
     124            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":""}};
     125            wp.mediaWidgets.controlConstructors[ "media_gallery" ].prototype.mime_type = "image";
     126
     127            _.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"} );
     128        </script>
    122129
    123130        <!-- Unit tests -->
     
    137144        <script src="wp-admin/js/widgets/test-media-widgets.js"></script>
    138145        <script src="wp-admin/js/widgets/test-media-image-widget.js"></script>
     146        <script src="wp-admin/js/widgets/test-media-gallery-widget.js"></script>
    139147        <script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
    140148
     
    570578                </div><!-- #available-widgets -->
    571579            </div><!-- #widgets-left -->
    572            
     580
    573581            <script type="text/html" id="tmpl-widget-media-media_image-control">
    574582            <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
     
    811819        <div class="media-frame-uploader"></div>
    812820    </script>
     821
     822    <script type="text/html" id="tmpl-widget-media-media_gallery-control">
     823        <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
     824        <p>
     825            <label for="{{ elementIdPrefix }}title">Title:</label>
     826            <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
     827        </p>
     828        <div class="media-widget-preview">
     829            <div class="attachment-media-view">
     830                <div class="placeholder">No images selected</div>
     831            </div>
     832            </div>
     833            <p class="media-widget-buttons">
     834                <button type="button" class="button edit-media selected">
     835                    Edit Gallery                </button>
     836                <button type="button" class="button change-media select-media selected">
     837                    Replace Media               </button>
     838                <button type="button" class="button select-media not-selected">
     839                    Add Media               </button>
     840            </p>
     841        <div class="media-widget-fields">
     842        </div>
     843    </script>
     844                <script type="text/html" id="tmpl-wp-media-widget-gallery-preview">
     845            <# var describedById = 'describedBy-' + String( Math.random() ); #>
     846            <# data.attachments = data.attachments ? JSON.parse(data.attachments) : ''; #>
     847            <# if ( Array.isArray( data.attachments ) && data.attachments.length ) { #>
     848                <div class="gallery gallery-columns-{{ data.columns }}">
     849                    <# _.each( data.attachments, function( attachment, index ) { #>
     850                        <dl class="gallery-item">
     851                            <dt class="gallery-icon">
     852                            <# if ( attachment.sizes.thumbnail ) { #>
     853                                <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" />
     854                            <# } else { #>
     855                                <img src="{{ attachment.url }}" alt="" />
     856                            <# } #>
     857                            </dt>
     858                            <# if ( attachment.caption ) { #>
     859                                <dd class="wp-caption-text gallery-caption">
     860                                    {{{ data.verifyHTML( attachment.caption ) }}}
     861                                </dd>
     862                            <# } #>
     863                        </dl>
     864                        <# if ( index % data.columns === data.columns - 1 ) { #>
     865                            <br style="clear: both;">
     866                        <# } #>
     867                    <# } ); #>
     868                </div>
     869            <# } else { #>
     870                <div class="attachment-media-view">
     871                    <p class="placeholder">No images selected</p>
     872                </div>
     873            <# } #>
     874        </script>
    813875
    814876    <script type="text/html" id="tmpl-media-modal">
Note: See TracChangeset for help on using the changeset viewer.