Block

What Are Custom Blocks in Gutenberg?

Custom blocks are reusable building pieces that you can add to your WordPress pages and posts through the Gutenberg editor. Think of them as specialized content modules – like a button, a heading, a testimonial slider, or any custom design element you might need. Instead of writing code each time you want to add these elements, you simply insert a block from the editor’s block menu.

How FanCoolo Blocks Work

In FanCoolo, when you create a new block item, you’re actually creating a completely new block type that will appear in your Gutenberg editor’s block library. Each block you create becomes its own independent block that you and your content editors can use throughout your website.

This is different from creating a single instance of content – you’re creating a reusable block type that can be inserted multiple times across different pages and posts.

What Makes Up a Block?

Each FanCoolo block consists of several components that work together to give you complete control over how your block looks and behaves:

Tabs

Content (PHP)

This is the heart of your block – the actual content that visitors see on your website. You write this in PHP, which gives you flexibility to display dynamic content, pull in data from your database, include symbols (reusable components), and create complex layouts. This is what renders on the frontend when someone visits your page.

Style (CSS)

The Style controls how your block looks, both in the Gutenberg editor and on your live website. Any styling you add here applies universally to your block, ensuring consistency between what you see while editing and what your visitors see on the frontend.

Editor Style (CSS)

Sometimes you need your block to look different in the editor than it does on the frontend. That’s where Editor Style comes in. This CSS only affects how the block appears in the Gutenberg editor.

Why would you need this? Here are some common scenarios:

• You might want to simplify the editing experience by removing complex animations that would make it difficult to select and edit content
• You might need to adjust spacing or layout to make it easier to see where to click and type
• You might want to highlight editable areas more clearly than they appear on the live site

View (JavaScript)

The View handles any interactive behavior your block needs on the frontend. This is where you add things like:

• Animations that trigger when users scroll
• Interactive elements like tabs or accordions
• Dynamic content that changes based on user actions
• Any JavaScript functionality that makes your block come alive

This is the equivalent of WordPress’s native view.js file for blocks.

Attributes Manager

Think of attributes as the customizable settings for your block. This is where you register the fields that appear in the block’s settings panel in the Gutenberg editor. For example:

• A text field for a heading
• A color picker for background color
• A toggle to enable or disable a feature
• An image uploader
• Dropdown menus for different style variations

When a content editor inserts your block, they’ll use these attribute fields to customize the block for their specific needs.

Block Configuration (block.json)

Behind the scenes, FanCoolo generates a block.json file for each block you create, just like WordPress native blocks. This file contains all the technical configuration that tells WordPress:

• What your block is called
• What category it belongs to
• Which scripts and styles to load
• What attributes are available
• How the block should be registered

You don’t need to manually create or edit this file – FanCoolo generates it automatically based on your block settings.