PluginProbe ʕ •ᴥ•ʔ
GenerateBlocks / 1.7.2
GenerateBlocks v1.7.2
trunk 1.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.0 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.4.0 1.4.1 1.4.2 1.4.3 1.4.4 1.5.0 1.5.1 1.5.2 1.5.3 1.5.4 1.6.0 1.7.0 1.7.1 1.7.2 1.7.3 1.8.0 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 2.0.0 2.0.1 2.0.2 2.1.0 2.1.1 2.1.2 2.2.0 2.2.1 2.3.0
generateblocks / includes / blocks / class-button.php
generateblocks / includes / blocks Last commit date
class-button-container.php 3 years ago class-button.php 3 years ago class-container.php 3 years ago class-grid.php 3 years ago class-headline.php 3 years ago class-image.php 3 years ago class-query-loop.php 3 years ago
class-button.php
512 lines
1 <?php
2 /**
3 * Handles the Button block.
4 *
5 * @package GenerateBlocks
6 */
7
8 if ( ! defined( 'ABSPATH' ) ) {
9 exit; // Exit if accessed directly.
10 }
11
12 /**
13 * Add Button related functions.
14 */
15 class GenerateBlocks_Block_Button {
16 /**
17 * Keep track of all blocks of this type on the page.
18 *
19 * @var array $block_ids The current block id.
20 */
21 private static $block_ids = [];
22
23 /**
24 * Keep track of CSS we want to output once per block type.
25 *
26 * @var boolean
27 */
28 private static $singular_css_added = false;
29
30 /**
31 * Block defaults.
32 */
33 public static function defaults() {
34 return [
35 'backgroundColor' => '',
36 'backgroundColorOpacity' => 1,
37 'backgroundColorHover' => '',
38 'backgroundColorHoverOpacity' => 1,
39 'backgroundColorCurrent' => '',
40 'textColor' => '',
41 'textColorHover' => '',
42 'textColorCurrent' => '',
43 'borderColor' => '',
44 'borderColorOpacity' => 1,
45 'borderColorHover' => '',
46 'borderColorHoverOpacity' => 1,
47 'borderColorCurrent' => '',
48 'fontFamily' => '',
49 'fontFamilyFallback' => '',
50 'googleFont' => false,
51 'googleFontVariants' => '',
52 'fontWeight' => '',
53 'fontSize' => false,
54 'fontSizeTablet' => false,
55 'fontSizeMobile' => false,
56 'fontSizeUnit' => 'px',
57 'textTransform' => '',
58 'letterSpacing' => '',
59 'letterSpacingTablet' => '',
60 'letterSpacingMobile' => '',
61 'icon' => '',
62 'hasIcon' => false,
63 'iconLocation' => 'left',
64 'removeText' => false,
65 'ariaLabel' => '',
66 'gradient' => false,
67 'gradientDirection' => '',
68 'gradientColorOne' => '',
69 'gradientColorOneOpacity' => '',
70 'gradientColorStopOne' => '',
71 'gradientColorTwo' => '',
72 'gradientColorTwoOpacity' => '',
73 'gradientColorStopTwo' => '',
74 'iconPaddingTop' => '',
75 'iconPaddingRight' => '0.5',
76 'iconPaddingBottom' => '',
77 'iconPaddingLeft' => '',
78 'iconPaddingTopTablet' => '',
79 'iconPaddingRightTablet' => '',
80 'iconPaddingBottomTablet' => '',
81 'iconPaddingLeftTablet' => '',
82 'iconPaddingTopMobile' => '',
83 'iconPaddingRightMobile' => '',
84 'iconPaddingBottomMobile' => '',
85 'iconPaddingLeftMobile' => '',
86 'iconPaddingUnit' => 'em',
87 'iconSize' => 1,
88 'iconSizeTablet' => '',
89 'iconSizeMobile' => '',
90 'iconSizeUnit' => 'em',
91 'hasButtonContainer' => false,
92 'alignment' => '',
93 'alignmentTablet' => '',
94 'alignmentMobile' => '',
95 'variantRole' => '',
96 'buttonType' => 'link',
97 ];
98 }
99
100 /**
101 * Store our block ID in memory.
102 *
103 * @param string $id The block ID to store.
104 */
105 public static function store_block_id( $id ) {
106 self::$block_ids[] = $id;
107 }
108
109 /**
110 * Check if our block ID exists.
111 *
112 * @param string $id The block ID to store.
113 */
114 public static function block_id_exists( $id ) {
115 return in_array( $id, (array) self::$block_ids );
116 }
117
118 /**
119 * Compile our CSS data based on our block attributes.
120 *
121 * @param array $attributes Our block attributes.
122 */
123 public static function get_css_data( $attributes ) {
124 $css = new GenerateBlocks_Dynamic_CSS();
125 $desktop_css = new GenerateBlocks_Dynamic_CSS();
126 $tablet_css = new GenerateBlocks_Dynamic_CSS();
127 $tablet_only_css = new GenerateBlocks_Dynamic_CSS();
128 $mobile_css = new GenerateBlocks_Dynamic_CSS();
129 $css_data = [];
130
131 $defaults = generateblocks_get_block_defaults();
132
133 $settings = wp_parse_args(
134 $attributes,
135 $defaults['button']
136 );
137
138 $id = $attributes['uniqueId'];
139 $blockVersion = ! empty( $settings['blockVersion'] ) ? $settings['blockVersion'] : 1;
140
141 // Use legacy settings if needed.
142 if ( $blockVersion < 2 ) {
143 $settings = GenerateBlocks_Legacy_Attributes::get_settings( '1.4.0', 'button', $settings, $attributes );
144 }
145
146 $selector = generateblocks_get_css_selector( 'button', $attributes );
147 $use_visited_selector = generateblocks_use_visited_selector( 'button', $attributes );
148 $using_global_style = isset( $settings['useGlobalStyle'] ) && $settings['useGlobalStyle'];
149
150 // Back-compatibility for when icon held a value.
151 if ( $settings['icon'] ) {
152 $settings['hasIcon'] = true;
153 }
154
155 $fontFamily = $settings['fontFamily'];
156
157 if ( $fontFamily && $settings['fontFamilyFallback'] ) {
158 $fontFamily = $fontFamily . ', ' . $settings['fontFamilyFallback'];
159 }
160
161 $gradientColorStopOneValue = '';
162 $gradientColorStopTwoValue = '';
163
164 if ( $settings['gradient'] ) {
165 if ( $settings['gradientColorOne'] && '' !== $settings['gradientColorStopOne'] ) {
166 $gradientColorStopOneValue = ' ' . $settings['gradientColorStopOne'] . '%';
167 }
168
169 if ( $settings['gradientColorTwo'] && '' !== $settings['gradientColorStopTwo'] ) {
170 $gradientColorStopTwoValue = ' ' . $settings['gradientColorStopTwo'] . '%';
171 }
172 }
173
174 // Only add this CSS once.
175 if ( ! self::$singular_css_added ) {
176 $css->set_selector( '.gb-button' );
177 $css->add_property( 'text-decoration', 'none' );
178
179 $css->set_selector( '.gb-icon svg' );
180 $css->add_property( 'height', '1em' );
181 $css->add_property( 'width', '1em' );
182 $css->add_property( 'fill', 'currentColor' );
183
184 do_action(
185 'generateblocks_block_one_time_css_data',
186 'button',
187 $settings,
188 $css
189 );
190
191 self::$singular_css_added = true;
192 }
193
194 $visited_selector = $use_visited_selector
195 ? ', ' . $selector . ':visited'
196 : '';
197
198 $css->set_selector( $selector . $visited_selector );
199 generateblocks_add_layout_css( $css, $settings );
200 generateblocks_add_sizing_css( $css, $settings );
201 generateblocks_add_flex_child_css( $css, $settings );
202 $css->add_property( 'background-color', generateblocks_hex2rgba( $settings['backgroundColor'], $settings['backgroundColorOpacity'] ) );
203 $css->add_property( 'color', $settings['textColor'] );
204
205 if ( $settings['gradient'] ) {
206 $css->add_property( 'background-image', 'linear-gradient(' . $settings['gradientDirection'] . 'deg, ' . generateblocks_hex2rgba( $settings['gradientColorOne'], $settings['gradientColorOneOpacity'] ) . $gradientColorStopOneValue . ', ' . generateblocks_hex2rgba( $settings['gradientColorTwo'], $settings['gradientColorTwoOpacity'] ) . $gradientColorStopTwoValue . ')' );
207 }
208
209 $css->add_property( 'font-family', $fontFamily );
210 $css->add_property( 'font-size', $settings['fontSize'], $settings['fontSizeUnit'] );
211 $css->add_property( 'font-weight', $settings['fontWeight'] );
212 $css->add_property( 'text-transform', $settings['textTransform'] );
213 $css->add_property( 'text-align', $settings['alignment'] );
214 $css->add_property( 'letter-spacing', $settings['letterSpacing'], 'em' );
215 $css->add_property( 'padding', array( $settings['paddingTop'], $settings['paddingRight'], $settings['paddingBottom'], $settings['paddingLeft'] ), $settings['paddingUnit'] );
216 $css->add_property( 'border-radius', array( $settings['borderRadiusTopLeft'], $settings['borderRadiusTopRight'], $settings['borderRadiusBottomRight'], $settings['borderRadiusBottomLeft'] ), $settings['borderRadiusUnit'] );
217 $css->add_property( 'margin', array( $settings['marginTop'], $settings['marginRight'], $settings['marginBottom'], $settings['marginLeft'] ), $settings['marginUnit'] );
218 $css->add_property( 'border-width', array( $settings['borderSizeTop'], $settings['borderSizeRight'], $settings['borderSizeBottom'], $settings['borderSizeLeft'] ), 'px' );
219 $css->add_property( 'border-color', generateblocks_hex2rgba( $settings['borderColor'], $settings['borderColorOpacity'] ) );
220
221 if ( $blockVersion < 3 && ! $using_global_style ) {
222 $css->add_property( 'display', 'inline-flex' );
223 $css->add_property( 'align-items', 'center' );
224 $css->add_property( 'justify-content', 'center' );
225 $css->add_property( 'text-align', 'center' );
226 }
227
228 $css->set_selector( $selector . ':hover, ' . $selector . ':active, ' . $selector . ':focus' );
229 $css->add_property( 'background-color', generateblocks_hex2rgba( $settings['backgroundColorHover'], $settings['backgroundColorHoverOpacity'] ) );
230 $css->add_property( 'color', $settings['textColorHover'] );
231 $css->add_property( 'border-color', generateblocks_hex2rgba( $settings['borderColorHover'], $settings['borderColorHoverOpacity'] ) );
232
233 $visited_selector = $use_visited_selector
234 ? ', ' . $selector . '.gb-block-is-current:visited'
235 : '';
236
237 $current_selector = sprintf(
238 '%1$s.gb-block-is-current, %1$s.gb-block-is-current:hover, %1$s.gb-block-is-current:active, %1$s.gb-block-is-current:focus',
239 $selector
240 );
241
242 $css->set_selector( $current_selector . $visited_selector );
243 $css->add_property( 'background-color', $settings['backgroundColorCurrent'] );
244 $css->add_property( 'color', $settings['textColorCurrent'] );
245 $css->add_property( 'border-color', $settings['borderColorCurrent'] );
246
247 if ( $settings['hasIcon'] ) {
248 $css->set_selector( $selector . ' .gb-icon' );
249 $css->add_property( 'font-size', $settings['iconSize'], $settings['iconSizeUnit'] );
250 $css->add_property( 'line-height', '0' );
251
252 if ( ! $settings['removeText'] ) {
253 $css->add_property( 'padding', array( $settings['iconPaddingTop'], $settings['iconPaddingRight'], $settings['iconPaddingBottom'], $settings['iconPaddingLeft'] ), $settings['iconPaddingUnit'] );
254 }
255
256 if ( $blockVersion < 3 ) {
257 $css->add_property( 'align-items', 'center' );
258 $css->add_property( 'display', 'inline-flex' );
259 }
260 }
261
262 $tablet_css->set_selector( $selector );
263 generateblocks_add_layout_css( $tablet_css, $settings, 'Tablet' );
264 generateblocks_add_sizing_css( $tablet_css, $settings, 'Tablet' );
265 generateblocks_add_flex_child_css( $tablet_css, $settings, 'Tablet' );
266 $tablet_css->add_property( 'font-size', $settings['fontSizeTablet'], $settings['fontSizeUnit'] );
267 $tablet_css->add_property( 'letter-spacing', $settings['letterSpacingTablet'], 'em' );
268 $tablet_css->add_property( 'text-align', $settings['alignmentTablet'] );
269 $tablet_css->add_property( 'padding', array( $settings['paddingTopTablet'], $settings['paddingRightTablet'], $settings['paddingBottomTablet'], $settings['paddingLeftTablet'] ), $settings['paddingUnit'] );
270 $tablet_css->add_property( 'border-radius', array( $settings['borderRadiusTopLeftTablet'], $settings['borderRadiusTopRightTablet'], $settings['borderRadiusBottomRightTablet'], $settings['borderRadiusBottomLeftTablet'] ), $settings['borderRadiusUnit'] );
271 $tablet_css->add_property( 'margin', array( $settings['marginTopTablet'], $settings['marginRightTablet'], $settings['marginBottomTablet'], $settings['marginLeftTablet'] ), $settings['marginUnit'] );
272 $tablet_css->add_property( 'border-width', array( $settings['borderSizeTopTablet'], $settings['borderSizeRightTablet'], $settings['borderSizeBottomTablet'], $settings['borderSizeLeftTablet'] ), 'px' );
273
274 if ( $settings['hasIcon'] ) {
275 $tablet_css->set_selector( $selector . ' .gb-icon' );
276 $tablet_css->add_property( 'font-size', $settings['iconSizeTablet'], $settings['iconSizeUnit'] );
277
278 if ( ! $settings['removeText'] ) {
279 $tablet_css->add_property( 'padding', array( $settings['iconPaddingTopTablet'], $settings['iconPaddingRightTablet'], $settings['iconPaddingBottomTablet'], $settings['iconPaddingLeftTablet'] ), $settings['iconPaddingUnit'] );
280 }
281 }
282
283 $mobile_css->set_selector( $selector );
284 generateblocks_add_layout_css( $mobile_css, $settings, 'Mobile' );
285 generateblocks_add_sizing_css( $mobile_css, $settings, 'Mobile' );
286 generateblocks_add_flex_child_css( $mobile_css, $settings, 'Mobile' );
287 $mobile_css->add_property( 'font-size', $settings['fontSizeMobile'], $settings['fontSizeUnit'] );
288 $mobile_css->add_property( 'letter-spacing', $settings['letterSpacingMobile'], 'em' );
289 $mobile_css->add_property( 'text-align', $settings['alignmentMobile'] );
290 $mobile_css->add_property( 'padding', array( $settings['paddingTopMobile'], $settings['paddingRightMobile'], $settings['paddingBottomMobile'], $settings['paddingLeftMobile'] ), $settings['paddingUnit'] );
291 $mobile_css->add_property( 'border-radius', array( $settings['borderRadiusTopLeftMobile'], $settings['borderRadiusTopRightMobile'], $settings['borderRadiusBottomRightMobile'], $settings['borderRadiusBottomLeftMobile'] ), $settings['borderRadiusUnit'] );
292 $mobile_css->add_property( 'margin', array( $settings['marginTopMobile'], $settings['marginRightMobile'], $settings['marginBottomMobile'], $settings['marginLeftMobile'] ), $settings['marginUnit'] );
293 $mobile_css->add_property( 'border-width', array( $settings['borderSizeTopMobile'], $settings['borderSizeRightMobile'], $settings['borderSizeBottomMobile'], $settings['borderSizeLeftMobile'] ), 'px' );
294
295 if ( $settings['hasIcon'] ) {
296 $mobile_css->set_selector( $selector . ' .gb-icon' );
297 $mobile_css->add_property( 'font-size', $settings['iconSizeMobile'], $settings['iconSizeUnit'] );
298
299 if ( ! $settings['removeText'] ) {
300 $mobile_css->add_property( 'padding', array( $settings['iconPaddingTopMobile'], $settings['iconPaddingRightMobile'], $settings['iconPaddingBottomMobile'], $settings['iconPaddingLeftMobile'] ), $settings['iconPaddingUnit'] );
301 }
302 }
303
304 // Store this block ID in memory.
305 self::store_block_id( $id );
306
307 /**
308 * Do generateblocks_block_css_data hook
309 *
310 * @since 1.0
311 *
312 * @param string $name The name of our block.
313 * @param array $settings The settings for the current block.
314 * @param object $css Our desktop/main CSS data.
315 * @param object $desktop_css Our desktop only CSS data.
316 * @param object $tablet_css Our tablet CSS data.
317 * @param object $tablet_only_css Our tablet only CSS data.
318 * @param object $mobile_css Our mobile CSS data.
319 */
320 do_action(
321 'generateblocks_block_css_data',
322 'button',
323 $settings,
324 $css,
325 $desktop_css,
326 $tablet_css,
327 $tablet_only_css,
328 $mobile_css
329 );
330
331 return [
332 'main' => $css->css_output(),
333 'desktop' => $desktop_css->css_output(),
334 'tablet' => $tablet_css->css_output(),
335 'tablet_only' => $tablet_only_css->css_output(),
336 'mobile' => $mobile_css->css_output(),
337 ];
338 }
339
340 /**
341 * Wrapper function for our dynamic buttons.
342 *
343 * @since 1.6.0
344 * @param array $attributes The block attributes.
345 * @param string $content The dynamic text to display.
346 * @param WP_Block $block Block instance.
347 */
348 public static function render_block( $attributes, $content, $block ) {
349 if ( ! isset( $attributes['hasUrl'] ) && strpos( trim( $content ), '<a' ) === 0 ) {
350 $attributes['hasUrl'] = true;
351 }
352
353 if ( ! isset( $attributes['useDynamicData'] ) || ! $attributes['useDynamicData'] ) {
354 // Add styles to this block if needed.
355 $content = generateblocks_maybe_add_block_css(
356 $content,
357 [
358 'class_name' => 'GenerateBlocks_Block_Button',
359 'attributes' => $attributes,
360 'block_ids' => self::$block_ids,
361 ]
362 );
363
364 return $content;
365 }
366
367 $allow_empty_content = false;
368
369 // Add an attribute showing we're working with the Button block.
370 $attributes['isButton'] = true;
371
372 if ( empty( $attributes['dynamicContentType'] ) ) {
373 $dynamic_content = GenerateBlocks_Dynamic_Content::get_static_content( $content );
374
375 if ( ! empty( $attributes['hasIcon'] ) && ! empty( $attributes['removeText'] ) ) {
376 // Allow icon-only items to continue.
377 $allow_empty_content = true;
378 }
379 } else {
380 $dynamic_content = GenerateBlocks_Dynamic_Content::get_content( $attributes, $block );
381 }
382
383 if ( ! $dynamic_content && '0' !== $dynamic_content && ! $allow_empty_content ) {
384 return '';
385 }
386
387 $defaults = generateblocks_get_block_defaults();
388
389 $settings = wp_parse_args(
390 $attributes,
391 $defaults['button']
392 );
393
394 $classNames = array(
395 'gb-button',
396 'gb-button-' . $settings['uniqueId'],
397 );
398
399 if ( ! empty( $settings['className'] ) ) {
400 $classNames[] = $settings['className'];
401 }
402
403 if ( empty( $settings['hasIcon'] ) ) {
404 $classNames[] = 'gb-button-text';
405 }
406
407 $relAttributes = array();
408
409 if ( ! empty( $settings['relNoFollow'] ) ) {
410 $relAttributes[] = 'nofollow';
411 }
412
413 if ( ! empty( $settings['target'] ) ) {
414 $relAttributes[] = 'noopener';
415 $relAttributes[] = 'noreferrer';
416 }
417
418 if ( ! empty( $settings['relSponsored'] ) ) {
419 $relAttributes[] = 'sponsored';
420 }
421
422 $icon_html = '';
423
424 // Extract our icon from the static HTML.
425 if ( $settings['hasIcon'] ) {
426 $icon_html = GenerateBlocks_Dynamic_Content::get_icon_html( $content );
427 }
428
429 // Add styles to this block if needed.
430 $output = generateblocks_maybe_add_block_css(
431 '',
432 [
433 'class_name' => 'GenerateBlocks_Block_Button',
434 'attributes' => $attributes,
435 'block_ids' => self::$block_ids,
436 ]
437 );
438
439 foreach ( (array) $dynamic_content as $content ) {
440 $tagName = 'span';
441
442 $dynamic_link = GenerateBlocks_Dynamic_Content::get_dynamic_url( $attributes, $block );
443
444 if ( ! empty( $content['attributes']['href'] ) || $dynamic_link ) {
445 $tagName = 'a';
446 }
447
448 if ( 'button' === $settings['buttonType'] ) {
449 $tagName = 'button';
450 }
451
452 $button_attributes = array(
453 'id' => isset( $settings['anchor'] ) ? $settings['anchor'] : null,
454 'class' => implode( ' ', $classNames ),
455 'href' => 'a' === $tagName ? $dynamic_link : null,
456 'rel' => ! empty( $relAttributes ) ? implode( ' ', $relAttributes ) : null,
457 'target' => ! empty( $settings['target'] ) ? '_blank' : null,
458 );
459
460 if ( isset( $content['attributes'] ) ) {
461 foreach ( $content['attributes'] as $attribute => $value ) {
462 if ( 'class' === $attribute ) {
463 $button_attributes[ $attribute ] .= ' ' . $value;
464 } else {
465 $button_attributes[ $attribute ] = $value;
466 }
467 }
468 }
469
470 $output .= sprintf(
471 '<%1$s %2$s>',
472 $tagName,
473 generateblocks_attr(
474 'dynamic-button',
475 $button_attributes,
476 $settings,
477 $block
478 )
479 );
480
481 if ( $icon_html ) {
482 if ( 'left' === $settings['iconLocation'] ) {
483 $output .= $icon_html;
484 }
485
486 $output .= '<span class="gb-button-text">';
487 }
488
489 if ( isset( $content['content'] ) ) {
490 $output .= $content['content'];
491 } else {
492 $output .= $content;
493 }
494
495 if ( $icon_html ) {
496 $output .= '</span>';
497
498 if ( 'right' === $settings['iconLocation'] ) {
499 $output .= $icon_html;
500 }
501 }
502
503 $output .= sprintf(
504 '</%s>',
505 $tagName
506 );
507 }
508
509 return $output;
510 }
511 }
512