Back to DigiBlocks

Assets Management

DigiBlocks includes a sophisticated asset management system that automatically generates optimized CSS and JavaScript files for each page or post containing DigiBlocks. This system ensures optimal performance by loading only the styles and scripts needed for the specific blocks used on each page.

Understanding DigiBlocks Asset Generation

How Asset Generation Works

When you save a page or post containing DigiBlocks, the plugin automatically:

  1. Scans the content for DigiBlocks usage
  2. Extracts block-specific CSS from each block’s styling options
  3. Compiles JavaScript needed for interactive functionality
  4. Generates minified files optimized for performance
  5. Stores assets in the /wp-content/uploads/digiblocks/ directory

Asset File Structure

DigiBlocks creates the following types of asset files:

  • CSS Files: digiblocks-{post-id}.css – Contains all styling for blocks on that specific page
  • JavaScript Files: digiblocks-{post-id}.js – Contains all interactive functionality for blocks on that page
  • Font Files: digiblocks-fonts-{post-id}.css – Contains font declarations when local fonts are enabled

Performance Benefits

This system provides several performance advantages:

  • Reduced HTTP Requests: All block styles are combined into a single CSS file per page
  • Smaller File Sizes: Only styles for blocks actually used are included
  • Optimized Loading: Assets are only loaded on pages that contain DigiBlocks
  • Browser Caching: Generated files can be cached by browsers and CDNs

Regenerating Assets

When to Regenerate Assets

You should regenerate assets in the following situations:

  • After plugin updates – New versions may include updated styles or functionality
  • When switching font loading modes – Between local fonts and CDN fonts
  • If assets appear corrupted – Missing styles or broken functionality
  • After bulk content changes – When importing content or making mass edits
  • Site migration – When moving your site to a new server
  • Performance optimization – To clean up orphaned files

Using the Regenerate Assets Feature

To regenerate all DigiBlocks assets:

  1. Navigate to DigiBlocks → Settings in your WordPress admin
  2. Locate the Assets Management section at the top of the page
  3. Click the Regenerate All Assets button
  4. Confirm the action when prompted
  5. Wait for the process to complete

Understanding the Regeneration Process

The regeneration process performs the following actions:

  1. Scans all content – Reviews all posts, pages, and custom post types
  2. Processes DigiFusion Builders – If you’re using DigiFusion theme, it also processes builder elements
  3. Generates new files – Creates fresh CSS and JavaScript files
  4. Processes fonts – Downloads and processes Google Fonts if local fonts are enabled
  5. Cleans up orphaned files – Removes asset files for deleted content
  6. Clears caches – Ensures new assets are loaded properly

Monitoring Regeneration Progress

During regeneration, you’ll see:

  • Progress indicators showing the current status
  • File counts for CSS, JavaScript, and font files created
  • Processing statistics for posts and builders processed
  • Error reporting if any issues occur during the process

Asset File Management

Understanding Asset Locations

DigiBlocks stores all generated assets in:

/wp-content/uploads/digiblocks/
├── digiblocks-123.css (Page/Post CSS)
├── digiblocks-123.js (Page/Post JavaScript)
├── digiblocks-fonts-123.css (Font declarations)
└── fonts/ (Downloaded Google Fonts)

Asset File Naming Convention

  • Post Assets: digiblocks-{post-id}.css and digiblocks-{post-id}.js
  • Font Assets: digiblocks-fonts-{post-id}.css
  • Font Files: Organized in subdirectories within the fonts/ folder

Automatic Cleanup

DigiBlocks automatically manages asset cleanup:

  • Orphaned files are removed when posts are deleted
  • Unused assets are cleaned up during regeneration
  • Old font files are replaced when fonts change

Troubleshooting Assets

Common Asset Issues

Styles Not Loading

  • Check if the CSS file exists in /wp-content/uploads/digiblocks/
  • Verify file permissions allow web server access
  • Try regenerating assets

JavaScript Not Working

  • Ensure the JS file is present and loading
  • Check browser console for JavaScript errors
  • Verify no plugin conflicts are preventing script execution

Missing Files

  • Check if the uploads directory is writable
  • Verify sufficient disk space
  • Review server error logs for file creation issues

Asset File Permissions

Ensure proper file permissions:

  • Directories: 755 or 775
  • Files: 644 or 664

Server Requirements

For proper asset generation:

  • PHP: Version 7.4 or higher
  • Memory: At least 256MB for large sites
  • Execution Time: Sufficient timeout for regeneration process
  • File System: Write access to wp-content/uploads directory

Performance Optimization

Asset Loading Optimization

DigiBlocks optimizes asset loading by:

  • Conditional Loading: Assets only load on pages with DigiBlocks
  • File Compression: CSS and JavaScript are minified
  • Caching Friendly: Files include version numbers for proper cache busting
  • CDN Compatible: Assets work with content delivery networks

Monitoring Asset Performance

To monitor asset performance:

  1. Use browser developer tools to check file sizes
  2. Monitor page load times before and after regeneration
  3. Check for duplicate resource loading
  4. Verify assets are being cached properly

Best Practices

  • Regular Maintenance: Regenerate assets after major updates
  • Monitor File Sizes: Large asset files may indicate inefficient block usage
  • Backup Before Changes: Always backup before major regenerations
  • Test After Regeneration: Verify functionality after asset regeneration

Advanced Asset Management

Manual Asset Management

While not recommended, you can manually manage assets:

  • Delete specific files from the uploads directory
  • Clear all assets by emptying the digiblocks folder
  • Force regeneration by resaving individual posts

Integration with Caching Plugins

DigiBlocks assets work with popular caching plugins:

  • Cache clearing may be needed after regeneration
  • File minification plugins should exclude DigiBlocks assets
  • CDN integration works automatically with generated assets

Development Considerations

For developers working with DigiBlocks:

  • Assets are regenerated on post save in development
  • Use SCRIPT_DEBUG constant to prevent minification during development
  • Asset generation hooks are available for custom implementations

The Assets Management system in DigiBlocks ensures your website maintains optimal performance while providing the flexibility and functionality of the block system. Regular maintenance through asset regeneration keeps your site running smoothly and efficiently.

Similar Articles

Back to DigiBlocks