TeamGraph – Org Chart & Team Directory

Description

TeamGraph turns your team into reusable people records and displays them three ways — an organization chart, a card grid, or a directory list — from one Gutenberg block or shortcode. A drag-and-drop builder lives in wp-admin; no page builder required.

Accessible by construction, not by fallback. Most org chart plugins draw a diagram and bolt on a text alternative. TeamGraph inverts that: every view is real, semantic HTML — the chart is a nested list, laid out with pure CSS. Screen readers announce the reporting hierarchy natively, keyboard focus is visible everywhere, visitors without JavaScript get the complete chart, and on phones the tree reflows into a readable list instead of forcing you to pinch-zoom a boardroom diagram.

On the front end (Gutenberg block or [teamgraph] shortcode):

• Three views: org chart with connector lines, card grid, directory list
• Member cards with photo, name, job title, email, phone, and profile link
• Filter any view to one department or location, or chart a single branch from any member
• Collapse/expand branches (chart and list) and a live type-to-filter box (grid and list)
• Department pills appear automatically where a branch’s assignment changes
• Color guides style branches with your brand colors, inherited down the tree
• Prints cleanly, fully expanded
• No jQuery and no front-end framework — one small script and stylesheet, loaded only where a chart appears

In wp-admin (fast React screens under “TeamGraph”):

• Team Members: instant search, sortable columns, pagination, bulk actions, a Trash tab to restore deleted members or remove them permanently, and a one-click copy of the shortcode
• Add/Edit Member with a biography, department, location, photo, live card preview, and a searchable manager picker that never offers a choice that would create a reporting cycle
• Chart Builder: drag onto a member to change their manager, drag above/below to reorder, live tree search, slide-in editing drawer
• Organization: manage your departments and locations in one place
• Theme: color guides with up to eight levels and a live card preview — with live WCAG contrast warnings while you pick colors
• Settings: sample data you can load and remove with one click, CSV import/export with a downloadable template, a built-in Docs guide, and uninstall data controls

Structured data, not drawings

Members are a custom post type (“reports to” is the post hierarchy; the biography is the post content), departments and locations are taxonomies, and every safeguard is enforced server-side: capability checks per action, reporting-cycle prevention, and color validation. Deleting a manager automatically moves their reports up a level — no orphaned branches, no blocked deletes — and deleted members go to a trash you can restore from, rebuilding their branch.

Development

TeamGraph ships with its complete, unminified source. The two admin bundles in build/ (admin.js and block.js) are compiled from src/ with @wordpress/scripts, which minifies its production output; the corresponding sources and the build configuration are included in the plugin so the compiled files can be reproduced and reviewed.

• src/admin/ — the wp-admin React screens. All screens share one bundle and mount by the root element’s data-page attribute.
• src/block/ — the block editor bundle for the TeamGraph Chart block.
• webpack.config.js and package.json — the build configuration.

To rebuild the bundles from source, run this in the plugin directory:

npm install && npm run build

Everything else runs unbuilt: the PHP in includes/ is plain source, and the front end in assets/frontend/ is hand-written vanilla JavaScript and CSS with no build step and no dependencies.