Clone of https://plugins.svn.wordpress.org/map-block-gutenberg/tags/1…

….33/

assets/css/blocks.editor.css

@@ -0,0 +1,52 @@
+/*
+ * Map Block for Google Maps
+ * (c) WebFactory Ltd, 2018 - 2021
+ */
+
+
+.map-block-red-pin{
+  fill:red;
+}
+
+.wp-block-webfactory-map {
+  position: relative;
+}
+
+.wp-block-webfactory-map::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: transparent;
+}
+
+.wp-block-webfactory-map:hover::before {
+  background-color: #ff000088;
+  cursor: pointer;
+}
+
+.wp-block-webfactory-map::after {
+  display: none;
+  content: 'Click to edit the map; all settings are located in block settings (right sidebar).';
+  color: white;
+  font-weight: bolder;
+  font-size: 20px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: calc(50% - 20px);
+  line-height: 150%;
+  left: 0;
+  background-color: transparent;
+}
+
+.wp-block-webfactory-map:hover:hover::after {
+  display: block;
+  cursor: pointer;
+}
+
+p.wf-control-label {
+  margin: -1.5em 0 1.5em 0;
+}

assets/css/blocks.style.css

@@ -0,0 +1,7 @@
+/*
+ * Map Block for Google Maps
+ * (c) WebFactory Ltd, 2018 - 2021
+ */
+
+
+.entry-content .wp-block-webfactory-inspector-control-fields,.wp-block-webfactory-inspector-control-fields{background:rgba(254,243,224,0.52);border:5px #f7b733 solid;padding:1rem}.entry-content .wp-block-webfactory-inspector-control-fields.high-contrast,.wp-block-webfactory-inspector-control-fields.high-contrast{background:#000;border-color:#000;color:white}.entry-content .wp-block-webfactory-inspector-control-fields h2,.wp-block-webfactory-inspector-control-fields h2{color:#f7b733;font-size:2rem;margin:1rem 0}.entry-content .wp-block-webfactory-inspector-control-fields p,.wp-block-webfactory-inspector-control-fields p{font-size:1.4rem}.entry-content .wp-block-webfactory-inspector-control-fields li,.wp-block-webfactory-inspector-control-fields li{list-style-position:inside}

assets/js/_source/.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": [ "@wordpress/default" ]
+}

assets/js/_source/.gitignore

@@ -0,0 +1,11 @@
+composer.lock
+/node_modules/
+/vendor/
+/logs/
+/reports/
+
+# You want to have .DS_Store and other environment files/packages in your .gitignore_global configuration.
+# @see https://knowthecode.io/labs/local-development-environment-setup-mac/install-configure-git
+# I'll include it here to help out.
+.DS_Store
+.DS_Store?

assets/js/_source/blocks/controls.js

@@ -0,0 +1,36 @@
+/**
+ * Internal block libraries
+ */
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const {
+    AlignmentToolbar,
+    BlockControls,
+    BlockAlignmentToolbar,
+} = wp.editor;
+
+
+/**
+ * Create a Block Controls wrapper Component
+ */
+export default class Inspector extends Component {
+
+    constructor() {
+        super( ...arguments );
+    }
+    render() {
+        const { attributes: { blockAlignment, textAlignment }, setAttributes } = this.props;
+        return (
+            <BlockControls>
+                <BlockAlignmentToolbar
+                    value={ blockAlignment }
+                    onChange={ blockAlignment => setAttributes( { blockAlignment } ) }
+                />
+                <AlignmentToolbar
+                    value={ textAlignment }
+                    onChange={ textAlignment => setAttributes( { textAlignment } ) }
+                />
+            </BlockControls>
+        );
+    }
+}

assets/js/_source/blocks/icon.js

@@ -0,0 +1,14 @@
+const icon = <svg version="1.1" width="16pt" heght="16pt" x="2pt" y="0px" viewBox="-295 387 20 20">
+<path d="M-277.5,400.2c0,0,0-1.4,0-1.7s-0.4-0.8-1-0.8c-0.6,0-1.2,0-1.2,0v-2h-3v2.1h-1.4l-0.7,1.4l-0.8-1.5h-1.3v-2h-3.1v2
+c0,0-0.2,0-1.1,0c-0.9,0-0.9,1-0.9,1v4.3c0,0,0.2,0.1,0.7,0.1c0.5,0,0.9,0.1,0.9,0.1l0,1.8c0,0,0,0-0.6-0.1
+c-0.6-0.1-0.9-0.2-0.9-0.2l0,2.4h14.6v-5c0,0-0.2-0.1-0.5-0.3c-0.4-0.1-1-0.3-1-0.3l0.4-1.7L-277.5,400.2z M-287.8,404.4
+c-0.6,0.2-0.9,0.2-0.9,0.2l-0.4-1.6c0,0,0.3,0,0.8-0.2s0.8-0.3,0.8-0.3l0.6,1.5C-286.8,404-287.1,404.2-287.8,404.4z M-285.1,403.2
+l-0.8-1.5l1.5-0.9l0.8,1.5L-285.1,403.2z M-281.3,401.5c-0.4,0.1-0.8,0.2-0.8,0.2l-0.5-1.6c0,0,0.3-0.1,0.9-0.3
+c0.6-0.1,0.9-0.1,0.9-0.1l0.1,1.7C-280.6,401.4-280.9,401.4-281.3,401.5z"/>
+<path class="map-block-red-pin" d="M-284.8,387c-1.8,0-3.3,1.5-3.3,3.3s3.2,7.4,3.3,7.4c0,0,3.3-5.6,3.3-7.4S-283,387-284.8,387z M-284.8,392.4
+c-1.1,0-2-0.9-2-2s0.9-2,2-2c1.1,0,2,0.9,2,2S-283.7,392.4-284.8,392.4z"/>
+</svg>
+
+
+
+export default icon;

