From 62a50529b56efb83793cd476c534a8e0c633d00e Mon Sep 17 00:00:00 2001 From: Ian Dunn Date: Fri, 17 Nov 2023 10:31:25 -0800 Subject: [PATCH] Map: Add block styles for WP20 and SotW 2023 --- .../images/cluster-background-sotw2023.svg | 3 + ...ground.svg => cluster-background-wp20.svg} | 0 ...marker-red.svg => map-marker-sotw2023.svg} | 0 .../{map-marker.svg => map-marker-wp20.svg} | 0 mu-plugins/blocks/google-map/index.php | 3 +- .../blocks/google-map/src/components/main.js | 6 +- .../blocks/google-map/src/components/map.js | 20 +- mu-plugins/blocks/google-map/src/front.js | 8 +- mu-plugins/blocks/google-map/src/index.js | 18 +- .../src/utilities/google-maps-api.js | 10 +- .../google-map/src/utilities/map-styles.js | 234 +++++++++++++++++- 11 files changed, 283 insertions(+), 19 deletions(-) create mode 100644 mu-plugins/blocks/google-map/images/cluster-background-sotw2023.svg rename mu-plugins/blocks/google-map/images/{cluster-background.svg => cluster-background-wp20.svg} (100%) rename mu-plugins/blocks/google-map/images/{map-marker-red.svg => map-marker-sotw2023.svg} (100%) rename mu-plugins/blocks/google-map/images/{map-marker.svg => map-marker-wp20.svg} (100%) diff --git a/mu-plugins/blocks/google-map/images/cluster-background-sotw2023.svg b/mu-plugins/blocks/google-map/images/cluster-background-sotw2023.svg new file mode 100644 index 000000000..fa9d1a35c --- /dev/null +++ b/mu-plugins/blocks/google-map/images/cluster-background-sotw2023.svg @@ -0,0 +1,3 @@ + + + diff --git a/mu-plugins/blocks/google-map/images/cluster-background.svg b/mu-plugins/blocks/google-map/images/cluster-background-wp20.svg similarity index 100% rename from mu-plugins/blocks/google-map/images/cluster-background.svg rename to mu-plugins/blocks/google-map/images/cluster-background-wp20.svg diff --git a/mu-plugins/blocks/google-map/images/map-marker-red.svg b/mu-plugins/blocks/google-map/images/map-marker-sotw2023.svg similarity index 100% rename from mu-plugins/blocks/google-map/images/map-marker-red.svg rename to mu-plugins/blocks/google-map/images/map-marker-sotw2023.svg diff --git a/mu-plugins/blocks/google-map/images/map-marker.svg b/mu-plugins/blocks/google-map/images/map-marker-wp20.svg similarity index 100% rename from mu-plugins/blocks/google-map/images/map-marker.svg rename to mu-plugins/blocks/google-map/images/map-marker-wp20.svg diff --git a/mu-plugins/blocks/google-map/index.php b/mu-plugins/blocks/google-map/index.php index 80b504eeb..590bd95a9 100644 --- a/mu-plugins/blocks/google-map/index.php +++ b/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, ); diff --git a/mu-plugins/blocks/google-map/src/components/main.js b/mu-plugins/blocks/google-map/src/components/main.js index 9071fe1ef..72abf76e6 100644 --- a/mu-plugins/blocks/google-map/src/components/main.js +++ b/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( { ) } - { showMap && } + { showMap && ( + + ) } { showList && visibleMarkers.length > 0 && } diff --git a/mu-plugins/blocks/google-map/src/components/map.js b/mu-plugins/blocks/google-map/src/components/map.js index 923229c37..51bba4427 100644 --- a/mu-plugins/blocks/google-map/src/components/map.js +++ b/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 ); diff --git a/mu-plugins/blocks/google-map/src/front.js b/mu-plugins/blocks/google-map/src/front.js index a9480dd98..3ce8d1444 100644 --- a/mu-plugins/blocks/google-map/src/front.js +++ b/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(
); + root.render( +
+ ); } }; diff --git a/mu-plugins/blocks/google-map/src/index.js b/mu-plugins/blocks/google-map/src/index.js index a579ac229..7e711a274 100644 --- a/mu-plugins/blocks/google-map/src/index.js +++ b/mu-plugins/blocks/google-map/src/index.js @@ -3,7 +3,7 @@ /** * WordPress dependencies */ -import { registerBlockType } from '@wordpress/blocks'; +import { registerBlockStyle, registerBlockType } from '@wordpress/blocks'; import { useBlockProps } from '@wordpress/block-editor'; /** @@ -11,11 +11,14 @@ import { useBlockProps } from '@wordpress/block-editor'; */ import metadata from './block.json'; import Main from './components/main'; +import { getBlockStyle } from './utilities/map-styles'; function Edit( { attributes } ) { + const { id, className } = attributes; + return (
-
+
); } @@ -23,3 +26,14 @@ function Edit( { attributes } ) { 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', +} ); diff --git a/mu-plugins/blocks/google-map/src/utilities/google-maps-api.js b/mu-plugins/blocks/google-map/src/utilities/google-maps-api.js index a6b63f7ca..ea0a905c6 100644 --- a/mu-plugins/blocks/google-map/src/utilities/google-maps-api.js +++ b/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 ), diff --git a/mu-plugins/blocks/google-map/src/utilities/map-styles.js b/mu-plugins/blocks/google-map/src/utilities/map-styles.js index 9b1bc1b2f..8556266cd 100644 --- a/mu-plugins/blocks/google-map/src/utilities/map-styles.js +++ b/mu-plugins/blocks/google-map/src/utilities/map-styles.js @@ -1,10 +1,11 @@ /** - * Get the styles for the map. + * Define the styles for the Google Map. * - * These were generated from https://mapstyle.withgoogle.com/ with these settings: - * Theme Silver, Roads 2, Landmarks 2, Labels 3, Water color #c7d1ff. + * These were generated from https://mapstyle.withgoogle.com/ with the settings noted below. */ -export const mapStyles = [ + +// Theme Silver, Roads 2, Landmarks 2, Labels 3, Water color #c7d1ff. +const wp20 = [ { elementType: 'geometry', stylers: [ @@ -250,3 +251,228 @@ export const mapStyles = [ ], }, ]; + +// Theme Silver, Roads 2, Landmarks 2, Labels 3, Land color #e7e7e7, Water color #ffffff. +const sotw2023 = [ + { + elementType: 'geometry', + stylers: [ + { + color: '#e7e7e7', + }, + ], + }, + { + elementType: 'labels.icon', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + elementType: 'labels.text.fill', + stylers: [ + { + color: '#616161', + }, + ], + }, + { + elementType: 'labels.text.stroke', + stylers: [ + { + color: '#f5f5f5', + }, + ], + }, + { + featureType: 'administrative.land_parcel', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#bdbdbd', + }, + ], + }, + { + featureType: 'poi', + elementType: 'geometry', + stylers: [ + { + color: '#eeeeee', + }, + ], + }, + { + featureType: 'poi', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#757575', + }, + ], + }, + { + featureType: 'poi.business', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + featureType: 'poi.park', + elementType: 'geometry', + stylers: [ + { + color: '#e5e5e5', + }, + ], + }, + { + featureType: 'poi.park', + elementType: 'labels.text', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + featureType: 'poi.park', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, + { + featureType: 'road', + elementType: 'geometry', + stylers: [ + { + color: '#ffffff', + }, + ], + }, + { + featureType: 'road.arterial', + elementType: 'labels', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + featureType: 'road.arterial', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#757575', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'geometry', + stylers: [ + { + color: '#dadada', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'labels', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + featureType: 'road.highway', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#616161', + }, + ], + }, + { + featureType: 'road.local', + stylers: [ + { + visibility: 'off', + }, + ], + }, + { + featureType: 'road.local', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, + { + featureType: 'transit.line', + elementType: 'geometry', + stylers: [ + { + color: '#e5e5e5', + }, + ], + }, + { + featureType: 'transit.station', + elementType: 'geometry', + stylers: [ + { + color: '#eeeeee', + }, + ], + }, + { + featureType: 'water', + elementType: 'geometry', + stylers: [ + { + color: '#ffffff', + }, + ], + }, + { + featureType: 'water', + elementType: 'labels.text.fill', + stylers: [ + { + color: '#9e9e9e', + }, + ], + }, +]; + +/** + * Determine which style variation this block is using. + * + * This shouldn't be needed if https://github.com/WordPress/gutenberg/issues/56278 is resolved. + * + * @param { string } className + * @return { string } + */ +export function getBlockStyle( className ) { + let blockStyle = 'wp20'; + + if ( 'undefined' !== typeof className && className.indexOf( 'is-style-sotw-2023' ) !== -1 ) { + blockStyle = 'sotw2023'; + } + + return blockStyle; +} + +export const mapStyles = { wp20, sotw2023 };