Attributes Manager

Fields (also called Attributes) are the editable options that appear in the Gutenberg Editor sidebar when someone uses your block.

For example, if you create a “Testimonial” block, you might want these fields:

• Author name (text field)
• Quote text (textarea)
• Show photo (on/off toggle)
• Star rating (slider from 1-5)

When users insert your block into a page, they’ll see these fields in the sidebar and can edit them. The values they enter are automatically saved and available in your block’s PHP render code.

The Attributes Manager is where you create these fields using a simple visual interface – no JSON editing required.

How It Works

1. Open the Attributes tab in the FanCoolo editor
2. Click “+ Add attribute” to create a new field
3. Choose the Type (Text, Number, Toggle, etc.) from dropdown
4. Enter the Attribute name (e.g., “authorName”, “quoteText”, “showPhoto”)
5. FanCoolo automatically generates block.json with your attributes
6. Your block appears in Gutenberg with these fields in the sidebar
7. Users edit the fields → WordPress saves the data
8. Your PHP code accesses the data via $attributes
9. Copy the PHP example shown below each attribute to use it in your code

Adding an Attribute

1. Click “+ Add attribute” button
2. Select Type from dropdown
3. Enter Attribute name (use camelCase like “authorName”)
4. For Select/Radio: Click “+ Add Option” to add choices
5. For Range: Set Max value
6. Copy the PHP code example shown below the attribute
7. Paste it into your PHP render code to use the field

Using Fields in Your Code

Step 1: Create Field in Attributes Manager

In FanCoolo, add a “Text” attribute named “Author name”. Fields names will be converted to “camelCase” that is a standard for php variables and functions.

Once you type them name you will automatically get php example that you can copy paste to the “Content tab”

Step 2: Copy the PHP Example

Below each attribute, you’ll see a PHP code example like:

Step 3: Paste in Your Render Code

Use it in your block’s PHP template:

Available Field Types

Type	Gutenberg UI	Best For	Example
**Text**	Text input	Short text	Author name, title, label
**Textarea**	Multi-line box	Long text	Quote, description, content
**Number**	Number spinner	Numbers	Count, width, quantity
**Range**	Slider	Numbers with limits	Rating (1-5), opacity (0-100)
**Date**	Date picker	Dates	Event date, deadline
**Image**	Media button	Images	Author photo, background
**Link**	URL input	URLs	Button link, website URL
**Color**	Color picker	Colors	Background, text color
**Select**	Dropdown	Single choice from list	Size (S/M/L), alignment
**Toggle**	On/off switch	Enable/disable	Show author, enable feature
**Checkbox**	Checkbox	True/false	Accept terms, featured
**Radio**	Radio buttons	Single choice (visual)	Layout style, theme