WordPress Custom Gutenberg Blocks

  • Web
  • Responsive
  • WordPress
  • JavaScript
  • PHP

Plugins: Vistage Blocks Theme: Custom Host: WP Engine

This was a 3 month project to build custom Gutenberg Blocks to be used within the WordPress dashboard by the Marketing team to build pages on the fly. The SetAttributes() method is used similarly to setState() in React. Attributes are set initially inside RegisterBlockType() method and setAttributes() is used to set the value of the attribute.

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.


Components are added inside the component to render components inside the Block sidebar. JavaScript is used to update the state of attribute values with setAttribute() method.

Custom Gutenberg Block
Custom Gutenberg Block
Custom Gutenberg Block