{"id":20079,"date":"2020-08-19T12:22:43","date_gmt":"2020-08-19T12:22:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=20079"},"modified":"2023-04-24T07:55:33","modified_gmt":"2023-04-24T07:55:33","slug":"jetsmartfilters-how-to-use-filters-in-gutenberg","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetsmartfilters\/jetsmartfilters-how-to-use-filters-in-gutenberg\/","title":{"rendered":"How to Apply Filters to Gutenberg Blocks"},"content":{"rendered":"\n

The elements created and added in the Gutenberg editor are much \u201clighter\u201d than those built with Elementor. They look simpler and can\u2019t be uniquely styled but also don\u2019t reduce the page loading speed. If you wish to sacrifice stunning designs to loading speed, the JetEngine <\/strong>and JetSmartFilters <\/strong>plugins allow you to do that. This tutorial will show you how to add filters to the Gutenberg page and configure all the necessary settings.<\/p>\n\n\n\n

Add Items Grid<\/h2>\n\n\n\n

First of all, you need to create a grid that will be filtered by one of the JetSmartFilters widgets. Be aware that when used in Gutenberg, those filters can only work with JetEngine listing grids and WooCommerce shortcodes. Go to the page or post where you would like to add the grid and filters, and click the \u201cEdit<\/strong>\u201d button.<\/p>\n\n\n\n

If you want to place a listing grid to the page and need a hint, go through our tutorial<\/a> on how to use JetEngine widgets in Gutenberg.<\/p>\n\n\n\n

And if you\u2019d like to display the WooCommerce products list on this page, learn more about WooCommerce shortcodes<\/a>.<\/p>\n\n\n\n

Create and Add Filter Block to Page<\/h2>\n\n\n\n
\n

When you are done creating the items grid, open the dashboard and go to Smart Filters > Add New<\/em><\/strong>. Create the filter you need. For more information, check out this filter creation tutorial<\/a>.<\/p>\n\n\n\n

After that, turn back to the page or post with the item grid, click the \u201cAdd block<\/strong>\u201d button (it has the icon of a cross in a circle), and find the Jet Smart Filters<\/strong> blocks tab. Choose the filter you need and click on it. In our case, it will be the Checkboxes filter<\/strong>.<\/p>\n\n\n\n\"JetSmartFilters\n<\/div><\/div>\n\n\n\n

Define General Settings<\/h2>\n\n\n\n
\n

Click on the filter block and look at the General <\/strong>settings menu on the right side of the page. That menu is almost the same as the one you can see in Elementor. Let\u2019s take a closer look at each feature.<\/p>\n\n\n\n