Documentation
Plugin Documentation
Give users clear setup instructions, feature references, and FAQ in one place.
= NodeLogic Graph Builder =
Contributors: nodelogicwp Tags: calculator, calculator builder, gutenberg, wordpress blocks, no-code, workflow builder, conditional logic, dynamic content, visual builder, reusable templates Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 Stable tag: 1.4.2 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html
Visual no-code calculator and workflow builder for Gutenberg blocks with conditional logic, dynamic content, and reusable presets.
Description
NodeLogic Graph Builder lets you build dynamic WordPress page logic, calculators, and reusable workflows without writing code.
You create your setup directly in Gutenberg:
- Add input/output blocks from this plugin to your page.
- Add the NodeLogic Graph Builder Logic block.
- Open the graph editor and connect nodes to control values, conditions, styles, and behavior.
- Save and publish.
Key Features:
- Visual drag-and-drop node graph editor for calculators and workflows
- Gutenberg blocks for inputs/outputs and page logic
- Supports number, string, boolean, color, and basic CSS logic flows in the free version
- Logic Block for page-level runtime behavior
- Starter preset layouts for common calculator-style setups
- Works locally inside WordPress (no license endpoint required)
Node Types Included:
- Element blocks: Seekbar, Number Input, Text Input, Radio Group, Select, Checkbox, Label, Button Group
- Graph nodes (free): Calculation, Condition, Switch/If, Boolean Logic, Math helpers, core String Logic, Colors, CSS, Outputs
Source: https://github.com/nodelogicwp/nodelogic-graph-builder
Installation
- Upload the plugin files to `/wp-content/plugins/nodelogic-graph-builder/`
- Activate the plugin through the Plugins screen in WordPress
- Open any page/post in Gutenberg
- Add input/output blocks from NodeLogic Graph Builder
- Add the NodeLogic Graph Builder Logic block and open the graph editor
- Connect nodes, save, and publish
Frequently Asked Questions
Where do I start in the free version?
Open Gutenberg, add the plugin input/output blocks to your page, then add the NodeLogic Graph Builder Logic block. Build your graph there and publish.
Does this plugin make external HTTP requests?
No. This plugin works locally in WordPress and does not require a license activation endpoint.
Are there starter presets?
Yes. The free version includes starter preset layouts built from the plugin's own blocks so you can begin with a ready-made calculator layout and then adjust it to fit your page.
Where is the JavaScript source code?
The source is included in the `src/` directory. Build artifacts are in `build/`.
What browsers are supported?
All modern browsers (Chrome, Firefox, Safari, Edge). The graph editor is optimized for desktop editing.
Changelog
1.4.2 * Added manual height control for Array List blocks * Improved pie and donut percentage rounding with configurable decimal precision * Removed internal debug logging from the editor and runtime
1.4.1 * Improved calculation flow visualization with clearer numbered markers and curved input mapping arrows * Added dynamic input-gap validation with node error highlighting and save blocking for invalid graphs * Fixed sidebar icon/text rendering issues and general graph editor UI polish
1.4.0 * Renamed plugin to NodeLogic Graph Builder * Updated slug/text domain and main plugin file naming * Updated WordPress.org free build content and naming consistency * Added/kept readable source files in `src/` and documented source location
Upgrade Notice
1.4.2 This release adds Array List height control, refines pie/donut percentages, and removes leftover debug output.
1.4.1 This release improves graph editor flow clarity and adds stronger validation for dynamic input chains.
Getting Started
Install the plugin, open Gutenberg, and insert NodeLogic blocks. Then add the Logic block to connect your workflow.
Installation
Upload plugin files to /wp-content/plugins/, activate plugin, add blocks on a page, and publish.
Need Help?
If you need support, contact support@nodelogicwp.com.
Nodes Reference
Element
Element Node
Provides a reference to a UI element or component. Used whenever you need to read or modify an element’s value, style, color, or state.
Constants
String Constant
A fixed text value. Useful for labels, messages, CSS strings, comparisons, or switch-case outputs.
Number Constant
A fixed numeric value (e.g., 0, 1, 100). Used in math operations, ranges, comparisons, clamps, and switch logic.
Boolean Constant
A fixed True/False value. Used in conditions, logic flows, enabling/disabling UI, and branching.
Math
Calculation Node
Performs a mathematical operation based on the selected operator (+, −, ×, ÷). Missing inputs are treated as zero. Useful for formulas, scoring, dynamic values, and numeric transformations.
Logic
Count True
Counts how many of the input booleans are True. Useful for validation, multi-condition checks, and threshold logic.
OR Node
Returns True if at least one input is True. Used for alternative conditions or fallback logic.
Condition Node
Compares two values using strict equality. Returns True only if both value and type match.
If Node
Returns the “True” input if the condition is True, otherwise returns the “False” input. Equivalent to a classic if(condition) expression.
UI / Output
Output Node
Executes UI updates. Sets the element’s value, background, text color, disabled state, or custom CSS. Does not return data — it performs an action.
How to Create First Graph
Start with Element Nodes or constants, process logic in hidden nodes, and push result to output node.
Problems and Solutions
Result is empty
Example: Output is not connected
Solution: Connect final node result to Output Node.