Skip to content

Omukiguy

  • Plugin Development
  • Videos
  • Support my Work
  • About
  • Contact Me

Native WordPress Gutenberg Blocks – Tooling & Setup of first block

August 24, 2021 by omukiguy

This is part one of a series that shows you how to make Native WordPress Gutenberg Blocks. We shall be making a Travel Itinerary Block built with Advanced Custom Fields.

However this time, we shall use React JS that is the native way of doing this in WordPress.

This first video explains hows the setup works, tooling and what file does what job in the block development.

VIDEO CHAPTERS:
00:00 Introduction to the Series and blocks
00:59 Requirements for WordPress Gutenberg Blocks
02:45 Using Node & NPM in blocks building
03:29 Installing NPM & Node on local machine
03:58 Scaffolding your block create with npx @wordpress/create-block
05:40 Explore Package.json
07:59 Explore block.php
10:21 Explore .gitignore file & .editorconfig
10:57 Explore the src folder
12:54 Explore the build directory
14:05 Build the first block
15:08 Set minimum requirements for WordPress Block
16:47 Preview first native Gutenberg block
17:39 Exploring build/index.js
18:12 Explore build/index.asset.php
18:39 Simple block style adjustments
20:57 Register new block type with register_new_block()
21:49 Understanding the block.json file
22:43 Changing the block description
23:41 Add new block icon from dashicons
25:02 Block Namespace and breaking changes
26:01 Next video & Conclusion

See the next chapter of this Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block

Post navigation

Previous Post:

Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor

Next Post:

Create ACF Admin menu Options Page & Sub Pages with Advanced Custom Fields

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Beginner Tools (4)
  • Building Native WordPress Gutenberg Blocks (2)
  • ClassicPress (1)
  • Dev Life (5)
  • Developer Tools (21)
  • Everyday Life (4)
  • Gutenberg Basics (2)
  • Junior Development Course (1)
  • Plugin Reviews (1)
  • Resources (3)

Subscribe to Newsletter

* indicates required




Reliable WordPress Hosting

Recent Writes

  • Add Google Maps Pins & Address AutoDetect on WooCommerce Store Billing & Shipping for Free
  • Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block
  • Create ACF Admin menu Options Page & Sub Pages with Advanced Custom Fields
  • Native WordPress Gutenberg Blocks – Tooling & Setup of first block
  • Build Custom Gutenberg Blocks with Advanced Custom Fields (ACF) for WordPress Block Editor
© 2022 Omukiguy | Built using WordPress and SuperbThemes