# Query

The Query block is an Archive post layout that sets the options to show and categorise single posts. The Query block is a vital part of every block-based theme and furthur customizations always start with the Query block.

The Query requires a collection of same category posts so it is important to have these before you build your Query.

It is recommended to add a Query block inside a Section.

If you want to add a Query block inside a parent block:

Open the Quick Insert panel in the parent block
Search for the Cwicly Query block
Click on the Cwicly Query block to insert it into your parent block

If you want to add a Query block outside any other block on the page:

Click on the ➕ icon to open the Inserter Panel
Search for the Cwicly Query block
Click on the Cwicly Query block to insert it into your page

# Query block colors

The Colors property allows you to change the Colors of the content in your Query block, including Text color, Link color, Background color.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Colors panel
Modify the Colors of your text, link, background

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Colors panel
Click appropriate button to remove modifications to the Colors of your text, link, background

# Inherit Query from URL

By default the Query block inherits the data from the URL. If you want to specify a particular taxonomy or term then you will need to deactivate the Inherit Query from URL.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Toggle the Inherit Query from URL property to activate or deactivate it

# Items per page

The Items per page property allows you to choose how many Items you wish to display on your page. By default this is set to 3, but you can add or remove Items by changing the numerical value.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Add or reduce the number of Items per page

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Click Items per page button to reset to default

# Offset

The Offset property offsets the number of Items you set. For example an Offset of 1 will make the second item become the first.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Add an Offset using the upp arrow

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Click Offset button to reset

# Post Type

The Post Type property allows you to choose between Post or Page.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Toggle Post Type to choose between Post or Page.

# Order By

The Order by property allows you to choose the order in which you want your Items displayed, such as Newest to Oldest, Oldest to Newest, A to Z, Z to A

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Toggle 'Order By' to choose order (Newest to Oldest, Oldest to Newest, A to Z, Z to A)

# Sticky

The Sticky property allows you to select certain Items, using Include, Exclude, Only.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Settings panel
Select Include, Exclude, Only in dropdown menu

# Query Filters

The Query Filters property allows you to set filters for locating your Items such as Categories, Author or Keyword.

# Categories

The Categories property allows you to type in the name of a Post or Pages category or categories as a Query filter. Each Category chosen must be separated by a comma or the Enter key.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
Type in Category name or names.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
Click X next to Category name or names to be removed.

# Author

The Author property allows you to type in or select in a dropdown the author of Items as a Query filter.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
Type in Author name or select author in dropdown.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
Select All.

# Keyword

The Keyword property allows you to select a Keyword as a Query filter for Items.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
Type in a Keyword as a Query filter.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Query Filters panel
?

# Infinite Load More

Infinite Load More allows you to load additional elements when you reach the end of the page. You can choose between Scroll or Button as a means of Navigation

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click - to Infinitely Load More
Choose Scroll or Button in the dropdown

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click - to deactivate

# Threshold

The Threshold property allows you to set the distance between the viewport to scroll area for the scroll-Threshold event to be triggered. The default setting is 400 px.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Modify the Threshold by scrolling up or down

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click Threshold button to reset

# Direction

The Direction property allows you to choose the scrolling direction. At present only vertical scrolling is possible.

# Loading Icon

The Loading Icon property allows you to display a dynamic icon while the next page is loading.You can modify the color of the Loading Icon.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Choose a Loading Icon in the dropdown menu
Modify color as required

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click Loading Icon button to reset OR NOT

# History

The History property allows you to choose whether to disable history completely, change the current history entry or create new history entries.

The Disable property allows you to disable browser history.

The Replace property allows you to change current history entry so that going back in the browser will return the user to the previous state.

The Push property allows you to create new history entries so that going back in the browser will load the previous page.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Choose History in the dropdown menu (-disable, Replace, Push)

# End

The End property allows you to choose the last page you want to load.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Add an End element by typing in End ID

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click on End button to reset

# Error

The Error property allows you to display an error in loading.

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Add Error by typing in Error ID

Select a Query block
Open the block inspector
Navigate to the primary tab
Open the Infinite Load More panel
Click on Error button to reset

# Query Template

A Cwicly Query template block sets out a graphical interface that helps run a Query with different parameters. This means you can change values that a query uses without special knowledge of coding quickly and efficiently.

