Skip to main content

Google Maps Directions

The Google Maps Directions block adds a directions link powered by Google Maps.

It is designed to be both:

  • Editor-friendly: you get a native Gutenberg Button to style and configure like any other button.
  • Data-friendly: the Address and Link Text fields accept shortcodes (including common ACF shortcodes).

What this block creates​

When you insert Google Maps Directions, it creates a nested core block structure:

  • core/buttons
  • core/button (inside the Buttons block)

This means you are not styling a custom button implementation. You are styling a real Gutenberg Button.

Why this matters

All the normal Button settings (styles, colors, typography, border, width, etc.) are available because the inner block is a native core/button.

Fields (supports shortcodes)​

This block provides two option fields in the block sidebar:

Address​

The destination address used to build the Google Maps directions URL.

  • Example: 1600 Amphitheatre Parkway, Mountain View, CA
  • Shortcode example: [acf field="event_location"]

How it’s used

On the frontend, the block computes a URL like:

https://www.google.com/maps/dir/?api=1&destination=...

The destination value is URL-encoded.

Link Text​

The visible label of the button.

  • Default: Get Directions
  • Shortcode example: Directions to [acf field="venue_name"]

Notes

  • The Link Text is applied to the nested Button label.
  • If you change the Button label directly in the editor, the Link Text field is kept in sync.

How URL generation works​

Destination-only directions​

This block generates a destination-only Google Maps directions URL:

  • From: the visitor’s current location (as handled by Google Maps)
  • To: the Address field

This is the most common “get directions” use case.

URL is forced (editor + frontend)​

The nested Button’s URL is intentionally forced to the computed directions URL.

This prevents accidental mismatches where the block says “Directions” but the button links somewhere else.

Shortcodes in the editor

The editor cannot evaluate WordPress shortcodes.

If your Address or Link Text contains shortcodes, the editor preview may show the raw shortcode text. The frontend output will resolve the shortcodes.

Styling and configuration​

Because the block contains a native Button, you can configure it normally using the standard Gutenberg UI:

  • Button style (Fill / Outline)
  • Colors
  • Typography
  • Border
  • Spacing
  • Width
  • (and any theme-provided button settings)

You can also configure the outer Buttons block (alignment, layout) as usual.

Accessibility​

Accessibility depends on the nested core/button block and your chosen label.

Guidelines:

  • Use descriptive link text (e.g. “Get Directions” or “Directions to Main Campus”).
  • Ensure adequate color contrast based on your theme settings.

Troubleshooting​

The button URL keeps changing back​

This is expected.

The block forces the nested Button URL to the Google Maps directions link derived from the Address field.

My shortcode doesn’t render in the editor​

This is expected.

Shortcodes are resolved when WordPress renders the block on the frontend.

Address is empty​

If Address is empty, the block will still output a base directions URL:

https://www.google.com/maps/dir/?api=1

Populate Address to generate a destination-specific link.

Technical notes (for developers)​

  • Block name: yoko-core/google-maps-directions
  • Rendered server-side via render.php.
  • Shortcode support:
    • Address is processed with do_shortcode() before building the URL.
    • Rendered inner content is processed with do_shortcode() so Link Text shortcodes can work.
  • URL forcing:
    • On the frontend, the block rewrites the first .wp-block-button__link href to the computed directions URL.