Creating your own Gutenberg blocks with Air light and Advanced Custom Fields

First introduced in the issue #119.

---

When I first activate the theme, it looks like this:

This is expected because

• We don't have navigation
• We don't have any content
• We don't have any blocks
• We don't have any CSS of our own
• etc.

So let me tell you our ways of creating themes.

Please note in here I have created a project with name cleantest and theme with textdomain airclean.

1. Activate ACF

Activate ACF via composer (as explained here) or manually by zip from advancedcustomfields.com:

2. Create your first content with hero block (CSS + Markup)

We first need to create a block, so let's uncomment these lines and add a hero block (in functions.php):

    /**
     * Gutenberg -related settings
     */
    // Register custom ACF Blocks
    'acf_blocks' => [
      [
        'name'           => 'hero',
        'title'          => 'Hero',
      ],
    ],

Then let's add fields for it (title, content and select Show this field group if Block is equal to Hero):

Create styles for the block in gutenberg/blocks, uncomment this line and add your block like this:

  // ACF blocks
  @import 'gutenberg/blocks/hero';

Sample gutengerg/blocks/_hero.scss file:

.block-hero {
  background-color: var(--color-black);

  .container {
    align-items: center;
    display: flex;

    @media (min-width: $container-mobile) {
      height: 100vh;
      max-height: 60rem;
    }
  }

  .content {
    width: 100%;
  }

  h1,
  p {
    color: var(--color-white);
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    text-align: center;
  }
}

Run gulp or gulp devstyles to compile + combine + minify these to global.css.

Add markup for block to template-parts/blocks/hero.php (as indicated here:

<?php
/**
 * Hero block
 *
 * @package airclean
 */

namespace Air_Light;

$title = get_field( 'title' );
$content = get_field( 'content' );

if ( empty( $title ) ) {
  return;
} ?>

<section class="block block-hero has-light-bg">
  <div class="container">

    <div class="content">
      <?php if ( ! empty( $title ) ) : ?>
        <h1 class="block-title"><?php echo esc_html( $title ); ?></h1>
      <?php endif; ?>

      <?php if ( ! empty( $content ) ) : ?>
        <?php echo wp_kses_post( wpautop( $content ) ); ?>
      <?php endif; ?>
    </div>

  </div>
</section>

Then we can create Front Page and add the block there:

And add front page as default home page:

3. Add navigation

4. Change logo and colors

Let's change the logo for example to box in svg/logo.svg.

Now let's change the logo size and color by changing/adding these to _site-header.scss:

  a {
    color: var(--color-white);
  }

  svg {
    height: auto;
    width: 80px;
  }

Now it looks like this:

As you can see current link is too dark for our dark hero so let's just change --color-current: var(--color-science-blue); in _nav-desktop.scss (or alternatively main color from _colors.scss.

Footer doesn't have any sensible content for this example site I'm building (heh) so let's just disable it for now. Now it looks like this:

Also arrows are too dark so I can change them too. If I don't want nav to be absolute, I can change it to be: $absolute-navigation: false; in _nav-desktop.scss

Then I just need to swap the colors for logo and nav, after that it looks like this:

From here I can create more blocks, style more, add more things... you get the picture? This is how we build sites.

Mobile nav and JS

It seems there's a legit bug in the start scripts because as initting the site there is navigation.js:106 Uncaught ReferenceError: air_light_screenReaderText is not defined in navigation.js. This causes JS not to work at all. We need to run gulp js once so it compiles all the JavaScript again for our breakpoint in this theme... I'm going to fix this to the next release, thanks for spotting this!

After running gulp js task (or just gulp with watch) updating nav height to match my "new site" to my height in _nav-mobile.scss --height-navigation-mobile: 120px; the nav is looking and working fine:

Onboarding / documentation?

I hope this quick tutorial helps you getting started! I promise we'll think about the ways we could make getting started with Air-light a bit easier. Currently it is "as is" without much styles, content or onboarding.