DigiBlocks seamlessly integrates with the WordPress Block Editor (also known as Gutenberg) to provide you with powerful, flexible building blocks for creating stunning websites. This guide will help you understand how DigiBlocks works within the block editor environment and how to make the most of its features.
What is the WordPress Block Editor?
The WordPress Block Editor is the modern content creation interface that replaced the classic editor in WordPress 5.0. Instead of working with a single text area, you build content using individual “blocks” – each serving a specific purpose like paragraphs, images, headings, or more complex elements like galleries and forms.
DigiBlocks extends this system by adding professional-grade blocks designed for modern web development, giving you the tools to create complex layouts without writing any code.
How DigiBlocks Integrates with the Block Editor
Block Categories Organization
DigiBlocks organizes its blocks into logical categories within the block inserter:
DigiBlocks – The main category containing all core blocks:
- Layout blocks (Container, Spacer, Separator)
- Content blocks (Heading, Text, Image, Icon)
- Interactive blocks (Buttons, Forms, Newsletter)
- Media blocks (Google Map, Lottie Animation)
- Display blocks (Posts, Testimonials, Team, Pricing Table)
DigiBlocks DigiCommerce – E-commerce blocks for DigiCommerce integration:
- Product display and interaction blocks
- Shopping cart and checkout elements
- Product information blocks
DigiBlocks WooCommerce – E-commerce blocks for WooCommerce integration:
- WooCommerce-specific product blocks
- Cart and checkout functionality
- Product metadata and reviews
DigiBlocks Theme – Advanced theme-building blocks (Pro feature):
- Header and footer elements
- Navigation and menu blocks
- Dynamic content blocks
Accessing DigiBlocks in the Editor
- Open the Block Inserter: Click the “+” button in the top-left corner of the editor or anywhere you see a “+” icon between blocks.
- Browse Categories: Scroll down to find the DigiBlocks categories, or use the search function to find specific blocks.
- Search for Blocks: Type keywords like “accordion,” “pricing,” or “form” to quickly locate DigiBlocks.
- Filter by Category: Click on the DigiBlocks category headers to view only DigiBlocks options.
Block Structure and Hierarchy
Understanding Block Relationships
DigiBlocks follows WordPress’s block hierarchy system:
Parent Blocks: Some blocks like Container can contain other blocks, creating flexible layout systems.
Child Blocks: Individual content elements that exist within parent blocks or standalone.
Nested Blocks: Blocks can be nested multiple levels deep, allowing for complex layouts like containers within containers.
Block Toolbar and Settings
Each DigiBlocks element provides two main control areas:
Block Toolbar (appears above the selected block):
- Basic formatting options
- Alignment controls
- Block-specific quick actions
- Transform options (when available)
Block Settings Panel (appears in the right sidebar):
- Detailed styling options
- Content settings
- Advanced configuration
- Animation and interaction settings
Key Integration Features
Real-Time Visual Editing
DigiBlocks provides true WYSIWYG (What You See Is What You Get) editing:
- Live Preview: See exactly how your blocks will appear on the frontend
- Inline Editing: Edit text content directly within blocks
- Visual Styling: Adjust colors, spacing, and typography with immediate visual feedback
- Responsive Preview: Use WordPress’s responsive preview modes to see how blocks adapt to different screen sizes
Block Inspector Controls
The block settings panel provides comprehensive customization options:
Content Tab:
- Text and media content
- Links and actions
- Data source configuration
Style Tab:
- Typography settings
- Color controls
- Spacing and sizing
- Border and shadow options
Advanced Tab:
- Custom CSS classes
- HTML anchors
- Animation settings
- Conditional display options
Template and Pattern Integration
DigiBlocks works seamlessly with WordPress’s template system:
Block Patterns: Pre-designed block combinations that you can insert and customize
Reusable Blocks: Save your customized DigiBlocks configurations for reuse across your site
Template Parts: Use DigiBlocks in headers, footers, and other template areas (Pro feature)
Asset Generation and Performance
Automatic Asset Optimization
DigiBlocks intelligently manages performance through automatic asset generation:
CSS Generation: Each page generates only the CSS needed for the blocks it contains
JavaScript Loading: Scripts are loaded only when blocks require them
Font Optimization: Google Fonts can be loaded locally or from CDN based on your settings
Minification: All generated assets are automatically minified for optimal performance
Caching and Storage
DigiBlocks uses WordPress’s built-in systems for optimal performance:
- Generated assets are stored in the uploads directory
- Browser caching is leveraged for faster subsequent page loads
- Assets are regenerated only when block content changes
Working with Block Settings
Global vs Block-Specific Settings
Global Settings (configured in DigiBlocks > Settings):
- Default content widths
- API keys and integrations
- Performance settings
- Font loading preferences
Block-Specific Settings (configured in each block):
- Individual styling options
- Content-specific configurations
- Animation and interaction settings
- Responsive behavior
Understanding Setting Inheritance
Many DigiBlocks inherit settings from their parent elements:
- Container blocks pass width and alignment to child blocks
- Typography settings can cascade from parent to child elements
- Color schemes can be inherited or overridden at the block level
Block Editor Best Practices with DigiBlocks
Planning Your Layout
- Start with Structure: Use Container blocks to create your page layout framework
- Add Content Blocks: Insert content blocks within your structure
- Style and Refine: Customize appearance using the block settings
- Test Responsiveness: Preview your design on different device sizes
Maintaining Consistency
- Use Reusable Blocks: Save commonly used block configurations
- Establish Color Palettes: Define your brand colors in the theme customizer
- Create Typography Standards: Use consistent heading and text styles
- Document Patterns: Save complex block combinations as patterns
Performance Optimization
- Enable Block Manager: Disable unused blocks to reduce editor clutter and improve performance
- Optimize Images: Use appropriate image sizes and formats
- Use Local Fonts: Consider local Google Fonts loading for better performance
- Regular Asset Regeneration: Regenerate assets after plugin updates or major changes
Block Editor Keyboard Shortcuts
DigiBlocks works with all standard WordPress block editor shortcuts:
- “/” + block name: Quick block insertion
- Ctrl/Cmd + Shift + D: Duplicate selected block
- Ctrl/Cmd + Alt + T: Insert block before
- Ctrl/Cmd + Alt + Y: Insert block after
- Alt + F10: Navigate to block toolbar
- Shift + Alt + N: Navigate to next block
- Shift + Alt + P: Navigate to previous block
Troubleshooting Block Editor Integration
Common Issues and Solutions
Blocks Not Appearing: Check the Block Manager in DigiBlocks settings to ensure blocks are enabled.
Styling Issues: Clear browser cache and regenerate assets in DigiBlocks settings.
JavaScript Errors: Check browser console for conflicts and disable other plugins temporarily to identify conflicts.
Performance Issues: Review which blocks are enabled and consider disabling unused blocks.
Browser Compatibility
DigiBlocks is compatible with all modern browsers that support the WordPress Block Editor:
- Chrome 63+
- Firefox 55+
- Safari 11.1+
- Edge 79+
Advanced Block Editor Features
Custom CSS and Classes
Add custom styling to any DigiBlock:
- Select the block you want to customize
- Open the Advanced tab in the block settings
- Add your custom CSS class in the “Additional CSS Class(es)” field
- Add custom styles to your theme’s CSS or use the WordPress Customizer
Block Recovery and Validation
If blocks become invalid due to plugin updates or changes:
- WordPress will show a block validation error
- Use the “Attempt Block Recovery” option to fix automatically
- If recovery fails, you can convert to HTML or recreate the block
Integration with Third-Party Plugins
DigiBlocks is designed to work alongside other WordPress plugins:
- SEO Plugins: Block content is properly indexed by SEO plugins
- Caching Plugins: Generated assets work with all major caching solutions
- Page Builders: DigiBlocks can coexist with other page builders
- Translation Plugins: All block content is translation-ready
Understanding how DigiBlocks integrates with the WordPress Block Editor will help you create more efficient workflows and build better websites. The seamless integration ensures that you get all the benefits of modern WordPress development while maintaining the flexibility and power that DigiBlocks provides.