← All posts

Your First Gutenberg Block Without React: Scripts Organizer

scripts organizer

A custom Gutenberg block normally means React, a build step and a folder full of config before you write any markup. In this first video of our "Create Gutenberg Blocks the Easy Way" series, we make a Gutenberg block without React, using Scripts Organizer's ACF Blocks. The block is a hero section with a button, and all it takes is plain HTML and SCSS. You write the markup, press Update, and the block appears in the inserter. It looks the same in the editor and on the front end.

Creating a new ACF block

With the usual setup, getting a block to show up in the inserter takes registration code. Here you fill in a form, and the block is registered for you.

  1. In the WordPress admin, go to Scripts Organizer → ACF Blocks and click Add New. It works the same way as adding a code block or a partial.
  2. Enter the block title. We use Hero.
  3. Check that Enable ACF Block is on.
  4. In Dashicon Name, enter the icon for the block. Click List of dashicons to open the WordPress Dashicons reference, pick an icon and paste its name. We used admin-settings.
  5. Choose a Category. We picked Design, so the block shows up in the Design section of the inserter.
  6. Optionally, fill in Keywords (comma separated) so the block is easier to find when you search for it. We skip this for now.
  7. Click Publish.

The form also has Scripts & Styles, Description, Restrict to selected Post Types and Advanced Mode (Supports). You can leave all of them alone for a basic block.

Block structure and markup

Most block setups spread one block over several files. In Scripts Organizer, everything for a block is in one place. After you publish, the editor has three tabs: PHP, SCSS and JS.

The SCSS tab also helps performance. Each block's SCSS is a partial, and all block partials are combined into one CSS file. With 10 or 15 blocks, the page still loads one stylesheet, not 10 or 15.

In the PHP tab, write the markup like any HTML:

<div class="hero">
    <h1>This is a hero</h1>
    <a href="#" class="hero_button">This is a button</a>
</div>

Click Update, then open a page in the block editor. You can add the block in three ways:

  • Type /hero in the content.
  • Search for "hero" in the block inserter.
  • Scroll to the Design section of the inserter.

We haven't written any styles yet, so the block picks up the theme's styles. The block sidebar says "This block contains no editable fields. Assign a field group to add fields to this block." That's expected. We make the block dynamic with ACF fields later in the series.

Styling and previewing

A custom block is only useful if it looks the same where you edit it and where visitors see it. Otherwise you end up checking every change in two places. Styles from the SCSS tab load in both.

Open the SCSS tab and style the hero and its button. You can nest the button selector inside .hero, and the editor autocompletes property names as you type. Here's the SCSS as shown in the video:

.hero{
    background-color: beige;
    text-align: center;
    padding: 50px;
    border-radius: 10px;

    .hero_button{
        display: inline-block;
        background-color: olive;
        color: white;
        padding: 20px 40px;
        border-radius: 100px;
    }
}
  1. Write the styles in the SCSS tab and click Update.
  2. Reload the page editor. The hero has its beige background, centered text and rounded corners, and the button is an olive pill.
  3. If a theme style still wins over one of your rules in the editor, you can add !important to that rule for now. We do that in the video.
  4. Click Preview. The front end looks the same as the editor.

The block is static so far: no fields, and nothing to change from the sidebar. That's the starting point. The next videos in the series add ACF fields to make it dynamic.

Who is this for

  • WordPress developers who know HTML and CSS but not React. You can build native Gutenberg blocks without learning a JavaScript framework or setting up a build process.
  • Site builders moving to the block editor. You can turn sections you'd normally hand-code, like a hero, into blocks your clients insert from the inserter.
  • Anyone worried about CSS bloat from many custom blocks. All block SCSS partials are combined into one stylesheet.

FAQ

Do I need React to create a custom Gutenberg block? No. In this video, the block's markup is plain HTML in the PHP tab and the styles are SCSS in the SCSS tab. Scripts Organizer handles the rest, and we don't use React or a build tool.

Where do I create ACF blocks in Scripts Organizer? Go to Scripts Organizer → ACF Blocks → Add New. Give the block a title, a dashicon and a category, then publish it. The PHP, SCSS and JS tabs appear after that.

Will every block load its own CSS file? No. Each block's SCSS is a partial, and all partials are combined into one CSS file, however many blocks you create.

How do I find my block in the editor? Type / followed by the block name, search for it in the block inserter, or open the category you chose. In our case that's Design. Adding keywords makes the block easier to find in search.

Can I add editable fields to the block? Yes, with ACF fields. The block in this video is static on purpose, and the editor says it has no editable fields until you assign a field group. The next videos in the series make it dynamic.

Get Scripts Organizer → dplugins.com

Related posts