Skip to content

Blocks

Blocks provide a user interface for adding a component to a page and configuring its properties.

The loaders for all blocks are located in /inc/blocks.

Initially a majority of the blocks included with this theme were built with ACF, but we have since started to move to using our own ESNext server-rendered blocks using @wordpress/scripts for the build process. There are still some blocks that rely on ACF's block framework but new blocks should be built as standard JavaScript blocks inside /js-blocks/src/.

Files

  • block.json - main settings for the block, used to register the block in both PHP and JS.
  • edit.js - contains the backend representation of the component, including any controls or placeholders.
  • icon.js - contains markup for icon used in the admin.
  • index.js - this is where the block is registered for use in the admin. It pulls in all other JS files.
  • index.php - contains the block registration in PHP if needed, and associated callback that should return HTML generated from a twig template for server-rendered blocks.
  • save.js - used for the markup saved to the database. For server-rendered blocks, return null or innerBlocks. Typically we server-render all of our blocks.
  • transforms.js - define transforms to and from other blocks.

Build Process

Made with create-guten-block. Run the following commands from /blocks/js-blocks to build blocks:

npm install

# Development
npm run start

# Production
npm run build