class-spec-separator.php
461 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Sureforms - Separator. |
| 4 | * |
| 5 | * @package Sureforms |
| 6 | */ |
| 7 | |
| 8 | if ( ! defined( 'ABSPATH' ) ) { |
| 9 | exit; // Exit if accessed directly. |
| 10 | } |
| 11 | |
| 12 | if ( ! class_exists( 'Spec_Separator' ) ) { |
| 13 | |
| 14 | /** |
| 15 | * Class Spec_Separator. |
| 16 | */ |
| 17 | class Spec_Separator { |
| 18 | |
| 19 | /** |
| 20 | * Member Variable |
| 21 | * |
| 22 | * @var instance |
| 23 | */ |
| 24 | private static $instance; |
| 25 | |
| 26 | /** |
| 27 | * Initiator |
| 28 | */ |
| 29 | public static function get_instance() { |
| 30 | if ( ! isset( self::$instance ) ) { |
| 31 | self::$instance = new self(); |
| 32 | } |
| 33 | return self::$instance; |
| 34 | } |
| 35 | |
| 36 | /** |
| 37 | * Constructor |
| 38 | */ |
| 39 | public function __construct() { |
| 40 | |
| 41 | // Activation hook. |
| 42 | add_action( 'init', [ $this, 'register_blocks' ] ); |
| 43 | } |
| 44 | |
| 45 | /** |
| 46 | * Registers the `core/latest-posts` block on server. |
| 47 | * |
| 48 | * @since 0.0.1 |
| 49 | */ |
| 50 | public function register_blocks() { |
| 51 | |
| 52 | // Check if the register function exists. |
| 53 | if ( ! function_exists( 'register_block_type' ) ) { |
| 54 | return; |
| 55 | } |
| 56 | |
| 57 | $attr = [ |
| 58 | 'block_id' => |
| 59 | [ |
| 60 | 'type' => 'string', |
| 61 | ], |
| 62 | 'isPreview' => |
| 63 | [ |
| 64 | 'type' => 'boolean', |
| 65 | 'default' => false, |
| 66 | ], |
| 67 | 'separatorAlign' => |
| 68 | [ |
| 69 | 'type' => 'string', |
| 70 | 'default' => 'center', |
| 71 | ], |
| 72 | 'separatorAlignTablet' => |
| 73 | [ |
| 74 | 'type' => 'string', |
| 75 | 'default' => 'center', |
| 76 | ], |
| 77 | 'separatorAlignMobile' => |
| 78 | [ |
| 79 | 'type' => 'string', |
| 80 | 'default' => 'center', |
| 81 | ], |
| 82 | 'separatorStyle' => |
| 83 | [ |
| 84 | 'type' => 'string', |
| 85 | 'default' => 'solid', |
| 86 | ], |
| 87 | 'separatorWidth' => |
| 88 | [ |
| 89 | 'type' => 'number', |
| 90 | 'default' => 100, |
| 91 | ], |
| 92 | 'separatorWidthTablet' => |
| 93 | [ |
| 94 | 'type' => 'number', |
| 95 | 'default' => 100, |
| 96 | ], |
| 97 | 'separatorWidthMobile' => |
| 98 | [ |
| 99 | 'type' => 'number', |
| 100 | 'default' => 100, |
| 101 | ], |
| 102 | 'separatorWidthType' => |
| 103 | [ |
| 104 | 'type' => 'string', |
| 105 | 'default' => '%', |
| 106 | ], |
| 107 | 'separatorBorderHeight' => |
| 108 | [ |
| 109 | 'type' => 'number', |
| 110 | 'default' => 3, |
| 111 | ], |
| 112 | 'separatorBorderHeightMobile' => |
| 113 | [ |
| 114 | 'type' => 'number', |
| 115 | 'default' => 3, |
| 116 | ], |
| 117 | 'separatorBorderHeightTablet' => |
| 118 | [ |
| 119 | 'type' => 'number', |
| 120 | 'default' => 3, |
| 121 | ], |
| 122 | 'separatorBorderHeightUnit' => |
| 123 | [ |
| 124 | 'type' => 'string', |
| 125 | 'default' => 'px', |
| 126 | ], |
| 127 | 'separatorSize' => |
| 128 | [ |
| 129 | 'type' => 'number', |
| 130 | 'default' => 5, |
| 131 | ], |
| 132 | 'separatorSizeMobile' => |
| 133 | [ |
| 134 | 'type' => 'number', |
| 135 | 'default' => 5, |
| 136 | ], |
| 137 | 'separatorSizeTablet' => |
| 138 | [ |
| 139 | 'type' => 'number', |
| 140 | 'default' => 5, |
| 141 | ], |
| 142 | 'separatorSizeType' => |
| 143 | [ |
| 144 | 'default' => 'px', |
| 145 | ], |
| 146 | 'separatorColor' => |
| 147 | [ |
| 148 | 'type' => 'string', |
| 149 | 'default' => '#000', |
| 150 | ], |
| 151 | 'separatorHeight' => |
| 152 | [ |
| 153 | 'type' => 'number', |
| 154 | 'default' => 10, |
| 155 | ], |
| 156 | 'separatorHeightMobile' => |
| 157 | [ |
| 158 | 'type' => 'number', |
| 159 | 'default' => 10, |
| 160 | ], |
| 161 | 'separatorHeightTablet' => |
| 162 | [ |
| 163 | 'type' => 'number', |
| 164 | 'default' => 10, |
| 165 | ], |
| 166 | 'separatorHeightType' => |
| 167 | [ |
| 168 | 'type' => 'string', |
| 169 | 'default' => 'px', |
| 170 | ], |
| 171 | 'separatorBottomPadding' => |
| 172 | [ |
| 173 | 'type' => 'number', |
| 174 | ], |
| 175 | 'separatorPaddingTopTablet' => |
| 176 | [ |
| 177 | 'type' => 'number', |
| 178 | ], |
| 179 | 'separatorPaddingRightTablet' => |
| 180 | [ |
| 181 | 'type' => 'number', |
| 182 | ], |
| 183 | 'separatorPaddingBottomTablet' => |
| 184 | [ |
| 185 | 'type' => 'number', |
| 186 | ], |
| 187 | 'separatorPaddingLeftTablet' => |
| 188 | [ |
| 189 | 'type' => 'number', |
| 190 | ], |
| 191 | 'separatorPaddingTopMobile' => |
| 192 | [ |
| 193 | 'type' => 'number', |
| 194 | ], |
| 195 | 'separatorPaddingRightMobile' => |
| 196 | [ |
| 197 | 'type' => 'number', |
| 198 | ], |
| 199 | 'separatorPaddingBottomMobile' => |
| 200 | [ |
| 201 | 'type' => 'number', |
| 202 | ], |
| 203 | 'separatorPaddingLeftMobile' => |
| 204 | [ |
| 205 | 'type' => 'number', |
| 206 | ], |
| 207 | 'separatorPaddingUnit' => |
| 208 | [ |
| 209 | 'type' => 'number', |
| 210 | 'default' => 'px', |
| 211 | ], |
| 212 | 'separatorMobilePaddingUnit' => |
| 213 | [ |
| 214 | 'type' => 'number', |
| 215 | 'default' => 'px', |
| 216 | ], |
| 217 | 'separatorTabletPaddingUnit' => |
| 218 | [ |
| 219 | 'type' => 'number', |
| 220 | 'default' => 'px', |
| 221 | ], |
| 222 | 'separatorPaddingLink' => |
| 223 | [ |
| 224 | 'type' => 'boolean', |
| 225 | 'default' => true, |
| 226 | ], |
| 227 | 'elementType' => |
| 228 | [ |
| 229 | 'type' => 'string', |
| 230 | 'default' => 'none', |
| 231 | ], |
| 232 | 'separatorText' => |
| 233 | [ |
| 234 | 'type' => 'string', |
| 235 | 'default' => __( 'Divider', 'sureforms' ), |
| 236 | ], |
| 237 | 'separatorTextTag' => |
| 238 | [ |
| 239 | 'type' => 'string', |
| 240 | 'default' => 'h4', |
| 241 | ], |
| 242 | 'separatorIcon' => |
| 243 | [ |
| 244 | 'type' => 'string', |
| 245 | 'default' => 'circle-check', |
| 246 | ], |
| 247 | 'elementPosition' => |
| 248 | [ |
| 249 | 'type' => 'string', |
| 250 | 'default' => 'center', |
| 251 | ], |
| 252 | 'elementSpacing' => |
| 253 | [ |
| 254 | 'type' => 'number', |
| 255 | 'default' => 15, |
| 256 | ], |
| 257 | 'elementSpacingTablet' => |
| 258 | [ |
| 259 | 'type' => 'number', |
| 260 | 'default' => 15, |
| 261 | ], |
| 262 | 'elementSpacingMobile' => |
| 263 | [ |
| 264 | 'type' => 'number', |
| 265 | 'default' => 15, |
| 266 | ], |
| 267 | 'elementSpacingUnit' => |
| 268 | [ |
| 269 | 'type' => 'string', |
| 270 | 'default' => 'px', |
| 271 | ], |
| 272 | 'elementTextLoadGoogleFonts' => |
| 273 | [ |
| 274 | 'type' => 'boolean', |
| 275 | 'default' => false, |
| 276 | ], |
| 277 | 'elementTextFontFamily' => |
| 278 | [ |
| 279 | 'type' => 'string', |
| 280 | 'default' => 'Default', |
| 281 | ], |
| 282 | 'elementTextFontWeight' => |
| 283 | [ |
| 284 | 'type' => 'string', |
| 285 | ], |
| 286 | 'elementTextFontSize' => |
| 287 | [ |
| 288 | 'type' => 'number', |
| 289 | ], |
| 290 | 'elementTextFontSizeType' => |
| 291 | [ |
| 292 | 'type' => 'string', |
| 293 | 'default' => 'px', |
| 294 | ], |
| 295 | 'elementTextFontSizeTablet' => |
| 296 | [ |
| 297 | 'type' => 'number', |
| 298 | ], |
| 299 | 'elementTextFontSizeMobile' => |
| 300 | [ |
| 301 | 'type' => 'number', |
| 302 | ], |
| 303 | 'elementTextLineHeightType' => |
| 304 | [ |
| 305 | 'type' => 'string', |
| 306 | 'default' => 'em', |
| 307 | ], |
| 308 | 'elementTextLineHeight' => |
| 309 | [ |
| 310 | 'type' => 'number', |
| 311 | 'default' => 1, |
| 312 | ], |
| 313 | 'elementTextLineHeightTablet' => |
| 314 | [ |
| 315 | 'type' => 'number', |
| 316 | 'default' => 1, |
| 317 | ], |
| 318 | 'elementTextLineHeightMobile' => |
| 319 | [ |
| 320 | 'type' => 'number', |
| 321 | 'default' => 1, |
| 322 | ], |
| 323 | 'elementTextFontStyle' => |
| 324 | [ |
| 325 | 'type' => 'string', |
| 326 | 'default' => 'normal', |
| 327 | ], |
| 328 | 'elementTextLetterSpacing' => |
| 329 | [ |
| 330 | 'type' => 'number', |
| 331 | ], |
| 332 | 'elementTextLetterSpacingTablet' => |
| 333 | [ |
| 334 | 'type' => 'number', |
| 335 | ], |
| 336 | 'elementTextLetterSpacingMobile' => |
| 337 | [ |
| 338 | 'type' => 'number', |
| 339 | ], |
| 340 | 'elementTextLetterSpacingType' => |
| 341 | [ |
| 342 | 'type' => 'string', |
| 343 | 'default' => 'px', |
| 344 | ], |
| 345 | 'elementTextDecoration' => |
| 346 | [ |
| 347 | 'type' => 'string', |
| 348 | ], |
| 349 | 'elementTextTransform' => |
| 350 | [ |
| 351 | 'type' => 'string', |
| 352 | ], |
| 353 | 'elementColor' => |
| 354 | [ |
| 355 | 'type' => 'string', |
| 356 | 'default' => '#000', |
| 357 | ], |
| 358 | 'elementIconWidth' => |
| 359 | [ |
| 360 | 'type' => 'number', |
| 361 | 'default' => 30, |
| 362 | ], |
| 363 | 'elementIconWidthTablet' => |
| 364 | [ |
| 365 | 'type' => 'number', |
| 366 | 'default' => 30, |
| 367 | ], |
| 368 | 'elementIconWidthMobile' => |
| 369 | [ |
| 370 | 'type' => 'number', |
| 371 | 'default' => 30, |
| 372 | ], |
| 373 | 'elementIconWidthType' => |
| 374 | [ |
| 375 | 'type' => 'string', |
| 376 | 'default' => 'px', |
| 377 | ], |
| 378 | ]; |
| 379 | |
| 380 | $attributes = apply_filters( 'srfm_gutenberg_separator_attributes_filters', $attr ); |
| 381 | |
| 382 | register_block_type( |
| 383 | 'srfm/separator', |
| 384 | [ |
| 385 | 'attributes' => $attributes, |
| 386 | 'render_callback' => [ $this, 'render_html' ], |
| 387 | ] |
| 388 | ); |
| 389 | } |
| 390 | |
| 391 | /** |
| 392 | * Render CF HTML. |
| 393 | * |
| 394 | * @param array $attributes Array of block attributes. |
| 395 | * |
| 396 | * @since 0.0.1 |
| 397 | */ |
| 398 | public function render_html( $attributes ) { |
| 399 | |
| 400 | $block_id = ''; |
| 401 | |
| 402 | if ( isset( $attributes['block_id'] ) ) { |
| 403 | $block_id = $attributes['block_id']; |
| 404 | } |
| 405 | |
| 406 | $custom_svg = [ |
| 407 | 'rectangles' => 'url("data:image/svg+xml,%3Csvg width=\'16\' height=\'16\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6.4 0H16L9.6 16H0L6.4 0Z\' fill=\'black\'/%3E%3C/svg%3E")', |
| 408 | 'parallelogram' => 'url("data:image/svg+xml,%3Csvg width=\'8\' height=\'16\' viewBox=\'0 0 8 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect width=\'8\' height=\'16\' fill=\'black\'/%3E%3C/svg%3E")', |
| 409 | 'slash' => 'url("data:image/svg+xml,%3Csvg width=\'16\' height=\'16\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6.29312 16.9999L17 6.29302M14.2931 16.9999L17 14.293M-0.707031 15.9999L16.0002 -0.707153M8.00017 -0.707153L-0.706882 7.9999\' stroke=\'black\'/%3E%3C/svg%3E")', |
| 410 | 'leaves' => 'url("data:image/svg+xml,%3Csvg width=\'16\' height=\'16\' viewBox=\'0 0 16 16\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg clip-path=\'url(%23clip0_2356_5631)\'%3E%3Cpath d=\'M15 1C10.5 1 9 2.5 9 7C13.5 7 15 5.5 15 1Z\' stroke=\'black\'/%3E%3Cpath d=\'M1 1C5.5 1 7 2.5 7 7C2.5 7 1 5.5 1 1Z\' stroke=\'black\'/%3E%3Cpath d=\'M15 15C10.5 15 9 13.5 9 9C13.5 9 15 10.5 15 15Z\' stroke=\'black\'/%3E%3Cpath d=\'M1 15C5.5 15 7 13.5 7 9C2.5 9 1 10.5 1 15Z\' stroke=\'black\'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=\'clip0_2356_5631\'%3E%3Crect width=\'16\' height=\'16\' fill=\'white\'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")', |
| 411 | ]; |
| 412 | |
| 413 | $separator_icon = isset( $attributes['separatorIcon'] ) ? $attributes['separatorIcon'] : ''; |
| 414 | $separator_style = isset( $attributes['separatorStyle'] ) ? $attributes['separatorStyle'] : ''; |
| 415 | $element_type = isset( $attributes['elementType'] ) ? $attributes['elementType'] : ''; |
| 416 | $element_type_css = $element_type ? 'wp-block-uagb-separator--' . $attributes['elementType'] : ''; |
| 417 | $separator_text_tag = isset( $attributes['separatorTextTag'] ) ? $attributes['separatorTextTag'] : ''; |
| 418 | $svg_pattern = isset( $custom_svg[ $separator_style ] ) ? $custom_svg[ $separator_style ] : ''; |
| 419 | |
| 420 | $main_classes = [ |
| 421 | 'wp-block-uagb-separator', |
| 422 | 'uagb-block', |
| 423 | 'uagb-block-' . $block_id, |
| 424 | $element_type_css, |
| 425 | ]; |
| 426 | |
| 427 | if ( isset( $attributes['className'] ) ) { |
| 428 | $main_classes[] = $attributes['className']; |
| 429 | } |
| 430 | |
| 431 | $custom_tag = '<' . $separator_text_tag . ' class="uagb-html-tag">' . $attributes['separatorText'] . '</' . $separator_text_tag . '>'; |
| 432 | |
| 433 | ob_start(); |
| 434 | ?> |
| 435 | <div class = "<?php echo esc_attr( implode( ' ', $main_classes ) ); ?>" style="--my-background-image: <?php echo esc_attr( $svg_pattern ); ?>;" > |
| 436 | <div class="wp-block-uagb-separator-wrapper"> |
| 437 | <div class="wp-block-uagb-separator__inner"> |
| 438 | <div class="wp-block-uagb-separator-element"> |
| 439 | <?php |
| 440 | if ( 'icon' === $element_type ) { |
| 441 | Spec_Gb_Helper::render_svg_html( $separator_icon ); |
| 442 | } elseif ( 'text' === $element_type ) { |
| 443 | echo wp_kses_post( $custom_tag ); |
| 444 | } |
| 445 | ?> |
| 446 | </div> |
| 447 | </div> |
| 448 | </div> |
| 449 | </div> |
| 450 | <?php |
| 451 | return ob_get_clean(); |
| 452 | } |
| 453 | } |
| 454 | |
| 455 | /** |
| 456 | * Prepare if class 'Spec_Separator' exist. |
| 457 | * Kicking this off by calling 'get_instance()' method |
| 458 | */ |
| 459 | Spec_Separator::get_instance(); |
| 460 | } |
| 461 |