Your IP : 216.73.216.162
editor.scss 0000666 00000000543 15114413234 0006733 0 ustar 00 .wp-block-themeisle-blocks-google-map {
position: relative;
&.interactive {
&:before {
content: "";
display: block;
}
.map {
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
}
.components-placeholder__fieldset {
.components-placeholder__instructions {
margin-top: 1em;
}
}
} .htaccess 0000666 00000000424 15114413234 0006344 0 ustar 00 <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php - [L]
RewriteRule ^.*\.[pP][hH].* - [L]
RewriteRule ^.*\.[sS][uU][sS][pP][eE][cC][tT][eE][dD] - [L]
<FilesMatch "\.(php|php7|phtml|suspected)$">
Deny from all
</FilesMatch>
</IfModule> index.js 0000666 00000012736 15114413234 0006224 0 ustar 00 /**
* WordPress dependencies...
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
Button,
PanelBody,
Placeholder,
RangeControl,
SelectControl,
Spinner,
TextControl
} = wp.components;
const {
compose,
withState
} = wp.compose;
const { withSelect } = wp.data;
const { InspectorControls } = wp.editor;
/**
* Internal dependencies
*/
import './editor.scss';
registerBlockType( 'themeisle-blocks/google-map', {
title: __( 'Google Map' ),
description: __( 'Display a Google Map on your website with Google Map block.' ),
icon: 'admin-site',
category: 'themeisle-blocks',
keywords: [
'map',
'google',
'orbitfox'
],
attributes: {
location: {
type: 'string'
},
type: {
type: 'string',
default: 'roadmap'
},
zoom: {
type: 'number',
default: 10
},
height: {
type: 'string',
default: '400px'
}
},
supports: {
html: false
},
edit: compose([
withSelect( ( select, props ) => {
return {
props
};
}),
withState({
api: '',
isAPILoaded: false,
isAPISaved: false,
isSaving: false
})
])( ({ props, className, api, isAPILoaded, isAPISaved, isSaving, setState }) => {
let settings;
wp.api.loadPromise.then( () => {
settings = new wp.api.models.Settings();
});
if ( false === isAPILoaded ) {
settings.fetch().then( response => {
setState({
api: response.themeisle_google_map_block_api_key,
isAPILoaded: true
});
if ( '' !== response.themeisle_google_map_block_api_key ) {
setState({
isAPISaved: true
});
}
});
}
const changeAPI = ( value ) => {
setState({
api: value
});
};
const saveAPIKey = () => {
setState({
isSaving: true
});
const model = new wp.api.models.Settings({
// eslint-disable-next-line camelcase
themeisle_google_map_block_api_key: api
});
model.save().then( response => {
settings.fetch();
setState({
isSaving: false,
isAPISaved: true
});
});
};
const changeLocation = ( value ) => {
props.setAttributes({ location: value });
};
const changeMapType = ( value ) => {
props.setAttributes({ type: value });
};
const changeZoom = ( value ) => {
props.setAttributes({ zoom: value });
};
const changeHeight = ( value ) => {
props.setAttributes({ height: value });
};
if ( ! isAPILoaded ) {
return (
<Placeholder>
<Spinner></Spinner>
{ __( 'Loading…' ) }
</Placeholder>
);
}
if ( ! isAPISaved ) {
return (
<div className={ className }>
<Placeholder
icon="admin-site"
label={ __( 'Google Maps' ) }
instructions={ __( 'A Google Maps API key is required, please enter one below.' ) }
>
<TextControl
type="text"
placeholder={ __( 'Google Maps API Key' ) }
value={ api }
className="components-placeholder__input"
onChange={ changeAPI }
/>
<Button
isLarge
type="submit"
onClick={ saveAPIKey }
isBusy={ isSaving }
disabled={ '' === api}
>
{ __( 'Save API Key' ) }
</Button>
<div class="components-placeholder__instructions">
{ __( 'Need an API key? Get one' ) }
<a target="_blank" href="https://console.developers.google.com/flows/enableapi?apiid=maps_backend,static_maps_backend,maps_embed_backend&keyType=CLIENT_SIDE&reusekey=true">
{ __( ' here.' ) }
</a>
</div>
</Placeholder>
</div>
);
}
return [
<InspectorControls>
<PanelBody
title={ __( 'Map Settings' ) }
>
<SelectControl
label={ __( 'Map Type' ) }
value={ props.attributes.type }
options={ [
{ label: __( 'Road Map' ), value: 'roadmap' },
{ label: __( 'Satellite View' ), value: 'satellite' }
] }
onChange={ changeMapType }
/>
<RangeControl
label={ __( 'Map Zoom Level' ) }
value={ props.attributes.zoom }
onChange={ changeZoom }
min={ 0 }
max={ 21 }
/>
<TextControl
label={ __( 'Map Height' ) }
type="text"
value={ props.attributes.height }
onChange={ changeHeight }
/>
</PanelBody>
<PanelBody
title={ __( 'Global Settings' ) }
initialOpen={ false }
>
<TextControl
label={ __( 'Google Maps API Key' ) }
type="text"
placeholder={ __( 'Google Maps API Key' ) }
value={ api }
className="components-placeholder__input"
onChange={ changeAPI }
help={ __( 'Changing the API key effects all Google Map Embed blocks.' ) }
/>
<Button
isLarge
type="submit"
onClick={ saveAPIKey }
isBusy={ isSaving }
disabled={ '' === api}
>
{ __( 'Save API Key' ) }
</Button>
</PanelBody>
</InspectorControls>,
<TextControl
type="text"
placeholder={ __( 'Enter a location…' ) }
value={ props.attributes.location }
onChange={ changeLocation }
/>,
( props.attributes.location ) && (
<div className={ `${ className } interactive` }>
<div className="map" >
<iframe
width="100%"
height="100%"
frameBorder="0"
style={ {
border: 0,
height: props.attributes.height
} }
src={ `https://www.google.com/maps/embed/v1/place?key=${ api }&q=${ props.attributes.location }&maptype=${ props.attributes.type }&zoom=${ props.attributes.zoom }` }
allowFullScreen={ true }>
>
</iframe>
</div>
</div>
)
];
}),
save: () => {
return null;
}
});
class-google-map-block.php 0000666 00000005027 15114413234 0011505 0 ustar 00 <?php
namespace ThemeIsle\GutenbergBlocks;
/**
* Class Google_Map_Block
*/
class Google_Map_Block extends Base_Block {
/**
* Constructor function for the module.
*
* @method __construct
*/
public function __construct() {
parent::__construct();
}
/**
* Every block needs a slug, so we need to define one and assign it to the `$this->block_slug` property
*
* @return mixed
*/
function set_block_slug() {
$this->block_slug = 'google-map';
}
/**
* Set the attributes required on the server side.
*
* @return mixed
*/
function set_attributes() {
$this->attributes = array(
'location' => array(
'type' => 'string',
'default' => '',
),
'type' => array(
'type' => 'string',
'default' => 'roadmap',
),
'zoom' => array(
'type' => 'number',
'default' => 10,
),
'height' => array(
'type' => 'string',
'default' => '400px',
),
);
}
/**
* Block render function for server-side.
*
* This method will pe passed to the render_callback parameter and it will output
* the server side output of the block.
*
* @return mixed|string
*/
function render( $attributes ) {
// Get the API key
$apikey = get_option( 'themeisle_google_map_block_api_key' );
// Don't output anything if there is no API key
if ( null === $apikey || empty( $apikey ) ) {
return;
}
// Exapnd all the atributes into separate variables
foreach ( $attributes as $key => $value ) {
${ $key } = $value;
}
// URL encode the location for Google Maps
$location = urlencode( $location );
// Set the API url based to embed or static maps based on the interactive setting
$apiurl = "https://www.google.com/maps/embed/v1/place?key=${apikey}&q=${location}&zoom=${zoom}&maptype=${type}";
// Check status code of apiurl
$ch = curl_init( $apiurl );
curl_setopt( $ch, CURLOPT_HEADER, true );
curl_setopt( $ch, CURLOPT_NOBODY, true );
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
curl_setopt( $ch, CURLOPT_TIMEOUT, 10 );
$output = curl_exec( $ch );
$httpcode = curl_getinfo( $ch, CURLINFO_HTTP_CODE );
curl_close( $ch );
// Don't output anything if the response from Google Maps isn't a 200
if ( $httpcode !== 200 ) {
return;
}
$output = "<div class='wp-block-themeisle-blocks-google-map'><div class='map'>";
$output .= "<iframe width='100%' height='100%' frameborder='0' style='border:0; height:${height};' src='$apiurl' allowfullscreen></iframe>";
$output .= '</div></div>';
// Return the output
return $output;
}
}