【WordPress】スクロール連動＆ぬるぬるホバーを1クリックで！最新の『C-Code Animation Block』を完全自作してみた【体験版コード公開】

<?php
/**
 * Plugin Name: C-Code Animation Block (Trial)
 * Description: テキストや画像にアニメーション効果を追加できるカスタムブロック。
 * Version: 1.0.0
 * Author: あなたのお名前
 * License: GPL-2.0-or-later
 * Requires at least: 6.0
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function cab_register_animation_block_trial() {
    $plugin_data = get_file_data( __FILE__, array( 'Version' => 'Version' ) );
    $version     = ! empty( $plugin_data['Version'] ) ? $plugin_data['Version'] : '1.0.0';

    wp_register_script(
        'cab-trial-js',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ),
        $version
    );

    wp_register_style(
        'cab-trial-style',
        plugins_url( 'style.css', __FILE__ ),
        array(),
        $version
    );

    register_block_type( 'cab/animation-block-trial', array(
        'editor_script' => 'cab-trial-js',
        'style'         => 'cab-trial-style',
    ) );
}
add_action( 'init', 'cab_register_animation_block_trial' );

( function( blocks, element, editor, components ) {
    var el = element.createElement;
    var InnerBlocks = editor.InnerBlocks;
    var InspectorControls = editor.InspectorControls;
    var PanelBody = components.PanelBody;
    var SelectControl = components.SelectControl;
    var TextControl = components.TextControl;

    blocks.registerBlockType( 'cab/animation-block-trial', {
        title: 'C-Code アニメーション(体験版)',
        icon: 'performance',
        category: 'layout',
        attributes: {
            animationType: { type: 'string', default: 'fade-in' },
            duration: { type: 'string', default: '1' }
        },
        edit: function( props ) {
            var attributes = props.attributes;
            var blockStyle = {
                animationName: attributes.animationType,
                animationDuration: attributes.duration + 's',
                animationFillMode: 'both',
                padding: '15px',
                border: '1px dashed #ccc'
            };
            return [
                el( InspectorControls, { key: 'setting' },
                    el( PanelBody, { title: 'アニメーション設定', initialOpen: true },
                        el( SelectControl, {
                            label: 'エフェクトの種類',
                            value: attributes.animationType,
                            options: [
                                { label: 'フェードイン', value: 'fade-in' },
                                { label: 'スライドアップ', value: 'slide-up' },
                                { label: 'ズームイン', value: 'zoom-in' }
                            ],
                            onChange: function(val) { props.setAttributes({ animationType: val }); }
                        } ),
                        el( TextControl, { label: '再生時間（秒）', value: attributes.duration, onChange: function(val) { props.setAttributes({ duration: val }); } } )
                    )
                ),
                el( 'div', { key: 'content', style: blockStyle }, el( InnerBlocks ) )
            ];
        },
        save: function( props ) {
            var attributes = props.attributes;
            var blockStyle = {
                animationName: attributes.animationType,
                animationDuration: attributes.duration + 's',
                animationFillMode: 'both'
            };
            return el( 'div', { style: blockStyle }, el( InnerBlocks.Content ) );
        }
    } );
} )( window.wp.blocks, window.wp.element, window.wp.editor, window.wp.components );

/* 体験版：開いた瞬間に動くシンプルなエフェクト */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }