March 5th, 2022

New in Statamic v.3.3

New in Statamic v.3.3

Statamic is a open-source, Laravel + Git powered, flat-file CMS designed for building easy to manage websites. Statamic is using antlers for templating which is an easy and simple to use templating language that offers you all the tags and modifiers you might need to fetch data from the control panel and to display it on the page.

While curently at version 3.2.36 (stable), the v.3.3. (beta) recently came out which includes more powerful features, making antlers the go-to templating engine when it comes to Statamic. Since this is a complete rewrite of the Antlers engine, the new version ships under an opt-in feature flag to avoid any unexpected behaviour of you current templates.

Once you upgraded your statamic app to v.3.3 beta, you have to enable the new antlers engine in /config/statamic.antlers.php by switching from regex to runtime:

1// config/statamic/antlers.php
2return [
3 'version' => 'runtime',
4 // ...
5];

Let's talk about some of the cool features Statamic v.3.3.* ships with.

🆕 Variables

You can now set variables by using the assignment operator, =.

1{{ total = 0 }}
2 
3{{ loop from="1" to="9" }}
4 {{ total += 1 }}
5{{ /loop}}
6 
7<p>I can count to {{ total }}!</p>

🆕 Concatenation

You can use a + plus sign between variables and string literals to concatenate and render a string in a single tag.

1<!-- These are equivalent -->
2<p>{{ $title + " makes " + $quality + " donuts." }}</p>
3<p>{{ title }} makes {{ quality }} donuts.</p>

You can also concatenate using assignment, which will allow you to render the result in a template afterwards.

1{{ string = "Hello" }}
2 
3{{ if something }}
4 {{ string += " World"}}
5{{ else }}
6 {{ string += " Universe" }}
7{{ /if }}
8 
9{{ string }}

🆕 Self-Iterating Assignments

If the right-hand expression's value produces an iterable value, the captured variable name can be used as a tag pair to iterate the returned value right away.

1{{ pages = {collection:pages} }}
2 {{ title }}
3{{ /pages }}

🆕 Merging arrays / collections

Two or more "array-like" variables or expressions can be combined using the merge operator. Without any intermediate steps, the resulting data is immediately iterable.

1{{ articles = favourite_articles merge not_favourite_articles }}
2 
3{{ articles }}
4 <!-- do your thing here -->
5{{ /articles }}
6 
7{{ items = {collection:headlines} merge {collection:news limit="5"} }}
8 <!-- your thing can be done here too -->
9{{ /items }}

🆕 OrderBy

Ordering by multiple attributes, as well as dynamic fields and directions, is supported by the orderby operator, which may be used to any array.

1<!-- var orderby (FIELD_1 DIRECTION, FIELD_2 DIRECTION) -->
2 
3{{ people orderby (age 'desc', last_name 'asc', first_name 'asc') }}

🆕 Where

Everything that can be done in an Antlers condition can also be done in a where statement. You may also use a "arrow function" to create a scoped context within an array or object.

1products:
2 - [name: Talkboy, price: 30]
3 - [name: Super Nintendo, price: 90]
4 - [name: Pogs, price: 1]
5budget: 50
1{{ bulls = players where (team == "Chicago Bulls") }}
2<!-- returns [Michael Jordan, Scottie Pippen, Dennis Rodman] -->
3 
4{{ afford = products where (x => x.price < budget) }}
5<!-- returns [Talkboy, Pogs] -->
6 
7{{ electronic = products where
8 (name == "Talkboy" || name == "Super Nintendo")
9}}
10<!-- returns [Talkboy, Super Nintendo] -->

🆕 Sub-Expressions

Wrapping a pair of parenthesis around () a chunk of text indicates a sub-expression. Anything contained within a sub-expression is parsed immediately and separately, allowing you to control the order of operations within an Antlers tag and improve code readability.

1{{ 5 + 3 * 2 }} -> 11
2{{ (5 + 3) * 2 }} -> 16
3 
4{{ if (gallery | length) >= 12 && (content | read_time) > 5 }}

🆕 Using PHP in Antlers

PHP can be written using specific delimiters. You can use $...$ to echo the output of a PHP expression and display HTML, and?...? to write raw PHP and alter the current context (variables that exist in a specific request).

1{{? $register = route('account.register'); ?}}
2 
3<a href="{{ $register }}">Register for a new account</a>

You might even change the file extension of your view from.antlers.html to.antlers.php and use native PHP tags to write as much raw PHP as you like.

1<?php
2 echo 'Keep it simple, please';
3?>

Final thoughts

As you can imagine, we only scratched the surface of the newly added features. Statamic v.3.3 will also have lots of bugs fixed, security improvements and more.

Visit the v.3.3 work in progress docs for a complete list of features and keep an eye on the github repo for upcoming releases.

Statamic Ninja

Comments

Marian Pop

PHP / Laravel Developer. Writing and maintaining @LaravelMagazine. Host of "The Laravel Magazine Podcast". Pronouns: vi/vim.

Subscribe to our newsletter

Get latest news, tutorials, community articles and podcast episodes delivered to your inbox.

Weekly articles
We send a new issue of the newsletter every week on Friday.
No spam
We'll never share your email address and you can opt out at any time.