wordpress-shortcode-webpack-plugin weekly downloads statistics

wordpress-shortcode-webpack-plugin

This Webpack plugin is for Wordpress developers who want an easy way to drop React apps into Wordpress pages. It creates a simple Wordpress plugin from your Webpack configuration, registering each Webpack entry as a Wordpress shortcode.

Requires Webpack 4 or 5

Installation

Usage

Import the plugin, tell it a bit about your desired Wordpress plugin output, and add it to your Webpack configuration.

webpack.config.js

When built, this will output the following assets in the build directory:

Once uploaded, you can use the entrypoints specified in your Webpack configuration as shortcodes. By default the shortcodes are registered as {pluginName}-{entryName}. For our example, the one shortcode registered would be my-awesome-plugin-main.

So, in Wordpress, we could use the shortcode like [my-awesome-plugin-main].

You can see an example Create React App repo here.

Options

wordpressPluginName (required)

Type: string

Your plugin's name in kebab-case.

shortcodePrefix

Type: string Default: wordpressPluginName

The prefix used instead of wordpressPluginName to create your shortcodes. With shortcodePrefix: 'my-shortcode', the main entry shortcode would be [my-shortcode-main].

headerFields

Type:

Default: {}

Header fields for the Wordpress plugin. See https://developer.wordpress.org/plugins/plugin-basics/header-requirements/#header-fields

entryToRootId

Type: object Default: {}

A map of overrides for the root element ID for each entrypoint. By default we just use root as the ID for the root element, per React convention. If that ID conflicts with something else on the page, you can adjust it with this map.

pluginTemplate

Type: string Default: ./src/default-template.php (in the wordpress-shortcode-webpack-plugin repo)

Path to the template file that should be used to generate the Wordpress plugin file.

The template file is a PHP file with the following tokens that get replaced with content. You can customize the behavior of the Wordpress plugin by modifying the template.

{{plugin_header}}

Replaced with the Wordpress comment indicating the plugin name and other plugin metadata.

{{asset_manifest}}

Replaced with an associative array of entrypoint to an array of files that should be loaded for that entrypoint. Required for {{shortcode_registration}} and {{shortcode_definitions}}.

{{shortcode_definitions}}

Function that is invoked when the shortcode is called. Enqueues the assets for the entry and returns the React root HTML as a string.

Override this if you'd like to enhance the logic that gets run when your shortcode is run, e.g. by supplying attributes or setting global variables in the markup.

The naming convention for shortcodes that get registered is create_{entry}_app.

Requires {{shortcode_registration}}.

{{shortcode_registration}}

Function that registers the shortcode definition functions and their assets with Wordpress.

{{add_action}}

Adds the {{shortcode_registration}} function as an action during Wordpress's init phase.

Build locally

Clone the project

Go to the project directory

Install dependencies

Build

Running Tests

To run tests, run the following command

License

MIT

Description from the npm listing.