Edit File by line

/**

[0] Fix | Delete

* BLOCK: Basic

[1] Fix | Delete

[2] Fix | Delete

* Registering a basic block with Gutenberg.

[3] Fix | Delete

* Simple block, renders and saves the same content without any interactivity.

[4] Fix | Delete

[5] Fix | Delete

* Styles:

[6] Fix | Delete

* editor.css — Editor styles for the block.

[7] Fix | Delete

* style.css — Editor & Front end styles for the block.

[8] Fix | Delete

[9] Fix | Delete

(function () {

[10] Fix | Delete

var __ = wp.i18n.__; // The __() for internationalization.

[11] Fix | Delete

var el = wp.element.createElement; // The wp.element.createElement() function to create elements.

[12] Fix | Delete

var registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.

[13] Fix | Delete

[14] Fix | Delete

var attributes = {

[15] Fix | Delete

block_wrap: { type: "string", default: "" },

[16] Fix | Delete

id: { type: "string", default: "" },

[17] Fix | Delete

label: { type: "string", default: "" },

[18] Fix | Delete

image: { type: "string", default: "" },

[19] Fix | Delete

paddingTop: { type: "string", default: "56%" },

[20] Fix | Delete

maxWidth: { type: "string", default: "" },

[21] Fix | Delete

content: {

[22] Fix | Delete

type: "string",

[23] Fix | Delete

default: "Select a map in the block options"

[24] Fix | Delete

[25] Fix | Delete

imagePreview: {

[26] Fix | Delete

type: "string",

[27] Fix | Delete

default: ""

[28] Fix | Delete

[29] Fix | Delete

className: { type: "string", default: "" }

[30] Fix | Delete

};

[31] Fix | Delete

[32] Fix | Delete

[33] Fix | Delete

var preview = function (props) {

[34] Fix | Delete

var content = props.attributes.content;

[35] Fix | Delete

var match, hasImage, backgroundContainer;

[36] Fix | Delete

[37] Fix | Delete

// empty map, not selected

[38] Fix | Delete

if (props.attributes.id == "" && !props.isSelected) {

[39] Fix | Delete

content = "No map selected";

[40] Fix | Delete

}

[41] Fix | Delete

[42] Fix | Delete

if (props.attributes.label !== "") {

[43] Fix | Delete

content = props.attributes.label;

[44] Fix | Delete

}

[45] Fix | Delete

[46] Fix | Delete

// if selected, but something changed

[47] Fix | Delete

if (props.attributes.id !== "") {

[48] Fix | Delete

match = igmMapBlockOptions.find(function (o) {

[49] Fix | Delete

return o.value == props.attributes.id;

[50] Fix | Delete

});

[51] Fix | Delete

[52] Fix | Delete

if (typeof match === "undefined") {

[53] Fix | Delete

props.setAttributes({

[54] Fix | Delete

id: "",

[55] Fix | Delete

label: "Map not found!",

[56] Fix | Delete

paddingTop: "56%",

[57] Fix | Delete

maxWidth: "",

[58] Fix | Delete

imagePreview: ""

[59] Fix | Delete

});

[60] Fix | Delete

} else {

[61] Fix | Delete

// image changed

[62] Fix | Delete

if (props.attributes.imagePreview !== match.image) {

[63] Fix | Delete

props.setAttributes({

[64] Fix | Delete

id: props.attributes.id,

[65] Fix | Delete

label: match.label,

[66] Fix | Delete

paddingTop: match.paddingTop + "%",

[67] Fix | Delete

maxWidth: match.maxWidth !== "" ? match.maxWidth + "px" : "",

[68] Fix | Delete

imagePreview: match.image !== "" ? match.image : ""

[69] Fix | Delete

});

[70] Fix | Delete

}

[71] Fix | Delete

}

[72] Fix | Delete

}

[73] Fix | Delete

[74] Fix | Delete

props.attributes.paddingTop =

[75] Fix | Delete

props.attributes.paddingTop !== "" ? props.attributes.paddingTop : "56%";

[76] Fix | Delete

[77] Fix | Delete

if (props.attributes.imagePreview !== "") {

[78] Fix | Delete

content = "Preview Only";

[79] Fix | Delete

hasImage = " igm-block-preview-has-image";

[80] Fix | Delete

}

[81] Fix | Delete

[82] Fix | Delete

backgroundContainer = el("div", {

[83] Fix | Delete

[84] Fix | Delete

style: {

[85] Fix | Delete

backgroundImage:

[86] Fix | Delete

props.attributes.imagePreview !== ""

[87] Fix | Delete

? "url(" + props.attributes.imagePreview + ")"

[88] Fix | Delete

: "",

[89] Fix | Delete

backgroundSize: "cover"

[90] Fix | Delete

}

[91] Fix | Delete

});

[92] Fix | Delete

[93] Fix | Delete

previewContent = el(

[94] Fix | Delete

"div",

[95] Fix | Delete

{

[96] Fix | Delete

[97] Fix | Delete

[98] Fix | Delete

el("span", {

[99] Fix | Delete

[100] Fix | Delete

}),

[101] Fix | Delete

el("p", {}, content)

[102] Fix | Delete

);

[103] Fix | Delete

[104] Fix | Delete

return el(

[105] Fix | Delete

"div",

[106] Fix | Delete

{

[107] Fix | Delete

class:

[108] Fix | Delete

props.attributes.className +

[109] Fix | Delete

" igm-block-preview map_wrapper" +

[110] Fix | Delete

hasImage,

[111] Fix | Delete

style: {

[112] Fix | Delete

maxWidth: props.attributes.maxWidth

[113] Fix | Delete

}

[114] Fix | Delete

[115] Fix | Delete

el(

[116] Fix | Delete

"div",

[117] Fix | Delete

{

[118] Fix | Delete

[119] Fix | Delete

style: {

[120] Fix | Delete

paddingTop: props.attributes.paddingTop

[121] Fix | Delete

}

[122] Fix | Delete

[123] Fix | Delete

backgroundContainer,

[124] Fix | Delete

previewContent

[125] Fix | Delete

)

[126] Fix | Delete

);

[127] Fix | Delete

};

[128] Fix | Delete

[129] Fix | Delete

/**

[130] Fix | Delete

* Register Basic Block.

[131] Fix | Delete

[132] Fix | Delete

* Registers a new block provided a unique name and an object defining its

[133] Fix | Delete

* behavior. Once registered, the block is made available as an option to any

[134] Fix | Delete

* editor interface where blocks are implemented.

[135] Fix | Delete

[136] Fix | Delete

* @param {string} name Block name.

[137] Fix | Delete

* @param {Object} settings Block settings.

[138] Fix | Delete

* @return {?WPBlock} The block, if it has been successfully

[139] Fix | Delete

* registered; otherwise `undefined`.

[140] Fix | Delete

[141] Fix | Delete

[142] Fix | Delete

[143] Fix | Delete

registerBlockType("interactive-geo-maps/display-map", {

[144] Fix | Delete

// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.

[145] Fix | Delete

title: "Map", // Block title.

[146] Fix | Delete

description: "Display a previously created Interactive Map", // Block title.

[147] Fix | Delete

icon: "admin-site-alt", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.

[148] Fix | Delete

category: "widgets", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.

[149] Fix | Delete

keywords: ["map", "interactive-map"],

[150] Fix | Delete

attributes: attributes,

[151] Fix | Delete

// The "edit" property must be a valid function.

[152] Fix | Delete

edit: function (props) {

[153] Fix | Delete

return [

[154] Fix | Delete

el(wp.editor.BlockControls, { key: "controls" }),

[155] Fix | Delete

[156] Fix | Delete

el(

[157] Fix | Delete

wp.editor.InspectorControls,

[158] Fix | Delete

{ key: "inspector" },

[159] Fix | Delete

el(

[160] Fix | Delete

wp.components.PanelBody,

[161] Fix | Delete

{},

[162] Fix | Delete

el(wp.components.SelectControl, {

[163] Fix | Delete

label: "Map to display:",

[164] Fix | Delete

value: props.attributes.id,

[165] Fix | Delete

options: igmMapBlockOptions,

[166] Fix | Delete

onChange: function (id) {

[167] Fix | Delete

var match = igmMapBlockOptions.find(function (o) {

[168] Fix | Delete

return o.value == id;

[169] Fix | Delete

});

[170] Fix | Delete

props.setAttributes({

[171] Fix | Delete

id: id,

[172] Fix | Delete

label: match.label,

[173] Fix | Delete

paddingTop: match.paddingTop + "%",

[174] Fix | Delete

maxWidth: match.maxWidth !== "" ? match.maxWidth + "px" : "",

[175] Fix | Delete

imagePreview: match.image !== "" ? match.image : ""

[176] Fix | Delete

});

[177] Fix | Delete

}

[178] Fix | Delete

})

[179] Fix | Delete

)

[180] Fix | Delete

[181] Fix | Delete

preview(props)

[182] Fix | Delete

]; // end return

[183] Fix | Delete

[184] Fix | Delete

[185] Fix | Delete

// The "save" property must be specified and must be a valid function.

[186] Fix | Delete

save: function (props) {

[187] Fix | Delete

var attr = props.attributes;

[188] Fix | Delete

// build the shortcode.

[189] Fix | Delete

var content = "[display-map";

[190] Fix | Delete

if (attr.hasOwnProperty("id")) {

[191] Fix | Delete

content += " id='" + attr.id + "' ";

[192] Fix | Delete

}

[193] Fix | Delete

content += "]";

[194] Fix | Delete

[195] Fix | Delete

return el('div', {

[196] Fix | Delete

className: attr.className

[197] Fix | Delete

[198] Fix | Delete

content);

[199] Fix | Delete

[200] Fix | Delete

[201] Fix | Delete

deprecated: [

[202] Fix | Delete

{

[203] Fix | Delete

attributes: attributes,

[204] Fix | Delete

[205] Fix | Delete

save: function (props) {

[206] Fix | Delete

[207] Fix | Delete

var attr = props.attributes;

[208] Fix | Delete

// build the shortcode.

[209] Fix | Delete

var content = "[display-map";

[210] Fix | Delete

if (attr.hasOwnProperty("id")) {

[211] Fix | Delete

content += " id='" + attr.id + "' ";

[212] Fix | Delete

}

[213] Fix | Delete

content += "]";

[214] Fix | Delete

[215] Fix | Delete

return el('', {

[216] Fix | Delete

className: attr.className

[217] Fix | Delete

[218] Fix | Delete

content);

[219] Fix | Delete

[220] Fix | Delete

}

[221] Fix | Delete

]

[222] Fix | Delete

});

[223] Fix | Delete

})();

[224] Fix | Delete

[225] Fix | Delete