Skip to main content

Gutenberg 🤮

This theme can be used for Gutenberg / Hybrid theme development. The theme includes the following in the /src/blocks/ directory:

  • BLOCK-FOUNDATION-ACF
  • BLOCK-FOUNDATION-REACT

These serve as foundational templates for creating new blocks. The ACF block works with ACF for fields and block creation. The React block leverages React for block creation, being the recommended approach for a smoother Gutenberg user experience.

Block Directory​

The /src/blocks/ directory is where all blocks will live. Each block should have its own directory. The directory name should be the same as the block name. e.g. /src/blocks/block-name/.

Within the /src/blocks/ directory, you can add whatever else you need. e.g. /src/blocks/tools/, /src/blocks/components/, etc. If you notice you're coding the same react component over and over, best to make it, its own component and import it into whichever block needs it. These items will not be compiled on their own, so don't worry about them registering as blocks.

Block Creation​

Feel free to create new blocks in the /src/blocks/ directory. Create a new block however you'd like. The easiest is probably duplicating one of the BLOCK-FOUNDATION-* directories and rename whatever you need to.

Block Compiling​

The build tool consolidates all blocks into the /build/blocks/ directory, which serves as the source for loading blocks in WordPress. All assets and block.json files are copied into the compiled block's directory.

Block Categories​

Add custom block categories to enhance organization and ease of discovery. Categories are defined in the /inc/blocks/register-block-category.php file.

Block Utilities​

At the moment there is only one but will add more when created.

React Icon()​

The icon utility is a function that will return an SVG icon that is apart of the generated SVG Sprite. It takes three arguments, the icon's name, width, and height.

Usage:

import Icon from '../utilities/icon'; // Make sure the path is correct for your setup

<Icon name="icon-name" width="21" height="10" />

Load Assests If Block Exists​

Filters whether block styles should be loaded separately. This will load assets only if the block is being used.

Wrap Core Blocks​

Wrap Core Blocks​

Specify core block to wrap with a wp-block-* class. Defaults are paragraph, html, and list.

Wrap Core Embeds​

Wrap video embeds with a specified class.

Wrap Core Video​

Wrap video blocks with a specified class.

disable_wpautop_for_gutenberg()​

Disables wpautop to remove empty p tags in rendered Gutenberg blocks.

Used for ACF blocks to display a preview of the block in the admin.

Usage: <?php print_block_preview( basename( dirname( __FILE__ ) ), __( 'Preview of the BLOCK NAME', 'jaws' ) ); ?>

Output:

<figure>
    <img
        src='<?php echo esc_url( get_template_directory_uri() . "/build/blocks/$block_directory/$filename" ); ?>'
        alt="<?php esc_html( $alt ); ?>"
    >
</figure>