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.
Download Plugin