WP Manifestindependent plugin directory
manifest / editor / green-impact-calculator

Green Impact Calculator

Live Carbon Footprint Calculator.

by alex_ · github.com/alexphex/green-impact-calculator

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/alexphex/green-impact-calculator/archive/refs/heads/main.zip
Readme github.com/alexphex/green-impact-calculator ↗

Green Impact & CO2 Calculator Block A dynamic WordPress Gutenberg block for calculating carbon emissions based on product weight and transport distance. Built for Greentech and sustainability-focused websites.

🛠 Tech Stack

  • Framework: WordPress Gutenberg Block API

  • Frontend/Admin: React (Editor), Vanilla JS (Frontend Interactivity)

  • Backend: PHP (Server-side rendering via render.php)

  • Styling: SASS / CSS Custom Properties

  • Build Tool: @wordpress/scripts

⚙️ How It Works The block implements a Hybrid Rendering Strategy:

  1. Admin Interface: Uses React components (InspectorControls, PanelBody) to manage block attributes. Provides a live preview using calculated state.

  2. Server-Side: Attributes are processed in PHP to ensure SEO-friendly HTML and correct data formatting on initial page load.

  3. Client-Side: A lightweight Vanilla JS script (view.js) attaches to the block, reading initial values from data-attributes and updating the DOM instantly when the user interacts with the range slider.

📋 Features

  • Dynamic Attributes: Customizable product name, weight, CO2 factor, and distance.

  • Conditional Rendering: A toggle to show/hide detailed breakdown (Production vs. Logistics).

  • Zero Dependencies: The frontend interactive part uses pure JS for maximum performance.

  • Custom Styling: Integrated PanelColorSettings for brand-specific accent colors.

📂 Project Structure

  • /src/block.json — Block metadata and attribute definitions.

  • /src/edit.js — React-based editor interface.

  • /src/render.php — Server-side template for frontend output.

  • /src/view.js — Client-side logic for real-time calculations.

  • /src/style.scss — Shared styles for both frontend and backend.

🚀 Installation

  1. Clone to /wp-content/plugins/green-impact-calculator.

  2. Run npm install to fetch dependencies.

  3. Run npm run build to compile the production-ready code.

  4. Activate the plugin in the WordPress Dashboard.