Skip to content

Commit 9069946

Browse files
josephfuscojosephfusco
committed
Merge branch 'main' into feat-webhooks-ui
2 parents 797b03c + afc0ccb commit 9069946

35 files changed

+1353
-46
lines changed

‎.github/workflows/code-quality.yml

Lines changed: 68 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
# This does the following:
2+
# 1. Detects modified plugins that have phpcs.xml configuration
3+
# 2. Runs PHP Code Quality checks on those plugins using the custom action
4+
# 3. Creates a matrix job for each plugin that has a quality configuration
5+
# Bonus: This means you can have plugin specific badges e.g.
6+
# [![Code Quality](https://img.shields.io/github/check-runs/wpengine/hwptoolkit/main?checkName=hwp-previews%20php%20code%20quality%20checks&label=Code%20Quality%20Checks)](https://github.com/wpengine/hwptoolkit/actions)
7+
18
name: Code Quality
29

310
on:
@@ -11,30 +18,76 @@ on:
1118
- 'plugins/**.php'
1219

1320
jobs:
14-
run:
21+
detect-plugins:
1522
runs-on: ubuntu-latest
16-
name: Check code quality
17-
23+
name: Detect plugins has php code quality configuration
24+
outputs:
25+
plugins: ${{ steps.detect.outputs.plugins }}
26+
has-plugins: ${{ steps.detect.outputs.has-plugins }}
1827
steps:
1928
- name: Checkout
2029
uses: actions/checkout@v4
2130

