Create Custom Block in Gutenberg Editor : Rajat Meshram

Hi Friends here i have created a custom block in Gutenberg Editor.

Here we creating one custom plugin which added a custom Company Information Bock.

So Lets Start

Step1: Create a folder in your plugins directory and name it as contact-gt-block

Step2: Create a .php file with same folder name contact-gt-block.php

Step3: Create one js and css file name as gt-block.js and gt-block.css

Step4: Add this code in contact-gt-block.php file

<?php
/*
Plugin Name: Contact Gt Block
*/
function custom_gt_block(){
wp_enqueue_script('custom-gtblock-js',plugin_dir_url(__FILE__).
'gt-block.js', array('wp-blocks','wp-i18n','wp-editor'),true,false);
wp_enqueue_style('custom-gtblock-css',plugin_dir_url(__FILE__).
'gt-block.css');
}
add_action('enqueue_block_editor_assets','custom_gt_block');
?>
Step5: Add this code in gt-block.js file

wp.blocks.registerBlockType(‘customgtblock/custom-block’, {
title: ‘Company Contact Information’,
icon: ‘hammer’,
category: ‘design’,
attributes: {
companyName: {
type: ‘string’
},
companyPhone: {
type: ‘string’
},
companyAddress: {
type: ‘string’
},
companyEmail: {
type: ‘string’
},
companyState: {
type: ‘string’
},
companyCity: {
type: ‘string’
},
companyzip: {
type: ‘string’
}
},
edit: function(props) {

function updateCompanyName(event) {
props.setAttributes({
companyName: event.target.value
})
}

function updateCompanyPhone(event) {
props.setAttributes({
companyPhone: event.target.value
})
}

function updateCompanyAddress(event) {
props.setAttributes({
companyAddress: event.target.value
})
}

function updateCompanyEmail(event) {
props.setAttributes({
companyEmail: event.target.value
})
}

function updateCompanyState(event) {
props.setAttributes({
companyState: event.target.value
})
}

function updateCompanyCity(event) {
props.setAttributes({
companyCity: event.target.value
})
}

function updateCompanyzip(event) {
props.setAttributes({
companyzip: event.target.value
})
}

return React.createElement(“div”, null, /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny Name”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyName,
placeholder: “Comapny Name”,
onChange: updateCompanyName
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny Phone”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyPhone,
placeholder: “Comapny Phone”,
onChange: updateCompanyPhone
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny Address”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyAddress,
placeholder: “Comapny Address”,
onChange: updateCompanyAddress
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny Email”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyEmail,
placeholder: “Comapny Email”,
onChange: updateCompanyEmail
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny State”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyState,
placeholder: “Comapny State”,
onChange: updateCompanyState
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny City”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyCity,
placeholder: “Comapny City”,
onChange: updateCompanyCity
})), /*#__PURE__*/ React.createElement(“div”, {
class: “field-row”
}, /*#__PURE__*/ React.createElement(“label”, null, “Comapny zip”), /*#__PURE__*/ React.createElement(“input”, {
type: “text”,
value: props.attributes.companyzip,
placeholder: “Comapny zip”,
onChange: updateCompanyzip
})));
},

save: function(props) {
return React.createElement(“div”, {
class: “company-info-block”
}, /*#__PURE__*/ React.createElement(“h4”, null, “Comapny Name: “, props.attributes.companyName), /*#__PURE__*/ React.createElement(“p”, null, “Comapny Phone: “, props.attributes.companyPhone), /*#__PURE__*/ React.createElement(“p”, null, “Comapny Address: “, props.attributes.companyAddress), /*#__PURE__*/ React.createElement(“p”, null, “Comapny Email: “, props.attributes.companyEmail), /*#__PURE__*/ React.createElement(“p”, null, “Comapny State: “, props.attributes.companyState), /*#__PURE__*/ React.createElement(“p”, null, “Comapny City: “, props.attributes.companyCity), /*#__PURE__*/ React.createElement(“p”, null, “Comapny Zipcode: “, props.attributes.companyzip));

}})

Step6: Add this code in gt-block.css file

Step7: Save all file and go to the plugins in the dashboard and activate our plugin.