What is a block id in Squarespace and how to find one

Update:
After building out this resource I was directed to a super simple way to find the block id’s, and it’s too good not to share. All you do is add a link to your bookmarks bar in your browser and click it to show the block id’s on any Squarespace page. Super powerful, super simple.

Squarespace Block Id Finder

If you’re interested in learning more about what a block id is, where to find it in the code, and how to apply it to a plugin, keep reading below.

---

Let’s say you found an awesome plugin that makes your summary blocks look amazing, like this one on Ghost Plugins. However, you only want it to apply to one summary blocks. How do you do that?

In this tutorial, I’m going to explain what a “Block ID” is, how to find it, and how to use it to apply code to just one block in Squarespace.

So let’s get started.

What is a Block Id?

If you’re new to coding in Squarespace, or any new technical endeavor, you quickly realize one of the hardest parts of learning it is understanding the terminology. So what is a block Id?

A block id is unique string string of numbers and letters that is attached to each block on your Squarespace site.

Behind the scenes, in the code, when you drop a block onto your site, a new unique block id is generated for that specific block. So each block on your website has a unique identifier attached to it.

Here is an example of the block id for the image on the right.

block-yui_3_17_2_1_1598291655232_24312

To find this block id, we need to inspect at the code behind a webpage and look for the id attribute of the block. Within the code, it will look like this:

id="block-yui_3_17_2_1_1598291655232_24312"

Each one of these is a Squarespace Block. When you drop one of these onto your site, a new unique block id is generated for that block.

Notice our block id value is set within quotation marks and is proceeded by id=

How to find a Block ID

In this example, I’m going to be using Google Chrome as my web browser. Your experience might differ if you’re using a different browser but the general idea remains the same.

You can find a block id by following these steps:

1. Open up your web inspector.

2. Activate the selection tool.

3. Click on a block

4. In the HTML, look for and id where they value starts with the word "block", id="block-…"

1. To open up the web inspector, we right click any where on the webpage and click “inspect”. This is the web inspector of your browser and shows you all the code for that webpage. The Elements tab at the top should be selected (select it if it’s not) and the top half is the HTML of our website. If you’ve never seen this before, this probably looks like something out of The Matrix.

2. Click the selection tool. That icon with the cursor over a square box.

3. Then hover anywhere over your block and click. Your web inspector will then find the associated HTML.

4. Now start to scroll up on the HTML, inspecting each line of code until you find an id with a value that start with "block", id="block…". It’s important that the id starts with the word block, you might find other id’s, but if it doesn’t start with the word "block", it won’t work.

Apply a Style

Custom CSS Area

So, let’s see this play out in the real world and install a plugin from Ghost. I’m using the Damn Beautiful Summary Block. I’ve copied the CSS and pasted it into the Custom CSS area of my website (within the Design Tab).

My new summary block looks amazing, but I only want this style to apply to one summary block, not every summary block throughout my website.

So let’s find our block id and use it to make our Custom CSS more specific.

You’ll notice in CSS some words start with a period and some words start with a hashtag. Anything in our HTML that is an id="…", can be selected in CSS using a hashtag, anything in our HTML that is a class="…" can be selected using a period.

Now find the code we pasted in from Ghost (I’ve removed the styles because Ghost deserves the credit, but you can get the code here). In front of each CSS rule, add a hashtag followed by the block id we just found. Your block id will be different than the one in the example below. It should look like this:

// DB Summary Block Design //

#block-yui_3_17_2_1_1598291655232_24312.sqs-block-summary-v2 .summary-item {
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
}


// DB Summary Content Padding //

#block-yui_3_17_2_1_1598291655232_24312.sqs-block-summary-v2 .summary-item .summary-content {
   /*CSS Styles Here*/
}


// DB Summary Block Button //

#block-yui_3_17_2_1_1598291655232_24312.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
   /*CSS Styles Here*/
}

A couple things to note from the code above:

• Block id’s starts with a hashtag,

• There are no quotes around the block id (like there were in the HTML)

• There is no space between the block id and .sqs-block-summary-v2. This is because the block-id we has the class of sqs-block-summary-v2 on the same element, not a descendent element.

Now our code will only apply to the one block we selected.

Hope this helps and comment below any questions or comments.

Best,
Will