# 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.

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

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

  1. Open the Quick Insert panel in the parent block
  2. Search for the Cwicly Query block
  3. 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:

  1. Click on the  ​​icon to open the Inserter Panel
  2. Search for the Cwicly Query block
  3. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. Modify the Colors of your text, link, background
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. Add or reduce the number of Items per page
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. Add an Offset using the upp arrow
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. Click Offset button to reset

# Post Type

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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. 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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Settings panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. Type in Category name or names.
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. Type in Author name or select author in dropdown.
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. Select All.

# Keyword

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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. Type in a Keyword as a Query filter.
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Query Filters panel
  5. ?

# 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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Click - to Infinitely Load More
  6. Choose Scroll or Button in the dropdown
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Modify the Threshold by scrolling up or down
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. 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.

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Choose a Loading Icon in the dropdown menu
  6. Modify color as required
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. 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.

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

# End

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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Add an End element by typing in End ID
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Click on End button to reset

# Error

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

  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. Add Error by typing in Error ID
  1. Select a Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Infinite Load More panel
  5. 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.

  1. Open the Quick Insert panel in the Query block
  2. Search for the Cwicly Query Template block
  3. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. Modify the Colors of your text, link, background
  1. Select a Query Template block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Colors panel
  5. 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.

# 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).

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click - to activate Masonry layout
  6. Modify row gap and column gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click to add a Module
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Modify Minimum Height, Row Gap or Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click the Edit Grid Layout button to open Grid Layout
  6. Click appropriate button to reset Minimum Height, Row Gap or Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. Modify Minimum Height, Row Gap, Column Gap
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Minimum Height, Row Gap, Column Gap
  6. 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.

  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Navigate to Auto Template
  6. Click - button to activate/deactivate Auto Template
  1. Select a Template Query block
  2. Open the block inspector
  3. Navigate to the primary tab
  4. Open the Layout panel
  5. Click to activate Auto Template
  6. Choose between Auto Fit and Auto Fill