Full Site Editing (FSE) with WP Rig

Note: As of WP Rig v2.3.1, you no longer need to follow this tutorial. We have included a node script that will basically do all of these steps for you with one command:

npm run editor-support

You must run this command in the wp rig root folder (ex. wp-content/themes/wprig) for it to work properly. Also, the script creates a completely blank index.html the essentially replaces index.php, and because it is blank, it will cause your site to go blank until you use the Site Editor to build out your Index page template.

In theme development, block-based themes or Full Site Editing (FSE) is all of the hype right now. The new editor allows WordPress users the ability to build all of their page templates and template parts entirely out of blocks using Gutenberg. This is a theme-specific feature. So depending on your theme, you either have access to the new editor or you don’t. There are two kinds of WordPress themes that have the new editor feature: block-based themes, and universal themes. In this tutorial, we will show theme authors using WP Rig how to convert their theme from a hybrid theme to a universal theme by enabling the new editor in their theme and retaining all of the classic theme features we know and love like the menus and customizer areas.

Adding the Theme Support

WP Rig already has a component designed specifically for managing our theme supports, called Base_Support. In /inc/Base_Support/Component.php, find the action_essential_theme_support() method. At the bottom of this method, add theme support for wp-block-styles and editor-styles, like so:
add_theme_support( 'wp-block-styles' );
add_theme_support( 'editor-styles' );

Create FSE Folders in Theme Root

Next we need to add the folders that manage our exports for page templates and template parts that are authored in the new editor. In the root folder of our theme, we need to add two directories: templates and parts. In the templates directory, we need to create an index.html, which we can just leave empty for the time being.

FSE Engaged!

At this point, you should be able to refresh the admin area of WordPress and see the new Editor area under the Appearance area in the WordPress admin menu.

Bundle Configuration

The next thing we need to do is ensure that our universal theme gets built by WP Rig when we go to “bundle” our theme (prepare to distribute or otherwise deploy). If we bundle right now, we will not have any of the new folders and the editor feature will not be available in the final bundle of our theme. To remedy this issue, all we need to do is add some considerations to the WP Rig configuration JSON files. If you are using your own config file, you can put this there, however, we recommend just overriding the default config file that comes with WP Rig. To do this, open the config.default.json file located in the /config directory. In here, you will find a part of the JSON file usually located towards the bottom where we define export.filesToCopy. In this part of the object, we provide an array that contains all of the additional files we want to copy during the bundle process. Simply add the new templates and parts directories, along with theme.json (a new WordPress standard for defining many style-specific attributes of our theme) to the array, like so:

"export": {
    "compress": true,
    "generatePotFile": true,
    "filesToCopy": [
      "LICENSE",
      "readme.txt",
      "screenshot.png",
      "assets/css/vendor/**/*.css",
      "assets/js/vendor/**/*.js",
      "inc/EZ_Customizer/themeCustomizeSettings.json",
      "templates",
      "templates/*",
      "parts",
      "parts/*,
      "theme.json"
   ]
  }

That’s it! At this point, the Gulp bundle process will carry over these additional folders and files when we perform our npm run bundle command before distributing or otherwise deploying our theme.