How will Fluid Engine affect my code?
The release of Squarespace’s new editor Fluid Engine has made quite a few waves. Some love it, some hate it, but the biggest question people have is how is this going to effect my site?
Some of my fellow Squarespace Designers have released tutorials on what Fluid Engine is, how to use it, as well as the pros and cons. You can check them out here:
Wolf & Wild: A Complete Guide to Fluid Engine: The New Squarespace Editor of 2022
Big Cat Creative: How to edit in Squarespace 7.1 with Fluid Engine - Best practices & tips
SQSP Themes: Squarespace Fluid Engine Overview
Inside the Square: How to Work With Fluid Engine
Will Myers: FAQ’s on Squarespace’s New Fluid Engine
So as a Squarespace Coding Expert, I thought I would take a different spin on it and go over the ways that your code may be effected by the new editor.
As a circle member, I have been able to play around with Fluid Engine for a few weeks. While this is not an exhaustive list, here are some of the things I have noticed in regards to Fluid Engine and your code.
What code will you no longer need?
Reordering/Resizing Blocks on Mobile: You will no longer need code to re-order or resize blocks on mobile because you can now edit the mobile view separate of the desktop view. Just click the mobile view button when in edit mode and then drag the blocks to reorder or resize them.
Changing the Color of Specific Blocks of Text or Buttons: This isn’t specific to Fluid Engine as the update came slightly before the release of the new editor. However, you no longer need to use code to change the color of a specific block of text. Also, with primary, secondary, and tertiary buttons, you most likely will not need code to change the color of a specific button either.
Layering Blocks: One of the biggest changes in Fluid Engine is the ability to place blocks on top of each other. Because of this, you no longer need to use CSS to layer elements.
Repositioning Elements Off the Screen: Fluid Engine now allows you to drag images so that they line up with the edge of the screen so you no longer need to use CSS positioning to create this effect.
Split Sections: Due to the feature I mentioned about, you can also now create a split layout without code. A split layout is designed so that an image takes up half the section and the content is on the other.
What code do I still need?
Everything Else: With all the updates, you may start to think that coding in Squarespace is a thing of the past. Sure, Fluid Engine definitely makes it easier to create dynamic, more interesting layouts without the use of CSS. However, there are still a lot of a lot of codes and plugins that will be useful in the new editor.
Plugins: If you purchased a plugin to add in a feature that Squarespace didn’t have before, you will still need it. Fluid Engine has made Squarespace more drag and drop friendly but it didn’t add in new functionality.
What code is clashing with Fluid Engine?
Code that used IDs: If you upgrade your existing section to use Fluid Engine, it will get a new Data Section Id. I tend to use #COLLECTIONID #page .page-section:nth-of-type(1) when I target sections so I have not found this to be a major issue for me yet. However, if your code is written using section ids, your code will need to be adjusted.
Code that uses Z-Index: If you want to layer blocks on top of each other using CSS, you use a property called z-index. One of the biggest changes with Fluid Engine is the ability to layer blocks on top of each other. To do this, Squarespace uses the z-index property. While this update means you no longer need to use z-index as often, I have found it tricky to get z-index to work when I do need it.
Fluid Engine Tips
Start using it. I know there has been some negative feedback about Fluid Engine. Learning curves are always scary but Fluid Engine is here to stay and we must adapt. I have built a few sites now in Fluid Engine and I have to say that I am really enjoying it. As it is new, there are some bugs and kinks that need to be sorted out but I have not encountered too many issues.
Save regularly. As I said before, it is new and sometimes there are bugs. Make sure you are regularly saving the page so if the editor starts to act funny you can exit and refresh the page without losing too much of your work. I have only had this happen a few times, but it is better to be safe than sorry.
Pay attention to the mobile view. In the old editor, it adjusted the site on mobile quite nicely. In Fluid Engine it places the blocks in the order they were added to the section. Thankfully, it is quite easy to move the blocks around on the mobile view. However, make sure you take a look because it will most likely not look how you want right away.
