Just Released: Downline Builder Plugin v2 – Install your system in just a few clicks!

DBP Notification Preferences Block

by | Jul 5, 2025

This tutorial covers all the major features of the DBP Notification Preferences block.

The DBP Notification Preferences block is a powerful Gutenberg block that allows logged-in users to manage their email notification settings with customizable checkbox options and styling. This comprehensive tutorial will guide you through all its features and capabilities.

Getting Started

Adding the Block

  1. In the WordPress editor, click the “+” button to add a new block
  2. Search for “DBP Notification Preferences” or find it in the Widgets category
  3. Click to add the block to your post or page

Initial Setup

Important: This block only appears to logged-in users. Visitors who aren’t logged in will see a message asking them to log in. The form allows users to control their notification preferences for your downline builder system.

Core Settings

Content Settings Panel

New Lead Text

  • Purpose: Label text for the new lead notification checkbox
  • Default: “Disable New Lead Notifications”
  • Examples: “Turn off lead alerts”, “Stop new lead emails”, “Disable lead notifications”

New User Text

  • Purpose: Label text for the new user notification checkbox
  • Default: “Disable New User Notifications”
  • Examples: “Turn off user alerts”, “Stop new member emails”, “Disable signup notifications”

Button Text

  • Purpose: Text displayed on the save button
  • Default: “Save Changes”
  • Examples: “Update Preferences”, “Save Settings”, “Apply Changes”

Form Layout Settings Panel

Form Width & Alignment

  • Form Width: Controls the width of the entire form (100%, 500px, 80%, auto)
  • Form Alignment: Left, Center, Right alignment options
  • Button Alignment: Separate alignment control for the save button
  • Use Case: Create compact sidebar forms or full-width preference panels

Styling Options

Container Styling Panel

Background & Border

  • Background Color: Set container background color
  • Text Color: Set container text color
  • Border Color: Add border color to container
  • Border Width: Set border thickness
  • Border Radius: Round corners
  • Padding: Internal spacing

Checkbox Styling Panel

Input Colors & Spacing

  • Background Color: Checkbox background (default: #ffffff)
  • Text Color: Label text color (default: #333333)
  • Border Color: Checkbox border color (default: #dddddd)
  • Border Width: Checkbox border thickness (default: 1px)
  • Border Radius: Checkbox corner roundness (default: 4px)
  • Padding & Margin: Control spacing around checkboxes
  • Font Size: Size of label text (default: 16px)

Button Styling Panel

Button Colors & Effects

  • Background Color: Button background (default: #007cba)
  • Text Color: Button text color (default: #ffffff)
  • Border Color: Button border color
  • Gradient: Enable gradient backgrounds for modern look

Button Dimensions

  • Width: Button width (auto, 100%, custom)
  • Padding: Button internal spacing
  • Margin: Button external spacing
  • Border Width: Button border thickness
  • Border Radius: Button corner roundness
  • Font Size: Button text size (default: 16px)
  • Font Weight: Button text weight (normal, bold)

Notification Types

New Lead Notifications

  • Purpose: Controls email notifications when new leads are captured
  • When Triggered: Form submissions, lead imports, API captures
  • User Control: Users can disable these notifications individually
  • Use Case: Prevent inbox overload for high-volume lead generation

New User Notifications

  • Purpose: Controls email notifications when new users register
  • When Triggered: User registrations, member signups, team additions
  • User Control: Users can disable these notifications independently
  • Use Case: Manage notification frequency for team leaders and admins

Examples

Basic User Preferences

Configuration:

  • Default text labels
  • Standard styling
  • Center alignment
  • 100% width

Use Case: Simple preference page for member accounts or user dashboards.

Styled Preference Panel

Configuration:

  • Custom text: “Stop lead emails”, “Disable user alerts”
  • Container background with border
  • Custom checkbox styling
  • Gradient button design
  • 600px width, center aligned

Use Case: Professional member dashboard with branded styling and clear user control.

Compact Sidebar Widget

Configuration:

  • Short labels: “Lead alerts”, “User alerts”
  • Compact padding and margins
  • Smaller font sizes
  • Auto width button
  • Left alignment to save space

Use Case: Widget areas where space is limited but user control is still needed.

Best Practices

User Experience

  • Clear Labels: Use descriptive text that clearly explains what each option does
  • Logical Placement: Place on user account pages or preference sections
  • Visual Feedback: Ensure save button provides clear feedback when clicked
  • Accessibility: Maintain proper contrast and label association for screen readers

Security Considerations

  • User Authentication: Form only appears to logged-in users
  • Nonce Protection: All form submissions are protected with WordPress nonces
  • Data Validation: User preferences are sanitized before saving
  • User Isolation: Users can only modify their own preferences

Implementation Tips

  • Page Integration: Include in member dashboards or account settings pages
  • Notification System: Ensure your email system respects these user preferences
  • Default State: Consider whether notifications should be enabled or disabled by default
  • Mobile Friendly: Test form appearance and functionality on mobile devices

Troubleshooting

Common Issues

Form Not Appearing:

  • Check if user is logged in (form only shows to authenticated users)
  • Verify block is placed on a page accessible to logged-in users
  • Check for JavaScript errors in browser console

Preferences Not Saving:

  • Check for AJAX processing errors in browser network tab
  • Verify WordPress user permissions are correctly set
  • Test with different user accounts to isolate permission issues
  • Check server error logs for database or PHP errors

Styling Issues:

  • Ensure “Use Custom Style” is enabled for styling options to work
  • Clear browser cache after making styling changes
  • Check for theme CSS conflicts that may override block styles
  • Test with different color values to ensure they’re valid

Advanced Customization

For advanced users who need additional styling beyond the block options:

  • Use CSS class: .dbp-notification-preferences-block
  • Target form: .dbp-notification-preferences-form
  • Style checkbox fields: .dbp-notification-preferences-field
  • Customize submit button: .dbp-notification-preferences-submit

Add custom CSS to your theme’s style.css or use the WordPress Customizer for advanced styling requirements.