Guide

Copy/Paste Animation Settings Feature

This feature allows users to easily copy animation settings from one block and paste them to another block, saving time when configuring multiple blocks with similar animation settings.

📚 For complete user documentation, see Animation Controls

How It Works

Copying Settings

  1. Select a block that has animation settings configured
  2. Open the Block Animation panel in the sidebar
  3. Click the Copy Settings button (clipboard icon)
  4. The animation settings are copied to your clipboard as JSON
  5. A success notification will appear confirming the copy

Note: The Copy Settings button is only enabled when the block has at least one animation type enabled (Animate In or Animate Out).

Pasting Settings

  1. Select the target block where you want to apply the animation settings
  2. Open the Block Animation panel in the sidebar
  3. Click the Paste Settings button (paste icon)
  4. A modal dialog will appear with a text area
  5. Paste the JSON you copied earlier into the text area
  6. Click Apply Settings to apply the animation configuration
  7. The modal will close and the settings will be applied to the block

What Gets Copied

The copy/paste feature copies all animation-related attributes, including:

Animate In Settings

  • Animation enabled state
  • Animation type
  • Duration, delay, ease
  • Stagger settings

Animate Out Settings

  • Animation out enabled state
  • Animation out type
  • Out duration, delay, ease
  • Out stagger settings
  • Out offset

ScrollTrigger Settings

  • Start and end positions
  • Scrub settings
  • Pin settings
  • Snap type
  • Refresh settings

Child Animation Settings

  • Animate children enabled state
  • Child animation type
  • Child animation pattern
  • Child delay
  • Reverse child order

Child Out Animation Settings

  • Animate children out enabled state
  • Child out animation type
  • Child out animation pattern
  • Child out delay
  • Reverse child out order

Custom Transform Values

  • From/To values for X, Y, Scale, Rotation, Opacity
  • Out from/to values for custom animations

JSON Format

The animation settings are exported as a formatted JSON object. Here's an example:

{
  "animationEnabled": true,
  "animationType": "fadeIn",
  "animationDuration": 1,
  "animationDelay": 0,
  "animationEase": "power2.out",
  "animationStagger": 0,
  "animationOutEnabled": false,
  "animationOutType": "fadeOut",
  "scrollTriggerStart": "top 80%",
  "scrollTriggerEnd": "bottom 20%",
  "scrollTriggerScrub": false,
  "scrollTriggerScrubValue": 1,
  "scrollTriggerPin": false,
  "scrollTriggerSnapType": "none",
  "scrollTriggerRefresh": true,
  "animateChildren": false,
  "childAnimationType": "fadeIn",
  "childAnimationPattern": "staggered",
  "childDelay": 0.1,
  "reverseChildOrder": false
}

Error Handling

The paste functionality includes validation:

  • Invalid JSON: If the pasted text is not valid JSON, an error message will be displayed
  • No Animation Attributes: If the JSON doesn't contain any valid animation attributes, an error will be shown
  • Success Confirmation: When settings are successfully applied, a success message is shown briefly before the modal closes

Technical Implementation

Files Created/Modified

  1. utils/copy-paste-utils.js – Core utility functions for copying and pasting
    • getAnimationAttributes() – Extracts animation attributes from block attributes
    • copyAnimationSettings() – Copies settings to clipboard
    • parseAnimationSettings() – Validates and parses JSON
    • applyAnimationSettings() – Applies settings to a block
  2. components/paste-settings-modal.js – Modal component for pasting settings
    • Uses WordPress Modal component
    • Includes validation and error handling
    • Shows success/error notices
  3. controls/index.js – Main controls component (modified)
    • Added Copy/Paste buttons
    • Added state management for modal and notifications
    • Added event handlers for copy/paste actions
  4. editor-styles.scss – Editor styles (modified)
    • Added styles for the paste modal

Dependencies

Uses only WordPress components:

  • @wordpress/components – Modal, Button, TextareaControl, Notice, Snackbar
  • @wordpress/element – useState
  • @wordpress/i18n – Translation functions
  • @wordpress/icons – copy, paste icons

No third-party dependencies required!

User Benefits

  1. Save Time: Quickly duplicate animation configurations across multiple blocks
  2. Consistency: Ensure consistent animation behavior across similar blocks
  3. Experimentation: Easy to test different animation settings by copying and modifying
  4. Backup: Can save animation configurations by copying them to a text file
  5. Sharing: Team members can share animation configurations via JSON

Future Enhancements

Potential improvements for future versions:

  1. Preset library – Save and load common animation configurations
  2. Partial copy – Option to copy only specific animation settings
  3. Batch paste – Apply settings to multiple blocks at once
  4. Animation templates – Predefined animation combinations
  5. Import/Export – Save/load animation configurations from files

Was this helpful?