[WordPress][Block Lab] Static Google Map block

block-map.php

<?php
/**
 * Block: Map
 * Description: Generates a static map image via Google Static Maps API.
 *
 * @see https://staticmapmaker.com/google/
 * @see https://github.com/getblocklab/block-lab
 * ----------------------------------------
 * Block config:
 * ----------------------------------------
 * Field Label  | Field Name   | Field Type
 * -------------|--------------|-----------
 * Caption      | caption      | Text
 * Address      | address      | Text
 * API key      | api-key      | Text
 * Format       | format       | Radio
 * Width        | size-w       | Number
 * Height       | size-h       | Number
 * Scale        | scale        | Radio
 * Marker color | marker-color | Color
 * Marker size  | marker-size  | Select
 * Marker label | marker-label | Select
 * Zoom         | zoom         | Range
 * Alt text     | alt          | Text
 * Lazy load    | lazy-load    | Toggle
 * ----------------------------------------
 *
 * ----------------------------------------
 * Static Maps URL anatomy:
 * ----------------------------------------
 * https://maps.googleapis.com/maps/api/staticmap
 * ?center={Hobbinton+NZ}
 * &format={jpg|png}
 * &key={your-api-key}
 * &scale={1|2}
 * &size={600}x{300}
 * &zoom={1-100}
 * &markers=size:{tiny|small|mid}|color:{#ff0000}|label:{0-9|A-Z}|{Hobbinton+NZ}
 */

/**
 * This could probably be generated via block_config() and block_field_config(),
 * however, since there’s so much early encoding going on and we need `markers`
 * separately from other values, it seems easier to set up a dedicated array.
 *
 * @var array Map figure values
 */
$m = [
	'base_url'  => 'https://maps.googleapis.com/maps/api/staticmap',
	'lazy-load' => block_value( 'lazy-load' ) ? 'loading="lazy"' : 'data-no-lazy="1"',
	'link'      => sprintf( 'https://www.google.com/maps/place/%s/', urlencode( block_value( 'address' ) ) ),
	'map'       => [
		'center'  => urlencode( block_value( 'address' ) ),
		'format'  => block_value( 'format' ),
		'key'     => urlencode( block_value( 'api-key' ) ),
		'scale'   => block_value( 'scale' ),
		'size'    => sprintf( '%1$sx%2$s', block_value( 'size-w' ), block_value( 'size-h' ) ),
		'zoom'    => block_value( 'zoom' ),
	],
	'markers' => [
		'size'    => urlencode( block_value( 'marker-size' ) ),
		'color'   => urlencode( block_value( 'marker-color' ) ),
		'label'   => urlencode( block_value( 'marker-label' ) ),
		'address' => urlencode( block_value( 'address' ) ),
	],
];

/**
 * We can use add_query_arg() only for part of the URL because the `markers`
 * query parameter has multiple values separated by pipes, not ampersands.
 *
 * @var string Static map image URL
 */
$src = sprintf( '%1$s&markers=size:%2$s%%7Ccolor:%3$s%%7Clabel:%4$s%%7C%5$s',
	// 1. Base URL + regular query params
	add_query_arg( $m[ 'map' ], $m[ 'base_url' ] ),
	// 2. `markers` query param with pipe-separated values
	$m[ 'markers' ][ 'size' ],
	$m[ 'markers' ][ 'color' ],
	$m[ 'markers' ][ 'label' ],
	$m[ 'markers' ][ 'address' ]
);

// Whew. Let’s do this.
?>
<figure class="Map x<?php print esc_attr( block_value( 'scale' ) ); ?>" style="width:<?php print esc_attr( block_value( 'size-w' ) ); ?>px">
<?php if ( ! empty( block_value( 'caption' ) ) ) : ?>
	<figcaption class="Map__caption">
		<?php block_field( 'caption' ); ?>
	</figcaption>
<?php endif; ?>
	<a href="<?php print $m[ 'link' ]; ?>" class="Map__link">
		<img src="<?php print $src; ?>" alt="<?php print esc_attr( block_value( 'alt' ) ); ?>" class="Map__image" <?php print $m[ 'lazy-load' ]; ?>/>
	</a>
</figure>