Vistage
Worldwide Inc.

  • Web
  • Responsive
  • WordPress
  • JavaScript
  • PHP

Plugins: Vistage Blocks Theme: Custom Host: WP Engine

This project was to build custom Gutenberg Blocks to be used within the WordPress dashboard by the team & redesign Vistage.com. UI designs of components were delivered in Zeplin. My role at Vistage was as a Frontend Software Developer to build various reusable UI components as Custom Gutenberg Block plugins using HTML5, CSS3/SASS, Reactjs, ES6 JavaScript, Webpack, PHP, & SQL. There were some challenges but I worked through them and had a lot of fun and came away with a great project.

Discogs Load More

My Custom Built Blocks

Custom Gutenberg Block

BLOCK DEVELOPMENT CHALLENGES

Building these custom blocks were new to me. I was heavy into JavaScript & React so I already had the skills to figure it out. The biggest challenge I ran into was on my second block. One of the requirements was to load a random testimonial when the block gets added from the block menu.


With my experience in React, I knew I had to use lifecycle methods. After building my first block, it wasn’t apparent where to use the lifecycle method in the code. I had struggled for awhile passing Gutenberg attributes from the edit() method into saving on the front end inside the save() method.

THE BLOCK IN THE DASHBOARD

Custom Gutenberg Blocks are added to the Gutenberg editor. From the Gutenberg editor a block is added by clicking the ( ) icon to bring up the blocks menu. If a block is structured correctly, the block will be visible in the menu.


< InspectorControls /> are added inside blocks to render components inside the Block sidebar. JavaScript is used to update the state of attribute values with the setAttribute() method which saves the values in the WordPress database to display on the Front End.

Custom Gutenberg Block
Custom Gutenberg Block
Custom Gutenberg Block