Post View
The Post View Block is a dynamic metadata component designed to track and display the total number of visits a page or post has received since its publication date. Much like the Post Comment block, it functions as a data-driven engagement signal, providing readers with immediate social proof of a content’s popularity.
This block is highly versatile in its application: when nested inside a WordPress Query Loop, it automatically retrieves the view count for each individual post in your grid or slider; when placed on a Single Page Template, it displays the total traffic for that specific article. Because it follows the same architectural logic as other metadata blocks, it integrates seamlessly with your existing design, allowing you to highlight “trending” content by showcasing high view counts alongside your post titles or featured images.
Settings ⚙
General
- Display: Select the primary architectural framework for your content:
- Inline: Positions the view count on the same horizontal line as surrounding content. This is ideal for a clean “meta bar” look where multiple data points are stacked side-by-side.
- Block: Forces the view count to occupy its own full-width line. This creates a distinct break in the layout, making the engagement stat more prominent within the post template.
- Preceding Label: Add a prefix like “Views:” or “Feedback:” to provide immediate context for the number.
- Subsequent Label: Add a suffix such as “Replies” or “Total” to clarify the metric being shown.
- Content Gap: Precisely control the horizontal spacing between your custom labels and the dynamic view count to ensure the text remains legible.
- Content Justification: Align the entire metadata set to the Left, Center, or Right of its container. This helps you balance the visual weight of your post cards or list items.
- Open Link in New Tab: When the view count is set as a clickable anchor, activate this toggle to ensure the link opens in a separate browser window. This keeps the user’s place in your “most-viewed” or “latest posts” list while they explore the discussion.
Icon
- Select Icon: Choose from a library of SVG icons to represent your view section. Common choices include traditional speech bubbles, modern chat icons, or user group silhouettes. This icon acts as a universal signifier for “discussion” within your Post Template.
- Position: Use this dropdown to determine where the icon sits in relation to the numerical data and its surrounding labels:
- Before Views Count: Places the icon at the very beginning of the metadata string. This is the standard “label-style” position, where the icon introduces the view data (e.g., [Icon] 5 Views).
- After Views Count: Positions the icon at the end of the metadata string. This can be used as a decorative “end-cap” or a directional cue (e.g., 5 Views [Icon]).
Query Options
The Query Options panel provides granular control over the visibility of each component within the Post Views block. Since this block is nested inside a Post Template, these toggles allow you to strip back the metadata to its simplest form or build a detailed engagement string for your readers.
- Preceding Label: Toggle this on to display a text prefix (like “Views:”) before the numerical data. This provides immediate context for the number being shown.
- Icon: Enable this toggle to show the decorative graphic (e.g., a speech bubble) alongside your views count. This serves as a universal visual cue for “discussion” that helps users scan the list quickly.
- Subsequent Label: Toggle this on to display a text suffix (like “Replies” or “Total”) after the numerical data. This is perfect for clarifying the metric or adding a descriptive touch to the metadata string.
Style ◑
Icon Styles
The Icon Styles panel provides high-level aesthetic controls for the graphical element within your Post View block. Since this icon serves as a visual anchor for engagement within the WordPress Query Loop, these settings allow you to transform a simple graphic into a branded design element.
- View: Define the container style for the icon.
- Default: Displays the icon as a standalone graphic without a background or border, perfect for a minimalist “meta bar” look.
- Stacked: Places the icon inside a dedicated shape (like a circle or square), giving it more visual weight and making it look like a button or badge.
- Layout: Choose the “fill” behavior for your icon’s container (available when View is set to Stacked).
- Fill: Applies a solid background color behind the icon, creating a high-contrast “pill” or “tile” effect.
- Outline: Displays only the border of the container, offering a lighter, wireframe aesthetic that feels modern and airy.
- Size: Scale the icon up or down to ensure it balances perfectly with your Post Title or other metadata typography.
- Gap: Adjust the horizontal spacing between the icon and the adjacent text (labels or numerical count) to prevent the layout from feeling crowded.
- Rotate: Rotate the icon by a specific degree. This is useful for subtly tilting a speech bubble or chat icon to add a playful, dynamic feel.
- Opacity: Control the transparency of the icon. Lower the opacity to make the icon secondary to the text, or keep it at 100% for maximum visibility.
- Color:
- Color (Default & Hover): Set the primary color for the icon and a distinct hover color. A color shift when a user mouses over the “Popular Post” or “Query Loop” item provides excellent interactive feedback.
Label Typography
- Font Family & Size: Select the typeface and scale that best matches your site’s design system.
- Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
- Color: Customize the color for both the Preceding Label and the Subsequent Label.