React Bits Blocks for WordPress

A collection of beautiful text animation blocks for WordPress Gutenberg, inspired by reactbits.dev.

Features

• Multiple Animation Blocks: Collection of text animation components
• Enable/Disable Blocks: WordPress admin settings to control which blocks are active
• Customizable: Full control over colors, sizes, animations, and timing
• Performance Optimized: Smooth CSS-based animations with minimal JavaScript
• Block Editor Preview: See animations in real-time while editing

Available Blocks

1. Rotating Text

Displays rotating text with smooth fade transitions.

Features:

• Customizable prefix and rotating words
• Adjustable rotation duration
• Font size, weight, and alignment controls
• Separate colors for prefix and rotating text

Based on: reactbits.dev/text-animations/rotating-text

2. True Focus

Text that blurs and focuses based on scroll position, creating a dynamic reading experience.

Features:

• Blur effect based on distance from viewport center
• Adjustable blur amount
• Font customization
• Smooth transitions

Based on: reactbits.dev/text-animations/true-focus

Installation

1. Copy the plugin folder to your WordPress wp-content/plugins/ directory
2. Install dependencies: npm install
3. Build the blocks: npm run build
4. Activate the plugin from the WordPress admin dashboard
5. Go to Settings → React Bits Blocks to enable/disable individual blocks

Development

Build for Production

npm run build

Development Mode (with file watching)

npm start

Linting

npm run lint:js
npm run lint:css

Managing Blocks

After activating the plugin, navigate to Settings → React Bits Blocks in your WordPress admin panel. Here you can:

• Enable or disable individual blocks
• See descriptions of each block
• Save your preferences

Only enabled blocks will appear in the block inserter.

File Structure

react-bits-blocks/
├── rotating-text-block.php    # Main plugin file
├── package.json                # NPM dependencies
├── README.md                   # Documentation
└── blocks/
    ├── rotating-text/
    │   ├── block.json
    │   ├── index.js
    │   ├── edit.js
    │   ├── save.js
    │   ├── style.css
    │   ├── editor.css
    │   └── view.js
    └── true-focus/
        ├── block.json
        ├── index.js
        ├── edit.js
        ├── save.js
        ├── style.css
        ├── editor.css
        └── view.js

Adding More Blocks

To add new React Bits components:

1. Create a new folder in blocks/ (e.g., blocks/new-animation/)
2. Add the standard block files: block.json, index.js, edit.js, save.js, style.css, editor.css, view.js
3. Update the $blocks array in rotating-text-block.php
4. Update the build script in package.json
5. Run npm run build

License

GPL-2.0-or-later

Credits

All blocks are inspired by and based on components from React Bits - A collection of React components and animations.