← All posts

Gutenberg Blocks Without React: Scripts Organizer Setup

scripts organizer

Building custom Gutenberg blocks the usual way means React, a build step and ACF Pro installed and set up on its own. This short setup video is the start of our "Create Gutenberg Blocks the Easy Way" series. It shows the workspace you need to build Gutenberg blocks without React: Scripts Organizer plus the ACF Gutenberg Add-on, with ACF Pro functionality already included.

What you need

The series uses two plugins, and both need to be installed and licensed before you start:

  1. Scripts Organizer, our code editor for WordPress.
  2. Scripts Organizer ACF Gutenberg Add-on, which adds the ACF block workflow.

You don't need to buy or install ACF Pro on its own. The add-on bundles it, so the whole workflow runs with only these two plugins.

Activate both licenses

The block tools only show up once both plugins are activated.

  1. Install Scripts Organizer and the ACF Gutenberg Add-on.
  2. Go to the license page and enter the license for both plugins.
  3. After activation you get Code Blocks, Partials and ACF Blocks inside Scripts Organizer.

In the WordPress admin you will also see the Custom Fields menu with ACF's Field Groups, Add New and Tools. That comes from the ACF Pro functionality bundled in the add-on, so you don't install anything else.

Create your first basic block

To check that everything works, go back to Scripts Organizer → ACF Blocks and create a basic block. From there you can add it to your Gutenberg editor like any other block. The next videos in the series build real blocks with HTML, SCSS and ACF field references.

Get Scripts Organizer → dplugins.com

Related posts