Field Arrangement & Order
The order of fields in the builder directly controls the order they appear in the Gutenberg block inspector panel. Logical ordering improves the editing experience for your clients and team.
Drag to Reorder
Every field row has a drag handle on the left. Click and drag to move a field up or down in the list. The order is saved immediately when you save the block.
Field Groups
Groups let you organise related fields under a collapsible heading in the inspector. This is especially useful for blocks with many fields — editors can collapse sections they aren't editing.
To create a group: click Add Group in the builder toolbar. Give it a label, then drag fields into it.
Tip: Group by concern, not by type
Group fields by what they control (e.g. "Content", "Appearance", "Media") rather than by field type. This makes the inspector easier for non-technical editors to navigate.
How Order Affects the Inspector
Fields are rendered in the Gutenberg sidebar inspector in the exact order you set in the builder. Top of the list = top of the inspector. Groups appear as collapsible panels in the order you arrange them.
The order has no effect on the front-end output — your PHP template can reference fields in any order regardless.
Best Practices
- Put the most-used fields at the top so editors don't have to scroll.
- Put optional or advanced fields (e.g. custom CSS class overrides) at the bottom or in a collapsed group.
- Use groups for blocks with 6+ fields.
- Label groups clearly — editors will see these labels in the inspector.