Skip to main content
Version: Current (3.x)

Customizing WP React Blocks

Prerequisites​

  • Node.js LTS or above (which can be checked by running node -v).

Setup​

We provide a sample template that you can use to get started. You can initialize the project by running the following command in the custom folder:

npx @devgateway/create-wp-customizer wp-customizer

@devgateway/create-wp-customizer contains two templates that you can use to create a new block.

  • template-js - This template is for creating a new block using JavaScript.
  • template-ts - This template is for creating a new block using TypeScript.

You can choose the template you want to use when initializing the project.

This will create a new folder called wp-customizer in the custom folder.

Running the project​

  1. Add the wp-customizer folder as a volume in your docker-compose.yaml file.
docker-compose.yaml
wordpress:
  volumes:
    - ./custom/wp-customizer:/var/www/html/wp-content/plugins/wp-customizer-blocks
  1. Install NPM dependencies in the custom/wp-customizer/blocks directory.
npm install
  1. Install the @devgateway/dvz-wp-commons package in the custom/wp-customizer/blocks directory.
npm install @devgateway/dvz-wp-commons@latest
  1. Run the development server in the custom/wp-customizer/blocks directory.
npm run start
  1. Activate the plugin in the WordPress dashboard - This will create a new wordpress plugin in the wp-content/plugins directory.

Folder Structure​

The folder structure will look like this:

custom/wp-customizer
├── blocks
│   ├── editor.css
│   ├── example
│   │   ├── BlockEdit.jsx
│   │   ├── BlockSave.jsx
│   │   └── index.js
│   ├── index.js
│   ├── index.php
│   ├── package.json
│   ├── style.css
│   └── webpack.config.js

Customizing Blocks​

danger

NB: When creating custom blocks, ensure that the block name is unique and does not conflict with any existing block even in the Wordpress base image.

You can customize the blocks by editing the BlockEdit.js and BlockSave.js files in the blocks/block-1 directory.

BlockEdit.js​

The BlockEdit.js file contains the JSX code for the block in the editor. Extending the BlockEdit component can be extended using the following React Classes that are provided by the @devgateway/dvz-wp-commons package.

  • ComponentWithSettings - Provides base functionality for blocks requiring integration with an iframe and WordPress settings. Listens for events and sends messages to an iframe.
  • BlockEditWithFilters - Extends ComponentWithSettings to add filtering functionality. Allows users to filter posts based on type, taxonomy, and categories.
  • BlockEditWithAPIMetadata - Extends ComponentWithSettings to integrate metadata from external APIs. Dynamically loads dimensions, filters, measures, and categories for selected apps.

BlockSave.js​

The BlockSave.js file contains the JSX code for the block in the frontend.

Registering Blocks​

To register the block, you need to add the following code to the index.js file:

import './example/index.js';

This will register the block in the WordPress editor.

Building Blocks​

To build the blocks, run the following command in the front/wordpress/wp-react-blocks-plugin/blocks directory:

npm run build

Resources​