| 1 |
<?php |
| 2 |
/** |
| 3 |
* Server-side customizations for the core blocks. |
| 4 |
* |
| 5 |
* @package twentig |
| 6 |
*/ |
| 7 |
|
| 8 |
defined( 'ABSPATH' ) || exit; |
| 9 |
|
| 10 |
/** |
| 11 |
* Filters the blocks to add animation. |
| 12 |
* |
| 13 |
* @param string $block_content The block content about to be appended. |
| 14 |
* @param array $block The full block, including name and attributes. |
| 15 |
* @return string Modified block content with animation classes and attributes. |
| 16 |
*/ |
| 17 |
function twentig_add_block_animation( $block_content, $block ) { |
| 18 |
|
| 19 |
if ( empty( $block['attrs']['twAnimation'] ) ) { |
| 20 |
return $block_content; |
| 21 |
} |
| 22 |
|
| 23 |
static $script_enqueued = false; |
| 24 |
if ( ! $script_enqueued ) { |
| 25 |
wp_enqueue_script( |
| 26 |
'tw-block-animation', |
| 27 |
TWENTIG_ASSETS_URI . '/js/block-animation.js', |
| 28 |
array(), |
| 29 |
TWENTIG_VERSION, |
| 30 |
array( |
| 31 |
'in_footer' => false, |
| 32 |
'strategy' => 'defer', |
| 33 |
) |
| 34 |
); |
| 35 |
$script_enqueued = true; |
| 36 |
} |
| 37 |
|
| 38 |
$attributes = $block['attrs']; |
| 39 |
$animation = $attributes['twAnimation']; |
| 40 |
$duration = $attributes['twAnimationDuration'] ?? ''; |
| 41 |
$delay = $attributes['twAnimationDelay'] ?? 0; |
| 42 |
|
| 43 |
$tag_processor = new WP_HTML_Tag_Processor( $block_content ); |
| 44 |
$tag_processor->next_tag(); |
| 45 |
$tag_processor->add_class( 'tw-block-animation' ); |
| 46 |
$tag_processor->add_class( sanitize_html_class( 'tw-animation-' . $animation ) ); |
| 47 |
|
| 48 |
if ( $duration ) { |
| 49 |
$tag_processor->add_class( sanitize_html_class( 'tw-duration-' . $duration ) ); |
| 50 |
} |
| 51 |
|
| 52 |
if ( $delay ) { |
| 53 |
$style_attr = $tag_processor->get_attribute( 'style' ); |
| 54 |
$style = '--tw-animation-delay:' . esc_attr( $delay ) . 's;' . $style_attr; |
| 55 |
$tag_processor->set_attribute( 'style', $style ); |
| 56 |
} |
| 57 |
|
| 58 |
return $tag_processor->get_updated_html(); |
| 59 |
} |
| 60 |
add_filter( 'render_block', 'twentig_add_block_animation', 10, 2 ); |
| 61 |
|
| 62 |
/** |
| 63 |
* Handles no JavaScript detection. |
| 64 |
* Adds a style tag element when no JavaScript is detected. |
| 65 |
*/ |
| 66 |
function twentig_support_no_script() { |
| 67 |
echo "<noscript><style>.tw-block-animation{opacity:1;transform:none;clip-path:none;}</style></noscript>\n"; |
| 68 |
} |
| 69 |
add_action( 'wp_head', 'twentig_support_no_script' ); |
| 70 |
|
