Views 3 Beta Allows Building Beautiful Dynamic WordPress Sites

This new beta release brings the biggest features that Toolset’s integration with the Block Editor was missing. You can now use blocks to create custom searches, display blocks conditionally,  style blocks, and display map markers.

New features in the release

Watch the following video to see a quick preview of all the main new features in Toolset Blocks.

Create Views directly from the Block Editor

There is no need anymore to create Views separately and then insert them into a page or a template. Simply edit a page, insert the View block and design your list of posts right there!

No more shortcodes and HTML markup editing – you do everything visually using the Block Editor.

You can design your Views directly when editing a page with a Block Editor

You can design your Views directly when editing a page with a Block Editor

Create custom Searches

You can now easily create custom searches directly from the Block Editor. Just make sure to select the Search option in the View creation wizard.

Create custom searches visually using the Block Editor

Create custom searches visually using the Block Editor

Add front-end sorting controls

You can allow visitors to sort the View results on the front-end.

You can add front-end sorting controls to your Views

You can add front-end sorting controls to your Views

Add pagination controls

You can easily add and configure pagination controls for your Views. Click the Add Pagination button in the View editing area and tweak the settings in the right sidebar.

Adding pagination to your Views

Adding pagination to your Views

Display blocks conditionally

You can now use the new Conditional block to display or hide blocks based on conditions you set. You can display a simple message or whole blocks, Views, and Forms. You can use one or more conditions and check them against the content of standard and custom fields.

Simply insert the Conditional block and inside it, place blocks that you want to display (or hide) conditionally.

Editing the conditions for displaying content placed inside a Conditional block

Editing the conditions for displaying content placed inside a Conditional block

Style groups of blocks using a Container block

We also created a completely new Container block so you can easily style all elements inside it:

  • Add padding and margins around groups of blocks
  • Set up a background
  • Add HTML classes and IDs
  • Select which HTML element to use for the Container block
  • Place one Container block within another to create nested structures

Use the Container block to group and style multiple blocks

Use the Container block to group and style multiple blocks

Dynamic map markers coming from a View

You can now create maps whose marker information comes from a View. All you need to do is add a View and Map blocks to the same page, select the marker source to come from a View, and select the View you want to use.

Setting a View as a source for map markers

Setting a View as a source for map markers

Easily change Typography options

We added a Typography section in the sidebar settings of many Toolset blocks. This allows you to style and format text within those blocks.

You can adjust the following typography-related options:

  • Font type – choose from a huge selection of fonts
  • Font size, line height, and letter spacing
  • Font style
  • Text transform – capitalize, uppercase, lowercase
  • Text color
  • Text shadow

Easily change typography options for Toolset blocks

Easily change typography options for Toolset blocks

Greater Block Editor width for a better experience

To improve the experience of designing inside the Block Editor, we created a custom option that allows you to adjust the width of the editing area.

Simply click the Toolset icon in the top right corner of the editor, and turn on the Adjust Editor Maximum Width option. The default width is 100%, but you can adjust it if needed.

Default Block Editor widthBlock Editor adjusted for maximum width

Views 3 Beta Allows Building Beautiful Dynamic WordPress Sites 1

Views 3 Beta Allows Building Beautiful Dynamic WordPress Sites 2

Major features we are still working on

The current beta includes many important features, but more are coming. These are the major features that we’re working on next:

FeatureWhen it will be ready
WordPress Archive with the Block EditorNext beta
WooCommerce templates and archivesAfter the first production release
Nested ViewsAfter the first production release
Users and Taxonomies ViewsAfter the first production release

Known issues

Here are some issues that we are aware of and we are already working on fixing:

  • There are issues with cropping images in the Image block.
  • From time to time you might see the following error message in the Block Editor: “Something went wrong while trying to update the sources cache, with message: The response is not a valid JSON response. Please reload the page and try again.”
  • You might get the “condition not completed” message for the Conditional block even if the condition is completed.
  • Sometimes, front-end rendering is not exactly the same as the backend one. For example, this happens when a View is used inside a container with full-width alignment.

How to build new sites in the meantime

As you can see, we are switching the Toolset workflow over to use the WordPress Block Editor. We are aiming for the first production release to happen very soon.

If you are building sites in the meantime, we suggest using Toolset Block Editor integration. The current beta should be stable and feature-full enough to allow you to build what you need.

We are also starting to re-do this very website using Toolset and the Block Editor.

Of course, you can still use Layouts plugin and it will continue working in years to come, but all the new functionality will go into Toolset Blocks.

The old workflow will remain available

There might be cases where you might prefer to create Views and templates using the classic Toolset workflow. You probably have existing sites that work just fine, or you might still want to use Toolset shortcodes in combination with page builders.

Don’t worry, the classic Toolset workflow is not going away.

Themes recommendation

Selecting a good theme for a website you are building is important. We recommend using simple themes that allow you to design everything using the Block Editor (Gutenberg) (try googling “best Gutenberg themes” and you will get a ton of articles with some great suggestions).

Using a theme that is completely integrated with Block Editor will provide you great compatibility and related features.

Download and try

This beta release packs a lot of new features. We also merged the Toolset Blocks plugin into the Views plugin. Because of this, a lot of internal code has changed.

Here are some important guidelines for testing this new beta release:

  1. Disable and remove the Toolset Blocks beta plugin.
  2. Install the latest Views beta version.
  3. For maps-related features, make sure to use the latest Maps beta version.
  4. Views created using the previous beta will probably not work with this latest beta.

To get started using it with Toolset Blocks, we recommend quickly reading how to build Toolset-based sites with the Block Editor.

Then, you can either install everything locally or try it on Discover WP, where we’ve installed everything for you in the Travel Destinations site.

To test this release you will need to download:

  • Types stable release
  • Views beta release
  • Maps beta release

Again, if you’re updating a site that already has the Toolset Blocks plugin, remember to deactivate it.

To download the beta plugins, go to your Toolset account’s Downloads page. There, switch to the Beta channel.

See how to build things with new Toolset

Finally, Agnes, our Block Editor specialist, prepared a full video walkthrough of building a complex View using the new Toolset betas.

Watch Agnes build one of the pages on our Travel Destinations demo site, step by step.

Your feedback is important

We’d love to get your feedback. Tell us what you like, what you don’t like and what you’re missing in this release. Your feedback is what drives Toolset’s development.

This post was first posted here.

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.
Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to use CSS Scroll Snap

Nada Rifki demonstrates the scroll-snap-type and scroll-snap-alignCSS properties. I like that the demo shows that the items in the scrolling container can be different sizes. It is

Read More »
Emergency Website Kit

Here’s an outstanding idea from Max Böck. He’s created a boilerplate project for building websites that fit within a single HTTP request. This is extremely

Read More »