PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 2.2.10
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v2.2.10
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
← All changes | admin/views/sp-framework/fields/typography/typography.php +313 -145 4.0.8 → 2.2.10 View file →
@@ -1,54 +1,27 @@
1 -<?php
1 +<?php if ( ! defined( 'ABSPATH' ) ) {
2 + die; } // Cannot access directly.
2 3 /**
3 - * The framework typography fields file.
4 4 *
5 - * @package Smart_Post_Show
6 - * @subpackage Smart_Post_Show/admin
5 + * Field: typography
6 + *
7 + * @since 1.0.0
8 + * @version 1.0.0
7 9 */
8 -
9 -if ( ! defined( 'ABSPATH' ) ) {
10 - exit; // Exit if accessed directly.
11 -}
12 -
13 10 if ( ! class_exists( 'SP_PC_Field_typography' ) ) {
14 - /**
15 - * SP_PC_Field_typography
16 - */
17 11 class SP_PC_Field_typography extends SP_PC_Fields {
18 12
19 - /**
20 - * Chosen
21 - *
22 - * @var bool
23 - */
24 13 public $chosen = false;
25 14
26 - /**
27 - * Value
28 - *
29 - * @var array
30 - */
31 15 public $value = array();
32 - /**
33 - * Field constructor.
34 - *
35 - * @param array $field The field type.
36 - * @param string $value The values of the field.
37 - * @param string $unique The unique ID for the field.
38 - * @param string $where To where show the output CSS.
39 - * @param string $parent The parent args.
40 - */
16 +
41 17 public function __construct( $field, $value = '', $unique = '', $where = '', $parent = '' ) {
42 18 parent::__construct( $field, $value, $unique, $where, $parent );
43 19 }
44 20
45 - /**
46 - * Render method.
47 - */
48 21 public function render() {
49 22
50 - echo wp_kses_post( $this->field_before() );
23 + echo $this->field_before();
51 24
52 25 $args = wp_parse_args(
53 26 $this->field,
54 27 array(
@@ -75,9 +48,9 @@
75 48 'font_variant' => false,
76 49 'word_spacing' => false,
77 50 'text_decoration' => false,
78 51 'custom_style' => false,
79 - 'exclude' => '', // phpcs:ignore
52 + 'exclude' => '',
80 53 'unit' => 'px',
81 54 'preview_text' => 'The quick brown fox jumps over the lazy dog',
82 55 )
83 56 );
@@ -111,9 +84,9 @@
111 84 $this->value = wp_parse_args( $this->value, $default_value );
112 85 $this->chosen = $args['chosen'];
113 86 $chosen_class = ( $this->chosen ) ? ' spf--chosen' : '';
114 87
115 - echo '<div class="spf--typography' . esc_attr( $chosen_class ) . '" data-unit="' . esc_attr( $args['unit'] ) . '" data-exclude="' . esc_attr( $args['exclude'] ) . '">';
88 + echo '<div class="spf--typography' . $chosen_class . '" data-unit="' . $args['unit'] . '" data-exclude="' . $args['exclude'] . '">';
116 89
117 90 echo '<div class="spf--blocks spf--blocks-selects">';
118 91
119 92 //
@@ -119,10 +92,10 @@
119 92 //
120 93 // Font Family.
121 94 if ( ! empty( $args['font_family'] ) ) {
122 95 echo '<div class="spf--block">';
123 - echo '<div class="spf--title">' . esc_html__( 'Font Family', 'post-carousel' ) . '</div>';
124 - echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'post-carousel' ) ); // phpcs:ignore -- escaped by create_select.
96 + echo '<div class="spf--title">' . esc_html__( 'Font Family', 'smart-post-show' ) . '</div>';
97 + echo $this->create_select( array( $this->value['font-family'] => $this->value['font-family'] ), 'font-family', esc_html__( 'Select a font', 'smart-post-show' ) );
125 98 echo '</div>';
126 99 }
127 100
128 101 //
@@ -128,10 +101,10 @@
128 101 //
129 102 // Backup Font Family.
130 103 if ( ! empty( $args['backup_font_family'] ) ) {
131 104 echo '<div class="spf--block spf--block-backup-font-family hidden">';
132 - echo '<div class="spf--title">' . esc_html__( 'Backup Font Family', 'post-carousel' ) . '</div>';
133 - echo $this->create_select( // phpcs:ignore -- escaped by create_select.
105 + echo '<div class="spf--title">' . esc_html__( 'Backup Font Family', 'smart-post-show' ) . '</div>';
106 + echo $this->create_select(
134 107 apply_filters(
135 108 'spf_field_typography_backup_font_family',
136 109 array(
137 110 'Arial, Helvetica, sans-serif',
@@ -148,9 +121,9 @@
148 121 'Palatino Linotype',
149 122 )
150 123 ),
151 124 'backup-font-family',
152 - esc_html__( 'Default', 'post-carousel' )
125 + esc_html__( 'Default', 'smart-post-show' )
153 126 );
154 127 echo '</div>';
155 128 }
156 129
@@ -160,25 +133,25 @@
160 133
161 134 //
162 135 // Font Style Select.
163 136 echo '<div class="spf--block spf--block-font-style hidden">';
164 - echo '<div class="spf--title">' . esc_html__( 'Font Style', 'post-carousel' ) . '</div>';
137 + echo '<div class="spf--title">' . esc_html__( 'Font Style', 'smart-post-show' ) . '</div>';
165 138 echo '<select class="spf--font-style-select" data-placeholder="Default">';
166 - echo '<option value="">' . ( wp_kses_post( ! $this->chosen ) ? esc_html__( 'Default', 'post-carousel' ) : '' ) . '</option>';
139 + echo '<option value="">' . ( ! $this->chosen ? esc_html__( 'Default', 'smart-post-show' ) : '' ) . '</option>';
167 140 if ( ! empty( $this->value['font-weight'] ) || ! empty( $this->value['font-style'] ) ) {
168 - echo '<option value="' . esc_attr( strtolower( $this->value['font-weight'] . $this->value['font-style'] ) ) . '" selected></option>';
141 + echo '<option value="' . strtolower( $this->value['font-weight'] . $this->value['font-style'] ) . '" selected></option>';
169 142 }
170 143 echo '</select>';
171 - echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[font-weight]' ) ) . '" class="spf--font-weight" value="' . esc_attr( $this->value['font-weight'] ) . '" />';
172 - echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[font-style]' ) ) . '" class="spf--font-style" value="' . esc_attr( $this->value['font-style'] ) . '" />';
144 + echo '<input type="hidden" name="' . $this->field_name( '[font-weight]' ) . '" class="spf--font-weight" value="' . $this->value['font-weight'] . '" />';
145 + echo '<input type="hidden" name="' . $this->field_name( '[font-style]' ) . '" class="spf--font-style" value="' . $this->value['font-style'] . '" />';
173 146
174 147 //
175 148 // Extra Font Style Select.
176 149 if ( ! empty( $args['extra_styles'] ) ) {
177 150 echo '<div class="spf--block-extra-styles hidden">';
178 - echo ( ! $this->chosen ) ? '<div class="spf--title">' . esc_html__( 'Load Extra Styles', 'post-carousel' ) . '</div>' : '';
179 - $placeholder = ( $this->chosen ) ? esc_html__( 'Load Extra Styles', 'post-carousel' ) : esc_html__( 'Default', 'post-carousel' );
180 - echo $this->create_select( $this->value['extra-styles'], 'extra-styles', $placeholder, true ); // phpcs:ignore -- escaped by create_select.
151 + echo ( ! $this->chosen ) ? '<div class="spf--title">' . esc_html__( 'Load Extra Styles', 'smart-post-show' ) . '</div>' : '';
152 + $placeholder = ( $this->chosen ) ? esc_html__( 'Load Extra Styles', 'smart-post-show' ) : esc_html__( 'Default', 'smart-post-show' );
153 + echo $this->create_select( $this->value['extra-styles'], 'extra-styles', $placeholder, true );
181 154 echo '</div>';
182 155 }
183 156
184 157 echo '</div>';
@@ -188,11 +161,11 @@
188 161 //
189 162 // Subset.
190 163 if ( ! empty( $args['subset'] ) ) {
191 164 echo '<div class="spf--block spf--block-subset hidden">';
192 - echo '<div class="spf--title">' . esc_html__( 'Subset', 'post-carousel' ) . '</div>';
165 + echo '<div class="spf--title">' . esc_html__( 'Subset', 'smart-post-show' ) . '</div>';
193 166 $subset = ( is_array( $this->value['subset'] ) ) ? $this->value['subset'] : array_filter( (array) $this->value['subset'] );
194 - echo $this->create_select( $subset, 'subset', esc_html__( 'Default', 'post-carousel' ), $args['multi_subset'] ); // phpcs:ignore -- escaped by create_select.
167 + echo $this->create_select( $subset, 'subset', esc_html__( 'Default', 'smart-post-show' ), $args['multi_subset'] );
195 168 echo '</div>';
196 169 }
197 170
198 171 //
@@ -198,20 +171,20 @@
198 171 //
199 172 // Text Align.
200 173 if ( ! empty( $args['text_align'] ) ) {
201 174 echo '<div class="spf--block">';
202 - echo '<div class="spf--title">' . esc_html__( 'Text Align', 'post-carousel' ) . '</div>';
203 - echo $this->create_select( // phpcs:ignore -- escaped by create_select.
175 + echo '<div class="spf--title">' . esc_html__( 'Text Align', 'smart-post-show' ) . '</div>';
176 + echo $this->create_select(
204 177 array(
205 - 'inherit' => esc_html__( 'Inherit', 'post-carousel' ),
206 - 'left' => esc_html__( 'Left', 'post-carousel' ),
207 - 'center' => esc_html__( 'Center', 'post-carousel' ),
208 - 'right' => esc_html__( 'Right', 'post-carousel' ),
209 - 'justify' => esc_html__( 'Justify', 'post-carousel' ),
210 - 'initial' => esc_html__( 'Initial', 'post-carousel' ),
178 + 'inherit' => esc_html__( 'Inherit', 'smart-post-show' ),
179 + 'left' => esc_html__( 'Left', 'smart-post-show' ),
180 + 'center' => esc_html__( 'Center', 'smart-post-show' ),
181 + 'right' => esc_html__( 'Right', 'smart-post-show' ),
182 + 'justify' => esc_html__( 'Justify', 'smart-post-show' ),
183 + 'initial' => esc_html__( 'Initial', 'smart-post-show' ),
211 184 ),
212 185 'text-align',
213 - esc_html__( 'Default', 'post-carousel' )
186 + esc_html__( 'Default', 'smart-post-show' )
214 187 );
215 188 echo '</div>';
216 189 }
217 190
@@ -218,19 +191,17 @@
218 191 //
219 192 // Font Variant.
220 193 if ( ! empty( $args['font_variant'] ) ) {
221 194 echo '<div class="spf--block">';
222 - echo '<div class="spf--title">' . esc_html__( 'Font Variant', 'post-carousel' ) . '</div>';
223 - echo wp_kses_post(
224 - $this->create_select(
225 - array(
226 - 'normal' => esc_html__( 'Normal', 'post-carousel' ),
227 - 'small-caps' => esc_html__( 'Small Caps', 'post-carousel' ),
228 - 'all-small-caps' => esc_html__( 'All Small Caps', 'post-carousel' ),
229 - ),
230 - 'font-variant',
231 - esc_html__( 'Default', 'post-carousel' )
232 - )
195 + echo '<div class="spf--title">' . esc_html__( 'Font Variant', 'smart-post-show' ) . '</div>';
196 + echo $this->create_select(
197 + array(
198 + 'normal' => esc_html__( 'Normal', 'smart-post-show' ),
199 + 'small-caps' => esc_html__( 'Small Caps', 'smart-post-show' ),
200 + 'all-small-caps' => esc_html__( 'All Small Caps', 'smart-post-show' ),
201 + ),
202 + 'font-variant',
203 + esc_html__( 'Default', 'smart-post-show' )
233 204 );
234 205 echo '</div>';
235 206 }
236 207
@@ -237,18 +208,18 @@
237 208 //
238 209 // Text Transform.
239 210 if ( ! empty( $args['text_transform'] ) ) {
240 211 echo '<div class="spf--block">';
241 - echo '<div class="spf--title">' . esc_html__( 'Text Transform', 'post-carousel' ) . '</div>';
242 - echo $this->create_select( // phpcs:ignore -- escaped by create_select.
212 + echo '<div class="spf--title">' . esc_html__( 'Text Transform', 'smart-post-show' ) . '</div>';
213 + echo $this->create_select(
243 214 array(
244 - 'none' => esc_html__( 'None', 'post-carousel' ),
245 - 'capitalize' => esc_html__( 'Capitalize', 'post-carousel' ),
246 - 'uppercase' => esc_html__( 'Uppercase', 'post-carousel' ),
247 - 'lowercase' => esc_html__( 'Lowercase', 'post-carousel' ),
215 + 'none' => esc_html__( 'None', 'smart-post-show' ),
216 + 'capitalize' => esc_html__( 'Capitalize', 'smart-post-show' ),
217 + 'uppercase' => esc_html__( 'Uppercase', 'smart-post-show' ),
218 + 'lowercase' => esc_html__( 'Lowercase', 'smart-post-show' ),
248 219 ),
249 220 'text-transform',
250 - esc_html__( 'Default', 'post-carousel' )
221 + esc_html__( 'Default', 'smart-post-show' )
251 222 );
252 223 echo '</div>';
253 224 }
254 225
@@ -255,24 +226,22 @@
255 226 //
256 227 // Text Decoration.
257 228 if ( ! empty( $args['text_decoration'] ) ) {
258 229 echo '<div class="spf--block">';
259 - echo '<div class="spf--title">' . esc_html__( 'Text Decoration', 'post-carousel' ) . '</div>';
260 - echo wp_kses_post(
261 - $this->create_select(
262 - array(
263 - 'none' => esc_html__( 'None', 'post-carousel' ),
264 - 'underline' => esc_html__( 'Solid', 'post-carousel' ),
265 - 'underline double' => esc_html__( 'Double', 'post-carousel' ),
266 - 'underline dotted' => esc_html__( 'Dotted', 'post-carousel' ),
267 - 'underline dashed' => esc_html__( 'Dashed', 'post-carousel' ),
268 - 'underline wavy' => esc_html__( 'Wavy', 'post-carousel' ),
269 - 'underline overline' => esc_html__( 'Overline', 'post-carousel' ),
270 - 'line-through' => esc_html__( 'Line-through', 'post-carousel' ),
271 - ),
272 - 'text-decoration',
273 - esc_html__( 'Default', 'post-carousel' )
274 - )
230 + echo '<div class="spf--title">' . esc_html__( 'Text Decoration', 'smart-post-show' ) . '</div>';
231 + echo $this->create_select(
232 + array(
233 + 'none' => esc_html__( 'None', 'smart-post-show' ),
234 + 'underline' => esc_html__( 'Solid', 'smart-post-show' ),
235 + 'underline double' => esc_html__( 'Double', 'smart-post-show' ),
236 + 'underline dotted' => esc_html__( 'Dotted', 'smart-post-show' ),
237 + 'underline dashed' => esc_html__( 'Dashed', 'smart-post-show' ),
238 + 'underline wavy' => esc_html__( 'Wavy', 'smart-post-show' ),
239 + 'underline overline' => esc_html__( 'Overline', 'smart-post-show' ),
240 + 'line-through' => esc_html__( 'Line-through', 'smart-post-show' ),
241 + ),
242 + 'text-decoration',
243 + esc_html__( 'Default', 'smart-post-show' )
275 244 );
276 245 echo '</div>';
277 246 }
278 247
@@ -283,57 +252,57 @@
283 252 //
284 253 // Font Size and Line Height.
285 254 if ( ! empty( $args['font_size'] ) ) {
286 255 echo '<div class="spf--block">';
287 - echo '<div class="spf--title">' . esc_html__( 'Font Size', 'post-carousel' ) . '</div>';
256 + echo '<div class="spf--title">' . esc_html__( 'Font Size', 'smart-post-show' ) . '</div>';
288 257 echo '<div class="spf--input-wrap">';
289 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['font-size'] ) . '" />';
290 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
258 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[font-size]' ) . '" class="spf--font-size spf--input spf-input-number" value="' . $this->value['font-size'] . '" />';
259 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
291 260 echo '</div>';
292 261 echo '</div>';
293 262 }
294 263 if ( ! empty( $args['line_height'] ) ) {
295 264 echo '<div class="spf--block">';
296 - echo '<div class="spf--title">' . esc_html__( 'Line Height', 'post-carousel' ) . '</div>';
265 + echo '<div class="spf--title">' . esc_html__( 'Line Height', 'smart-post-show' ) . '</div>';
297 266 echo '<div class="spf--input-wrap">';
298 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" value="' . esc_attr( $this->value['line-height'] ) . '" />';
299 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
267 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[line-height]' ) . '" class="spf--line-height spf--input spf-input-number" value="' . $this->value['line-height'] . '" />';
268 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
300 269 echo '</div>';
301 270 echo '</div>';
302 271 }
303 272 if ( ! empty( $args['tablet_font_size'] ) ) {
304 273 echo '<div class="spf--block">';
305 - echo '<div class="spf--title">' . esc_html__( 'Font Size (Tablet)', 'post-carousel' ) . '</div>';
274 + echo '<div class="spf--title">' . esc_html__( 'Font Size (Tablet)', 'smart-post-show' ) . '</div>';
306 275 echo '<div class="spf--input-wrap">';
307 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[tablet-font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['tablet-font-size'] ) . '" />';
308 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
276 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[tablet-font-size]' ) . '" class="spf--font-size spf--input spf-input-number" value="' . $this->value['tablet-font-size'] . '" />';
277 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
309 278 echo '</div>';
310 279 echo '</div>';
311 280 }
312 281 if ( ! empty( $args['tablet_line_height'] ) ) {
313 282 echo '<div class="spf--block">';
314 - echo '<div class="spf--title">' . esc_html__( 'Line Height (Tablet)', 'post-carousel' ) . '</div>';
283 + echo '<div class="spf--title">' . esc_html__( 'Line Height (Tablet)', 'smart-post-show' ) . '</div>';
315 284 echo '<div class="spf--input-wrap">';
316 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[tablet-line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" value="' . esc_attr( $this->value['tablet-line-height'] ) . '" />';
317 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
285 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[tablet-line-height]' ) . '" class="spf--line-height spf--input spf-input-number" value="' . $this->value['tablet-line-height'] . '" />';
286 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
318 287 echo '</div>';
319 288 echo '</div>';
320 289 }
321 290 if ( ! empty( $args['mobile_font_size'] ) ) {
322 291 echo '<div class="spf--block">';
323 - echo '<div class="spf--title">' . esc_html__( 'Font Size (Mobile)', 'post-carousel' ) . '</div>';
292 + echo '<div class="spf--title">' . esc_html__( 'Font Size (Mobile)', 'smart-post-show' ) . '</div>';
324 293 echo '<div class="spf--input-wrap">';
325 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[mobile-font-size]' ) ) . '" class="spf--font-size spf--input spf-input-number" value="' . esc_attr( $this->value['mobile-font-size'] ) . '" />';
326 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
294 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[mobile-font-size]' ) . '" class="spf--font-size spf--input spf-input-number" value="' . $this->value['mobile-font-size'] . '" />';
295 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
327 296 echo '</div>';
328 297 echo '</div>';
329 298 }
330 299 if ( ! empty( $args['mobile_line_height'] ) ) {
331 300 echo '<div class="spf--block">';
332 - echo '<div class="spf--title">' . esc_html__( 'Line Height (Mobile)', 'post-carousel' ) . '</div>';
301 + echo '<div class="spf--title">' . esc_html__( 'Line Height (Mobile)', 'smart-post-show' ) . '</div>';
333 302 echo '<div class="spf--input-wrap">';
334 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[mobile-line-height]' ) ) . '" class="spf--line-height spf--input spf-input-number" disabled="disabled" value="' . esc_attr( $this->value['mobile-line-height'] ) . '" />';
335 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
303 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[mobile-line-height]' ) . '" class="spf--line-height spf--input spf-input-number" disabled="disabled" value="' . $this->value['mobile-line-height'] . '" />';
304 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
336 305 echo '</div>';
337 306 echo '</div>';
338 307 }
339 308
@@ -340,12 +309,12 @@
340 309 //
341 310 // Letter Spacing.
342 311 if ( ! empty( $args['letter_spacing'] ) ) {
343 312 echo '<div class="spf--block">';
344 - echo '<div class="spf--title">' . esc_html__( 'Letter Spacing', 'post-carousel' ) . '</div>';
313 + echo '<div class="spf--title">' . esc_html__( 'Letter Spacing', 'smart-post-show' ) . '</div>';
345 314 echo '<div class="spf--input-wrap">';
346 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[letter-spacing]' ) ) . '" class="spf--letter-spacing spf--input spf-input-number" value="' . esc_attr( $this->value['letter-spacing'] ) . '" />';
347 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
315 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[letter-spacing]' ) . '" class="spf--letter-spacing spf--input spf-input-number" value="' . $this->value['letter-spacing'] . '" />';
316 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
348 317 echo '</div>';
349 318 echo '</div>';
350 319 }
351 320
@@ -352,12 +321,12 @@
352 321 //
353 322 // Word Spacing.
354 323 if ( ! empty( $args['word_spacing'] ) ) {
355 324 echo '<div class="spf--block">';
356 - echo '<div class="spf--title">' . esc_html__( 'Word Spacing', 'post-carousel' ) . '</div>';
325 + echo '<div class="spf--title">' . esc_html__( 'Word Spacing', 'smart-post-show' ) . '</div>';
357 326 echo '<div class="spf--input-wrap">';
358 - echo '<input type="number" disabled="disabled" name="' . esc_attr( $this->field_name( '[word-spacing]' ) ) . '" class="spf--word-spacing spf--input spf-input-number" value="' . esc_attr( $this->value['word-spacing'] ) . '" />';
359 - echo '<span class="spf--unit">' . esc_attr( $args['unit'] ) . '</span>';
327 + echo '<input type="number" disabled="disabled" name="' . $this->field_name( '[word-spacing]' ) . '" class="spf--word-spacing spf--input spf-input-number" value="' . $this->value['word-spacing'] . '" />';
328 + echo '<span class="spf--unit">' . $args['unit'] . '</span>';
360 329 echo '</div>';
361 330 echo '</div>';
362 331 }
363 332
@@ -366,13 +335,13 @@
366 335 //
367 336 // Font Color.
368 337 if ( ! empty( $args['color'] ) ) {
369 338 echo '<div class="spf--blocks spf--blocks-color">';
370 - $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['color'] ) . '"' : '';
339 + $default_color_attr = ( ! empty( $default_value['color'] ) ) ? ' data-default-color="' . $default_value['color'] . '"' : '';
371 340 echo '<div class="spf--block spf--block-font-color">';
372 - echo '<div class="spf--title">' . esc_html__( 'Font Color', 'post-carousel' ) . '</div>';
341 + echo '<div class="spf--title">' . esc_html__( 'Font Color', 'smart-post-show' ) . '</div>';
373 342 echo '<div class="spf-field-color">';
374 - echo '<input type="text" name="' . esc_attr( $this->field_name( '[color]' ) ) . '" class="spf-color spf--color" value="' . esc_attr( $this->value['color'] ) . '"' . wp_kses_post( $default_color_attr ) . ' />';
343 + echo '<input type="text" name="' . $this->field_name( '[color]' ) . '" class="spf-color spf--color" value="' . $this->value['color'] . '"' . $default_color_attr . ' />';
375 344 echo '</div>';
376 345 echo '</div>';
377 346
378 347 //
@@ -377,17 +346,17 @@
377 346
378 347 //
379 348 // Font Hover Color.
380 349 if ( ! empty( $args['hover_color'] ) ) {
381 - $default_hover_color_attr = ( ! empty( $default_value['hover_color'] ) ) ? ' data-default-color="' . esc_attr( $default_value['hover_color'] ) . '"' : '';
350 + $default_hover_color_attr = ( ! empty( $default_value['hover_color'] ) ) ? ' data-default-color="' . $default_value['hover_color'] . '"' : '';
382 351 echo '<div class="spf--block spf--block-font-color">';
383 - echo '<div class="spf--title">' . esc_html__( 'Hover Color', 'post-carousel' ) . '</div>';
352 + echo '<div class="spf--title">' . esc_html__( 'Hover Color', 'smart-post-show' ) . '</div>';
384 353 echo '<div class="spf-field-color">';
385 - echo '<input type="text" name="' . esc_attr( $this->field_name( '[hover_color]' ) ) . '" class="spf-color spf--color" value="' . esc_attr( $this->value['hover_color'] ) . '"' . wp_kses_post( $default_hover_color_attr ) . ' />';
354 + echo '<input type="text" name="' . $this->field_name( '[hover_color]' ) . '" class="spf-color spf--color" value="' . $this->value['hover_color'] . '"' . $default_hover_color_attr . ' />';
386 355 echo '</div>';
387 356 echo '</div>';
388 357 }
389 - echo '</div>'; // End of spf--blocks-color.
358 + echo '</div>'; // End of spf--blocks-color
390 359 }
391 360
392 361 //
393 362 // Custom style.
@@ -392,41 +361,33 @@
392 361 //
393 362 // Custom style.
394 363 if ( ! empty( $args['custom_style'] ) ) {
395 364 echo '<div class="spf--block spf--block-custom-style">';
396 - echo '<div class="spf--title">' . esc_html__( 'Custom Style', 'post-carousel' ) . '</div>';
397 - echo '<textarea disabled="disabled" name="' . esc_attr( $this->field_name( '[custom-style]' ) ) . '" class="spf--custom-style">' . esc_html( $this->value['custom-style'] ) . '</textarea>';
365 + echo '<div class="spf--title">' . esc_html__( 'Custom Style', 'smart-post-show' ) . '</div>';
366 + echo '<textarea disabled="disabled" name="' . $this->field_name( '[custom-style]' ) . '" class="spf--custom-style">' . $this->value['custom-style'] . '</textarea>';
398 367 echo '</div>';
399 368 }
400 369
401 370 //
402 371 // Preview.
403 - $always_preview = ( 'always' !== $args['preview'] ) ? ' hidden' : '';
372 + $always_preview = ( $args['preview'] !== 'always' ) ? ' hidden' : '';
404 373
405 374 if ( ! empty( $args['preview'] ) ) {
406 - echo '<div class="spf--block spf--block-preview' . esc_attr( $always_preview ) . '">';
375 + echo '<div class="spf--block spf--block-preview' . $always_preview . '">';
407 376 echo '<div class="spf--toggle fa fa-toggle-off"></div>';
408 - echo '<div class="spf--preview">' . esc_html( $args['preview_text'] ) . '</div>';
377 + echo '<div class="spf--preview">' . $args['preview_text'] . '</div>';
409 378 echo '</div>';
410 379 }
411 380
412 - echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[type]' ) ) . '" class="spf--type" value="' . esc_attr( $this->value['type'] ) . '" />';
413 - echo '<input type="hidden" name="' . esc_attr( $this->field_name( '[unit]' ) ) . '" class="spf--unit-save" value="' . esc_attr( $args['unit'] ) . '" />';
381 + echo '<input type="hidden" name="' . $this->field_name( '[type]' ) . '" class="spf--type" value="' . $this->value['type'] . '" />';
382 + echo '<input type="hidden" name="' . $this->field_name( '[unit]' ) . '" class="spf--unit-save" value="' . $args['unit'] . '" />';
414 383
415 384 echo '</div>';
416 385
417 - echo wp_kses_post( $this->field_after() );
386 + echo $this->field_after();
387 +
418 388 }
419 389
420 - /**
421 - * Create select field.
422 - *
423 - * @param [type] $options options.
424 - * @param [type] $name name.
425 - * @param string $placeholder placeholder.
426 - * @param boolean $is_multiple multiple check.
427 - * @return mixed
428 - */
429 390 public function create_select( $options, $name, $placeholder = '', $is_multiple = false ) {
430 391
431 392 $multiple_name = ( $is_multiple ) ? '[]' : '';
432 393 $multiple_attr = ( $is_multiple ) ? ' multiple data-multiple="true"' : '';
@@ -438,13 +399,13 @@
438 399 if ( ! empty( $options ) ) {
439 400 foreach ( $options as $option_key => $pcp_metabox_value ) {
440 401 if ( $is_multiple ) {
441 402 $selected = ( in_array( $pcp_metabox_value, $this->value[ $name ] ) ) ? ' selected' : '';
442 - $output .= '<option value="' . esc_attr( $pcp_metabox_value ) . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
403 + $output .= '<option value="' . $pcp_metabox_value . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
443 404 } else {
444 405 $option_key = ( is_numeric( $option_key ) ) ? $pcp_metabox_value : $option_key;
445 406 $selected = ( $option_key === $this->value[ $name ] ) ? ' selected' : '';
446 - $output .= '<option value="' . esc_attr( $option_key ) . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
407 + $output .= '<option value="' . $option_key . '"' . $selected . '>' . $pcp_metabox_value . '</option>';
447 408 }
448 409 }
449 410 }
450 411
@@ -450,7 +411,214 @@
450 411
451 412 $output .= '</select>';
452 413
453 414 return $output;
415 +
454 416 }
417 +
418 + public function enqueue() {
419 +
420 + if ( ! wp_style_is( 'spf-webfont-loader' ) ) {
421 +
422 + SP_PC::include_plugin_file( 'fields/typography/google-fonts.php' );
423 +
424 + wp_enqueue_script( 'spf-webfont-loader', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js', array( 'spf' ), '1.6.28', true );
425 +
426 + $webfonts = array();
427 +
428 + $customwebfonts = apply_filters( 'spf_field_typography_customwebfonts', array() );
429 +
430 + if ( ! empty( $customwebfonts ) ) {
431 + $webfonts['custom'] = array(
432 + 'label' => esc_html__( 'Custom Web Fonts', 'smart-post-show' ),
433 + 'fonts' => $customwebfonts,
434 + );
435 + }
436 +
437 + $webfonts['safe'] = array(
438 + 'label' => esc_html__( 'Safe Web Fonts', 'smart-post-show' ),
439 + 'fonts' => apply_filters(
440 + 'spf_field_typography_safewebfonts',
441 + array(
442 + 'Arial',
443 + 'Arial Black',
444 + 'Helvetica',
445 + 'Times New Roman',
446 + 'Courier New',
447 + 'Tahoma',
448 + 'Verdana',
449 + 'Impact',
450 + 'Trebuchet MS',
451 + 'Comic Sans MS',
452 + 'Lucida Console',
453 + 'Lucida Sans Unicode',
454 + 'Georgia, serif',
455 + 'Palatino Linotype',
456 + )
457 + ),
458 + );
459 +
460 + $webfonts['google'] = array(
461 + 'label' => esc_html__( 'Google Web Fonts', 'smart-post-show' ),
462 + 'fonts' => apply_filters(
463 + 'spf_field_typography_googlewebfonts',
464 + spf_get_google_fonts()
465 + ),
466 + );
467 +
468 + $defaultstyles = apply_filters( 'spf_field_typography_defaultstyles', array( 'normal', 'italic', '700', '700italic' ) );
469 +
470 + $googlestyles = apply_filters(
471 + 'spf_field_typography_googlestyles',
472 + array(
473 + '100' => 'Thin 100',
474 + '100italic' => 'Thin 100 Italic',
475 + '200' => 'Extra-Light 200',
476 + '200italic' => 'Extra-Light 200 Italic',
477 + '300' => 'Light 300',
478 + '300italic' => 'Light 300 Italic',
479 + 'normal' => 'Normal 400',
480 + 'italic' => 'Normal 400 Italic',
481 + '500' => 'Medium 500',
482 + '500italic' => 'Medium 500 Italic',
483 + '600' => 'Semi-Bold 600',
484 + '600italic' => 'Semi-Bold 600 Italic',
485 + '700' => 'Bold 700',
486 + '700italic' => 'Bold 700 Italic',
487 + '800' => 'Extra-Bold 800',
488 + '800italic' => 'Extra-Bold 800 Italic',
489 + '900' => 'Black 900',
490 + '900italic' => 'Black 900 Italic',
491 + )
492 + );
493 +
494 + $webfonts = apply_filters( 'spf_field_typography_webfonts', $webfonts );
495 +
496 + wp_localize_script(
497 + 'spf',
498 + 'spf_typography_json',
499 + array(
500 + 'webfonts' => $webfonts,
501 + 'defaultstyles' => $defaultstyles,
502 + 'googlestyles' => $googlestyles,
503 + )
504 + );
505 +
506 + }
507 +
508 + }
509 +
510 + public function enqueue_google_fonts() {
511 +
512 + $value = $this->value;
513 + $families = array();
514 + $is_google = false;
515 +
516 + if ( ! empty( $this->value['type'] ) ) {
517 + $is_google = ( $this->value['type'] === 'google' ) ? true : false;
518 + } else {
519 + SP_PC::include_plugin_file( 'fields/typography/google-fonts.php' );
520 + $is_google = ( array_key_exists( $this->value['font-family'], spf_get_google_fonts() ) ) ? true : false;
521 + }
522 +
523 + if ( $is_google ) {
524 +
525 + // set style
526 + $font_weight = ( ! empty( $value['font-weight'] ) ) ? $value['font-weight'] : '';
527 + $font_style = ( ! empty( $value['font-style'] ) ) ? $value['font-style'] : '';
528 +
529 + if ( $font_weight || $font_style ) {
530 + $style = $font_weight . $font_style;
531 + $families['style'][ $style ] = $style;
532 + }
533 +
534 + // set extra styles
535 + if ( ! empty( $value['extra-styles'] ) ) {
536 + foreach ( $value['extra-styles'] as $extra_style ) {
537 + $families['style'][ $extra_style ] = $extra_style;
538 + }
539 + }
540 +
541 + // set subsets
542 + if ( ! empty( $value['subset'] ) ) {
543 + $value['subset'] = ( is_array( $value['subset'] ) ) ? $value['subset'] : array_filter( (array) $value['subset'] );
544 + foreach ( $value['subset'] as $subset ) {
545 + $families['subset'][ $subset ] = $subset;
546 + }
547 + }
548 +
549 + $all_styles = ( ! empty( $families['style'] ) ) ? ':' . implode( ',', $families['style'] ) : '';
550 + $all_subsets = ( ! empty( $families['subset'] ) ) ? ':' . implode( ',', $families['subset'] ) : '';
551 +
552 + $families = $this->value['font-family'] . str_replace( array( 'normal', 'italic' ), array( 'n', 'i' ), $all_styles ) . $all_subsets;
553 +
554 + $this->parent->typographies[] = $families;
555 +
556 + return $families;
557 +
558 + }
559 +
560 + return false;
561 +
562 + }
563 +
564 + public function output() {
565 +
566 + $output = '';
567 + $bg_image = array();
568 + $important = ( ! empty( $this->field['output_important'] ) ) ? '!important' : '';
569 + $element = ( is_array( $this->field['output'] ) ) ? join( ',', $this->field['output'] ) : $this->field['output'];
570 +
571 + $font_family = ( ! empty( $this->value['font-family'] ) ) ? $this->value['font-family'] : '';
572 + $backup_family = ( ! empty( $this->value['backup-font-family'] ) ) ? ', ' . $this->value['backup-font-family'] : '';
573 +
574 + if ( $font_family ) {
575 + $output .= 'font-family:"' . $font_family . '"' . $backup_family . $important . ';';
576 + }
577 +
578 + // Common font properties
579 + $properties = array(
580 + 'color',
581 + 'hover_color',
582 + 'font-weight',
583 + 'font-style',
584 + 'font-variant',
585 + 'text-align',
586 + 'text-transform',
587 + 'text-decoration',
588 + );
589 +
590 + foreach ( $properties as $property ) {
591 + if ( isset( $this->value[ $property ] ) && $this->value[ $property ] !== '' ) {
592 + $output .= $property . ':' . $this->value[ $property ] . $important . ';';
593 + }
594 + }
595 +
596 + $properties = array(
597 + 'font-size',
598 + 'line-height',
599 + 'letter-spacing',
600 + 'word-spacing',
601 + );
602 +
603 + $unit = ( ! empty( $this->value['unit'] ) ) ? $this->value['unit'] : '';
604 +
605 + foreach ( $properties as $property ) {
606 + if ( isset( $this->value[ $property ] ) && $this->value[ $property ] !== '' ) {
607 + $output .= $property . ':' . $this->value[ $property ] . $unit . $important . ';';
608 + }
609 + }
610 +
611 + $custom_style = ( ! empty( $this->value['custom-style'] ) ) ? $this->value['custom-style'] : '';
612 +
613 + if ( $output ) {
614 + $output = $element . '{' . $output . $custom_style . '}';
615 + }
616 +
617 + $this->parent->output_css .= $output;
618 +
619 + return $output;
620 +
621 + }
622 +
455 623 }
456 624 }