Map: Add block styles for WP20 and SotW 2023

mu-plugins/blocks/google-map/index.php

@@ -40,11 +40,10 @@ function render( $attributes, $content, $block ) {
 	$attributes['searchIcon'] = plugins_url( 'images/search.svg', __FILE__ );
 
 	$attributes['markerIcon'] = array(
-		'markerUrl'           => plugins_url( 'images/map-marker-red.svg', __FILE__ ),
+		'imagesDirUrl'        => plugins_url( 'images', __FILE__ ),
 		'markerHeight'        => 68,
 		'markerWidth'         => 68,
 		'markerAnchorYOffset' => -5,
-		'clusterUrl'          => plugins_url( 'images/cluster-background.svg', __FILE__ ),
 		'clusterWidth'        => 38,
 		'clusterHeight'       => 38,
 	);

mu-plugins/blocks/google-map/src/components/main.js

@@ -21,6 +21,7 @@ import { getValidMarkers } from '../utilities/google-maps-api';
 /**
  *
  * @param {Object}  props
+ * @param {string}  props.blockStyle
  * @param {boolean} props.showMap
  * @param {boolean} props.showList
  * @param {boolean} props.showSearch
@@ -33,6 +34,7 @@ import { getValidMarkers } from '../utilities/google-maps-api';
  * @return {JSX.Element}
  */
 export default function Main( {
+	blockStyle,
 	showMap,
 	showList,
 	showSearch,
@@ -109,7 +111,9 @@ export default function Main( {
 				<Search searchQuery={ searchQuery } onQueryChange={ onQueryChange } iconURL={ searchIcon } />
 			) }
 
-			{ showMap && <Map apiKey={ apiKey } markers={ visibleMarkers } icon={ markerIcon } /> }
+			{ showMap && (
+				<Map apiKey={ apiKey } markers={ visibleMarkers } icon={ markerIcon } blockStyle={ blockStyle } />
+			) }
 
 			{ showList && visibleMarkers.length > 0 && <List markers={ visibleMarkers } /> }
 

mu-plugins/blocks/google-map/src/components/map.js

@@ -29,11 +29,12 @@ import {
  * @param {Object} props
  * @param {string} props.apiKey
  * @param {Array}  props.markers
+ * @param {string} props.blockStyle
  * @param {Object} props.icon
  *
  * @return {JSX.Element}
  */
-export default function Map( { apiKey, markers: rawMarkers, icon } ) {
+export default function Map( { apiKey, markers: rawMarkers, icon, blockStyle } ) {
 	const [ loaded, setLoaded ] = useState( false );
 	const clusterer = useRef( null );
 	const googleMap = useRef( null );
@@ -45,7 +46,7 @@ export default function Map( { apiKey, markers: rawMarkers, icon } ) {
 		zoomControl: true,
 		mapTypeControl: false,
 		streetViewControl: false,
-		styles: mapStyles,
+		styles: mapStyles[ blockStyle ],
 	};
 
 	/**
@@ -65,13 +66,21 @@ export default function Map( { apiKey, markers: rawMarkers, icon } ) {
 		} );
 
 		combinedMarkers = combineDuplicateLocations( rawMarkers );
-		combinedMarkers = assignMarkerReferences( map, maps, infoWindow.current, combinedMarkers, icon );
+		combinedMarkers = assignMarkerReferences(
+			map,
+			maps,
+			infoWindow.current,
+			combinedMarkers,
+			icon,
+			blockStyle
+		);
 
 		clusterer.current = clusterMarkers(
 			map,
 			maps,
 			combinedMarkers.map( ( marker ) => marker.markerRef ),
-			icon
+			icon,
+			blockStyle
 		);
 
 		panToCenter(
@@ -99,7 +108,8 @@ export default function Map( { apiKey, markers: rawMarkers, icon } ) {
 			googleMapsApi.current,
 			infoWindow.current,
 			combinedMarkers,
-			icon
+			icon,
+			blockStyle
 		);
 
 		const markerObjects = combinedMarkers.map( ( marker ) => marker.markerRef );

mu-plugins/blocks/google-map/src/front.js

@@ -9,6 +9,7 @@ import { createRoot } from '@wordpress/element';
  * Internal dependencies
  */
 import Main from './components/main';
+import { getBlockStyle } from './utilities/map-styles';
 
 const init = () => {
 	const containers = document.querySelectorAll( '.wp-block-wporg-google-map' );
@@ -22,7 +23,12 @@ const init = () => {
 	for ( const container of containers ) {
 		root = createRoot( container );
 
-		root.render( <Main { ...wporgGoogleMap[ container.dataset.mapId ] } /> );
+		root.render(
+			<Main
+				blockStyle={ getBlockStyle( container.className ) }
+				{ ...wporgGoogleMap[ container.dataset.mapId ] }
+			/>
+		);
 	}
 };
 

mu-plugins/blocks/google-map/src/index.js

@@ -3,23 +3,37 @@
 /**
  * WordPress dependencies
  */
-import { registerBlockType } from '@wordpress/blocks';
+import { registerBlockStyle, registerBlockType } from '@wordpress/blocks';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import metadata from './block.json';
 import Main from './components/main';
+import { getBlockStyle } from './utilities/map-styles';
 
 function Edit( { attributes } ) {
+	const { id, className } = attributes;
+
 	return (
 		<div { ...useBlockProps() }>
-			<Main { ...wporgGoogleMap[ attributes.id ] } />
+			<Main blockStyle={ getBlockStyle( className ) } { ...wporgGoogleMap[ id ] } />
 		</div>
 	);
 }
 
 registerBlockType( metadata.name, {
 	edit: Edit,
 } );
+
+registerBlockStyle( metadata.name, {
+	name: 'wp20',
+	label: 'WP20',
+	isDefault: true,
+} );
+
+registerBlockStyle( metadata.name, {
+	name: 'sotw-2023',
+	label: 'State of the Word 2023',
+} );

mu-plugins/blocks/google-map/src/utilities/google-maps-api.js

@@ -79,10 +79,11 @@ export function combineDuplicateLocations( rawMarkers ) {
  * @param {google.maps.InfoWindow} infoWindow
  * @param {Array}                  wpEvents
  * @param {Object}                 rawIcon
+ * @param {string}                 blockStyle
  */
-export function assignMarkerReferences( map, maps, infoWindow, wpEvents, rawIcon ) {
+export function assignMarkerReferences( map, maps, infoWindow, wpEvents, rawIcon, blockStyle ) {
 	const icon = {
-		url: rawIcon.markerUrl,
+		url: rawIcon.imagesDirUrl + `/map-marker-${ blockStyle }.svg`,
 		size: new maps.Size( rawIcon.markerHeight, rawIcon.markerWidth ),
 		anchor: new maps.Point( 34, rawIcon.markerWidth / 2 ),
 		scaledSize: new maps.Size( rawIcon.markerHeight / 2, rawIcon.markerWidth / 2 ),
@@ -141,12 +142,13 @@ function openInfoWindow( infoWindow, map, markerObject, rawMarker ) {
  * @param {google.maps}          maps
  * @param {google.maps.Marker[]} markers
  * @param {Object}               rawIcon
+ * @param {string}               blockStyle
  *
  * @return {MarkerClusterer}
  */
-export function clusterMarkers( map, maps, markers, rawIcon ) {
+export function clusterMarkers( map, maps, markers, rawIcon, blockStyle ) {
 	const clusterIcon = {
-		url: rawIcon.clusterUrl,
+		url: rawIcon.imagesDirUrl + `/cluster-background-${ blockStyle }.svg`,
 		size: new maps.Size( rawIcon.clusterHeight, rawIcon.clusterWidth ),
 		anchor: new maps.Point( rawIcon.clusterHeight, rawIcon.clusterWidth ),
 		scaledSize: new maps.Size( rawIcon.clusterHeight, rawIcon.clusterWidth ),