20 * Constructor. |
20 * Constructor. |
21 * |
21 * |
22 * @since 4.9.0 |
22 * @since 4.9.0 |
23 */ |
23 */ |
24 public function __construct() { |
24 public function __construct() { |
25 parent::__construct( 'media_gallery', __( 'Gallery' ), array( |
25 parent::__construct( |
26 'description' => __( 'Displays an image gallery.' ), |
26 'media_gallery', |
27 'mime_type' => 'image', |
27 __( 'Gallery' ), |
28 ) ); |
28 array( |
29 |
29 'description' => __( 'Displays an image gallery.' ), |
30 $this->l10n = array_merge( $this->l10n, array( |
30 'mime_type' => 'image', |
31 'no_media_selected' => __( 'No images selected' ), |
31 ) |
32 'add_media' => _x( 'Add Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), |
32 ); |
33 'replace_media' => '', |
33 |
34 'edit_media' => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), |
34 $this->l10n = array_merge( |
35 ) ); |
35 $this->l10n, |
|
36 array( |
|
37 'no_media_selected' => __( 'No images selected' ), |
|
38 'add_media' => _x( 'Add Images', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), |
|
39 'replace_media' => '', |
|
40 'edit_media' => _x( 'Edit Gallery', 'label for button in the gallery widget; should not be longer than ~13 characters long' ), |
|
41 ) |
|
42 ); |
36 } |
43 } |
37 |
44 |
38 /** |
45 /** |
39 * Get schema for properties of a widget instance (item). |
46 * Get schema for properties of a widget instance (item). |
40 * |
47 * |
45 * @link https://core.trac.wordpress.org/ticket/35574 |
52 * @link https://core.trac.wordpress.org/ticket/35574 |
46 * @return array Schema for properties. |
53 * @return array Schema for properties. |
47 */ |
54 */ |
48 public function get_instance_schema() { |
55 public function get_instance_schema() { |
49 $schema = array( |
56 $schema = array( |
50 'title' => array( |
57 'title' => array( |
51 'type' => 'string', |
58 'type' => 'string', |
52 'default' => '', |
59 'default' => '', |
53 'sanitize_callback' => 'sanitize_text_field', |
60 'sanitize_callback' => 'sanitize_text_field', |
54 'description' => __( 'Title for the widget' ), |
61 'description' => __( 'Title for the widget' ), |
55 'should_preview_update' => false, |
62 'should_preview_update' => false, |
56 ), |
63 ), |
57 'ids' => array( |
64 'ids' => array( |
58 'type' => 'array', |
65 'type' => 'array', |
59 'items' => array( |
66 'items' => array( |
60 'type' => 'integer', |
67 'type' => 'integer', |
61 ), |
68 ), |
62 'default' => array(), |
69 'default' => array(), |
63 'sanitize_callback' => 'wp_parse_id_list', |
70 'sanitize_callback' => 'wp_parse_id_list', |
64 ), |
71 ), |
65 'columns' => array( |
72 'columns' => array( |
66 'type' => 'integer', |
73 'type' => 'integer', |
67 'default' => 3, |
74 'default' => 3, |
68 'minimum' => 1, |
75 'minimum' => 1, |
69 'maximum' => 9, |
76 'maximum' => 9, |
70 ), |
77 ), |
71 'size' => array( |
78 'size' => array( |
72 'type' => 'string', |
79 'type' => 'string', |
73 'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ), |
80 'enum' => array_merge( get_intermediate_image_sizes(), array( 'full', 'custom' ) ), |
74 'default' => 'thumbnail', |
81 'default' => 'thumbnail', |
75 ), |
82 ), |
76 'link_type' => array( |
83 'link_type' => array( |
77 'type' => 'string', |
84 'type' => 'string', |
78 'enum' => array( 'post', 'file', 'none' ), |
85 'enum' => array( 'post', 'file', 'none' ), |
79 'default' => 'post', |
86 'default' => 'post', |
80 'media_prop' => 'link', |
87 'media_prop' => 'link', |
81 'should_preview_update' => false, |
88 'should_preview_update' => false, |
82 ), |
89 ), |
83 'orderby_random' => array( |
90 'orderby_random' => array( |
84 'type' => 'boolean', |
91 'type' => 'boolean', |
85 'default' => false, |
92 'default' => false, |
166 */ |
173 */ |
167 public function render_control_template_scripts() { |
174 public function render_control_template_scripts() { |
168 parent::render_control_template_scripts(); |
175 parent::render_control_template_scripts(); |
169 ?> |
176 ?> |
170 <script type="text/html" id="tmpl-wp-media-widget-gallery-preview"> |
177 <script type="text/html" id="tmpl-wp-media-widget-gallery-preview"> |
171 <# var describedById = 'describedBy-' + String( Math.random() ); #> |
178 <# |
172 <# if ( data.ids.length ) { #> |
179 var ids = _.filter( data.ids, function( id ) { |
173 <div class="gallery media-widget-gallery-preview"> |
180 return ( id in data.attachments ); |
174 <# _.each( data.ids, function( id, index ) { #> |
181 } ); |
175 <# |
182 #> |
176 var attachment = data.attachments[ id ]; |
183 <# if ( ids.length ) { #> |
177 if ( ! attachment ) { |
184 <ul class="gallery media-widget-gallery-preview" role="list"> |
178 return; |
185 <# _.each( ids, function( id, index ) { #> |
179 } |
186 <# var attachment = data.attachments[ id ]; #> |
180 #> |
|
181 <# if ( index < 6 ) { #> |
187 <# if ( index < 6 ) { #> |
182 <dl class="gallery-item"> |
188 <li class="gallery-item"> |
183 <dt class="gallery-icon"> |
189 <div class="gallery-icon"> |
184 <# if ( attachment.sizes.thumbnail ) { #> |
190 <img alt="{{ attachment.alt }}" |
185 <img src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" alt="" /> |
191 <# if ( index === 5 && data.ids.length > 6 ) { #> aria-hidden="true" <# } #> |
186 <# } else { #> |
192 <# if ( attachment.sizes.thumbnail ) { #> |
187 <img src="{{ attachment.url }}" alt="" /> |
193 src="{{ attachment.sizes.thumbnail.url }}" width="{{ attachment.sizes.thumbnail.width }}" height="{{ attachment.sizes.thumbnail.height }}" |
188 <# } #> |
194 <# } else { #> |
189 <# if ( index === 5 && data.ids.length > 6 ) { #> |
195 src="{{ attachment.url }}" |
|
196 <# } #> |
|
197 <# if ( ! attachment.alt && attachment.filename ) { #> |
|
198 aria-label=" |
|
199 <?php |
|
200 echo esc_attr( |
|
201 sprintf( |
|
202 /* translators: %s: the image file name. */ |
|
203 __( 'The current image has no alternative text. The file name is: %s' ), |
|
204 '{{ attachment.filename }}' |
|
205 ) |
|
206 ); |
|
207 ?> |
|
208 " |
|
209 <# } #> |
|
210 /> |
|
211 <# if ( index === 5 && data.ids.length > 6 ) { #> |
190 <div class="gallery-icon-placeholder"> |
212 <div class="gallery-icon-placeholder"> |
191 <p class="gallery-icon-placeholder-text">+{{ data.ids.length - 5 }}</p> |
213 <p class="gallery-icon-placeholder-text" aria-label=" |
|
214 <?php |
|
215 printf( |
|
216 /* translators: %s: the amount of additional, not visible images in the gallery widget preview. */ |
|
217 __( 'Additional images added to this gallery: %s' ), |
|
218 '{{ data.ids.length - 5 }}' |
|
219 ); |
|
220 ?> |
|
221 ">+{{ data.ids.length - 5 }}</p> |
192 </div> |
222 </div> |
193 <# } #> |
223 <# } #> |
194 </dt> |
224 </div> |
195 </dl> |
225 </li> |
196 <# } #> |
226 <# } #> |
197 <# } ); #> |
227 <# } ); #> |
198 </div> |
228 </ul> |
199 <# } else { #> |
229 <# } else { #> |
200 <div class="attachment-media-view"> |
230 <div class="attachment-media-view"> |
201 <p class="placeholder"><?php echo esc_html( $this->l10n['no_media_selected'] ); ?></p> |
231 <button type="button" class="placeholder button-add-media"><?php echo esc_html( $this->l10n['add_media'] ); ?></button> |
202 </div> |
232 </div> |
203 <# } #> |
233 <# } #> |
204 </script> |
234 </script> |
205 <?php |
235 <?php |
206 } |
236 } |