otter blocks pro first look

ThemeIsle has the distinction of having two themes in the top 10 list of free themes in the WordPress theme directory: Neve, which is the fifth most popular and Hestia which is number 9. When you install ThemeIsle themes you are prompted to install Otter and today the free version has more than 100,000 active installs.

Otter Blocks now has a premium offering, Otter Pro, which comes with additional blocks as well as enhancements to features in the free version. Otter Block Pro also has support for the Site Editor. Complementing the pro release is the launch of ThemeIsle’s first block-based theme named Raft. I’m excited to check out these new offerings because ThemeIsle is one of the first theme shops to embrace block themes and working in the Site Editor.

Video Version

Otter Free Version

Settings

When you install the free version of Otter you get a new menu item off of the Settings menu. You can enable / disable custom block-based CSS, block animations, and visibility conditions. You also have the option to make the Otter Section block the default container block, enable CSS animation optimizations and rich schema support. There is also the option to enable anonymous data tracking, which is off by default.

otter settings page

Integrations

There are integration options for a Google Maps API key, for loading Google fonts locally, and for Recaptcha, which is used on forms.

otter integrations

Blocks

The free version comes with 28 blocks, which are grouped together at the bottom of the block list. We will look at some of these in more detail further on, but there are many of the block types that you would expect. Container blocks include a Section block, Slider Block, Accordion block, and a Tabs block. There are three form-related blocks: Form, Contact Form, and Subscribe Form. There is a Masonry block and a Posts block for listing out posts. Several business-related blocks include a Pricing Section, Pricing, Product Review, Countdown, Service, and Testimonial blocks. In addition to a Google Maps block, there is also an Open Street Maps block, which is nice. There is a Lottie Animation block and a Plugin Card block, which shows plugin information from the WordPress plugin directory.

otter blocks in free version

Global Block Options

In the upper right menu bar there is an Otter icon which opens a panel for the global settings. Some of these are repeats from the Settings menu, but you also have the ability to customize some of the blocks and have these customizations appear as the starting default when these blocks are inserted.

otter global options

Special Features

You get partial access to the special features in the free version and more options in pro.

Dynamic Data

There are two ways to access dynamic data. You can type a “%” percent sign to bring up a context menu.

accessing dynamic data with percent sign

Or you can use the down arrow button on the block bar and then pick dynamic data. Here are those buttons.

dynamic data menu button

They show you the list, with Pro by the ones you need pro to unlock.

accessing dynamic data with menu

Custom CSS

Otter gives you the option to add custom css on a per block basis. You don’t need to get the ID or class of the block as they give you a “selector” target element which will be applied. The CSS is saved and loaded per page.

otter custom css

Visibility Conditions

Otter blocks comes with a good number of visibility conditions. There are a fair number in free and more in the pro version.

otter visibility conditions

Here are some of the visibility condition. At the bottom of the list below WooCommerce are some for LearnDash.

otter some visibility options

Animation Options

There are three types of animation available. Loading, or entrance, animations, count animations used with the blocks with counters, and typing animations.

otter animations

The loading animations list is very extensive. Here are a few:

some animation types

The Raft Theme

The ThemeIsle block theme is named “Raft.” It does not strike me as a particularly good name, but the theme presents the user with a pleasant color scheme, is attractive, and like most block themes, pretty simple. Raft is a free theme, but it hasn’t been accepted in the WordPress theme directory yet, so I downloaded it from the ThemeIsle website. Since it is a block theme, we have the site editor available. We will use this for creating the templates for the Custom Post Type.

raft theme

Here is the home page.

raft ome page

Otter Pro

The pro version of Otter is available from your account area. The copy I downloaded had the license key already embedded, so I didn’t have to enter it. We will need some of the pro features when creating the templates, so I enabled it.

As we have seen, the free version gives you a taste of the premium features, while the pro version unlocks them all. There are also some addition features in pro: Business Hours and Review Comparison blocks, blocks for WooCommerce, sticky options, and popups.

otter free vs pro

The Book Custom Post Type

I used CPT-UI and Advanced Custom Fields to create a Custom Post Type called Books. I’ve entered a number of book records.

list of book records

Here is a single book record in the editor. Note that in addition to the standard title, content, and featured image, there is a custom taxonomy and two custom fields: Authors Website and Authors Photo.

a single book record

Creating Templates in the Full Site Editor

To start, I created a menu in the menu editor called main. It has a link to the Books archive for convenience.

main menu defined

Editing the Header

So, the first thing I want to do is to edit the Header and replace the placeholder menu that comes with the theme with the one I created. You access the Header by clicking on the Editor (beta) menu under Appearance, then on Template Parts, and there you see the Footer and the Header.

raft header

You can define a menu two ways. In the editor you can manually add the links, or you can click on Navigation block and Select the menu you want. Since the manual method is pretty clunky at the moment, I went with the predefined menu.

option to select menu

Here I’ve select it.

menu added

Creating the Book Single

I save the Header and go out and now go into the Templates area. You will note that in the template list there is not an option to create a template for a Custom Post Type, not even in the “New” template list. This is a current limitation of the Full Site Editor which may be addressed in the next version of WordPress.

raft template list

Of course, that won’t stop us. The Full Site Editor largely follows the theme template hierarchy.

wordpress template hierarchy

For the Full Site Editor we use empty HTML files, appropriately named, as placeholders that show up in the list. So, we need one named “single-book-html’ and one named ‘archive-book.html”.

template files created

The section has two columns. Note that when you give the section a max width you can then center it on the page.

section added with two columns

The way Otter Pro handles dynamic images is different than other block addons. It has a special section in the media library. I pick Featured Image for the left side column.

dynamic image options in media library

In the right column I add the post title using the dynamic data option. You can select the dynamic data options by typing a “%’ in a text field, or by clicking on the down arrow on the block context bar.

adding post title

Then the post content was added under the title.

placeholders showing

This is what it looks like so far. Next to add a custom field.

working correctly so far

I added a Otter button and picked the dynamic link button as shown in the screenshot. This allowed me to link to the author’s website using the ACF custom field, Author’s Photo.

otter dynamic link for button

Discussion

This was the first time I’ve looked at Otter Blocks. My suggestions are that they give the block icons a different color or otherwise find a way to distinguish them from core blocks. Container blocks are pretty important for layout and styling. I thought the Otter Section block is functional, but a bit basic. For example, these days a number of developers are adding Flex layout controls.

ThemeIsle has taken a different approach than most of the other block developers. Kadence and Stackable, for instance, clearly divided features between free and pro, but Otter gives you a taste of the features, just holding some back for pro.

I was not able to complete the template because there wasn’t support for a dynamic URL link. That was unfortunate. I’ve mentioned it to the ThemeIsle team.

When WordPress 5.9 was on the horizon and Full Site Editing was first released everyone asked established theme developers if their themes would support it. The thought was the regular “classic” themes would become hybrid themes by adding Full Site Editing options to the existing theme. The developers all said they would do that, but over time I’ve come to the opinion that it would be better to offer a separate “experimental” block based theme instead of trying to torque and twist the good existing theme. Classic theme developers are hesitant because it might cause confusion for users, who would ask “which do I use?”, but I think offering a block based theme would give developers a chance to learn and bring the creativity and innovation they are known for to this new area. So I applaud ThemeIsle for being bold and being the first big theme shop to take the plunge.

Otter Blocks Pro is at version 1 and I don’t think it is ready yet for site building in the Full Site Editor, perhaps after a few rounds of updates.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

Similar Posts