Post Grid

The Post Grid block displays posts based on a selected post type and customizable queries. Users can filter posts by taxonomy, terms, order (ascending/descending), and pagination options. It also includes the ability to exclude specific posts and customize the styling for a fully tailored display.

Add post grid block on edit page

Title Settings

• In the title settings, users can fully customize post titles, including text, color, font size, and font weight, with an option to reset to default.

Explore More Link

Users can customize the “Explore More” link by deciding its visibility, changing the link text, adding a URL,Choose whether the link opens in a new tab and styling the link.

• Decide whether to display the link or not

• Customize the link text
• Add a URL
• Choose whether the link opens in a new tab
• Adjust the link’s font size, weight, and color

Post Type Selection

Users can change the post type using the selection dropdown, which displays the default “Post” option along with other available custom post types.

Taxonomy and Terms Selection

Users have the ability to select and customize taxonomies. The customization options include:

• Taxonomy selection
• Terms selection
• Hide Taxonomies: Option to hide specific taxonomies from the display.
• Exclude Taxonomies: Option to exclude certain taxonomies from the list.
• Typography Customization: Adjust typography settings, such as:
  • Font Size
  • Font Weight
  • Text Color

These options allow for greater control over the appearance and display of taxonomies.

• Select Taxonomies

Users can select multiple taxonomies from the dropdown menu.When a taxonomy is selected, the respective terms will be displayed for the post.

• Select Terms

If users enable the ‘Exclude Terms’ toggle, the selected terms and the posts related to them will be excluded from the display

• Exclude Terms

If users enable the ‘Exclude Terms’ toggle, the selected terms and the posts related to them will be excluded from the display

• Hide Taxonomies

There is a toggle button to hide all selected taxonomies if the user wishes to do so.

• Style customization

Users can customize the font size, font weight, and text color,background color,border,border-radius of the terms.

Post Per Page

Users can set the number of posts displayed on the page.

Order and Order by

Users can sort posts by date, title, modified date, or ID. They can also choose whether to display the posts in ascending or descending order.

Pagination Settings

There is a toggle button that allows the user to decide whether the pagination is shown or not.

When the user enables the button, additional options appear to style the pagination, including:

• Pagination alignment
• Pagination text color
• Pagination background color
• Pagination font weight
• Pagination border radius
• Pagination padding
• Pagination margin

Offset

Offset determines the number of posts to skip before displaying the first post on the page, allowing users to control the starting point of the Posts.

Note: The offset can only be set when pagination is disabled.

After applying offset 2:

No Post Found

Users can customize the text displayed when no posts are available.

Exclude Posts

Exclude Posts allows users to exclude posts by checking the post titles. Users can also search for posts by title to exclude them from the displayed posts

Flex Settings

Flex Settings allow users to set flex property values for the block.

• Justify Content
  Used to align and distribute the space between flex items along the main axis.
  It had properties:
  • start : Align the flex items at the start of the container along the main axis.
  • center:Centers the flex items along the main axis.
  • End: Aligns the flex items at the end of the container along the main axis.
  • space-between: Distributes the items with equal space between them, leaving no space at the start or end.
  • space-around: Distributes the items with equal space around them, with half of the space on either side of the items.

• Flex Direction
  This property defines the direction in which flex container’s children are placed in the flex container.
  • row (default): The flex container’s main axis is horizontal. The children are placed in a row, from left to right.
  • column: The flex container’s main axis is vertical. The children are placed in a column, from top to bottom.

• Flex Wrap
  flex-wrap property in CSS controls whether the flex container’s children are forced into a single line or can be wrapped onto multiple lines. 
  • nowrap : All flex items will be on a single line.
  • wrap: Flex items will wrap onto multiple lines, from top to bottom.

• Align Items
  The align-items property in CSS is used to align flex container’s children along the cross axis. 
  • start: The flex items are aligned at the start of the container.
  • flex-end: The flex items are aligned at the end of the container.
  • center: The flex items are centered in the container.
  • baseline: The flex items are aligned such that their baselines align.

• Gap
  The gap property in CSS is used to define the spacing between items in a grid or flex container. Users can customize the value in pixels (px). By default, the gap is set to 25px.
  • Column gap: Users have the ability to customize the spacing between columns.
  • Row gap: Users have the ability to customize the spacing between rows.

Note: If the user sets a column/row gap, the default gap will be reset. Users can also set the column and row gaps separately if needed. The default gap will apply to both column and row gaps if not specified.

Style Settings

Users can modify and configure the basic style settings here.

• Background Colour
  Users can easily customize the background color of the block and can use a clear button to reset the color to default.

Clicking the clear button will reset the color to its default state.