You can customize colors in the same way as a Query block. You can also customize the Query Template Layout by modifying grid type, height and row gap and column gap.

The Cwicly Query Template block is added inside a Cwicly Query Block.

Open the Quick Insert panel in the Query block
Search for the Cwicly Query Template block
Click on the Cwicly Query Template block to insert it into your Cwicly Query block

# Query block colors

The Colors property allows you to change the Colors of the content in your Query Template block, including Text color, Link color, Background color.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Colors panel
Modify the Colors of your text, link, background

Select a Query Template block
Open the block inspector
Navigate to the primary tab
Open the Colors panel
Click appropriate button to remove modifications to the Colors of your text, link, background

# Query Template block Layout

The Layout property allows you to modify how your Items are displayed in your Query Template block. This includes Display, Grid Type, Auto Grid, Auto Template as well as Height, Column and Row Gap.

By default, the Query Template block will have a Grid layout. If you want a Masonry layout you will need to activate it.

# Display

The Display property allows you to show how you want your Posts or Pages displayed. By default this is as a Grid layout but you have other choices including flex, inline-flex, block, inline-block, inline, table or none (if you want nothing displayed).

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Select required type in the Display dropdown panel

# Masonry layout

The Masonry property allows you to choose a Masonry grid layout based on columns with no fixed height so that images in additional rows will rise up to fill the gaps.

With Masonry layout selected, you can customize row gap and column gap.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click - to activate Masonry layout
Modify row gap and column gap

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click - to deactivate Masonry layout

# Auto Grid

The Auto Grid setting means that Cwicly will automatically repeat the row layout you have set out in the Edit Grid Layout.

In other words, the Query Template layout that you set out is not dependent on your Items. The Items you add are automatically placed following the layout skeleton you have defined in the Auto grid layout.

Without Auto grid, you have complete freedom as to how you design your Items, how they look and feel. With auto grid turned off, each module is now unique as it is not reproduced in subsequent rows.

If you want to add or remove Items, you need to go to the Query settings of the Query Block and modify the Items per page.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click - to activate/deactivate Auto Grid

# Edit Grid Layout

The Edit Grid layout property allows you to visually edit & design your Query template Grid layout.

You can add or remove Modules or Fractions, and adjust Height, Row Gap and Column Gap.

# Module

The Module button, allows you to add the number of Modules you set for the row. A Module can be thought of as a placeholder for your Query template Item blocks.

You cannot add more modules than the number of fractions you have set.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click the Edit Grid Layout button to open Grid Layout
Click to add a Module

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click the Edit Grid Layout button to open Grid Layout
Click on the cross on a visual module to remove

# Fractions

Adding fractions leaves ‘potential’ space in case you want to add more modules or ‘stretch’ modules to make uneven columns that will be duplicated in subsequent rows. Adding fractions will allow you to add more Modules to your row.

This is only ‘potential’ space because the auto grid system will base the grid layout on the module skeleton.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click the Edit Grid Layout button to open Grid Layout
Add/remove Fractions

# Set Minimum Height, Row Gap or Column Gap

Minimum Height, Row Gap or Column Gap can be modified in the Grid Layout or directly from the primary tab in the block inspector.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click the Edit Grid Layout button to open Grid Layout
Modify Minimum Height, Row Gap or Column Gap

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click the Edit Grid Layout button to open Grid Layout
Click appropriate button to reset Minimum Height, Row Gap or Column Gap

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Navigate to Minimum Height, Row Gap, Column Gap
Modify Minimum Height, Row Gap, Column Gap

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Navigate to Minimum Height, Row Gap, Column Gap
Click appropriate button to reset Minimum Height, Row Gap or Column Gap

# Auto Template

The Auto Template property automatically adjusts the responsiveness of the Query template layout for the different screen sizes available.

When the auto template setting is selected, you can choose whether to use Auto Fill or auto Fit.

Auto Fit is automatically selected and will fit your blocks into the available space.

If Auto Fill is selected, the width that has been chosen will be respected rather than the space available.

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Navigate to Auto Template
Click - button to activate/deactivate Auto Template

Select a Template Query block
Open the block inspector
Navigate to the primary tab
Open the Layout panel
Click to activate Auto Template
Choose between Auto Fit and Auto Fill