Skip to main content
Version: 2.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 find the sample template in the front/custom/wp-customizer directory.

Steps​

  1. Clone the repository and navigate to the front/custom/wp-customizer directory.

  2. Copy the front/custom/wp-customizer into custom/wp-customizer in your project root directory.

cp -r front/custom/wp-customizer custom/wp-customizer
  1. Start the development server in the front/wordpress/wp-react-blocks-plugin/blocks directory by running the following command:
npm run watch

Folder Structure​

The folder structure will look like this:

custom/wp-customizer
├── blocks
│   ├── block-1
│   │   ├── BlockEdit.js
│   │   ├── BlockSave.js
│   │   ├── index.js

Customizing Blocks​

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

  • 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.

Building Blocks​

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

npm run build

Resources​