Meta Box - Version 5.4.2

Version Description

  • 2021-06-29 =
  • Improve style for media fields to reuse style/HTML markup.
  • Make input, select, input group, select2, textarea full width on the side context.
  • Improve style for button group when buttons don't have same width.
  • Set better default options for date time pickers.
  • Allow to output HTML in input prepend/append (ex. icon).
  • Add filter rwmb_dismiss_dashboard_widget to dismiss dashboard widget.
Download this release

Release Info

Developer rilwis
Plugin Icon 128x128 Meta Box
Version 5.4.2
Comparing to
See all releases

Code changes from version 5.4.1 to 5.4.2

Files changed (21) hide show
  1. css/button-group.css +2 -1
  2. css/file.css +22 -20
  3. css/image.css +18 -32
  4. css/media.css +9 -42
  5. css/style.css +7 -8
  6. css/video.css +4 -11
  7. inc/about/dashboard.php +1 -0
  8. inc/fields/datetime.php +6 -0
  9. inc/fields/file.php +11 -14
  10. inc/fields/image.php +6 -13
  11. inc/fields/input.php +2 -2
  12. inc/fields/media.php +2 -0
  13. inc/loader.php +1 -1
  14. inc/templates/image-advanced.php +14 -18
  15. inc/templates/media.php +21 -25
  16. inc/templates/video.php +20 -28
  17. js/file.js +5 -5
  18. js/image-advanced.js +2 -6
  19. js/media.js +5 -1
  20. meta-box.php +1 -1
  21. readme.txt +9 -1
css/button-group.css CHANGED
@@ -1,5 +1,6 @@
1
  .rwmb-button-input-list {
2
  margin: 0;
 
3
  }
4
  .rwmb-button-input-list li {
5
  margin-bottom: 0;
@@ -9,7 +10,7 @@
9
  display: none;
10
  }
