Gutenberg Block Building Process for Saber Commerce

At the moment Saber Commerce has 9 blocks, all of them for the cart UX. This number grows daily as we work toward “full coverage”, the goal being that 100% of the UX is block-enabled throughout the catalog pages, cart and checkout process. By the time this full coverage is reached, we expect the total number of blocks shipped in Saber Commerce core to reach over 50.

We use the NPM package @wordpress create-block. This is not a guide or tutorial but hopefully will serve as a use reference for those new to block building or considering options. We’ll update it regularly with notes and tips whenever we improve the process.

Initial Draft with Create Block

  1. Open Git Bash at the target location for the new block.
  2. Run npx @wordpress create-block command.
  3. Provide answers to most of the create-block commands because this will save time later where variables are used multiple times in the block creation.
  4. Once the block is created do an initial editing run stripping away all comments, updating any reference data in readme or package.json. The goal at this point isn’t to change any functionality, but just to edit the block reference data.
  5. If the block is dynamic, which means the output will come from PHP, then we open the PHP file where the register_block_type() function is called. This is named “block-name.php” at the root of the block. We switch the call from register_block_type() to register_block_type_from_metadata(). This enables us to continue referencing the block.json (first argument) but then add a second argument (array of params) where we can specify “render_callback”. We then create a render callback function and reference it. Although later this callback may be moved into a class or separated, for simplicity the render callback is placed initially in the same PHP file, and uses the same naming convention as the block initialization function.

Similar Posts

Leave a Reply

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