Skip to content

Keep the saved view and fix background dragging in the WordPress 7 editor map - #4

Open
svandragt wants to merge 3 commits into
mainfrom
3-editor-map-zoom
Open

Keep the saved view and fix background dragging in the WordPress 7 editor map#4
svandragt wants to merge 3 commits into
mainfrom
3-editor-map-zoom

Conversation

@svandragt

@svandragt svandragt commented Oct 19, 2026 •
edited
Loading

Copy link
Copy Markdown

In the WordPress 7 block editor, which shows content in an iframe, the map block had three faults. A saved zoom of 0 changed to 1. The map could open at a different view from the saved one. Dragging the map background made the map jump by the iframe's offset: 96px down on every drag, and the wrong way horizontally when the inserter was open.

What changed

  • The editor keeps a zoom of 0 instead of replacing it with 1.1
  • When the editor map first loads, it remeasures its container and moves to the saved centre and zoom.2
  • The map fills its container's height, so a fixed aspect ratio such as 16:9 shows the full map.3
  • Dragging the map background in the editor follows the pointer. The editor pans the map itself instead of using Mapbox's drag handling.4
  • The repository has its first JavaScript unit tests. They cover the zoom, the first-load behaviour and the drag panning.5

The frontend map is unchanged.

Separately, the PLUGIN_VERSION constant in plugin.php now says 0.1.1, to match the plugin header. Nothing reads the constant, so this has no effect at runtime.

Test plan

  • Each unit test failed before its fix and passes after it. The zoom test expected 0 and received 1. The drag test expected dragPan to be off and found it on.
  • Every editor check below passed on both WordPress 7.0 and 7.1.3, with the same measurements (wp-env, Playwright). The test marker is at 20, 10.
Check Result on 7.0 and 7.1.3
Saved zoom 0, default height Opens at zoom 0, centre 20, 10
Saved zoom 3, default height Opens at zoom 3
Saved zoom 3, 16:9 Opens at zoom 3, map fills the 16:9 box
Reload at zoom 0 Still zoom 0, centre 20, 10
Drag background 200px right, inserter closed Map moves +200, 0
Same drag, inserter open (iframe 350px from the left) Map moves +200, 0
Diagonal drag of +150, +80 Map moves +150, +80
Drag a marker pin Pin follows the pointer, its coordinates update, map does not pan
Drag background with the block not selected Map moves +200, 0
  • Before the drag fix, the same 200px drag moved the map 96px down on both this branch and main. With the inserter open, it moved −37px instead of +200px.
  • The block inspector opens and shows the zoom fields on both versions.
Lint and build
  • npm run lint:js and npm run build pass.
  • npm run lint:pkg-json reports five errors that also fail on main.

Not checked

  • Touch dragging. The checks used a mouse in desktop Chromium.
  • Two console errors appear on both versions: a 404 for a resource and an uncaught error with no message. Neither names the plugin. They were not traced or compared with main.

Why this shape

The drag fix pans by the distance between two pointer events read from the iframe's document, so the iframe's offset cancels out. Correcting Mapbox's absolute coordinates by the offset would break whenever the editor layout moves the iframe. The marker drag in the same file already listens to the iframe's document.

Fixes #3 (Fix editor map opening at the wrong zoom, and zoom 0 being reset, in WordPress 7).

Footnotes

  1. zoom || 1 became zoom ?? 1 in src/blocks/map/edit.js, in the Map options and in setZoom. ↩

  2. The load handler calls map.resize() then map.jumpTo( viewRef.current ). viewRef holds the latest centre and zoom, so a change made before the map finishes loading is kept. ↩

  3. The map container gets height: 100%. ↩

  4. The editor Map gets dragPan: false. A pointerdown listener on map.getCanvasContainer() binds pointermove and pointerup on its ownerDocument and calls map.panBy( [ dx, dy ], { animate: false } ). ↩

  5. npm run test:unit runs wp-scripts test-unit-js. The tests are in src/blocks/map/edit.test.js and mock mapbox-gl and the externalised @wordpress/* packages. ↩

@svandragt @claude
Keep the saved zoom and view in the editor map
e7d762b 
A saved zoom of 0 was replaced by 1, and in the iframed WordPress 7
editor the map could open at a different zoom because it was never
resized after its first load. Use `?? 1` for the zoom fallback, resize
and jump to the saved view on the first load, and let the map
container follow its parent's height.

Add a test:unit script and a Jest test for MapPreview with mapbox-gl
mocked.

Refs #3

Co-Authored-By: Claude <noreply@anthropic.com>
@svandragt svandragt self-assigned this Oct 19, 2026
@svandragt
svandragt requested a review from kadamwhite October 19, 2026 17:11
@svandragt @claude
Pan the editor map from pointer events in the iframe document
b284796 
In the WordPress 7 editor the canvas is an iframe, while the bundled
mapbox-gl runs in the parent window. Mapbox's drag pan then mixed
pointer coordinates from both documents, so dragging the map
background jumped by the iframe's offset. Turn off dragPan in the
editor and pan by the distance between pointer events read from the
canvas's own document.

Fixes #3

Co-Authored-By: Claude <noreply@anthropic.com>
@svandragt
svandragt marked this pull request as draft October 19, 2026 17:13
@svandragt svandragt changed the title Keep the saved zoom and view in the editor map on WordPress 7 Keep the saved view and fix background dragging in the WordPress 7 editor map Oct 19, 2026
@svandragt svandragt mentioned this pull request Oct 19, 2026
Open
@svandragt @claude
Match PLUGIN_VERSION to the plugin header version
e0e4e14 
Co-Authored-By: Claude <noreply@anthropic.com>
@svandragt
svandragt marked this pull request as ready for review October 19, 2026 17:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kadamwhite kadamwhite Awaiting requested review from kadamwhite

Assignees

@svandragt svandragt

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Fix editor map opening at the wrong zoom, and zoom 0 being reset, in WordPress 7

1 participant

@svandragt