The Post Comments Block displays and manages WordPress comments with extensive customization options for both the comment display and comment form. This Pro block is perfect for custom single post templates that you can create with our Site builder feature from our DigiFusion theme and its Pro version.
Adding the Post Comments Block
Navigate to the post or page where you want to display comments. Click the block inserter (+) and search for “Post Comments” in the DigiBlocks Theme category. The block will be added with example comments and a comment form to show how it will appear on the frontend.
General Settings
Comments Display
Comments Order – Choose between showing oldest or newest comments first using the toggle group control
Comments per page – Set how many comments to display per page with a range from 0 to 100
Show Avatars – Toggle to display or hide user profile pictures next to comments
Avatar Size – Adjust the size of profile pictures with responsive controls when avatars are enabled
Enable Nested Comments – Allow threaded comment replies with indented display
Labels Configuration
Display Title – Show or hide the main comments section title
Title Text – Customize the comments section heading text
Display Custom Form Title – Enable custom title for the comment form
Form Title – Set custom text for the comment form heading
Display Logged In Message – Show message for logged-in users
Logged In Text – Customize the logged-in user message
Display Cookie Consent – Add cookie consent checkbox to the form
Cookie Consent Text – Customize the cookie consent message
Custom Submit Button Text – Enable custom submit button text
Submit Button Text – Set custom text for the form submit button
Custom Cancel Reply Text – Enable custom cancel reply link text
Cancel Reply Text – Customize the cancel reply link text
Style Options
Colors
The Colors panel includes separate Normal and Hover state tabs for comprehensive color control:
Normal State Colors:
Text Colors section provides:
Title Color – Set color for the main comments title
Name Color – Choose color for comment author names
Comment Text Color – Set color for comment content text
Meta Text Color – Choose color for dates and metadata
Background Colors section includes:
Block Background – Set background color for the entire comments block
Comment Background – Choose background for individual comments
Threaded Comment Background – Set different background for nested replies
Border Color section allows:
Border Color – Set border color for all comment elements
Hover State Colors:
Meta Text Hover Color – Color for metadata on hover
Name Color – Hover color for author names
Typography
Configure typography for different comment elements:
Title Typography
Font Family – Select from Google Fonts collection
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Choose from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Comment Typography
Independent typography controls for comment content text with all the same options as title typography.
Meta Typography
Separate typography settings for dates, author info, and other metadata elements.
Button Typography
Typography controls specifically for reply buttons and form submit buttons.
Spacing
Padding – Internal spacing around the comments block with responsive controls
Margin – External spacing around the entire block with responsive controls
Borders & Radius
Border Style – Choose from none, solid, dotted, dashed, or double borders
Border Width – Set thickness for each border side with responsive controls
Border Radius – Round corners of the comments block with responsive controls
Comment Border Style – Separate border styling for individual comments
Comment Border Width – Border thickness for comment containers
Comment Border Radius – Corner rounding for comment boxes
Nested Comment Border Style – Independent border styling for threaded replies
Nested Comment Border Width – Border thickness for nested comments
Nested Comment Border Radius – Corner rounding for reply comments
Avatar Radius – Border radius for user profile pictures
Block Box Shadow – Add drop shadows to the main comments container with normal and hover states
Comment Box Shadow – Shadow effects for individual comment boxes
Nested Comment Box Shadow – Separate shadow controls for threaded replies
Reply Button
The Reply Button panel includes Normal and Hover state tabs:
Normal State:
Text Color – Color for reply button text
Background Color – Background color for reply buttons
Border Color – Border color for reply buttons
Border Style – Choose border style for reply buttons
Border Width – Set border thickness with responsive controls
Border Radius – Corner rounding for reply buttons
Padding – Internal spacing within reply buttons
Box Shadow – Add shadow effects to reply buttons
Hover State:
Text Hover Color – Reply button text color on hover
Background Hover Color – Background color change on hover
Border Hover Color – Border color change on hover
Comment Form
Form Colors
Form Background – Background color for the comment form container
Input Text Color – Text color inside form fields
Input Background – Background color for form inputs
Input Border – Border color for form fields
Input Focus Border – Border color when inputs are focused
Form Border Style – Choose border style for the form container
Form Border Width – Border thickness for the form with responsive controls
Form Border Radius – Corner rounding for the form container
Form Padding – Internal spacing within the form
Submit Button Colors
Text Color – Submit button text color
Background Color – Submit button background color
Text Hover Color – Submit button text color on hover
Background Hover Color – Submit button background color on hover
Form Box Shadow – Shadow effects for the comment form with normal and hover states
Advanced Options
Animation
Animation Effect – Choose from fade, slide, zoom, bounce, and other entrance animations
Preview Animation – Test button to preview the selected animation effect
Visibility
Hide on Desktop – Hide the comments block on desktop devices
Hide on Tablet – Hide the comments block on tablet devices
Hide on Mobile – Hide the comments block on mobile devices
Additional
HTML anchor – Add a unique anchor ID for direct linking to the comments section
Additional CSS class(es) – Add custom CSS classes for advanced styling
Responsive Design
All spacing, typography, and dimension controls include responsive settings for desktop, tablet, and mobile devices. This ensures optimal display and readability across all screen sizes while maintaining the comment functionality.
Usage Notes
The block displays example comments in the editor to show styling options. Actual comments from your WordPress database will appear on the frontend. The comment form integrates with WordPress’s native comment system and respects your site’s comment settings and moderation preferences.