WordPress Playground Theme Preview Action

This GitHub Action allows you to preview WordPress themes in a playground environment. It's designed to be used in pull request workflows to provide a quick and easy way to visualize theme changes.

Inputs

Name	Description	Required	Default
`github-token`	GitHub token for authentication	Yes	N/A
`base-branch`	The branch to compare against	Yes	`main`
`ref`	git ref SHA (commit hash) to compare against the base branch	Yes	`HEAD`

Usage

To use this action in your repo, add the following step:

preview-theme:
  runs-on: ubuntu-latest
  steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: ${{ github.event.pull_request.head.sha }}
    
    - name: Preview Theme Changes
      uses: vcanales/action-wp-playground-pr-preview@trunk
      with: 
        github-token: <your github token>
        base-branch: <your base branch name>

Development

Initial Setup

After you've cloned the repository to your local machine or codespace, you'll need to perform some initial setup steps before you can develop your action.

Note

You'll need to have a reasonably modern version of Node.js handy (20.x or later should work!). If you are using a version manager like nodenv or nvm, this template has a .node-version file at the root of the repository that will be used to automatically switch to the correct version when you cd into the repository. Additionally, this .node-version file is used by GitHub Actions in any actions/setup-node actions.

🛠️ Install the dependencies
```
npm install
```
🏗️ Package the TypeScript for distribution
```
npm run bundle
```

✅ Run the tests

$ npm test

PASS  ./index.test.js
  ✓ throws invalid number (3ms)
  ✓ wait 500 ms (504ms)
  ✓ test runs (95ms)

...

Update the Action Metadata

The action.yml file defines metadata about your action, such as input(s) and output(s). For details about this file, see Metadata syntax for GitHub Actions.

When you copy this repository, update action.yml with the name, description, inputs, and outputs for your action.

Update the Action Code

The src/ directory is the heart of your action! This contains the source code that will be run when your action is invoked. You can replace the contents of this directory with your own code.

There are a few things to keep in mind when writing your action code:

Most GitHub Actions toolkit and CI/CD operations are processed asynchronously. In main.ts, you will see that the action is run in an async function.
```
import * as core from '@actions/core'
//...

async function run() {
  try {
    //...
  } catch (error) {
    core.setFailed(error.message)
  }
}
```
For more information about the GitHub Actions toolkit, see the documentation.

So, what are you waiting for? Go ahead and start customizing your action!

Create a new branch
```
git checkout -b releases/v1
```
Replace the contents of src/ with your action code
Add tests to __tests__/ for your source code
Format, test, and build the action
```
npm run all
```
This step is important! It will run ncc to build the final JavaScript action code with all dependencies included. If you do not run this step, your action will not work correctly when it is used in a workflow. This step also includes the --license option for ncc, which will create a license file for all of the production node modules used in your project.

Commit your changes

git add .
git commit -m "My first action is ready!"

Push them to your repository
```
git push -u origin releases/v1
```
Create a pull request and get feedback on your action
Merge the pull request into the main branch

Your action is now published! 🚀

For information about versioning your action, see Versioning in the GitHub Actions toolkit.

Validate the Action

You can now validate the action by referencing it in a workflow file. For example, ci.yml demonstrates how to reference an action in the same repository.

steps:
  - name: Checkout
    id: checkout
    uses: actions/checkout@v4

  - name: Test Local Action
    id: test-action
    uses: ./
    with:
      milliseconds: 1000

  - name: Print Output
    id: output
    run: echo "${{ steps.test-action.outputs.time }}"

For example workflow runs, check out the Actions tab! 🚀

Usage

After testing, you can create version tag(s) that developers can use to reference different stable versions of your action. For more information, see Versioning in the GitHub Actions toolkit.

To include the action in a workflow in another repository, you can use the uses syntax with the @ symbol to reference a specific branch, tag, or commit hash.

steps:
  - name: Checkout
    id: checkout
    uses: actions/checkout@v4

  - name: Test Local Action
    id: test-action
    uses: actions/typescript-action@v1 # Commit with the `v1` tag
    with:
      milliseconds: 1000

  - name: Print Output
    id: output
    run: echo "${{ steps.test-action.outputs.time }}"

Publishing a New Release

This project includes a helper script, script/release designed to streamline the process of tagging and pushing new releases for GitHub Actions.

GitHub Actions allows users to select a specific version of the action to use, based on release tags. This script simplifies this process by performing the following steps:

Retrieving the latest release tag: The script starts by fetching the most recent release tag by looking at the local data available in your repository.
Prompting for a new release tag: The user is then prompted to enter a new release tag. To assist with this, the script displays the latest release tag and provides a regular expression to validate the format of the new tag.
Tagging the new release: Once a valid new tag is entered, the script tags the new release.
Pushing the new tag to the remote: Finally, the script pushes the new tag to the remote repository. From here, you will need to create a new release in GitHub and users can easily reference the new tag in their workflows.

Customizable parameters

This action would be so useful to adopt in all the repositories out there. To do that, it needs to provide a degree of customization. I went through a few custom comment actions out in the wild and gathered a few things to parametrize before they can be swapped for this one:

The comment body. It would be useful to make it a markdown template that accepts the following parameters:
- target_repo_owner
- target_repo_name
- source_branch_name
- pr_number
- pr_url
- ci_job_run_id
- preview_url – based on the Blueprint below
- preview_blueprint_hash – to link to, say, https://playground.wordpress.net/builder/builder.html#the same blueprint
Blueprint for the preview, also possible to format with the variables above (example)

References

Also – thank you so much for your great work here @vcanales!

vcanales / action-wp-playground-pr-preview Goto Github PK

action-wp-playground-pr-preview's Introduction

WordPress Playground Theme Preview Action

Inputs

Usage

Development

Initial Setup

Update the Action Metadata

Update the Action Code

Validate the Action

Usage

Publishing a New Release

action-wp-playground-pr-preview's People

Contributors

Stargazers

Watchers

action-wp-playground-pr-preview's Issues

References

Recommend Projects

Recommend Topics

Recommend Org