Skip to content

Commit

Permalink
Map block: Do not render the actual map if in block preview mode (#39768
Browse files Browse the repository at this point in the history
)

* Map block: Use block editor store preview flag to determine whether or not to display the placeholder

* changelog

* Cover the map container with the preview image

* Update CHANGELOG wording

* Remove preview attribute in favor of flag coming from the block editor store

* Default to mapHeight and fall back to 400px

* Add attribute removal changelog entry
  • Loading branch information
zaguiini authored and gogdzl committed Oct 25, 2024
1 parent ee50017 commit 9cea20b
Show file tree
Hide file tree
Showing 9 changed files with 88 additions and 86 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Map block: Display a static map image when the block is rendered in a pattern preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: other

Map: remove preview attribute. The mechanism to determine if the block is in preview mode changed internally.
10 changes: 1 addition & 9 deletions projects/plugins/jetpack/extensions/blocks/map/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@
"type": "string",
"default": "red"
},
"preview": {
"type": "boolean",
"default": false
},
"scrollToZoom": {
"type": "boolean",
"default": false
Expand All @@ -57,9 +53,5 @@
"default": true
}
},
"example": {
"attributes": {
"preview": true
}
}
"example": {}
}
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,6 @@ const attributes = {
type: 'string',
default: 'red',
},
preview: {
type: 'boolean',
default: false,
},
scrollToZoom: {
type: 'boolean',
default: false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@ const attributes = {
type: 'string',
default: 'red',
},
preview: {
type: 'boolean',
default: false,
},
scrollToZoom: {
type: 'boolean',
default: false,
Expand Down
21 changes: 17 additions & 4 deletions projects/plugins/jetpack/extensions/blocks/map/edit.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
import apiFetch from '@wordpress/api-fetch';
import { BlockControls, InspectorControls, useBlockProps } from '@wordpress/block-editor';
import {
BlockControls,
InspectorControls,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
Button,
ExternalLink,
Expand All @@ -10,7 +15,7 @@ import {
ResizableBox,
} from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { withDispatch } from '@wordpress/data';
import { withDispatch, useSelect } from '@wordpress/data';
import { useEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getActiveStyleName } from '../../shared/block-styles';
Expand Down Expand Up @@ -62,11 +67,18 @@ const MapEdit = ( {
zoom,
mapCenter,
markerColor,
preview,
mapHeight,
showFullscreenButton,
} = attributes;

const { isPreviewMode } = useSelect( select => {
const { getSettings } = select( blockEditorStore );
const settings = getSettings();
return {
isPreviewMode: settings.__unstableIsPreviewMode,
};
}, [] );

const [ addPointVisibility, setAddPointVisibility ] = useState( false );
const [ apiState, setApiState ] = useState( API_STATE_LOADING );
const [ apiKey, setApiKey ] = useState( null );
Expand Down Expand Up @@ -223,14 +235,15 @@ const MapEdit = ( {

let content;

if ( preview ) {
if ( isPreviewMode ) {
const mapStyleObject = styles.find( styleObject => styleObject.name === mapStyle );

content = (
<div>
<img
alt={ __( 'Map Preview', 'jetpack' ) }
src={ mapStyleObject ? mapStyleObject.preview : previewPlaceholder }
style={ { width: '100%', height: mapHeight || '400px', objectFit: 'cover' } }
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@
"lat": -43.391304
},
"markerColor": "red",
"preview": false,
"scrollToZoom": false,
"showFullscreenButton": true
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
[
{
"clientId": "_clientId_0",
"name": "jetpack/map",
"isValid": true,
"attributes": {
"points": [
{
"placeTitle": "Williams Street",
"title": "Williams Street",
"caption": "15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand",
"id": "address.3454160499802812",
"coordinates": {
"longitude": 172.652908,
"latitude": -43.391304
}
}
],
"mapDetails": true,
"zoom": 11.765903600711997,
"mapCenter": {
"lng": 172.652908,
"lat": -43.391304
},
"markerColor": "red",
"preview": false,
"scrollToZoom": false,
"className": "is-style-black-and-white",
"showFullscreenButton": true
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-jetpack-map is-style-black-and-white\" data-map-style=\"black-and-white\" data-map-details=\"true\" data-points=\"[{&quot;placeTitle&quot;:&quot;Williams Street&quot;,&quot;title&quot;:&quot;Williams Street&quot;,&quot;caption&quot;:&quot;15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand&quot;,&quot;id&quot;:&quot;address.3454160499802812&quot;,&quot;coordinates&quot;:{&quot;longitude&quot;:172.652908,&quot;latitude&quot;:-43.391304}}]\" data-zoom=\"11.765903600711997\" data-map-center=\"{&quot;lng&quot;:172.652908,&quot;lat&quot;:-43.391304}\" data-marker-color=\"red\"><ul><li><a href=\"https://www.google.com/maps/search/?api=1&amp;query=-43.391304,172.652908\">Williams Street</a></li></ul></div>"
}
{
"clientId": "_clientId_0",
"name": "jetpack/map",
"isValid": true,
"attributes": {
"points": [
{
"placeTitle": "Williams Street",
"title": "Williams Street",
"caption": "15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand",
"id": "address.3454160499802812",
"coordinates": {
"longitude": 172.652908,
"latitude": -43.391304
}
}
],
"mapDetails": true,
"zoom": 11.765903600711997,
"mapCenter": {
"lng": 172.652908,
"lat": -43.391304
},
"markerColor": "red",
"scrollToZoom": false,
"className": "is-style-black-and-white",
"showFullscreenButton": true
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-jetpack-map is-style-black-and-white\" data-map-style=\"black-and-white\" data-map-details=\"true\" data-points=\"[{&quot;placeTitle&quot;:&quot;Williams Street&quot;,&quot;title&quot;:&quot;Williams Street&quot;,&quot;caption&quot;:&quot;15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand&quot;,&quot;id&quot;:&quot;address.3454160499802812&quot;,&quot;coordinates&quot;:{&quot;longitude&quot;:172.652908,&quot;latitude&quot;:-43.391304}}]\" data-zoom=\"11.765903600711997\" data-map-center=\"{&quot;lng&quot;:172.652908,&quot;lat&quot;:-43.391304}\" data-marker-color=\"red\"><ul><li><a href=\"https://www.google.com/maps/search/?api=1&amp;query=-43.391304,172.652908\">Williams Street</a></li></ul></div>"
}
]
Original file line number Diff line number Diff line change
@@ -1,34 +1,33 @@
[
{
"clientId": "_clientId_0",
"name": "jetpack/map",
"isValid": true,
"attributes": {
"points": [
{
"placeTitle": "Williams Street",
"title": "Williams Street",
"caption": "15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand",
"id": "address.3454160499802812",
"coordinates": {
"longitude": 172.652908,
"latitude": -43.391304
}
}
],
"mapDetails": true,
"zoom": 11.765903600711997,
"mapCenter": {
"lng": 172.652908,
"lat": -43.391304
},
"markerColor": "red",
"preview": false,
"scrollToZoom": false,
"showFullscreenButton": true,
"className": "is-style-black-and-white"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-jetpack-map is-style-black-and-white\" data-map-style=\"black-and-white\" data-map-details=\"true\" data-points=\"[{&quot;placeTitle&quot;:&quot;Williams Street&quot;,&quot;title&quot;:&quot;Williams Street&quot;,&quot;caption&quot;:&quot;15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand&quot;,&quot;id&quot;:&quot;address.3454160499802812&quot;,&quot;coordinates&quot;:{&quot;longitude&quot;:172.652908,&quot;latitude&quot;:-43.391304}}]\" data-zoom=\"11.765903600711997\" data-map-center=\"{&quot;lng&quot;:172.652908,&quot;lat&quot;:-43.391304}\" data-marker-color=\"red\" data-show-fullscreen-button=\"true\"><ul><li><a href=\"https://www.google.com/maps/search/?api=1&amp;query=-43.391304,172.652908\">Williams Street</a></li></ul></div>"
}
{
"clientId": "_clientId_0",
"name": "jetpack/map",
"isValid": true,
"attributes": {
"points": [
{
"placeTitle": "Williams Street",
"title": "Williams Street",
"caption": "15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand",
"id": "address.3454160499802812",
"coordinates": {
"longitude": 172.652908,
"latitude": -43.391304
}
}
],
"mapDetails": true,
"zoom": 11.765903600711997,
"mapCenter": {
"lng": 172.652908,
"lat": -43.391304
},
"markerColor": "red",
"scrollToZoom": false,
"showFullscreenButton": true,
"className": "is-style-black-and-white"
},
"innerBlocks": [],
"originalContent": "<div class=\"wp-block-jetpack-map is-style-black-and-white\" data-map-style=\"black-and-white\" data-map-details=\"true\" data-points=\"[{&quot;placeTitle&quot;:&quot;Williams Street&quot;,&quot;title&quot;:&quot;Williams Street&quot;,&quot;caption&quot;:&quot;15 Williams Street, Kaiapoi, The Pines Beach 7630, New Zealand&quot;,&quot;id&quot;:&quot;address.3454160499802812&quot;,&quot;coordinates&quot;:{&quot;longitude&quot;:172.652908,&quot;latitude&quot;:-43.391304}}]\" data-zoom=\"11.765903600711997\" data-map-center=\"{&quot;lng&quot;:172.652908,&quot;lat&quot;:-43.391304}\" data-marker-color=\"red\" data-show-fullscreen-button=\"true\"><ul><li><a href=\"https://www.google.com/maps/search/?api=1&amp;query=-43.391304,172.652908\">Williams Street</a></li></ul></div>"
}
]

0 comments on commit 9cea20b

Please sign in to comment.