DEV Community

Demi Valerith
Demi Valerith

Posted on

Build a Privacy-Friendly Yard Material Calculator in WordPress

#wordpress #webcomponents #opensource #javascript

A calculator looks simple until it has to work in three places: a plain web
page, a Gutenberg editor, and an existing WordPress theme.

I wanted one implementation for all three. The result is an open-source yard
material coverage calculator that estimates volume and a typical weight range
for gravel, stone, soil, compost, mulch, sand, and fill dirt.

The important part is not the formula. It is the packaging boundary.

Keep the calculation in one Web Component

The framework-neutral component is published as:

npm install @demi-valerith/yard-material-coverage-data
Enter fullscreen mode Exit fullscreen mode

A plain HTML page can load the versioned module and configure it with
attributes:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@demi-valerith/yard-material-coverage-data@1.3.0/widget.js"
></script>

<yard-material-coverage
  material="River rock"
  materials="Pea gravel,Crushed stone,River rock"
  area="50"
  depth="7.5"
  unit="metric"
  accent="#176b58"
></yard-material-coverage>
Enter fullscreen mode Exit fullscreen mode

The same module supports imperial and metric input, a material allowlist, a
sanitized accent color, and optional source attribution.

Bundle the module inside WordPress

A WordPress plugin should not depend on a third-party CDN to execute its core
code. The plugin release therefore includes the tested widget.js file and
registers it locally with wp_register_script_module.

Both WordPress integrations pass their configuration to the same custom
element:

[yard_material_calculator material="Pea gravel" area="500" depth="3" unit="imperial" attribution="false"]
Enter fullscreen mode Exit fullscreen mode

The Gutenberg integration is a dynamic block. Its saved content contains the
block attributes, while PHP sanitizes and renders the current element markup on
each request. The shortcode calls that same renderer.

That avoids maintaining separate formulas for the block, shortcode, and npm
package.

Treat public attribution as a setting

The component does not use cookies, browser storage, analytics, or background
requests. Public source attribution is also disabled by default in the
WordPress plugin.

When a site owner enables attribution, the source link includes bounded UTM
parameters. They are transmitted only when a visitor chooses to click the
link. This gives the publisher control and keeps the embedded calculator free
of invisible tracking.

Make the demo reproducible

The repository includes a WordPress Playground Blueprint. It installs the
release, activates it, and creates a front page containing:

  • a metric Gutenberg block;
  • an imperial shortcode;
  • different material filters;
  • visible and hidden attribution examples.

Run the WordPress Playground demo

The same Blueprint is being proposed to the WordPress community gallery so the
demo can be reviewed and reproduced independently.

Source

The estimates are for planning only. Moisture, compaction, gradation, and
supplier measurements vary.

Top comments (0)