Build script

To create a custom block in PorterWP, follow these steps:

Step 1: Navigate to the Theme Folder

Begin by navigating to the theme folder where the PorterWP blocks are stored. The path is typically:

your-theme/porter/blocks

Step 2: Download the _block-base and make.sh Files

You will need the _block-base folder and make.sh script to generate new blocks. These files can be downloaded from the PorterWP public GitHub repository:

• _block-base

• make.sh

Place both files in your /blocks folder.

Step 3: Run the make.sh Script to Create a Block

To generate a new block, you need to run the make.sh script from the terminal. Use the following command format:

sh make.sh {block-name} {optional: block-category}

• block-name: The name of your new block (e.g., custom-hero).

• block-category (optional): The block category. If not provided, the default is components.

Example:

sh make.sh test-block components

This will create a new block under the /components folder with the name test-block.

Step 4: Understanding the make.sh Script

Here is the content of the make.sh script:

#!/bin/bash
NAME=$1
CATEGORY=$2
[ -z "$CATEGORY" ] && CATEGORY='components'
MAKESPACE=$(sed 's/-/ /g' <<< $NAME)
TITLE="$(tr '[:lower:]' '[:upper:]' <<< ${MAKESPACE:0:1})${MAKESPACE:1}"
NAMESPACE=$(sed 's/ //g' <<< $TITLE)

mkdir -p $CATEGORY/$NAME
cp -a _block-base/. $CATEGORY/$NAME
cd $CATEGORY/$NAME
sed -i '' "s/dummy-name/$NAME/g" block.json
sed -i '' "s/Dummy_Title/$TITLE/g" block.json
sed -i '' "s/Dummy_Title/$TITLE/g" template.php
sed -i '' "s/DummyNamespace/$NAMESPACE/g" block.json
sed -i '' "s/DummyNamespace/$NAMESPACE/g" init.php
sed -i '' "s/dummyCategory/$CATEGORY/g" block.json

This script does the following:

1. Takes the block name ($NAME) and optional block category ($CATEGORY).

2. Sets a default category (components) if none is provided.

3. Creates a new directory for the block inside the specified category.

4. Copies the contents of _block-base into the new block folder.

5. Replaces placeholder values (like dummy-name and Dummy_Title) in the block's files with the actual block name and title.

Step 5: Modify the _block-base as Needed

The _block-base folder acts as a stub for new block creation. Advanced users can modify its contents to customize the default structure of new blocks.

You are now ready to create and customize blocks in PorterWP!