assets/js/_source/blocks/index.js

@@ -0,0 +1,93 @@
+/**
+ * Block dependencies
+ */
+
+
+import classnames from 'classnames';
+import Inspector from './inspector';
+import Controls from './controls';
+import icon from './icon';
+
+const { __ } = wp.i18n;
+const {
+    registerBlockType,
+} = wp.blocks;
+const {
+    RichText,
+} = wp.editor;
+
+function getSettings( attributes ) {
+    let settings = [];
+    for( let attribute in attributes ) {
+        let value = attributes[ attribute ];
+        if( 'boolean' === typeof attributes[ attribute ] ) {
+            value = value.toString();
+        }
+        settings.push( <li>{ attribute }: { value }</li> );
+    }
+    return settings;
+}
+
+function buildMapIframe( attributes ) {
+    return <div class="wp-block-webfactory-map"><iframe title="Map" width='100%' height={parseInt(attributes.height, 10) + 'px'} src={'https://www.google.com/maps/embed/v1/place?q=' + encodeURIComponent(attributes.address) + '&maptype=roadmap&zoom=' + parseInt(attributes.zoom, 10) + '&key=' + attributes.api_key} frameBorder='0'></iframe></div>
+} // buildMapIframe
+
+/**
+ * Register static block example block
+ */
+export default registerBlockType(
+    'webfactory/map',
+    {
+        title: wf_map_block._map,
+        description: wf_map_block._description,
+        category: 'common',        
+        icon,         
+        keywords: [
+            wf_map_block._map_lc,
+            wf_map_block._location_lc,
+            'google',
+        ],
+        attributes: {
+            zoom: {
+                type: 'number',
+                default: '10',
+            },
+            height: {
+                type: 'number',
+                default: '300',
+            },
+            address: {
+                type: 'string',
+                default: 'Theater District, New York, USA',
+            },    
+            api_key: {
+                type: 'string',
+                default: wf_map_block.api_key,
+            }
+        },
+        edit: props => {
+            const { attributes: { message },
+                attributes, className, setAttributes } = props;
+
+            let maphtml = buildMapIframe( attributes );
+
+            return [
+                <Inspector { ...{ setAttributes, ...props} } />,
+                <div>
+                    { maphtml }                    
+                </div>
+            ];
+        },
+        save: props => {
+            const { attributes } = props;
+
+            let maphtml = buildMapIframe( attributes );
+
+            return(
+                <div>                  
+                    { maphtml }
+                </div>
+            );
+        },
+    },
+);

assets/js/_source/blocks/inspector.js

@@ -0,0 +1,103 @@
+/**
+ * Internal block libraries
+ */
+
+import throttle from 'lodash.throttle';
+
+const { Component } = wp.element;
+const {
+    InspectorControls,
+    ColorPalette,
+} = wp.editor;
+const {
+    Button,
+    ButtonGroup,
+    CheckboxControl,
+    PanelBody,
+    PanelRow,
+    PanelColor,
+    RadioControl,
+    RangeControl,
+    TextControl,
+    TextareaControl,
+    ToggleControl,
+    Toolbar,
+    SelectControl
+} = wp.components;
+
+/**
+ * Create an Inspector Controls wrapper Component
+ */
+export default class Inspector extends Component {
+
+    constructor() {
+        super( ...arguments );
+        this.updateApiKey = this.updateApiKey.bind(this);  
+        this.updateApiKeyThrottled = throttle(this.updateApiKey, 3000);
+    }
+
+    updateApiKey(key) {
+        wf_map_block.api_key = key;
+
+        fetch(ajaxurl, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+            body: "action=gmw_map_block_save_key&_ajax_nonce=" + wf_map_block.nonce_save_api_key + "&api_key=" + key
+        });
+    }
+
+    render() {
+        const { attributes: { zoom, height, address, api_key }, setAttributes } = this.props;
+
+        return (
+            <InspectorControls>
+                <PanelBody>
+                    <TextControl
+                        label={ wf_map_block._address }
+                        value={ address }
+                        onChange={ address => setAttributes( { address } ) }
+                    />
+                </PanelBody>
+
+                <PanelBody>
+                    <RangeControl
+                        beforeIcon="arrow-left-alt2"
+                        afterIcon="arrow-right-alt2"
+                        label={ wf_map_block._zoom }
+                        value={ zoom }
+                        onChange={ zoom => setAttributes( { zoom } ) }
+                        min={ 1 }
+                        max={ 21 }
+                    />
+                </PanelBody>
+
+                <PanelBody>
+                    <RangeControl
+                        beforeIcon="arrow-left-alt2"
+                        afterIcon="arrow-right-alt2"
+                        label={ wf_map_block._height }
+                        value={ height }
+                        onChange={ height => setAttributes( { height } ) }
+                        min={ 50 }
+                        max={ 1000 }
+                    />
+                </PanelBody>
+
+                <PanelBody>
+                    <TextControl
+                        label={ wf_map_block._api_key }
+                        help={ <p>{wf_map_block._api_info_start} <a href="https://console.developers.google.com" target="_blank">{wf_map_block._api_info_console}</a>. {wf_map_block._api_info_end}</p> }
+                        value={ api_key }
+                        onChange={ api_key => { 
+                            if(!api_key){
+                                api_key = 'AIzaSyAjyDspiPfzEfjRSS5fQzm-3jHFjHxeXB4';
+                            }
+                            setAttributes( { api_key } ); 
+                            this.updateApiKeyThrottled( api_key ); 
+                        } }
+                    />
+                </PanelBody>
+            </InspectorControls>
+        );
+    }
+}