Animations.php
1 month ago
BackButton.php
7 months ago
BeforeAfter.php
1 month ago
BlockPatterns.php
4 months ago
Carousel.php
1 month ago
ContainerEdgeAlignment.php
1 month ago
Counter.php
1 month ago
Events.php
7 months ago
FluidTypography.php
4 months ago
Gallery.php
8 months ago
GravityFormsInline.php
1 month ago
Headline.php
1 month ago
InsertPost.php
1 month ago
ProductCategories.php
8 months ago
ReadingProgress.php
7 months ago
ReadingTime.php
8 months ago
ShapeAnimations.php
1 month ago
StackedImages.php
4 months ago
StickyColumn.php
1 month ago
Testimonials.php
8 months ago
TextAnimation.php
1 month ago
TextAnimation.php
416 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Text Animation block for FrontBlocks. |
| 4 | * |
| 5 | * @package FrontBlocks |
| 6 | * @author Alex castellón <castellon@close.technology> |
| 7 | * @copyright 2025 Closemarketing |
| 8 | * @version 1.0.0 |
| 9 | */ |
| 10 | |
| 11 | namespace FrontBlocks\Frontend; |
| 12 | |
| 13 | defined( 'ABSPATH' ) || exit; |
| 14 | |
| 15 | /** |
| 16 | * TextAnimation class. |
| 17 | * |
| 18 | * @since 1.3.0 |
| 19 | */ |
| 20 | class TextAnimation { |
| 21 | |
| 22 | /** |
| 23 | * Constructor. |
| 24 | */ |
| 25 | public function __construct() { |
| 26 | add_action( 'init', array( $this, 'register_block' ) ); |
| 27 | add_action( 'enqueue_block_editor_assets', array( $this, 'enqueue_editor_assets' ) ); |
| 28 | add_filter( 'render_block_frontblocks/text-animation', array( $this, 'maybe_enqueue_frontend_assets' ), 10, 2 ); |
| 29 | } |
| 30 | |
| 31 | /** |
| 32 | * Register the block type and its frontend style. |
| 33 | * |
| 34 | * @return void |
| 35 | */ |
| 36 | public function register_block() { |
| 37 | wp_register_script( |
| 38 | 'frontblocks-text-animation-editor', |
| 39 | FRBL_PLUGIN_URL . 'assets/text-animation/frontblocks-text-animation.js', |
| 40 | array( |
| 41 | 'wp-blocks', |
| 42 | 'wp-element', |
| 43 | 'wp-editor', |
| 44 | 'wp-block-editor', |
| 45 | 'wp-components', |
| 46 | 'wp-i18n', |
| 47 | ), |
| 48 | FRBL_VERSION, |
| 49 | true |
| 50 | ); |
| 51 | |
| 52 | wp_register_style( |
| 53 | 'frontblocks-text-animation', |
| 54 | FRBL_PLUGIN_URL . 'assets/text-animation/frontblocks-text-animation.css', |
| 55 | array(), |
| 56 | FRBL_VERSION |
| 57 | ); |
| 58 | |
| 59 | wp_register_script( |
| 60 | 'frontblocks-text-animation-frontend', |
| 61 | FRBL_PLUGIN_URL . 'assets/text-animation/frontblocks-text-animation-frontend.js', |
| 62 | array(), |
| 63 | FRBL_VERSION, |
| 64 | true |
| 65 | ); |
| 66 | |
| 67 | wp_register_script( |
| 68 | 'frontblocks-animation-fade-in', |
| 69 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/fade-in.js', |
| 70 | array( 'frontblocks-text-animation-frontend' ), |
| 71 | FRBL_VERSION, |
| 72 | true |
| 73 | ); |
| 74 | |
| 75 | wp_register_script( |
| 76 | 'frontblocks-animation-typewriter', |
| 77 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/typewriter.js', |
| 78 | array( 'frontblocks-text-animation-frontend' ), |
| 79 | FRBL_VERSION, |
| 80 | true |
| 81 | ); |
| 82 | |
| 83 | wp_register_script( |
| 84 | 'frontblocks-animation-rotate-in', |
| 85 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/rotate-in.js', |
| 86 | array( 'frontblocks-text-animation-frontend' ), |
| 87 | FRBL_VERSION, |
| 88 | true |
| 89 | ); |
| 90 | |
| 91 | wp_register_script( |
| 92 | 'frontblocks-animation-flip-in', |
| 93 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/flip-in.js', |
| 94 | array( 'frontblocks-text-animation-frontend' ), |
| 95 | FRBL_VERSION, |
| 96 | true |
| 97 | ); |
| 98 | |
| 99 | wp_register_script( |
| 100 | 'frontblocks-animation-bounce-in', |
| 101 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/bounce-in.js', |
| 102 | array( 'frontblocks-text-animation-frontend' ), |
| 103 | FRBL_VERSION, |
| 104 | true |
| 105 | ); |
| 106 | |
| 107 | wp_register_script( |
| 108 | 'frontblocks-animation-glow-in', |
| 109 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/glow-in.js', |
| 110 | array( 'frontblocks-text-animation-frontend' ), |
| 111 | FRBL_VERSION, |
| 112 | true |
| 113 | ); |
| 114 | |
| 115 | wp_register_script( |
| 116 | 'frontblocks-animation-blur-in', |
| 117 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/blur-in.js', |
| 118 | array( 'frontblocks-text-animation-frontend' ), |
| 119 | FRBL_VERSION, |
| 120 | true |
| 121 | ); |
| 122 | |
| 123 | wp_register_script( |
| 124 | 'frontblocks-animation-scale-in', |
| 125 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/scale-in.js', |
| 126 | array( 'frontblocks-text-animation-frontend' ), |
| 127 | FRBL_VERSION, |
| 128 | true |
| 129 | ); |
| 130 | |
| 131 | wp_register_script( |
| 132 | 'frontblocks-animation-slide-up', |
| 133 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/slide-up.js', |
| 134 | array( 'frontblocks-text-animation-frontend' ), |
| 135 | FRBL_VERSION, |
| 136 | true |
| 137 | ); |
| 138 | |
| 139 | wp_register_script( |
| 140 | 'frontblocks-animation-slide-down', |
| 141 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/slide-down.js', |
| 142 | array( 'frontblocks-text-animation-frontend' ), |
| 143 | FRBL_VERSION, |
| 144 | true |
| 145 | ); |
| 146 | |
| 147 | wp_register_script( |
| 148 | 'frontblocks-animation-slide-left', |
| 149 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/slide-left.js', |
| 150 | array( 'frontblocks-text-animation-frontend' ), |
| 151 | FRBL_VERSION, |
| 152 | true |
| 153 | ); |
| 154 | |
| 155 | wp_register_script( |
| 156 | 'frontblocks-animation-slide-right', |
| 157 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/slide-right.js', |
| 158 | array( 'frontblocks-text-animation-frontend' ), |
| 159 | FRBL_VERSION, |
| 160 | true |
| 161 | ); |
| 162 | |
| 163 | wp_register_script( |
| 164 | 'frontblocks-animation-drop-in', |
| 165 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/drop-in.js', |
| 166 | array( 'frontblocks-text-animation-frontend' ), |
| 167 | FRBL_VERSION, |
| 168 | true |
| 169 | ); |
| 170 | |
| 171 | wp_register_script( |
| 172 | 'frontblocks-animation-swing', |
| 173 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/swing.js', |
| 174 | array( 'frontblocks-text-animation-frontend' ), |
| 175 | FRBL_VERSION, |
| 176 | true |
| 177 | ); |
| 178 | |
| 179 | wp_register_script( |
| 180 | 'frontblocks-animation-pulse', |
| 181 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/pulse.js', |
| 182 | array( 'frontblocks-text-animation-frontend' ), |
| 183 | FRBL_VERSION, |
| 184 | true |
| 185 | ); |
| 186 | |
| 187 | wp_register_script( |
| 188 | 'frontblocks-animation-flash', |
| 189 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/flash.js', |
| 190 | array( 'frontblocks-text-animation-frontend' ), |
| 191 | FRBL_VERSION, |
| 192 | true |
| 193 | ); |
| 194 | |
| 195 | wp_register_script( |
| 196 | 'frontblocks-animation-rubber-band', |
| 197 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/rubber-band.js', |
| 198 | array( 'frontblocks-text-animation-frontend' ), |
| 199 | FRBL_VERSION, |
| 200 | true |
| 201 | ); |
| 202 | |
| 203 | wp_register_script( |
| 204 | 'frontblocks-animation-wave', |
| 205 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/wave.js', |
| 206 | array( 'frontblocks-text-animation-frontend' ), |
| 207 | FRBL_VERSION, |
| 208 | true |
| 209 | ); |
| 210 | |
| 211 | wp_register_script( |
| 212 | 'frontblocks-animation-stretch', |
| 213 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/stretch.js', |
| 214 | array( 'frontblocks-text-animation-frontend' ), |
| 215 | FRBL_VERSION, |
| 216 | true |
| 217 | ); |
| 218 | |
| 219 | wp_register_script( |
| 220 | 'frontblocks-animation-squeeze', |
| 221 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/squeeze.js', |
| 222 | array( 'frontblocks-text-animation-frontend' ), |
| 223 | FRBL_VERSION, |
| 224 | true |
| 225 | ); |
| 226 | |
| 227 | wp_register_script( |
| 228 | 'frontblocks-animation-roll-in', |
| 229 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/roll-in.js', |
| 230 | array( 'frontblocks-text-animation-frontend' ), |
| 231 | FRBL_VERSION, |
| 232 | true |
| 233 | ); |
| 234 | |
| 235 | wp_register_script( |
| 236 | 'frontblocks-animation-glitch', |
| 237 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/glitch.js', |
| 238 | array( 'frontblocks-text-animation-frontend' ), |
| 239 | FRBL_VERSION, |
| 240 | true |
| 241 | ); |
| 242 | |
| 243 | wp_register_script( |
| 244 | 'frontblocks-animation-random-reveal', |
| 245 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/random-reveal.js', |
| 246 | array( 'frontblocks-text-animation-frontend' ), |
| 247 | FRBL_VERSION, |
| 248 | true |
| 249 | ); |
| 250 | |
| 251 | wp_register_script( |
| 252 | 'frontblocks-animation-flicker', |
| 253 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/flicker.js', |
| 254 | array( 'frontblocks-text-animation-frontend' ), |
| 255 | FRBL_VERSION, |
| 256 | true |
| 257 | ); |
| 258 | |
| 259 | wp_register_script( |
| 260 | 'frontblocks-animation-block-reveal', |
| 261 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/block-reveal.js', |
| 262 | array( 'frontblocks-text-animation-frontend' ), |
| 263 | FRBL_VERSION, |
| 264 | true |
| 265 | ); |
| 266 | |
| 267 | wp_register_script( |
| 268 | 'frontblocks-animation-tracking-expand', |
| 269 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/tracking-expand.js', |
| 270 | array( 'frontblocks-text-animation-frontend' ), |
| 271 | FRBL_VERSION, |
| 272 | true |
| 273 | ); |
| 274 | |
| 275 | wp_register_script( |
| 276 | 'frontblocks-animation-terminal-type', |
| 277 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/terminal-type.js', |
| 278 | array( 'frontblocks-text-animation-frontend' ), |
| 279 | FRBL_VERSION, |
| 280 | true |
| 281 | ); |
| 282 | |
| 283 | wp_register_script( |
| 284 | 'frontblocks-animation-solid-outline', |
| 285 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/solid-outline.js', |
| 286 | array( 'frontblocks-text-animation-frontend' ), |
| 287 | FRBL_VERSION, |
| 288 | true |
| 289 | ); |
| 290 | |
| 291 | wp_register_script( |
| 292 | 'frontblocks-animation-glitch-rgb', |
| 293 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/glitch-rgb.js', |
| 294 | array( 'frontblocks-text-animation-frontend' ), |
| 295 | FRBL_VERSION, |
| 296 | true |
| 297 | ); |
| 298 | |
| 299 | wp_register_script( |
| 300 | 'frontblocks-animation-water-drop', |
| 301 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/water-drop.js', |
| 302 | array( 'frontblocks-text-animation-frontend' ), |
| 303 | FRBL_VERSION, |
| 304 | true |
| 305 | ); |
| 306 | |
| 307 | wp_register_script( |
| 308 | 'frontblocks-animation-pulse-neon', |
| 309 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/pulse-neon.js', |
| 310 | array( 'frontblocks-text-animation-frontend' ), |
| 311 | FRBL_VERSION, |
| 312 | true |
| 313 | ); |
| 314 | |
| 315 | wp_register_script( |
| 316 | 'frontblocks-animation-shadow-pop', |
| 317 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/shadow-pop.js', |
| 318 | array( 'frontblocks-text-animation-frontend' ), |
| 319 | FRBL_VERSION, |
| 320 | true |
| 321 | ); |
| 322 | |
| 323 | wp_register_script( |
| 324 | 'frontblocks-animation-shuffle-text', |
| 325 | FRBL_PLUGIN_URL . 'assets/text-animation/animations/shuffle-text.js', |
| 326 | array( 'frontblocks-text-animation-frontend' ), |
| 327 | FRBL_VERSION, |
| 328 | true |
| 329 | ); |
| 330 | |
| 331 | register_block_type( |
| 332 | 'frontblocks/text-animation', |
| 333 | array( |
| 334 | 'editor_script' => 'frontblocks-text-animation-editor', |
| 335 | 'editor_style' => 'frontblocks-text-animation', |
| 336 | 'style' => 'frontblocks-text-animation', |
| 337 | ) |
| 338 | ); |
| 339 | } |
| 340 | |
| 341 | /** |
| 342 | * Enqueue frontend JS only when block with animation is on the page. |
| 343 | * |
| 344 | * @param string $block_content Block HTML. |
| 345 | * @param array $block Block data. |
| 346 | * @return string |
| 347 | */ |
| 348 | public function maybe_enqueue_frontend_assets( $block_content, $block ) { |
| 349 | $animation = $block['attrs']['animationType'] ?? 'none'; |
| 350 | |
| 351 | if ( 'none' === $animation ) { |
| 352 | return $block_content; |
| 353 | } |
| 354 | |
| 355 | $script_map = array( |
| 356 | 'fade-in' => 'frontblocks-animation-fade-in', |
| 357 | 'blur-in' => 'frontblocks-animation-blur-in', |
| 358 | 'glow-in' => 'frontblocks-animation-glow-in', |
| 359 | 'bounce-in' => 'frontblocks-animation-bounce-in', |
| 360 | 'flip-in' => 'frontblocks-animation-flip-in', |
| 361 | 'rotate-in' => 'frontblocks-animation-rotate-in', |
| 362 | 'typewriter' => 'frontblocks-animation-typewriter', |
| 363 | 'shuffle-text' => 'frontblocks-animation-shuffle-text', |
| 364 | 'slide-up' => 'frontblocks-animation-slide-up', |
| 365 | 'slide-down' => 'frontblocks-animation-slide-down', |
| 366 | 'slide-left' => 'frontblocks-animation-slide-left', |
| 367 | 'slide-right' => 'frontblocks-animation-slide-right', |
| 368 | 'drop-in' => 'frontblocks-animation-drop-in', |
| 369 | 'swing' => 'frontblocks-animation-swing', |
| 370 | 'pulse' => 'frontblocks-animation-pulse', |
| 371 | 'flash' => 'frontblocks-animation-flash', |
| 372 | 'rubber-band' => 'frontblocks-animation-rubber-band', |
| 373 | 'wave' => 'frontblocks-animation-wave', |
| 374 | 'stretch' => 'frontblocks-animation-stretch', |
| 375 | 'squeeze' => 'frontblocks-animation-squeeze', |
| 376 | 'roll-in' => 'frontblocks-animation-roll-in', |
| 377 | 'glitch' => 'frontblocks-animation-glitch', |
| 378 | 'random-reveal' => 'frontblocks-animation-random-reveal', |
| 379 | 'flicker' => 'frontblocks-animation-flicker', |
| 380 | 'block-reveal' => 'frontblocks-animation-block-reveal', |
| 381 | 'tracking-expand' => 'frontblocks-animation-tracking-expand', |
| 382 | 'terminal-type' => 'frontblocks-animation-terminal-type', |
| 383 | 'solid-outline' => 'frontblocks-animation-solid-outline', |
| 384 | 'glitch-rgb' => 'frontblocks-animation-glitch-rgb', |
| 385 | 'water-drop' => 'frontblocks-animation-water-drop', |
| 386 | 'pulse-neon' => 'frontblocks-animation-pulse-neon', |
| 387 | 'shadow-pop' => 'frontblocks-animation-shadow-pop', |
| 388 | 'scale-in' => 'frontblocks-animation-scale-in', |
| 389 | ); |
| 390 | |
| 391 | if ( ! wp_script_is( 'frontblocks-text-animation-frontend', 'enqueued' ) ) { |
| 392 | wp_enqueue_script( 'frontblocks-text-animation-frontend' ); |
| 393 | } |
| 394 | |
| 395 | if ( isset( $script_map[ $animation ] ) && ! wp_script_is( $script_map[ $animation ], 'enqueued' ) ) { |
| 396 | wp_enqueue_script( $script_map[ $animation ] ); |
| 397 | } |
| 398 | |
| 399 | return $block_content; |
| 400 | } |
| 401 | |
| 402 | /** |
| 403 | * Enqueue editor-only assets. |
| 404 | * |
| 405 | * @return void |
| 406 | */ |
| 407 | public function enqueue_editor_assets() { |
| 408 | wp_enqueue_script( 'frontblocks-text-animation-editor' ); |
| 409 | |
| 410 | wp_set_script_translations( |
| 411 | 'frontblocks-text-animation-editor', |
| 412 | 'frontblocks' |
| 413 | ); |
| 414 | } |
| 415 | } |
| 416 |