22-
- name: Get changed plugin directory
23-
id: plugin
31+
- name: Detect changed plugins with quality config
32+
id: detect
2433
run: |
2534
git fetch --prune --unshallow
26-
plugin=$(git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} | grep '^plugins/' | head -1 | cut -d/ -f2)
27-
echo "slug=$plugin" >> $GITHUB_OUTPUT
35+
CHANGED_FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} | grep '^plugins/' || true)
2836
29-
# We should at least have a phpcs.xml file to run code quality checks
30-
- name: Validate phpcs.xml
31-
run: |
32-
if [ ! -f "plugins/${{ steps.plugin.outputs.slug }}/phpcs.xml" ]; then
33-
echo "Exiting as no phpcs.xml file found for /${{ steps.plugin.outputs.slug }}"
34-
exit 1
37+
if [ -z "$CHANGED_FILES" ]; then
38+
echo "No plugin files changed"
39+
echo "plugins=[]" >> $GITHUB_OUTPUT
40+
echo "has-plugins=false" >> $GITHUB_OUTPUT
41+
exit 0
42+
fi
43+
44+
# Extract unique plugin names and check for phpcs.xml
45+
PLUGINS_WITH_CONFIG=()
46+
CHECKED_PLUGINS=()
47+
48+
for file in $CHANGED_FILES; do
49+
plugin=$(echo $file | cut -d/ -f2)
50+
51+
# Skip if we already checked this plugin
52+
if [[ " ${CHECKED_PLUGINS[@]} " =~ " $plugin " ]]; then
53+
continue
54+
fi
55+
56+
CHECKED_PLUGINS+=("$plugin")
57+
58+
if [ -f "plugins/$plugin/phpcs.xml" ]; then
59+
PLUGINS_WITH_CONFIG+=("$plugin")
60+
echo "✅ Found phpcs.xml for plugin: $plugin"
61+
else
62+
echo "ℹ️ No phpcs.xml found for plugin: $plugin, skipping quality checks"
63+
fi
64+
done
65+
66+
# Convert to JSON array
67+
if [ ${#PLUGINS_WITH_CONFIG[@]} -gt 0 ]; then
68+
PLUGINS_JSON=$(printf '%s\n' "${PLUGINS_WITH_CONFIG[@]}" | jq -R -s -c 'split("\n")[:-1]')
69+
echo "plugins=${PLUGINS_JSON}" >> $GITHUB_OUTPUT
70+
echo "has-plugins=true" >> $GITHUB_OUTPUT
71+
echo "Found ${#PLUGINS_WITH_CONFIG[@]} plugin(s) with quality config: ${PLUGINS_WITH_CONFIG[*]}"
72+
else
73+
echo "plugins=[]" >> $GITHUB_OUTPUT
74+
echo "has-plugins=false" >> $GITHUB_OUTPUT
75+
echo "No plugins found with quality configuration"
3576
fi
77+
quality-checks:
78+
needs: detect-plugins
79+
if: needs.detect-plugins.outputs.has-plugins == 'true'
80+
runs-on: ubuntu-latest
81+
strategy:
82+
matrix:
83+
plugin: ${{ fromJson(needs.detect-plugins.outputs.plugins) }}
84+
fail-fast: false
85+
name: ${{ matrix.plugin }} php code quality checks
86+
steps:
87+
- name: Checkout
88+
uses: actions/checkout@v4
3689

37-
- name: PHP Code Quality
90+
- name: PHP Code Quality for ${{ matrix.plugin }}
3891
uses: ./.github/actions/code-quality
3992
with:
40-
working-directory: plugins/${{ steps.plugin.outputs.slug }}
93+
working-directory: plugins/${{ matrix.plugin }}

‎.github/workflows/codeception.yml

Lines changed: 83 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
# This does the following:
2+
# 1. Detects modified plugins that have codeception.dist.yml configuration setup
3+
# 2. Runs Codeception tests on those plugins using the custom action
4+
# 3. Creates a matrix job for each plugin that has a quality configuration
5+
# Bonus: This means you can have plugin specific badges e.g.
6+
# [![Testing Integration](https://img.shields.io/github/check-runs/wpengine/hwptoolkit/main?checkName=hwp-previews%20codeception%20tests&label=Automated%20Tests)](https://github.com/wpengine/hwptoolkit/actions)
7+
18
name: Testing Integration
29

310
on:
@@ -18,12 +25,85 @@ concurrency:
1825
cancel-in-progress: true
1926

2027
jobs:
28+
detect-plugins:
29+
runs-on: ubuntu-latest
30+
name: Detect plugins with test config
31+
outputs:
32+
plugins: ${{ steps.detect.outputs.plugins }}
33+
has-plugins: ${{ steps.detect.outputs.has-plugins }}
34+
steps:
35+
- name: Checkout
36+
uses: actions/checkout@v4
37+
38+
- name: Detect changed plugins with test config
39+
id: detect
40+
run: |
41+
git fetch --prune --unshallow
42+
43+
# Get changed files based on event type
44+
if [ "${{ github.event_name }}" = "pull_request" ]; then
45+
CHANGED_FILES=$(git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} | grep '^plugins/' || true)
46+
else
47+
CHANGED_FILES=$(git diff --name-only HEAD~1 HEAD | grep '^plugins/' || true)
48+
fi
49+
50+
if [ -z "$CHANGED_FILES" ]; then
51+
echo "No plugin files changed"
52+
echo "plugins=[]" >> $GITHUB_OUTPUT
53+
echo "has-plugins=false" >> $GITHUB_OUTPUT
54+
exit 0
55+
fi
56+
57+
# Extract unique plugin names and check for test config
58+
PLUGINS_WITH_CONFIG=()
59+
CHECKED_PLUGINS=()
60+
61+
for file in $CHANGED_FILES; do
62+
plugin=$(echo $file | cut -d/ -f2)
63+
64+
# Skip if we already checked this plugin
65+
if [[ " ${CHECKED_PLUGINS[@]} " =~ " $plugin " ]]; then
66+
continue
67+
fi
68+
69+
CHECKED_PLUGINS+=("$plugin")
70+
71+
# Check for both codeception.dist.yml and composer.json
72+
if [ -f "plugins/$plugin/codeception.dist.yml" ] && [ -f "plugins/$plugin/composer.json" ]; then
73+
PLUGINS_WITH_CONFIG+=("$plugin")
74+
echo "✅ Found test config for plugin: $plugin (codeception.dist.yml + composer.json)"
75+
else
76+
echo "ℹ️ Missing test config for plugin: $plugin, skipping tests"
77+
if [ ! -f "plugins/$plugin/codeception.dist.yml" ]; then
78+
echo " - Missing: codeception.dist.yml"
79+
fi
80+
if [ ! -f "plugins/$plugin/composer.json" ]; then
81+
echo " - Missing: composer.json"
82+
fi
83+
fi
84+
done
85+
86+
# Convert to JSON array
87+
if [ ${#PLUGINS_WITH_CONFIG[@]} -gt 0 ]; then
88+
PLUGINS_JSON=$(printf '%s\n' "${PLUGINS_WITH_CONFIG[@]}" | jq -R -s -c 'split("\n")[:-1]')
89+
echo "plugins=${PLUGINS_JSON}" >> $GITHUB_OUTPUT
90+
echo "has-plugins=true" >> $GITHUB_OUTPUT
91+
echo "Found ${#PLUGINS_WITH_CONFIG[@]} plugin(s) with test config: ${PLUGINS_WITH_CONFIG[*]}"
92+
else
93+
echo "plugins=[]" >> $GITHUB_OUTPUT
94+
echo "has-plugins=false" >> $GITHUB_OUTPUT
95+
echo "No plugins found with test configuration"
96+
fi
97+
2198
continuous_integration:
99+
needs: detect-plugins
100+
if: needs.detect-plugins.outputs.has-plugins == 'true'
22101
runs-on: ubuntu-latest
23-
name: WordPress ${{ matrix.wordpress }} on PHP ${{ matrix.php }}
102+
name: ${{ matrix.plugin }} integration tests (WP ${{ matrix.wordpress }}, PHP ${{ matrix.php }})
24103

25104
strategy:
26105
matrix:
106+
plugin: ${{ fromJson(needs.detect-plugins.outputs.plugins) }}
27107
php: ["8.3","8.2","8.1"]
28108
wordpress: ["6.8","6.7","6.6","6.5"]
29109
include:
@@ -35,32 +115,10 @@ jobs:
35115
steps:
36116
- name: Checkout
37117
uses: actions/checkout@v4
38-
39-
- name: Get changed plugin directory
40-
id: plugin
41-
run: |
42-
git fetch --prune --unshallow
43-
plugin=$(git diff --name-only ${{ github.event.pull_request.base.sha }} ${{ github.sha }} | grep '^plugins/' | head -1 | cut -d/ -f2)
44-
echo "slug=$plugin" >> $GITHUB_OUTPUT
45-
46-
- name: Validate codeception.dist.yml
47-
run: |
48-
if [ ! -f "plugins/${{ steps.plugin.outputs.slug }}/codeception.dist.yml" ]; then
49-
echo "Exiting as no codeception file found for this plugin - /${{ steps.plugin.outputs.slug }}"
50-
exit 1
51-
fi
52-
53-
- name: Validate composer.json
54-
run: |
55-
if [ ! -f "plugins/${{ steps.plugin.outputs.slug }}/composer.json" ]; then
56-
echo "Exiting as no composer file found for this plugin - ${{ steps.plugin.outputs.slug }}"
57-
exit 1
58-
fi
59-
60-
- name: Run Codeception Tests
118+
- name: ${{ matrix.plugin }} codeception tests
61119
uses: ./.github/actions/codeception
62120
with:
63-
working-directory: plugins/${{ steps.plugin.outputs.slug }}
121+
working-directory: plugins/${{ matrix.plugin }}
64122
php: ${{ matrix.php }}
65123
wordpress: ${{ matrix.wordpress }}
66124
extensions: json,mbstring

‎examples/next/hwp-preview-rest/.wp-env.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"phpVersion": "7.4",
3+
"plugins": [
4+
"https://github.com/Tmeister/wp-api-jwt-auth/archive/refs/tags/1.3.8.zip",
5+
"../../../plugins/hwp-previews"
6+
],
7+
"config": {
8+
"WP_DEBUG": true,
9+
"SCRIPT_DEBUG": false,
10+
"GRAPHQL_DEBUG": true,
11+
"WP_DEBUG_LOG": true,
12+
"WP_DEBUG_DISPLAY": false,
13+
"SAVEQUERIES": false,
14+
"JWT_AUTH_SECRET_KEY": "dpntMEZgEFH6dwPXaL5lVIZ6F4i6MnL7"
15+
},
16+
"mappings": {
17+
"db": "./wp-env/db",
18+
"wp-content/uploads": "./wp-env/uploads",
19+
".htaccess": "./wp-env/setup/.htaccess"
20+
},
21+
"lifecycleScripts": {
22+
"afterStart": "wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
23+
}
24+
}

‎examples/next/hwp-preview-rest/README.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Example: Headless WordPress Previews with Nextjs App Router and REST API
2+
3+
> [!NOTE]
4+
> Check out [HWP Previews WPGraphQL example](https://github.com/wpengine/hwptoolkit/tree/main/examples/next/hwp-preview-wpgraphql) if you need the previews implementation with Nextjs pages router, Draft Mode or WordPress Application Passwords.
5+
6+
## Overview
7+
8+
The purpose of this example is to showcase different use cases of HWP Previews. The example demonstrates the usage of [HWP Previews](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews) with Nextjs App Router and REST API. Example uses credentials authentication to fetch the posts in draft status. Unlike [HWP Previews WPGraphQL example](https://github.com/wpengine/hwptoolkit/tree/main/examples/next/hwp-preview-wpgraphql) this example don't use [Draft Mode](https://nextjs.org/docs/pages/guides/draft-mode).
9+
10+
The example includes a wp-env setup, which will allow you to build and start this example quickly. With this wp-env setup, you don't need to have a separate WordPress instance or demo data to inspect the example.
11+
12+
> [!CAUTION]
13+
> The HWP Previews plugin is currently in beta. While it's more stable than earlier versions, you may still encounter occasional bugs or incomplete features. Regular updates will continue as development progresses. Use with care and consider providing feedback to help improve the plugin.
14+
15+
## Screenshots
16+
17+
| | |
18+
| :------------------------------------------: | :----------------------------------------------------------: |
19+
| ![Login](./screenshots/login.png) <br> Login | ![Page preview](./screenshots/preview.png) <br> Page preview |
20+
21+
## Project Structure
22+
23+
```
24+
├── example-app
25+
├── src
26+
│ ├── app
27+
│ │ ├── page.js # Home page
28+
│ │ ├── pages
29+
│ │ │ └── [identifier]
30+
│ │ │ └── page.jsx # Single pages and previews
31+
│ │ └── posts
32+
│ │ └── [identifier]
33+
│ │ └── page.jsx # Single pages and previews
34+
│ ├── components # Reusable components
35+
│ └── lib
36+
│ ├── AuthProvider.js # Auth logic and context
37+
│ ├── authUtils.js # Utils for AuthProvider
38+
│ └── fetchWP.js # WordPress REST API helper
39+
├── .wp-env.json # wp-env configuration file
40+
└── wp-env
41+
├── db
42+
│ └── database.sql # WordPress database including all demo data for the example
43+
└── uploads.zip # WordPress content to be used by wp-env
44+
```
45+
46+
## Running the example with wp-env
47+
48+
### Prerequisites
49+
50+
- Node.js (v18+ recommended)
51+
- [Docker](https://www.docker.com/) (if you plan on running the example see details below)
52+
53+
**Note** Please make sure you have all prerequisites installed as mentioned above and Docker running (`docker ps`)
54+
55+
### Setup Repository and Packages
56+
57+
- Clone the repo `git clone https://github.com/wpengine/hwptoolkit.git`
58+
- Install packages `cd hwptoolkit && npm install`
59+
60+
### Build and start the application
61+
62+
- `cd examples/next/hwp-preview-rest`
63+
- Then run `npm run example:build` will build and start your application.
64+
- This does the following:
65+
- Unzips `wp-env/uploads.zip` to `wp-env/uploads` which is mapped to the wp-content/uploads directory for the Docker container.
66+
- Starts up [wp-env](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-env/)
67+
- Imports the database from [wp-env/db/database.sql](wp-env/db/database.sql)
68+
- Install Next.js dependencies for `example-app`
69+
- Runs the Next.js dev script
70+
71+
Congratulations, WordPress should now be fully set up.
72+
73+
| Frontend | Admin |
74+
| ---------------------- | ------------------------------- |
75+
| http://localhost:3000/ | http://localhost:8888/wp-admin/ |
76+
77+
> **Note:** The login details for the admin is username "admin" and password "password"
78+
79+
### Add environment variable to the Nextjs
80+
81+
Create a .env file under `examples/next/hwp-preview-rest/example-app` and add copy-paste the environment variable below:
82+
83+
```bash
84+
NEXT_PUBLIC_WORDPRESS_URL=http://localhost:8888
85+
```
86+
87+
### Usage
88+
89+
After completing this step, login to your [WordPress instance](http://localhost:8888) and preview the posts as usual. Since all of the settings are configured for this example, clicking the preview button should redirect you to the front-end URL. To see the draft posts and pages you will need to login your WordPress account on front-end website, using the same credentials.
90+
91+
If you want to learn more about the preview plugin, check out [the documentation](/plugins/hwp-previews/README.md).
92+
93+
> [!CAUTION]
94+
> This setup is intended for demonstration purposes only. For production use, you should consider the security implications and implement appropriate measures based on your project’s specific needs.
95+
96+
### Command Reference
97+
98+
| Command | Description |
99+
| --------------------- | ----------------------------------------------------------------------------------------------------------------------- |
100+
| `example:build` | Prepares the environment by unzipping images, starting WordPress, importing the database, and starting the application. |
101+
| `example:dev` | Runs the Next.js development server. |
102+
| `example:dev:install` | Installs the required Next.js packages. |
103+
| `example:start` | Starts WordPress and the Next.js development server. |
104+
| `example:stop` | Stops the WordPress environment. |
105+
| `example:prune` | Rebuilds and restarts the application by destroying and recreating the WordPress environment. |
106+
| `wp:start` | Starts the WordPress environment. |
107+
| `wp:stop` | Stops the WordPress environment. |
108+
| `wp:destroy` | Completely removes the WordPress environment. |
109+
| `wp:db:query` | Executes a database query within the WordPress environment. |
110+
| `wp:db:export` | Exports the WordPress database to `wp-env/db/database.sql`. |
111+
| `wp:db:import` | Imports the WordPress database from `wp-env/db/database.sql`. |
112+
| `wp:images:unzip` | Extracts the WordPress uploads directory. |
113+
| `wp:images:zip` | Compresses the WordPress uploads directory. |
114+
115+
> **Note** You can run `npm run wp-env` and use any other wp-env command. You can also see <https://www.npmjs.com/package/@wordpress/env> for more details on how to use or configure `wp-env`.
116+
117+
### Database access
118+
119+
If you need database access add the following to your wp-env `"phpmyadminPort": 11111,` (where port 11111 is not allocated).
120+
121+
You can check if a port is free by running `lsof -i :11111`

0 commit comments

Comments
 (0)