52 public function content_template() { |
52 public function content_template() { |
53 ?> |
53 ?> |
54 <# if ( data.label ) { #> |
54 <# if ( data.label ) { #> |
55 <span class="customize-control-title">{{ data.label }}</span> |
55 <span class="customize-control-title">{{ data.label }}</span> |
56 <# } #> |
56 <# } #> |
57 <# if ( data.description ) { #> |
|
58 <span class="description customize-control-description">{{{ data.description }}}</span> |
|
59 <# } #> |
|
60 |
57 |
61 <# if ( data.attachment && data.attachment.id ) { #> |
58 <# if ( data.attachment && data.attachment.id ) { #> |
62 <div class="attachment-media-view"> |
59 <div class="attachment-media-view"> |
63 <# if ( data.attachment.sizes ) { #> |
60 <# if ( data.attachment.sizes ) { #> |
64 <div class="site-icon-preview wp-clearfix"> |
61 <style> |
65 <div class="favicon-preview"> |
62 :root{ |
66 <img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="" /> |
63 --site-icon-url: url( '{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}' ); |
67 |
64 } |
68 <div class="favicon"> |
65 </style> |
69 <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{ |
66 <div class="site-icon-preview customizer"> |
70 data.attachment.alt ? |
67 <div class="direction-wrap"> |
71 wp.i18n.sprintf( |
68 <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="app-icon-preview" alt="{{ |
72 <?php |
69 data.attachment.alt ? |
73 /* translators: %s: The selected image alt text. */ |
70 wp.i18n.sprintf( |
74 echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) ); |
71 <?php |
75 ?> |
72 /* translators: %s: The selected image alt text. */ |
76 , |
73 echo wp_json_encode( __( 'App icon preview: Current image: %s' ) ) |
77 data.attachment.alt |
74 ?> |
78 ) : |
75 , |
79 wp.i18n.sprintf( |
76 data.attachment.alt |
80 <?php |
77 ) : |
81 /* translators: %s: The selected image filename. */ |
78 wp.i18n.sprintf( |
82 echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) ); |
79 <?php |
83 ?> |
80 /* translators: %s: The selected image filename. */ |
84 , |
81 echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) ); |
85 data.attachment.filename |
82 ?> |
86 ) |
83 , |
87 }}" /> |
84 data.attachment.filename |
|
85 ) |
|
86 }}" /> |
|
87 <div class="site-icon-preview-browser"> |
|
88 <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="browser-buttons"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm18 0a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm24-6a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" /></svg> |
|
89 <div class="site-icon-preview-tab"> |
|
90 <img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" class="browser-icon-preview" alt="{{ |
|
91 data.attachment.alt ? |
|
92 wp.i18n.sprintf( |
|
93 <?php |
|
94 /* translators: %s: The selected image alt text. */ |
|
95 echo wp_json_encode( __( 'Browser icon preview: Current image: %s' ) ); |
|
96 ?> |
|
97 , |
|
98 data.attachment.alt |
|
99 ) : |
|
100 wp.i18n.sprintf( |
|
101 <?php |
|
102 /* translators: %s: The selected image filename. */ |
|
103 echo wp_json_encode( __( 'Browser icon preview: The current image has no alternative text. The file name is: %s' ) ); |
|
104 ?> |
|
105 , |
|
106 data.attachment.filename |
|
107 ) |
|
108 }}" /> |
|
109 <div class="site-icon-preview-site-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></div> |
|
110 <svg role="img" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" class="close-button"> |
|
111 <path d="M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28771 7.22705L7.22705 8.28771L10.9394 12L7.22706 15.7123L8.28772 16.773L12 13.0607Z" /> |
|
112 </svg> |
|
113 </div> |
|
114 </div> |
88 </div> |
115 </div> |
89 <span class="browser-title" aria-hidden="true"><# print( '<?php echo esc_js( get_bloginfo( 'name' ) ); ?>' ) #></span> |
|
90 </div> |
116 </div> |
91 <img class="app-icon-preview" src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="{{ |
|
92 data.attachment.alt ? |
|
93 wp.i18n.sprintf( |
|
94 <?php |
|
95 /* translators: %s: The selected image alt text. */ |
|
96 echo wp_json_encode( __( 'App icon preview: Current image: %s' ) ) |
|
97 ?> |
|
98 , |
|
99 data.attachment.alt |
|
100 ) : |
|
101 wp.i18n.sprintf( |
|
102 <?php |
|
103 /* translators: %s: The selected image filename. */ |
|
104 echo wp_json_encode( __( 'App icon preview: The current image has no alternative text. The file name is: %s' ) ); |
|
105 ?> |
|
106 , |
|
107 data.attachment.filename |
|
108 ) |
|
109 }}"/> |
|
110 </div> |
117 </div> |
111 <# } #> |
118 <# } #> |
112 <div class="actions"> |
119 <div class="actions"> |
113 <# if ( data.canUpload ) { #> |
120 <# if ( data.canUpload ) { #> |
114 <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button> |
121 <button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button> |