H2G2 Periodic Table

An experimental WordPress plugin focused on REST-driven data flow, JSON-based configuration, and custom admin interfaces, demonstrated through an interactive periodic table.

---

Overview

This project is a development-oriented plugin that brings together several modern WordPress patterns in a single, cohesive example.

It combines a dynamic Gutenberg block, shared PHP rendering, REST-based data flow, and a JSON-driven configuration layer. The periodic table UI is used as a practical demonstration of these concepts, rather than a full scientific dataset.

The plugin also includes an experimental admin interface built with @wordpress/dataviews, featuring schema-assisted form generation and a draft/publish workflow for managing data.

---

Features

Block & Rendering

• Dynamic Gutenberg block with PHP render
• Shared rendering template usable outside of the block context
• Support for wide and full alignment
• Optional UI controls for property and color mode selection

Data & Architecture

• JSON-based data sources (elements.json, colors.json)
• Schema-driven configuration (element-schema.json)
• Single source of truth with database overrides
• REST endpoints for frontend data and admin actions

Admin Interface

• Settings page with separate sections for colors and elements
• Experimental UI built with @wordpress/dataviews and DataForm
• Schema-generated form fields (including enum handling and read-only flags)
• Modal-based editing for individual elements

Data Workflow

• Draft / publish workflow for both colors and elements
• Discard changes and reset to original JSON source
• Published data stored in WordPress options
• Automatic fallback to JSON when no database data is present

Frontend Behavior

• Modular JavaScript
• Custom events for UI interaction
• Dynamic legend and property-based coloring
• Element preview panel on interaction
• Keyboard navigation support
• Light/dark mode with system preference awareness

Styling

• Centralized SCSS shared between block and frontend

---

Installation

1. Download or clone the repository.
2. Copy the plugin folder to your WordPress wp-content/plugins directory.
3. Activate the plugin from the WordPress admin panel.

The plugin includes prebuilt assets and works out of the box.

---

Development

Source files are located in the assets-src/ and blocks/ directories.

To work on the project locally:

npm install
npm run start:all

To build assets:

npm run build:all

Individual build targets:

npm run frontend:start
npm run editor:start
npm run settings:start
npm run blocks:start

Build output is written to the build/ directory.

---

Project Structure

assets-src/
  js/
    frontend/
    editor/
    settings/
    shared/
  scss/
blocks/
build/
inc/
json/
templates/
languages/

• assets-src/js/frontend – frontend behavior and UI logic
• assets-src/js/editor – block editor integration
• assets-src/js/settings – admin settings interface
• assets-src/js/shared – shared modules
• blocks – Gutenberg block source files
• inc – PHP classes and plugin bootstrap
• json – data sources and schema definitions
• templates – shared rendering templates
• build – compiled assets (included in repo)

---

Data Model

The plugin uses JSON files as its primary data source:

• elements.json – basic element data
• colors.json – color schemes for different properties and modes
• element-schema.json – schema used to generate admin form fields

In the admin interface:

• changes are stored as drafts in the database
• published data overrides the JSON source
• resetting removes database data and restores JSON defaults

---

Notes

• This is an experimental project intended as a development showcase.
• The included dataset was manually curated from commonly available public chemistry references and is intended as a lightweight demo dataset rather than a canonical scientific source.
• The admin interface is based on @wordpress/dataviews, which is still evolving and may change in future WordPress versions.