Create A Plugin

Faust plugins are a structured way to extend or alter the framework’s behavior, very much like WordPress plugins do in a traditional WordPress environment. Instead of PHP, however, Faust’s plugins are written in JavaScript/TypeScript, leveraging actions and filters to deliver similar flexibility in a headless architecture.

Steps

1. Basic setup

If you haven’t already, follow the Basic Setup steps to get Faust.js set up.

2. Create A Plugins Folder and file

In its very basic form, a Faust Plugin is a JavaScript class with an apply method. This apply method has a parameter called hooks, which is passed from @wordpress/hooks. Create a folder in the root of your Faust project called plugin. In the folder, create a file called SamplePlugin.js. In this file, add this code block:

import { FaustHooks } from "@faustwp/core";
 
export class MyPlugin {
	/**
	 * @param {FaustHooks} hooks
	 */
	apply(hooks) {
		// Plugin logic goes here
	}
}

The hooks parameter is an object which contains the functions addFilter and addAction, amongst others. You can then use these functions to call the respective actions and filters to tap into Faust like so:

import { FaustHooks } from "@faustwp/core";
 
export class MyPlugin {
	/**
	 * @param {FaustHooks} hooks
	 */
	apply(hooks) {
		const { addAction, addFilter } = hooks;
 
		addFilter(
			"possibleTemplatesList",
			"my-namespace",
			(possibleTemplates, context) => {
				// Filter logic goes here.
			},
		);
	}
}

3. Add The Plugin to the Faust Config

You can then implement the plugin by adding it to the plugins property in the App’s faust.config.js file:

import { setConfig } from "@faustwp/core";
import templates from "./wp-templates";
import possibleTypes from "./possibleTypes.json";
import { MyPlugin } from "./plugins/MyPlugin.js";
 
/**
 * @type {import('@faustwp/core').FaustConfig}
 */
export default setConfig({
	templates,
	plugins: [new MyPlugin()],
	possibleTypes,
});