Skip to main content
Blocks are reusable code units that you can install on any of your sites. Build once, use everywhere.

​
What is a Block?

A block is a self-contained piece of code (JavaScript, CSS, or both) that:
  • Lives at the team level, not tied to any single site
  • Can be installed on multiple sites
  • Maintains a single source of truth for the code
Common examples:
  • Smooth scroll functionality
  • Cookie consent banner
  • Custom cursor effects
  • Form validation utilities
  • Animation helpers

​
Creating a Block

​
From Scratch

1

Go to Blocks

Click Blocks in the sidebar navigation.
2

Click New Block

Click the New Block button.
3

Fill in details

  • Name: Descriptive name (e.g., “Smooth Scroll”)
  • Description: What the block does
  • Category: Organization category
4

Add your code

Write JavaScript in the JS tab and/or CSS in the CSS tab.
5

Save

Click Save to create the block.

​
From an Existing Script

Already have a script you want to reuse?
1

Open the script

Go to your site and open the script in the editor.
2

Save as Block

Click the Save as Block button in the toolbar.
3

Name your block

Give it a name and description.
4

Done

The script is now saved as a block and available for other sites.

​
Installing a Block

1

Open Blocks

Go to Blocks in the sidebar.
2

Find your block

Search or browse for the block you want.
3

Click Install

Click on the block, then click Install to Site.
4

Choose the site

Select which site should receive the block.
5

Confirm

The block’s code is copied to your site as a new script.
Installing a block creates a copy of the code. Changes to the original block won’t automatically update installed copies.

​
Block vs Script

FeatureScriptBlock
ScopeSingle siteAll team sites
UpdatesDirect editingRe-install to update
Best forSite-specific codeReusable utilities

​
Managing Blocks

​
Editing

Open a block and modify its code. Existing installations won’t be affected—they have their own copy.

​
Categories

Organize blocks by category:
  • Animation: Motion and transitions
  • Forms: Validation, submission handlers
  • Navigation: Menus, scroll behavior
  • Utilities: Helper functions
  • Integrations: Third-party services

​
Tags

Add tags for better searchability:
  • gsap, scroll, accessibility, performance

​
Dependencies

If your block needs external libraries:
  1. Open the block
  2. Click Dependencies
  3. Add CDN URLs for required libraries
  4. These will be installed alongside the block

​
Sharing Blocks

​
Within Your Team

All blocks are automatically available to your team members.

​
Publicly

Make a block available to all GoodCraft Script users:
  1. Open the block
  2. Toggle Make Public
  3. The block appears in the public library
Public blocks can be installed by anyone but only you can edit them.

​
Best Practices

A good block should work without any site-specific setup. Avoid dependencies on specific class names or IDs unless documented.
Make blocks flexible with data attributes or options:
// Good: Configurable
const speed = document.body.dataset.scrollSpeed || 'smooth';

// Avoid: Hardcoded
const speed = 'smooth';
Include comments explaining how to use the block:
/**
 * Smooth Scroll Block
 *
 * Automatically enables smooth scrolling for all anchor links.
 * No configuration needed.
 */
Don’t throw errors if expected elements don’t exist:
const slider = document.querySelector('.slider');
if (slider) {
  // Initialize slider
}
If a block needs setup instructions or multiple files, consider making it a Kit instead.

​
Example Blocks

​
Smooth Scroll

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      e.preventDefault();
      target.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

​
Back to Top Button

const btn = document.querySelector('[data-back-to-top]');
if (btn) {
  window.addEventListener('scroll', () => {
    btn.style.opacity = window.scrollY > 300 ? '1' : '0';
  });
  btn.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
}

​
Current Year

document.querySelectorAll('[data-year]').forEach(el => {
  el.textContent = new Date().getFullYear();
});

​
Next Steps

Kits

Bundle blocks with documentation and dependencies.

Snippets

Create code templates with variables.