11
  .rwmb-button-input-list li label {
12
- display: inline-block;
13
  border: #ccc solid 1px;
14
  position: relative;
15
  z-index: 1;
1
  .rwmb-button-input-list {
2
  margin: 0;
3
+ display: inline-block;
4
  }
5
  .rwmb-button-input-list li {
6
  margin-bottom: 0;
10
  display: none;
11
  }
12
  .rwmb-button-input-list li label {
13
+ display: block;
14
  border: #ccc solid 1px;
15
  position: relative;
16
  z-index: 1;
css/file.css CHANGED
@@ -1,35 +1,38 @@
1
- .rwmb-uploaded {
2
  margin: 0;
3
  overflow: hidden;
4
  }
5
  .rwmb-file {
6
  display: flex;
7
- margin-bottom: 10px;
 
8
  background: #fff;
9
  cursor: move;
10
  }
11
  .rwmb-file-icon {
12
- min-width: 60px;
13
- flex-basis: 60px;
14
- margin-right: 5px;
 
 
 
 
15
  }
16
  .rwmb-file-icon img {
17
- max-height: 60px;
18
- max-width: 60px;
19
- }
20
- .rwmb-file-info {
21
- flex: 1;
22
  }
23
  .rwmb-file-title {
24
- font-weight: bold;
25
  text-decoration: none;
26
  }
27
  .rwmb-file-name {
28
- margin: 0 0 4px;
29
  white-space: nowrap;
30
  }
31
  .rwmb-file-actions {
32
- margin: 0;
33
  font-size: 11px;
34
  }
35
  .rwmb-file-edit,
@@ -37,14 +40,13 @@
37
  color: inherit;
38
  text-decoration: none;
39
  }
40
- .rwmb-file-edit {
41
- margin-right: 6px;
 
 
42
  }
43
- .rwmb-file-actions .dashicons {
44
- font-size: 1em;
45
- width: 1em;
46
- height: 1em;
47
- vertical-align: middle;
48
  }
49
  .rwmb-file-input {
50
  width: 100%;
1
+ .rwmb-files {
2
  margin: 0;
3
  overflow: hidden;
4
  }
5
  .rwmb-file {
6
  display: flex;
7
+ align-items: flex-start;
8
+ margin-bottom: 12px;
9
  background: #fff;
10
  cursor: move;
11
  }
12
  .rwmb-file-icon {
13
+ width: 48px;
14
+ height: 64px;
15
+ margin-right: 8px;
16
+ border: 1px solid rgba(0, 0, 0, .07);
17
+ display: flex;
18
+ align-items: center;
19
+ justify-content: center;
20
  }
21
  .rwmb-file-icon img {
22
+ max-width: 100%;
23
+ max-height: 100%;
24
+ height: auto;
25
+ display: block;
 
26
  }
27
  .rwmb-file-title {
28
+ font-weight: 600;
29
  text-decoration: none;
30
  }
31
  .rwmb-file-name {
32
+ margin: 2px 0 6px;
33
  white-space: nowrap;
34
  }
35
  .rwmb-file-actions {
 
36
  font-size: 11px;
37
  }
38
  .rwmb-file-edit,
40
  color: inherit;
41
  text-decoration: none;
42
  }
43
+ .rwmb-file-edit:after {
44
+ content: "|";
45
+ color: #dcdcde;
46
+ margin: 0 6px;
47
  }
48
+ .rwmb-file-delete {
49
+ color: #b32d2e;
 
 
 
50
  }
51
  .rwmb-file-input {
52
  width: 100%;
css/image.css CHANGED
@@ -1,43 +1,22 @@
1
- .rwmb-image-wrapper .rwmb-uploaded:empty {
2
- display: none;
3
- }
4
- .rwmb-image-wrapper .rwmb-uploaded:not(:empty) {
5
- display: block;
6
- margin: -8px 0 0 -8px;
7
- overflow: hidden;
8
- }
9
- /* Re-add WP core UI style to make sure frontend works */
10
  .rwmb-image-item {
11
  position: relative;
12
  float: left;
13
- padding: 8px;
14
- margin: 0;
15
- color: #444;
16
- cursor: pointer;
17
  list-style: none;
18
- text-align: center;
19
- -webkit-user-select: none;
20
- -moz-user-select: none;
21
- -ms-user-select: none;
22
- user-select: none;
23
- width: 25%;
24
  box-sizing: border-box;
 
25
  }
26
- .rwmb-image-item.thumbnail {
27
  width: 150px;
28
- }
29
- .rwmb-image-item.medium {
30
- width: 300px;
31
- }
32
- .rwmb-image-item.large {
33
- width: 1024px;
34
  }
35
 
36
  .rwmb-image-actions {
37
  position: absolute;
38
  z-index: 2;
39
- right: 12px;
40
- top: 12px;
41
  opacity: 0;
42
  transition: opacity .2s;
43
  color: #fff;
@@ -47,13 +26,17 @@
47
  color: inherit;
48
  text-decoration: none;
49
  }
 
 
 
 
50
  .rwmb-image-overlay {
51
  position: absolute;
52
  z-index: 1;
53
- top: 8px;
54
- bottom: 8px;
55
- left: 8px;
56
- right: 8px;
57
  background: #000;
58
  opacity: 0;
59
  transition: opacity .2s;
@@ -64,6 +47,9 @@
64
  .rwmb-image-item:hover .rwmb-image-overlay {
65
  opacity: .6;
66
  }
 
 
 
67
 
68
  @media (max-width: 767px) {
69
  .rwmb-image-actions {
 
 
 
 
 
 
 
 
 
1
  .rwmb-image-item {
2
  position: relative;
3
  float: left;
4
+ margin: 0 12px 12px 0;
 
 
 
5
  list-style: none;
 
 
 
 
 
 
6
  box-sizing: border-box;
7
+ cursor: move;
8
  }
9
+ .rwmb-image-item .rwmb-file-icon {
10
  width: 150px;
11
+ height: 150px;
12
+ margin-right: 0;
 
 
 
 
13
  }
14
 
15
  .rwmb-image-actions {
16
  position: absolute;
17
  z-index: 2;
18
+ right: 8px;
19
+ top: 8px;
20
  opacity: 0;
21
  transition: opacity .2s;
22
  color: #fff;
26
  color: inherit;
27
  text-decoration: none;
28
  }
29
+ .rwmb-image-actions a:hover {
30
+ color: #fff;
31
+ opacity: .8;
32
+ }
33
  .rwmb-image-overlay {
34
  position: absolute;
35
  z-index: 1;
36
+ top: 0;
37
+ bottom: 0;
38
+ left: 0;
39
+ right: 0;
40
  background: #000;
41
  opacity: 0;
42
  transition: opacity .2s;
47
  .rwmb-image-item:hover .rwmb-image-overlay {
48
  opacity: .6;
49
  }
50
+ .rwmb-image-item .rwmb-edit-media:after {
51
+ display: none;
52
+ }
53
 
54
  @media (max-width: 767px) {
55
  .rwmb-image-actions {
css/media.css CHANGED
@@ -1,50 +1,17 @@
1
- .rwmb-media-list:empty {
2
- display: none;
3
- }
4
- .rwmb-media-list:not(:empty) {
5
- display: block;
6
- margin: -8px 0 0 -8px;
7
- overflow: hidden;
8
- }
9
- .rwmb-media-item.attachment {
10
- float: none;
11
- text-align: left;
12
- width: auto;
13
- overflow: hidden;
14
- }
15
- .rwmb-media-preview {
16
- width: 60px;
17
- float: left;
18
- position: relative;
19
- }
20
- .rwmb-media-info {
21
- margin-left: 65px;
22
- }
23
- .rwmb-media-title {
24
- font-weight: bold;
25
- text-decoration: none;
26
- }
27
- .rwmb-media-name {
28
- margin: 0 0 4px;
29
- }
30
- .rwmb-media-actions {
31
  margin: 0;
 
32
  }
33
  .rwmb-edit-media,
34
  .rwmb-remove-media {
35
- font-size: 11px;
36
  color: inherit;
37
  text-decoration: none;
38
  }
39
- .rwmb-media-actions .dashicons {
40
- font-size: 1em;
41
- width: 1em;
42
- height: 1em;
43
- vertical-align: middle;
44
- }
45
-
46
- /* Add more button */
47
- .rwmb-media-view .rwmb-add-media {
48
- padding-left: 5px;
49
- margin-right: 5px;
50
  }
 
 
 
1
+ .rwmb-media-list {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  margin: 0;
3
+ overflow: hidden;
4
  }
5
  .rwmb-edit-media,
6
  .rwmb-remove-media {
 
7
  color: inherit;
8
  text-decoration: none;
9
  }
10
+ .rwmb-edit-media:after {
11
+ content: "|";
12
+ color: #dcdcde;
13
+ margin: 0 6px;
 
 
 
 
 
 
 
14
  }
15
+ .rwmb-remove-media {
16
+ color: #b32d2e;
17
+ }
css/style.css CHANGED
@@ -129,14 +129,13 @@ select.rwmb-error {
129
  #side-sortables .rwmb-label {
130
  margin-bottom: 3px;
131
  }
132
- #side-sortables .rwmb-input input,
133
- #side-sortables .rwmb-input select {
134
- width: 100%;
135
- max-width: 100%;
136
- }
137
- #side-sortables .rwmb-input input[type="checkbox"],
138
- #side-sortables .rwmb-input input[type="radio"] {
139
- width: auto;
140
  }
141
 
142
  /* Mobile style */
129
  #side-sortables .rwmb-label {
130
  margin-bottom: 3px;
131
  }
132
+ #side-sortables .rwmb-input input:not([type="checkbox"]):not([type="radio"]),
133
+ #side-sortables .rwmb-input-group,
134
+ #side-sortables .rwmb-input select,
135
+ #side-sortables .rwmb-input .select2-container,
136
+ #side-sortables .rwmb-input textarea {
137
+ width: 100% !important;
138
+ min-width: auto;
 
139
  }
140
 
141
  /* Mobile style */
css/video.css CHANGED
@@ -1,16 +1,10 @@
1
  .rwmb-video-item {
2
  position: relative;
3
  float: left;
4
- padding: 8px;
5
- margin: 0;
6
- box-sizing: border-box;
7
  width: 300px;
8
- }
9
-
10
- .rwmb-video-item .rwmb-media-preview {
11
- width: 100%;
12
- float: none;
13
- background: #eee;
14
  }
15
 
16
  .rwmb-video-item video {
@@ -19,6 +13,5 @@
19
  }
20
 
21
  .rwmb-video-item .rwmb-media-info {
22
- margin-left: 0;
23
- padding: 10px 0;
24
  }
1
  .rwmb-video-item {
2
  position: relative;
3
  float: left;
4
+ margin: 0 12px 12px 0;
5
+ list-style: none;
 
6
  width: 300px;
7
+ box-sizing: border-box;
 
 
 
 
 
8
  }
9
 
10
  .rwmb-video-item video {
13
  }
14
 
15
  .rwmb-video-item .rwmb-media-info {
16
+ margin-top: 12px;
 
17
  }
inc/about/dashboard.php CHANGED
@@ -29,6 +29,7 @@ class RWMB_Dashboard {
29
 
30
  public function add_news( $value ) {
31
  $is_dismissed = get_user_meta( get_current_user_id(), $this->slug . '_dismiss_news', true );
 
32
  if ( $is_dismissed ) {
33
  return $value;
34
  }
29
 
30
  public function add_news( $value ) {
31
  $is_dismissed = get_user_meta( get_current_user_id(), $this->slug . '_dismiss_news', true );
32
+ $is_dismissed = apply_filters( 'rwmb_dismiss_dashboard_widget', $is_dismissed );
33
  if ( $is_dismissed ) {
34
  return $value;
35
  }
inc/fields/datetime.php CHANGED
@@ -233,6 +233,12 @@ class RWMB_Datetime_Field extends RWMB_Text_Field {
233
  'separator' => ' ',
234
  'dateFormat' => empty( $field['format'] ) ? 'yy-mm-dd' : $field['format'],
235
  'showButtonPanel' => true,
 
 
 
 
 
 
236
  )
237
  );
238
 
233
  'separator' => ' ',
234
  'dateFormat' => empty( $field['format'] ) ? 'yy-mm-dd' : $field['format'],
235
  'showButtonPanel' => true,
236
+ 'changeYear' => true,
237
+ 'yearRange' => '-100:+100',
238
+ 'changeMonth' => true,
239
+ 'showButtonPanel' => true,
240
+ 'controlType' => 'select',
241
+ 'oneLine' => true,
242
  )
243
  );
244
 
inc/fields/file.php CHANGED
@@ -136,7 +136,6 @@ class RWMB_File_Field extends RWMB_Field {
136
  * @return string
137
  */
138
  protected static function get_uploaded_files( $files, $field ) {
139
- $reorder_nonce = wp_create_nonce( "rwmb-reorder-files_{$field['id']}" );
140
  $delete_nonce = wp_create_nonce( "rwmb-delete-file_{$field['id']}" );
141
  $output = '';
142
 
@@ -148,10 +147,9 @@ class RWMB_File_Field extends RWMB_Field {
148
  }
149
 
150
  return sprintf(
151
- '<ul class="rwmb-uploaded" data-field_id="%s" data-delete_nonce="%s" data-reorder_nonce="%s" data-force_delete="%s" data-max_file_uploads="%s" data-mime_type="%s">%s</ul>',
152
  $field['id'],
153
  $delete_nonce,
154
- $reorder_nonce,
155
  $field['force_delete'] ? 1 : 0,
156
  $field['max_file_uploads'],
157
  $field['mime_type'],
@@ -173,39 +171,38 @@ class RWMB_File_Field extends RWMB_Field {
173
  $attributes = self::get_attributes( $field, $file );
174
 
175
  if ( ! $file ) {
176
- return;
177
  }
178
 
179
  if ( $field['upload_dir'] ) {
180
  $data = self::file_info_custom_dir( $file, $field );
181
  } else {
182
- $data = array(
183
- 'icon' => wp_get_attachment_image( $file, array( 60, 60 ), true ),
184
  'name' => basename( get_attached_file( $file ) ),
185
  'url' => wp_get_attachment_url( $file ),
186
  'title' => get_the_title( $file ),
187
  'edit_link' => '',
188
- );
189
  $edit_link = get_edit_post_link( $file );
190
  if ( $edit_link ) {
191
- $data['edit_link'] = sprintf( '<a href="%s" class="rwmb-file-edit" target="_blank"><span class="dashicons dashicons-edit"></span>%s</a>', $edit_link, $i18n_edit );
192
  }
193
  }
194
 
195
  return sprintf(
196
  '<li class="rwmb-file">
197
- <div class="rwmb-file-icon"><a href="%s" target="_blank">%s</a></div>
198
  <div class="rwmb-file-info">
199
  <a href="%s" target="_blank" class="rwmb-file-title">%s</a>
200
- <p class="rwmb-file-name">%s</p>
201
- <p class="rwmb-file-actions">
202
  %s
203
- <a href="#" class="rwmb-file-delete" data-attachment_id="%s"><span class="dashicons dashicons-no-alt"></span>%s</a>
204
- </p>
205
  </div>
206
  <input type="hidden" name="%s[%s]" value="%s">
207
  </li>',
208
- $data['url'],
209
  $data['icon'],
210
  $data['url'],
211
  $data['title'],
136
  * @return string
137
  */
138
  protected static function get_uploaded_files( $files, $field ) {
 
139
  $delete_nonce = wp_create_nonce( "rwmb-delete-file_{$field['id']}" );
140
  $output = '';
141
 
147
  }
148
 
149
  return sprintf(
150
+ '<ul class="rwmb-files" data-field_id="%s" data-delete_nonce="%s" data-force_delete="%s" data-max_file_uploads="%s" data-mime_type="%s">%s</ul>',
151
  $field['id'],
152
  $delete_nonce,
 
153
  $field['force_delete'] ? 1 : 0,
154
  $field['max_file_uploads'],
155
  $field['mime_type'],
171
  $attributes = self::get_attributes( $field, $file );
172
 
173
  if ( ! $file ) {
174
+ return '';
175
  }
176
 
177
  if ( $field['upload_dir'] ) {
178
  $data = self::file_info_custom_dir( $file, $field );
179
  } else {
180
+ $data = [
181
+ 'icon' => wp_get_attachment_image( $file, [48, 64], true ),
182
  'name' => basename( get_attached_file( $file ) ),
183
  'url' => wp_get_attachment_url( $file ),
184
  'title' => get_the_title( $file ),
185
  'edit_link' => '',
186
+ ];
187
  $edit_link = get_edit_post_link( $file );
188
  if ( $edit_link ) {
189
+ $data['edit_link'] = sprintf( '<a href="%s" class="rwmb-file-edit" target="_blank">%s</a>', $edit_link, $i18n_edit );
190
  }
191
  }
192
 
193
  return sprintf(
194
  '<li class="rwmb-file">
195
+ <div class="rwmb-file-icon">%s</div>
196
  <div class="rwmb-file-info">
197
  <a href="%s" target="_blank" class="rwmb-file-title">%s</a>
198
+ <div class="rwmb-file-name">%s</div>
199
+ <div class="rwmb-file-actions">
200
  %s
201
+ <a href="#" class="rwmb-file-delete" data-attachment_id="%s">%s</a>
202
+ </div>
203
  </div>
204
  <input type="hidden" name="%s[%s]" value="%s">
205
  </li>',
 
206
  $data['icon'],
207
  $data['url'],
208
  $data['title'],
inc/fields/image.php CHANGED
@@ -36,28 +36,21 @@ class RWMB_Image_Field extends RWMB_File_Field {
36
  }
37
 
38
  return sprintf(
39
- '<li class="rwmb-image-item attachment %s">
40
- <input type="hidden" name="%s[%s]" value="%s">
41
- <div class="attachment-preview">
42
- <div class="thumbnail">
43
- <div class="centered">
44
- %s
45
- </div>
46
- </div>
47
- </div>
48
  <div class="rwmb-image-overlay"></div>
49
  <div class="rwmb-image-actions">
50
  %s
51
  <a href="#" class="rwmb-image-delete rwmb-file-delete" data-attachment_id="%s"><span class="dashicons dashicons-no-alt"></span></a>
52
  </div>
 
53
  </li>',
54
- esc_attr( $field['image_size'] ),
 
 
55
  $attributes['name'],
56
  $index,
57
  $file,
58
- wp_get_attachment_image( $file, $field['image_size'] ),
59
- $edit_link,
60
- $file
61
  );
62
  }
63
 
36
  }
37
 
38
  return sprintf(
39
+ '<li class="rwmb-image-item">
40
+ <div class="rwmb-file-icon">%s</div>
 
 
 
 
 
 
 
41
  <div class="rwmb-image-overlay"></div>
42
  <div class="rwmb-image-actions">
43
  %s
44
  <a href="#" class="rwmb-image-delete rwmb-file-delete" data-attachment_id="%s"><span class="dashicons dashicons-no-alt"></span></a>
45
  </div>
46
+ <input type="hidden" name="%s[%s]" value="%s">
47
  </li>',
48
+ wp_get_attachment_image( $file, $field['image_size'] ),
49
+ $edit_link,
50
+ $file,
51
  $attributes['name'],
52
  $index,
53
  $file,
 
 
 
54
  );
55
  }
56
 
inc/fields/input.php CHANGED
@@ -31,14 +31,14 @@ abstract class RWMB_Input_Field extends RWMB_Field {
31
  }
32
 
33
  if ( $field['prepend'] ) {
34
- $output .= '<span class="rwmb-input-group-text">' . esc_html( $field['prepend'] ) . '</span>';
35
  }
36
 
37
  $attributes = self::call( 'get_attributes', $field, $meta );
38
  $output .= sprintf( '<input %s>%s', self::render_attributes( $attributes ), self::datalist( $field ) );
39
 
40
  if ( $field['append'] ) {
41
- $output .= '<span class="rwmb-input-group-text">' . esc_html( $field['append'] ) . '</span>';
42
  }
43
 
44
  if ( $field['prepend'] || $field['append'] ) {
31
  }
32
 
33
  if ( $field['prepend'] ) {
34
+ $output .= '<span class="rwmb-input-group-text">' . $field['prepend'] . '</span>';
35
  }
36
 
37
  $attributes = self::call( 'get_attributes', $field, $meta );
38
  $output .= sprintf( '<input %s>%s', self::render_attributes( $attributes ), self::datalist( $field ) );
39
 
40
  if ( $field['append'] ) {
41
+ $output .= '<span class="rwmb-input-group-text">' . $field['append']. '</span>';
42
  }
43
 
44
  if ( $field['prepend'] || $field['append'] ) {
inc/fields/media.php CHANGED
@@ -13,6 +13,8 @@ class RWMB_Media_Field extends RWMB_File_Field {
13
  * Enqueue scripts and styles.
14
  */
15
  public static function admin_enqueue_scripts() {
 
 
16
  wp_enqueue_media();
17
  if ( ! is_admin() ) {
18
  wp_register_script( 'media-grid', includes_url( 'js/media-grid.min.js' ), array( 'media-editor' ), '4.9.7', true );
13
  * Enqueue scripts and styles.
14
  */
15
  public static function admin_enqueue_scripts() {
16
+ parent::admin_enqueue_scripts();
17
+
18
  wp_enqueue_media();
19
  if ( ! is_admin() ) {
20
  wp_register_script( 'media-grid', includes_url( 'js/media-grid.min.js' ), array( 'media-editor' ), '4.9.7', true );
inc/loader.php CHANGED
@@ -18,7 +18,7 @@ class RWMB_Loader {
18
  */
19
  protected function constants() {
20
  // Script version, used to add version for scripts and styles.
21
- define( 'RWMB_VER', '5.4.1' );
22
 
23
  list( $path, $url ) = self::get_path( dirname( dirname( __FILE__ ) ) );
24
 
18
  */
19
  protected function constants() {
20
  // Script version, used to add version for scripts and styles.
21
+ define( 'RWMB_VER', '5.4.2' );
22
 
23
  list( $path, $url ) = self::get_path( dirname( dirname( __FILE__ ) ) );
24
 
inc/templates/image-advanced.php CHANGED
@@ -1,23 +1,19 @@
1
  <script id="tmpl-rwmb-image-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
- <div class="attachment-preview">
4
- <div class="thumbnail">
5
- <div class="centered">
6
- <# if ( 'image' === data.type && data.sizes ) { #>
7
- <# if ( data.sizes[data.controller.imageSize] ) { #>
8
- <img src="{{{ data.sizes[data.controller.imageSize].url }}}">
9
- <# } else { #>
10
- <img src="{{{ data.sizes.full.url }}}">
11
- <# } #>
12
- <# } else { #>
13
- <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
14
- <img src="{{ data.image.src }}" />
15
- <# } else { #>
16
- <img src="{{ data.icon }}" />
17
- <# } #>
18
- <# } #>
19
- </div>
20
- </div>
21
  </div>
22
  <div class="rwmb-image-overlay"></div>
23
  <div class="rwmb-image-actions">
1
  <script id="tmpl-rwmb-image-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
+ <div class="rwmb-file-icon">
4
+ <# if ( 'image' === data.type && data.sizes ) { #>
5
+ <# if ( data.sizes[data.controller.imageSize] ) { #>
6
+ <img src="{{{ data.sizes[data.controller.imageSize].url }}}">
7
+ <# } else { #>
8
+ <img src="{{{ data.sizes.full.url }}}">
9
+ <# } #>
10
+ <# } else { #>
11
+ <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
12
+ <img src="{{ data.image.src }}" />
13
+ <# } else { #>
14
+ <img src="{{ data.icon }}" />
15
+ <# } #>
16
+ <# } #>
 
 
 
 
17
  </div>
18
  <div class="rwmb-image-overlay"></div>
19
  <div class="rwmb-image-actions">
inc/templates/media.php CHANGED
@@ -1,41 +1,37 @@
1
  <script id="tmpl-rwmb-media-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
- <div class="rwmb-media-preview attachment-preview">
4
- <div class="rwmb-media-content thumbnail">
5
- <div class="centered">
6
- <# if ( 'image' === data.type && data.sizes ) { #>
7
- <# if ( data.sizes.thumbnail ) { #>
8
- <img src="{{{ data.sizes.thumbnail.url }}}">
9
- <# } else { #>
10
- <img src="{{{ data.sizes.full.url }}}">
11
- <# } #>
12
- <# } else { #>
13
- <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
14
- <img src="{{ data.image.src }}" />
15
- <# } else { #>
16
- <img src="{{ data.icon }}" />
17
- <# } #>
18
- <# } #>
19
- </div>
20
- </div>
21
  </div>
22
- <div class="rwmb-media-info">
23
- <a href="{{{ data.url }}}" class="rwmb-media-title" target="_blank">
24
  <# if( data.title ) { #>
25
  {{{ data.title }}}
26
  <# } else { #>
27
  {{{ i18nRwmbMedia.noTitle }}}
28
  <# } #>
29
  </a>
30
- <p class="rwmb-media-name">{{{ data.filename }}}</p>
31
- <p class="rwmb-media-actions">
32
  <a class="rwmb-edit-media" title="{{{ i18nRwmbMedia.edit }}}" href="{{{ data.editLink }}}" target="_blank">
33
- <span class="dashicons dashicons-edit"></span>{{{ i18nRwmbMedia.edit }}}
34
  </a>
35
  <a href="#" class="rwmb-remove-media" title="{{{ i18nRwmbMedia.remove }}}">
36
- <span class="dashicons dashicons-no-alt"></span>{{{ i18nRwmbMedia.remove }}}
37
  </a>
38
- </p>
39
  </div>
40
  </script>
41
 
1
  <script id="tmpl-rwmb-media-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
+ <div class="rwmb-file-icon">
4
+ <# if ( 'image' === data.type && data.sizes ) { #>
5
+ <# if ( data.sizes.thumbnail ) { #>
6
+ <img src="{{{ data.sizes.thumbnail.url }}}">
7
+ <# } else { #>
8
+ <img src="{{{ data.sizes.full.url }}}">
9
+ <# } #>
10
+ <# } else { #>
11
+ <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
12
+ <img src="{{ data.image.src }}" />
13
+ <# } else { #>
14
+ <img src="{{ data.icon }}" />
15
+ <# } #>
16
+ <# } #>
 
 
 
 
17
  </div>
18
+ <div class="rwmb-file-info">
19
+ <a href="{{{ data.url }}}" class="rwmb-file-title" target="_blank">
20
  <# if( data.title ) { #>
21
  {{{ data.title }}}
22
  <# } else { #>
23
  {{{ i18nRwmbMedia.noTitle }}}
24
  <# } #>
25
  </a>
26
+ <div class="rwmb-file-name">{{{ data.filename }}}</div>
27
+ <div class="rwmb-file-actions">
28
  <a class="rwmb-edit-media" title="{{{ i18nRwmbMedia.edit }}}" href="{{{ data.editLink }}}" target="_blank">
29
+ {{{ i18nRwmbMedia.edit }}}
30
  </a>
31
  <a href="#" class="rwmb-remove-media" title="{{{ i18nRwmbMedia.remove }}}">
32
+ {{{ i18nRwmbMedia.remove }}}
33
  </a>
34
+ </div>
35
  </div>
36
  </script>
37
 
inc/templates/video.php CHANGED
@@ -1,43 +1,35 @@
1
  <script id="tmpl-rwmb-video-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
- <div class="rwmb-media-preview">
4
- <div class="rwmb-media-content">
5
- <div class="centered">
6
- <# if( _.indexOf( i18nRwmbVideo.extensions, data.url.substr( data.url.lastIndexOf('.') + 1 ) ) > -1 ) { #>
7
- <div class="rwmb-video-wrapper">
8
- <video controls="controls" class="rwmb-video-element" preload="metadata"
9
- <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
10
- <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
11
- <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
12
- <source type="{{ data.mime }}" src="{{ data.url }}"/>
13
- </video>
14
- </div>
15
- <# } else { #>
16
- <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
17
- <img src="{{ data.image.src }}" />
18
- <# } else { #>
19
- <img src="{{ data.icon }}" />
20
- <# } #>
21
- <# } #>
22
- </div>
23
- </div>
24
- </div>
25
  <div class="rwmb-media-info">
26
- <a href="{{{ data.url }}}" class="rwmb-media-title" target="_blank">
27
  <# if( data.title ) { #>
28
  {{{ data.title }}}
29
  <# } else { #>
30
  {{{ i18nRwmbMedia.noTitle }}}
31
  <# } #>
32
  </a>
33
- <p class="rwmb-media-name">{{{ data.filename }}}</p>
34
- <p class="rwmb-media-actions">
35
  <a class="rwmb-edit-media" title="{{{ i18nRwmbMedia.edit }}}" href="{{{ data.editLink }}}" target="_blank">
36
- <span class="dashicons dashicons-edit"></span>{{{ i18nRwmbMedia.edit }}}
37
  </a>
38
  <a href="#" class="rwmb-remove-media" title="{{{ i18nRwmbMedia.remove }}}">
39
- <span class="dashicons dashicons-no-alt"></span>{{{ i18nRwmbMedia.remove }}}
40
  </a>
41
- </p>
42
  </div>
43
  </script>
1
  <script id="tmpl-rwmb-video-item" type="text/html">
2
  <input type="hidden" name="{{{ data.controller.fieldName }}}" value="{{{ data.id }}}" class="rwmb-media-input">
3
+ <# if( _.indexOf( i18nRwmbVideo.extensions, data.url.substr( data.url.lastIndexOf('.') + 1 ) ) > -1 ) { #>
4
+ <video controls="controls" class="rwmb-video-element" preload="metadata"
5
+ <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
6
+ <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
7
+ <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
8
+ <source type="{{ data.mime }}" src="{{ data.url }}"/>
9
+ </video>
10
+ <# } else { #>
11
+ <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
12
+ <img src="{{ data.image.src }}" />
13
+ <# } else { #>
14
+ <img src="{{ data.icon }}" />
15
+ <# } #>
16
+ <# } #>
 
 
 
 
 
 
 
 
17
  <div class="rwmb-media-info">
18
+ <a href="{{{ data.url }}}" class="rwmb-file-title" target="_blank">
19
  <# if( data.title ) { #>
20
  {{{ data.title }}}
21
  <# } else { #>
22
  {{{ i18nRwmbMedia.noTitle }}}
23
  <# } #>
24
  </a>
25
+ <div class="rwmb-file-name">{{{ data.filename }}}</div>
26
+ <div class="rwmb-media-actions">
27
  <a class="rwmb-edit-media" title="{{{ i18nRwmbMedia.edit }}}" href="{{{ data.editLink }}}" target="_blank">
28
+ {{{ i18nRwmbMedia.edit }}}
29
  </a>
30
  <a href="#" class="rwmb-remove-media" title="{{{ i18nRwmbMedia.remove }}}">
31
+ {{{ i18nRwmbMedia.remove }}}
32
  </a>
33
+ </div>
34
  </div>
35
  </script>
js/file.js CHANGED
@@ -18,7 +18,7 @@
18
  $clone.insertBefore( this ).val( '' );
19
 
20
  var $fieldInput = $this.closest( '.rwmb-input' );
21
- file.updateVisibility.call( $fieldInput.find( '.rwmb-uploaded' ) );
22
  file.setRequired.call( $fieldInput );
23
  };
24
 
@@ -33,7 +33,7 @@
33
 
34
  var $this = $( this ),
35
  $item = $this.closest( 'li' ),
36
- $uploaded = $this.closest( '.rwmb-uploaded' ),
37
  $metaBox = $uploaded.closest( '.rwmb-meta-box' );
38
 
39
  $item.remove();
@@ -100,7 +100,7 @@
100
  file.resetClone = function() {
101
  var $this = $( this ),
102
  $clone = $this.closest( '.rwmb-clone' ),
103
- $list = $clone.find( '.rwmb-uploaded' ),
104
  $key = $clone.find( '.rwmb-file-index' ),
105
  inputName = '_file_' + rwmb.uniqid();
106
 
@@ -115,7 +115,7 @@
115
  // Set 'required' attribute. 'this' is the wrapper field input.
116
  file.setRequired = function() {
117
  var $this = $( this ),
118
- $uploaded = $this.find( '.rwmb-uploaded' ),
119
  $inputs = $this.find( '.rwmb-file-new input' );
120
  $inputs.prop( 'required', false );
121
 
@@ -131,7 +131,7 @@
131
 
132
  function init( e ) {
133
  var $el = $( e.target ),
134
- $uploaded = $el.find( '.rwmb-uploaded' );
135
 
136
  $uploaded.each( file.sort );
137
  $uploaded.each( file.updateVisibility );
18
  $clone.insertBefore( this ).val( '' );
19
 
20
  var $fieldInput = $this.closest( '.rwmb-input' );
21
+ file.updateVisibility.call( $fieldInput.find( '.rwmb-files' ) );
22
  file.setRequired.call( $fieldInput );
23
  };
24
 
33
 
34
  var $this = $( this ),
35
  $item = $this.closest( 'li' ),
36
+ $uploaded = $this.closest( '.rwmb-files' ),
37
  $metaBox = $uploaded.closest( '.rwmb-meta-box' );
38
 
39
  $item.remove();
100
  file.resetClone = function() {
101
  var $this = $( this ),
102
  $clone = $this.closest( '.rwmb-clone' ),
103
+ $list = $clone.find( '.rwmb-files' ),
104
  $key = $clone.find( '.rwmb-file-index' ),
105
  inputName = '_file_' + rwmb.uniqid();
106
 
115
  // Set 'required' attribute. 'this' is the wrapper field input.
116
  file.setRequired = function() {
117
  var $this = $( this ),
118
+ $uploaded = $this.find( '.rwmb-files' ),
119
  $inputs = $this.find( '.rwmb-file-new input' );
120
  $inputs.prop( 'required', false );
121
 
131
 
132
  function init( e ) {
133
  var $el = $( e.target ),
134
+ $uploaded = $el.find( '.rwmb-files' );
135
 
136
  $uploaded.each( file.sort );
137
  $uploaded.each( file.updateVisibility );
js/image-advanced.js CHANGED
@@ -12,12 +12,8 @@
12
  this.list = new MediaList( {
13
  controller: this.controller,
14
  itemView: MediaItem.extend( {
15
- className: 'rwmb-image-item attachment',
16
- template: wp.template( 'rwmb-image-item' ),
17
- initialize: function( models, options ) {
18
- MediaItem.prototype.initialize.call( this, models, options );
19
- this.$el.addClass( this.controller.get( 'imageSize' ) );
20
- }
21
  } )
22
  } );
23
  }
12
  this.list = new MediaList( {
13
  controller: this.controller,
14
  itemView: MediaItem.extend( {
15
+ className: 'rwmb-image-item',
16
+ template: wp.template( 'rwmb-image-item' )
 
 
 
 
17
  } )
18
  } );
19
  }
js/media.js CHANGED
@@ -211,6 +211,10 @@
211
  // Sort items using helper 'clone' to prevent trigger click on the image, which means reselect.
212
  this.$el.sortable( {
213
  helper : 'clone',
 
 
 
 
214
  update: function( event, ui ) {
215
  ui.item.find( rwmb.inputSelectors ).first().trigger( 'mb_change' );
216
  }
@@ -407,7 +411,7 @@
407
  */
408
  MediaItem = views.MediaItem = Backbone.View.extend( {
409
  tagName: 'li',
410
- className: 'rwmb-media-item attachment',
411
  template: wp.template( 'rwmb-media-item' ),
412
  initialize: function ( options ) {
413
  this.controller = options.controller;
211
  // Sort items using helper 'clone' to prevent trigger click on the image, which means reselect.
212
  this.$el.sortable( {
213
  helper : 'clone',
214
+ start: function ( event, ui ) {
215
+ ui.placeholder.height( ui.helper.outerHeight() );
216
+ ui.placeholder.width( ui.helper.outerWidth() );
217
+ },
218
  update: function( event, ui ) {
219
  ui.item.find( rwmb.inputSelectors ).first().trigger( 'mb_change' );
220
  }
411
  */
412
  MediaItem = views.MediaItem = Backbone.View.extend( {
413
  tagName: 'li',
414
+ className: 'rwmb-file',
415
  template: wp.template( 'rwmb-media-item' ),
416
  initialize: function ( options ) {
417
  this.controller = options.controller;
meta-box.php CHANGED
@@ -3,7 +3,7 @@
3
  * Plugin Name: Meta Box
4
  * Plugin URI: https://metabox.io
5
  * Description: Create custom meta boxes and custom fields in WordPress.
6
- * Version: 5.4.1
7
  * Author: MetaBox.io
8
  * Author URI: https://metabox.io
9
  * License: GPL2+
3
  * Plugin Name: Meta Box
4
  * Plugin URI: https://metabox.io
5
  * Description: Create custom meta boxes and custom fields in WordPress.
6
+ * Version: 5.4.2
7
  * Author: MetaBox.io
8
  * Author URI: https://metabox.io
9
  * License: GPL2+
readme.txt CHANGED
@@ -5,7 +5,7 @@ Tags: meta box, custom fields, custom post types, custom taxonomies, cpt, meta b
5
  Requires at least: 4.3
6
  Requires PHP: 5.6
7
  Tested up to: 5.7.2
8
- Stable tag: 5.4.1
9
  License: GPLv2 or later
10
 
11
  Meta Box plugin is a powerful, professional developer toolkit to create custom meta boxes and custom fields for your custom post types in WordPress.
@@ -168,6 +168,14 @@ To getting started with the plugin, please read the [Quick Start Guide](https://
168
 
169
  == Changelog ==
170
 
 
 
 
 
 
 
 
 
171
  = 5.4.1 - 2021-06-01 =
172
  - Improve style for prepend, append text
173
  - Improve style for select2 on mobiles
5
  Requires at least: 4.3
6
  Requires PHP: 5.6
7
  Tested up to: 5.7.2
8
+ Stable tag: 5.4.2
9
  License: GPLv2 or later
10
 
11
  Meta Box plugin is a powerful, professional developer toolkit to create custom meta boxes and custom fields for your custom post types in WordPress.
168
 
169
  == Changelog ==
170
 
171
+ = 5.4.2 - 2021-06-29 =
172
+ - Improve style for media fields to reuse style/HTML markup.
173
+ - Make input, select, input group, select2, textarea full width on the side context.
174
+ - Improve style for button group when buttons don't have same width.
175
+ - Set better default options for date time pickers.
176
+ - Allow to output HTML in input prepend/append (ex. icon).
177
+ - Add filter `rwmb_dismiss_dashboard_widget` to dismiss dashboard widget.
178
+
179
  = 5.4.1 - 2021-06-01 =
180
  - Improve style for prepend, append text
181
  - Improve style for select2 on mobiles