Blocks in Top 10

Top 10 and Top 10 Pro include multiple blocks that allow you to display the popular posts in the block editor or the site editor.. This article will explain the various blocks available and how you can use them.

Top 10 Pro brings an advanced Query Loop block is an advanced block that allows you to display the popular posts based on specified parameters. You can use the pre-built block patterns or create your own block patterns for use within posts or the site editor.

Adding the Blocks

To add the Top 10 blocks, click the plus (+) icon in the block editor. Search for “Top 10” to see the available blocks. Click on the desired block to insert it into your content area.

If you’re using the pro version, you’ll also have access to the “Top 10 Query Loop” and “Top 10 Featured Image” blocks, in addition to the “Top 10 Popular Posts” and “Top 10 Post Count” blocks.

Configuring the Top 10 Popular Posts block

The Top 10 Popular Posts block is a basic Gutenberg block that can be used as a replacement to the widget or shortcode to display the popular posts. This block can be used in your posts, pages or any other custom post type. You can also use it within the Site Editor if you are using a block theme.

The block allows you the preview the popular posts directly in the block editor. You can customise various aspects of the block using the sidebar as follows:

Setting	Type	Description
Custom Period	Toggle (ON/OFF)	Toggle between displaying all-time popular posts or popular posts for a custom period, which can be set using the next two settings.
Daily range	Number	Enter the number of days to define the range for displaying popular posts.
Hour range	Number	Enter the number of hours to further refine the range for displaying popular posts.
Number of Posts	Number	The maximum number of popular posts that will be displayed by the plugin.
Offset	Number	Number of posts to skip from the top.
Show Heading	Toggle	This displays a heading before the popular posts list.
Show excerpt	Toggle	Displays the excerpt of each post. By default, Top 10 uses the manually created post excerpt. If no post excerpt is found, the plugin generates the excerpt from the post content based on the excerpt length set in the global Post List settings panel.
Show author	Toggle	Displays the author for each post. The author name is preceded with the text “by”. e.g. by Doctor Watson.
Show date	Toggle	Displays the published date of each post.
Styles	Dropdown	Choose from various styles to display popular posts. The free version of Top 10 offers three styles: No Styles, Text Only, and Left Thumbnails. The pro version adds an additional style to display posts in a grid. Selecting “Text only” will change the below option for Thumbnail location to “No thumbnail”.
Thumbnail location	Dropdown	This provides four self-explanatory options. “Before title”, “After title”, “Only thumbnail, “No thumbnail”. Selecting “No thumbnail” will change the above option for Styles to “Text only”.
Other attributes	Textarea field	Enter other attributes in a URL-style string-query. It supports any of the plugin’s global settings e.g. post_types=post,page&link_nofollow=1&exclude_post_ids=5,6.

Using the Top 10 Query Loop Block (Pro version)

If you are already familiar with the Core Query Loop Block included in WordPress, then this guide will be familiar to you. If not, the below guide should be able to get your started on using this block.

The above video gives you a basic preview of inserting the Top 10 Query Loop block, the various settings and the output on the front end of your site.

The block allows you to flexibly modify the output and layout of the block. You have a few ready made patterns that are currently included and with more coming in future versions. Here is a short guide on how to us it:

1. Configuring the Query Loop Block

The Query Loop block allows you to customise the query that will be used to retrieve the popular posts. You can configure the following settings:

• Number of Posts: Enter the number of posts to display per page.
• Post Types: Select one or multiple post types to include in the popular posts.
• Offset: Set the number of posts to skip from the beginning of the results.
• Order By: Choose how the results should be sorted (e.g., visits, date, title, author, etc.).
• Order: Toggle between Ascending and Descending.
• Filters – Taxonomy: Filter the results by specific taxonomies (e.g., category, tag).
• Filters – Authors: Filter the results by specific authors.

2. Customise the Layout

When you insert the Query Loop block, the plugin selects a default list layout with just the post title.

The Query Loop block provides several layout options (patterns) to choose from, including:

• Numbered List: Display the posts or pages in a vertical numbered list.
• Grid: Text, Excerpt, Date and Post Views in a simple grid.
• Left Thumbnail: As the name suggests, the thumbnail is displayed in the left column and the right column contains the title, date and post views, and excerpt.
• Rounded Thumbs: Displays the posts with rounded thumbnails containing the featured image and the post title.
• Image, Title, Excerpt: Displays the popular posts with the featured image, post title and excerpt.

To select a pattern, you can select the block using the navigation bar at the bottom left of the editor or the Parent block in the top/hover toolbar.

Once you do so, you’ll see the “Replace” button appear which allows you to select from the different patterns.

4. Add Additional Blocks

Within the Query Loop block, you can add additional blocks to display specific content for each post or page, such as:

• Post Title: Show the title of the post or page.
• Post Content: Display the full content of the post or page.
• Post Date: Show the date the post or page was published.
• Post Featured Image: Display the featured image of the post or page. Top 10 Pro includes an advanced Featured Image Block.
• Post views: Use the Top 10 Post Count block to display the number of views the post has received.

You can arrange and style these blocks to create a visually appealing and informative layout for your content.

Top 10 Featured Image Block (Pro version)

Top 10 Pro offers enhanced flexibility and reliability for displaying featured images in your posts. This can be used not just for the popular posts, but across your WordPress site that uses the Block or the Site editor.

If a featured image is not explicitly set for a post, the plugin will automatically fall back to the following configurable options:

1. First Image in the Post Content: If the post contains images, the first image encountered will be used as the featured image.
2. Meta Key: If a specific meta key is defined, the value associated with that key will be used as the featured image URL. The meta key needs to contain the full URL of the image to be used.
3. Custom Image: Select an image from the Media Library to be used as the default featured image.
4. Default Image: If no image is found using the above methods, the default image can be specified.
5. Site Icon: Use the site icon which is configured in Settings > General.

This feature ensures that your popular posts always have visually appealing featured images, even if a featured image hasn’t been set.

Top 10 Post Count

This block is available in both the free and paid versions of Top 10. It displays the number of views received by the current post. When used standalone, it shows the views of the current post. Alternatively, when used in any Query Loop block, it displays the views of each post.

You can customise various aspects of the block using the sidebar as follows:

Setting	Type	Description
Counter type	Dropdown	Choose between displaying the Total or the Daily views. If you choose Daily, then two additional settings can be configured.
From	Date selector	Select the date from which the views are going to be counted.
To	Date selector	Select the date until which the views are going to be counted.
Number formatting	Toggle (ON/OFF)	Toggle this ON to display the number formatted view count. e.g. 1,000. It uses the number formatting of the current locale.
Advanced mode	Toggle	Toggle this ON to display the “Advanced text” box that allows you to use placeholders to display the total, daily or overall counts.
Text before count	Textbox	This text will be displayed before the post views.
Text after count	Textbox	This text will be displayed after the post views.
Advanced text	Textarea field	This allows you to set the text to be displayed. This will ignore the “Counter type” setting above. Use %totalcount% or %dailycount% as placeholders for the count value.
Icon SVG HTML	Textbox	Enter the full svg code of the icon to be displayed. You can select from 20 different SVGs or find over 500k open-licensed svgs at https://www.svgrepo.com.
Icon location	Dropdown	Choose to display the icon before or after the text.
Icon size	Number and Dropdown	Enter the size and the unit (px, em, % or rem) of the icon.
Padding	Number and Dropdown	These settings let you configure the padding of the icon (not the views). Enter a different padding for top, right, bottom, left or “link” them to display the same padding.