Kntnt GPX Blocks

WordPress plugin that adds two Gutenberg blocks for visualizing GPX tracks — GPX Map (an interactive map of the recorded route) and GPX Elevation (an elevation profile chart) — plus a GPX Statistics block-variation and a [kntnt-gpx <key>] shortcode that pulls total distance, min/max elevation, and total ascent and descent into ordinary paragraphs (or any other content surface that accepts shortcodes). The two blocks work together — moving the cursor over the elevation profile highlights the matching point on the map, and vice versa — and either can also be used on its own. The Statistics variation is data-only: layout and theming use core paragraphs and the standard typography and color controls.

Description

Take a GPX file from Strava, Komoot, Garmin Connect, AllTrails, or your own watch, drop it into the WordPress media library, and turn it into a polished route presentation: a map, an elevation profile, and a clean summary of the key numbers. No external services, no client-side GPX parsing, no JavaScript libraries fighting your theme — just blocks that look like they were always part of WordPress.

Built like a Core block

Every setting uses the same color picker, the same typography panel, and the same alignment controls you already know from Paragraph and Group. Defaults follow your theme automatically. Drop the blocks into a column, a group, a cover — anywhere a Core block fits, these fit too.

Coordinated, not coupled

The blocks talk to each other when they're on the same page, but you choose the layout. Place the map full-width at the top of an article, the elevation profile in a sidebar, and the statistics under a hero image — they all reference the same GPX track via the page's Map block.

Privacy by default

Map tiles come from OpenStreetMap, which means visitor IPs are sent to a third party. The plugin exposes a small, CMP-neutral consent contract — a JavaScript global and one inbound event — that any cookie-consent plugin can be wired up to with a short glue snippet. Once the glue is in place, no tile request leaves the browser until the visitor has given consent. The plugin renders no consent UI of its own — your cookie-consent plugin handles the visitor-facing flow exactly the way it handles every other third-party service. Out of the box, with no consent plugin installed and no glue written, the map works fully (default-allow on absent signal). Activate the gate by installing a CMP and adding the template in the For Builders section.

Performance you don't have to think about

GPX files are parsed once on the server, converted to a compact format, and cached on the attachment. Your visitors never download the original GPX. The polyline is simplified before render, the elevation profile is downsampled to a few hundred points, and the map only loads when it's about to scroll into view.

For users

This section is for marketers, website owners, WordPress administrators, and agency staff who want to install, configure, and use the plugin.

Installation

1. Download the latest release ZIP file.
2. In your WordPress admin panel, go to Plugins → Add New.
3. Click Upload Plugin and select the downloaded ZIP file.
4. Activate the plugin.

The plugin is distributed via GitHub Releases and updated through the standard WordPress plugin update UI. When a new version is available, you will see it on the WordPress Updates page.

System Requirements

The plugin checks the requirements on activation and aborts with a clear error message if any requirement is not met.

GPX Map block

Insert the GPX Map block and, in the Source panel on the right, upload or pick an existing .gpx file from the media library. The GPX is parsed once on the server and the result is cached; subsequent page loads go straight to the cache. The track is drawn as a polyline on an OpenStreetMap tile layer using Leaflet, and the viewport is automatically fitted to the track bounds. If the file contains <wpt> waypoints, they appear as circle markers whose hover tooltips show the waypoint name and optional description from the GPX.

Use the standard Dimensions panel to control the block's aspect ratio and minimum height — the same controls every dimensions-aware core block exposes. Empty fields fall back to a 3:1 baseline shape with a 240 px minimum height. The Controls panel toggles the four map overlays individually: zoom buttons (on by default), a metric scale bar (on by default), a fullscreen button (off by default), and a GPX download button (off by default — see the "Don'ts" section below). The Interactions panel controls the six interaction modes: drag-to-pan (on), scroll-wheel zoom (off by default to avoid scroll hijacking), pinch zoom (on), double-click zoom (on), box zoom via Shift+drag (off), and keyboard navigation (on).

The Track panel provides color pickers for the track polyline and for the cursor marker that appears when hovering either the map or the elevation chart. The Waypoints panel configures the marker fill color, the hover label's background and text color, and the label's font family, size, weight, and style. All color inputs accept hex values; all typography inputs accept CSS lengths or theme font-size preset tokens. Leaving any input blank lets the CSS fall back to the hardcoded default in the plugin's stylesheet, so the block integrates cleanly with your theme without requiring any configuration.

When a cookie-consent plugin is wired up to the plugin's consent contract (see For Builders) and the visitor has not yet granted consent, the block shows the track polyline, cursor, controls, and waypoint markers over a plain background — no tiles. The polyline is local SVG drawn from cached GeoJSON, so it reaches no third party and is not subject to the consent contract. Only the tile-layer requests are gated; as soon as consent is granted, tiles fade in over the polyline, and if consent is later withdrawn, the tiles are removed but the polyline stays. The plugin renders no consent UI of its own — your cookie-consent plugin handles the visitor-facing flow exactly the way it does for every other third-party service. In the WordPress block editor, the map always shows regardless of consent state — editors need to see the actual map to set up the block. Out of the box, with no cookie-consent plugin installed and no glue written, tiles mount immediately on every page load.

GPX Elevation block

Insert the GPX Elevation block on a page that already contains a GPX Map. The Datakälla panel in the block sidebar lets you choose the data source: "Auto" (the default) resolves automatically to the single GPX Map on the page, and is the right choice whenever there is exactly one map. If the page has more than one GPX Map block you must pick the specific map explicitly from the dropdown, which lists each map by its GPX filename. The standard Dimensions panel controls the block's aspect ratio and minimum height; empty fields fall back to a 4:1 baseline shape with a 120 px minimum height.

The elevation profile is rendered server-side as an inline SVG chart with distance on the x-axis and elevation (always in meters) on the y-axis. Five evenly spaced tick labels appear on each axis. The x-axis label switches between meters and kilometers automatically at 2000 m. The SVG carries a screen-reader <desc> element summarizing the profile in text ("Elevation profile from … at the start to … after …, with total ascent … and descent …"), and a `