• Background Image
  Users can choose a background image from the media library by clicking the ‘Choose Background Image’ button. They can also add an overlay and adjust the overlay’s opacity if needed.

Additionally, there are buttons to change the background image, clear the image, and adjust the overlay color.

• Padding
  Users can easily adjust the spacing settings, such as padding for the top, right, bottom, and left. They can specify these values in either pixels(px),rem,em,% etc units. By default, it is set to 10px.

• Margin
  Users can easily adjust the spacing settings, such as margin for the top, right, bottom, and left. They can specify these values in either pixels(px),rem,em,% etc units. By default, it is set to 10px.

• Hide Post Heading
  Users can choose whether to display the heading of the post type. By default, the heading is displayed, but they can toggle it off if needed. When the option to ‘hide the heading’ is enabled, any styles applied under the heading settings will also be removed.

Heading Typography styles are:

• Font-Family
  Users can select their preferred font family for post headings. By default, the font is set to “Arial, sans-serif,” but users can customize it according to their preferences.

• Font-size
  Users can easily customize the heading size by adjusting the font size. By default, it is set to 24px, but users can increase it up to 100px and the minimum value is 10px.

• Font-Weight
  Users can easily customize the font weight of the title to normal, bold, or lighter. By default, the font weight is set to bold.

• Font-size
  Users can easily customize the heading size by adjusting the font size. By default, it is set to 24px, but users can increase it up to 100px and the minimum value is 10px.

• Text-color
  Users can also easily change the title color to suit their preferences.

• Hide Excerpt
  Users can choose whether to display the excerpt of the post type. By default, the excerpt is displayed, but they can toggle it off if needed. When the option to ‘hide the excerpt’ is enabled, any styles applied under the excerpt settings will also be removed.
  Users can also easily change the title color to suit their preferences.

Excerpt Typography styles are:

• Font-size
  Users can easily customize the heading size by adjusting the font size. By default, it is set to 16px, but users can increase it up to 100px and the minimum value is 10px.

• Font-weight
  Users can easily customize the font weight of the title to normal, bold, or lighter. By default, the font weight is set to normal.

• Text-color
  Users can easily customize the heading size by adjusting the font size. By default, it is set to 16px, but users can increase it up to 100px and the minimum value is 10px.

Toggle Buttons for Author Name and Date

By default, the toggle buttons for displaying the Author Name and Date are disabled. You can enable either or both of these toggle buttons as needed.

• Enabling the Author Name or Date: When you enable either the author name toggle or the date toggle, the common styling components for both will be applied.
• Common Styling: The styling will be shared for both the author name and the date once any of the toggles are enabled.

Both toggles can be enabled independently, and the styling will apply accordingly to whichever option is enabled.

Post Styling

Users can add a background color or image, apply an overlay to the background image, and set border, padding, and margin for each post (these settings will apply to all posts within the block).

Image Settings

This setting allows users to customize the featured images on the post types.

• Hide Featured Image
  Users can hide the featured image based on their needs. When the image is hidden, the associated styles for the image at the bottom  will also be hidden.

• Featured Image Height
  Users can customize the height of the featured images in percentage, pixels and also in rem values. By default, it is set to 17.053rem, but users can adjust it as needed .

• Featured Image Width
  Users can customize the width of the featured images in percentage, pixels and also in rem values. By default, it takes  100%, but users can adjust it as needed.

• Border radius
  Users can add a border radius to the featured images. By default, it is set to 5px, but users can customize it using percentage, pixels, or rem values.

• Hover Effects
  Users can add hover effects to images and customize their properties.default value is grayscale. The available options and functionality include:
  • Hover Effects:
    • Grayscale: Adjust the intensity (default value is 1 for maximum grayscale). Decrease the value to reduce the grayscale effect.
    • Scale: Adjust the scaling factor to increase or decrease the image size.
    • Rotate: Apply a slight rotation (default value is 1). Decrease the value to reduce the rotation effect.
    • Opacity: Control transparency (default value is 1 for full opacity). Decrease the value to reduce opacity.
  • Property Value Adjustment:
    • Use the range control to adjust the effect intensity for the selected hover style.
    • The range control is only displayed when a hover style is selected.
  • Transition Customization:
    • Set the transition duration to control the smoothness of the hover effect.The default transition value is 0.3.

• Toggle Button for Show hover
  This toggle button allows users to enable hover effects in the backend. When enabled, it may also redirect the link within the backend. For this reason, it is disabled by default.

• Reset Button
  Users can reset all values to their default settings with a single click using the ‘Reset all’ button, which appears in the last section.

Advanced

Users can add custom class names and style them according to their needs, just like in other blocks.