| 1 |
# Contributing to the Parse.ly plugin |
| 2 |
|
| 3 |
Thank you for your interest in contributing to the Parse.ly plugin! We hope this document helps you get set up with everything you need to contribute, and we look forward to working with you! |
| 4 |
|
| 5 |
## Reporting issues |
| 6 |
|
| 7 |
Please search our [](https://github.com/Parsely/wp-parsely/issuesissues](https://github.com/Parsely/wp-parsely/issues](https://github.com/Parsely/wp-parsely/issues) to see if your issue has been reported already and if so, comment on that issue instead of opening a new one. Please do not post private or sensitive information as the repository is public! |
| 8 |
|
| 9 |
When creating a new issue, please add specific steps to reproduce the problem, upload any relevant screenshots, and describe what happened and what you expected would happen instead. |
| 10 |
|
| 11 |
## Contributing code |
| 12 |
|
| 13 |
You are welcome to contribute to the plugin by submitting PRs that fix issues or introduce new features to the Parse.ly plugin. |
| 14 |
|
| 15 |
### Important branches |
| 16 |
|
| 17 |
Ongoing development is being done against the `develop` branch. Release merges are performed against the `trunk` branch. More information about releases can be found in [](RELEASING.mdRELEASING.md](RELEASING.md](RELEASING.md). |
| 18 |
|
| 19 |
To contribute code to this project, fork the repo and open a PR against the `develop` branch. Alternatively, if you have direct access to our repo, create a feature branch and then open an intra-repo PR from that branch against `develop`. |
| 20 |
|
| 21 |
### Coding standards |
| 22 |
|
| 23 |
The Parse.ly plugin uses the `PHP_CodeSniffer` tool that is installed through `composer`. A [](https://github.com/Parsely/wp-parsely/blob/develop/.phpcs.xml.distcustom ruleset](https://github.com/Parsely/wp-parsely/blob/develop/.phpcs.xml.dist](https://github.com/Parsely/wp-parsely/blob/develop/.phpcs.xml.dist) is used. |
| 24 |
|
| 25 |
The code implements strong types, so be sure to declare `strict_types=1` on new PHP files, and include type definitions for parameters and return types that are compatible with the minimum version of PHP that this plugin supports. |
| 26 |
|
| 27 |
For JavaScript, we recommend installing ESLint. This plugin includes a [](https://github.com/Parsely/wp-parsely/blob/develop/.eslintrc.eslintrc](https://github.com/Parsely/wp-parsely/blob/develop/.eslintrc](https://github.com/Parsely/wp-parsely/blob/develop/.eslintrc) file that defines our coding standards. |
| 28 |
|
| 29 |
Regarding inline documentation, we do our best to adhere to the [](https://developer.wordpress.org/coding-standards/inline-documentation-standards/WordPress Inline Documentation Standards](https://developer.wordpress.org/coding-standards/inline-documentation-standards/](https://developer.wordpress.org/coding-standards/inline-documentation-standards/). |
| 30 |
|
| 31 |
### Code editor |
| 32 |
|
| 33 |
You can use any code editor or IDE to work on the plugin. For VSCode users, we use its [](https://code.visualstudio.com/docs/editor/multi-root-workspacesMulti-root Workspaces](https://code.visualstudio.com/docs/editor/multi-root-workspaces](https://code.visualstudio.com/docs/editor/multi-root-workspaces) feature which sets up VSCode with some recommended extensions, settings, launch configurations etc. To open the project using the workspace, follow these steps: |
| 34 |
|
| 35 |
1. Open the project in VSCode. |
| 36 |
2. Navigate to `.vscode/wp-parsely.code-workspace` |
| 37 |
3. Click on `Open Workspace` button that appears on the bottom right corner of VSCode UI. It should open the project in a new workspace window. |
| 38 |
|
| 39 |
### Setting up a local development environment |
| 40 |
|
| 41 |
This plugin uses `wp-env` (an [](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/official WordPress package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/)) for local development and testing, that spins up a Docker-based WordPress environment for plugin development. |
| 42 |
|
| 43 |
**Important Note:** If you want to develop for WordPress VIP sites, we recommend using [](https://docs.wpvip.com/technical-references/vip-local-development-environment/WordPress VIP dev-env](https://docs.wpvip.com/technical-references/vip-local-development-environment/](https://docs.wpvip.com/technical-references/vip-local-development-environment/) instead. |
| 44 |
|
| 45 |
#### Minimum requirements |
| 46 |
|
| 47 |
This section lists the minimum requirements for setting up a local development environment. However, it is recommended to use updated versions of these tools for the best possible development experience. If anything doesn't seem to work, please let us know. |
| 48 |
|
| 49 |
##### Docker |
| 50 |
|
| 51 |
Docker installation depends on your OS. [](https://docs.docker.com/get-docker/Please follow their official instructions](https://docs.docker.com/get-docker/](https://docs.docker.com/get-docker/). Please always use the latest possible version. |
| 52 |
|
| 53 |
##### Node.js 22.15 (LTS) |
| 54 |
|
| 55 |
Node.js is used in the build process of the Parse.ly plugin. If it's not already installed on your system, you can [](https://nodejs.org/visit the Node.js website and install the latest Long Term Support (LTS) version](https://nodejs.org/](https://nodejs.org/). If you use [](https://github.com/nvm-sh/nvmnvm](https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm) to manage node versions, you can run: |
| 56 |
|
| 57 |
``` |
| 58 |
nvm install |
| 59 |
nvm use |
| 60 |
``` |
| 61 |
|
| 62 |
##### npm 10.9.2 |
| 63 |
|
| 64 |
If you need to update npm, you can run: |
| 65 |
|
| 66 |
``` |
| 67 |
npm i -g npm |
| 68 |
``` |
| 69 |
|
| 70 |
This is important to maintain the integrity of the `package-lock.json` file (we use [](https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json#lockfileversion`lockfileVersion` 2](https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json#lockfileversion](https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json#lockfileversion)). |
| 71 |
|
| 72 |
##### PHP 7.4 |
| 73 |
|
| 74 |
There are multiple ways to install PHP on your operating system. You can check out the [](https://www.php.net/manual/en/install.phpofficial installation instructions from the PHP project's website.](https://www.php.net/manual/en/install.php](https://www.php.net/manual/en/install.php) |
| 75 |
|
| 76 |
##### Composer 1 |
| 77 |
|
| 78 |
The Parse.ly plugin includes several packages that require Composer, the PHP package manager. You can view the [](https://github.com/Parsely/wp-parsely/blob/develop/composer.jsoncomposer.json](https://github.com/Parsely/wp-parsely/blob/develop/composer.json](https://github.com/Parsely/wp-parsely/blob/develop/composer.json) file for a full list of packages. You can install Composer through Homebrew on macOS: `brew install composer`. If you don't have access to Homebrew you can view instructions for how to install Composer on the [](https://getcomposer.org/download/Composer website](https://getcomposer.org/download/](https://getcomposer.org/download/). |
| 79 |
|
| 80 |
##### WordPress 6.3 |
| 81 |
|
| 82 |
You don't need to install WordPress if you use the provided, Docker-based wp-env. |
| 83 |
|
| 84 |
##### MySQL 5.7 |
| 85 |
|
| 86 |
To run [](TESTING.md#php-integration-testsintegration tests](TESTING.md#php-integration-tests](TESTING.md#php-integration-tests), you will need a local MySQL installation. If you're using brew, this can be done with `brew install mysql`. Alternatively, you can visit the official [](https://dev.mysql.com/doc/refman/8.0/en/installing.htmlInstalling and Upgrading MySQL](https://dev.mysql.com/doc/refman/8.0/en/installing.html](https://dev.mysql.com/doc/refman/8.0/en/installing.html) documentation. |
| 87 |
|
| 88 |
#### Installing dependencies |
| 89 |
|
| 90 |
Once Node.js, PHP, and Composer are installed, you will need to install dependencies in the main plugin directory: |
| 91 |
|
| 92 |
``` |
| 93 |
# Install PHP dependencies. |
| 94 |
composer install |
| 95 |
|
| 96 |
# Use the correct Node version. |
| 97 |
nvm use |
| 98 |
|
| 99 |
# Install JS dependencies. |
| 100 |
npm install |
| 101 |
``` |
| 102 |
|
| 103 |
### Developing locally |
| 104 |
|
| 105 |
#### Starting and stopping the wp-env environment |
| 106 |
|
| 107 |
While Docker is running, you have the following commands available: |
| 108 |
|
| 109 |
``` |
| 110 |
# Start the environment. |
| 111 |
npm run dev:start |
| 112 |
|
| 113 |
# Stop the environment. |
| 114 |
npm run dev:stop |
| 115 |
``` |
| 116 |
|
| 117 |
`npm run dev:start` will start up an environment in `localhost:8888`, running in the background. If you have any issue running the above commands, we recommend checking that you are running an up-to-date version of Docker on your system and that you don't have any other services running on ports 8888 and 8889. |
| 118 |
|
| 119 |
The credentials for entering wp-admin are `admin` and `password`. |
| 120 |
|
| 121 |
#### Making commits |
| 122 |
|
| 123 |
We're leveraging [](https://typicode.github.io/huskyhusky](https://typicode.github.io/husky](https://typicode.github.io/husky) to automate some code quality commands before commits are applied. You can browse the configured hooks in [](../.husky/this directory](../.husky/](../.husky/). For example, the [](#coding-standardscoding standards](#coding-standards](#coding-standards) and [](#lintinglint rules](#linting](#linting) are applied [](../.husky/pre-commitprior to commit](../.husky/pre-commit](../.husky/pre-commit). If violations are encountered, the commit is rejected. Please note that this quality assurance process introduces a delay before every commit. |
| 124 |
|
| 125 |
If you're on Windows, you might get an error when trying to make commits. In this case refer to [](WINDOWS.mdWINDOWS.md](WINDOWS.md](WINDOWS.md). |
| 126 |
|
| 127 |
#### Modifying and rebuilding plugin assets |
| 128 |
|
| 129 |
JavaScript files that are included in the released plugin are built with the [](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/wp-scripts tool](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/). |
| 130 |
|
| 131 |
By default, the plugin will use the production-built JavaScript and CSS assets in the `build/` folder. This is fine if you don't plan on modifying those files, but if you do, you can start a server that will compile your changes on the fly. Once your changes are complete, we ask you to rebuild the production-ready (compressed) ones. Here's the process of modifying and rebuilding the assets: |
| 132 |
|
| 133 |
1. Install the dependencies: |
| 134 |
|
| 135 |
``` |
| 136 |
npm i |
| 137 |
``` |
| 138 |
|
| 139 |
2. Start the build tool: |
| 140 |
|
| 141 |
``` |
| 142 |
npm run start |
| 143 |
``` |
| 144 |
|
| 145 |
3. Make and test your changes (assets are rebuilt automatically) |
| 146 |
4. When you have completed your changes, stop the `start` script and build the production assets: |
| 147 |
|
| 148 |
``` |
| 149 |
npm run build |
| 150 |
``` |
| 151 |
|
| 152 |
When submitting a PR which contains asset modifications, please make sure that it includes any applicable changes to: |
| 153 |
- Source files (in the `src` directory) |
| 154 |
- Build tooling (including an updated `package-lock.json` if you've altered dependencies) |
| 155 |
- Built files (in the `build` directory) |
| 156 |
|
| 157 |
#### Linting |
| 158 |
|
| 159 |
To lint PHP code: |
| 160 |
|
| 161 |
``` |
| 162 |
composer lint |
| 163 |
``` |
| 164 |
|
| 165 |
To check PHP code with our coding standards: |
| 166 |
|
| 167 |
``` |
| 168 |
composer cs |
| 169 |
``` |
| 170 |
|
| 171 |
To auto-fix PHP code based on our coding standards: |
| 172 |
|
| 173 |
``` |
| 174 |
composer cbf |
| 175 |
``` |
| 176 |
|
| 177 |
To perform static analysis on PHP code using PHPStan: |
| 178 |
|
| 179 |
``` |
| 180 |
composer static-analysis |
| 181 |
``` |
| 182 |
|
| 183 |
To lint JS code: |
| 184 |
|
| 185 |
``` |
| 186 |
npm run lint:js |
| 187 |
|
| 188 |
# Fix auto-fixable issues. |
| 189 |
npm run lint:js -- --fix |
| 190 |
``` |
| 191 |
|
| 192 |
To lint package.json: |
| 193 |
|
| 194 |
``` |
| 195 |
npm run lint:pkg-json |
| 196 |
``` |
| 197 |
|
| 198 |
To lint CSS code: |
| 199 |
|
| 200 |
``` |
| 201 |
npm run lint:css |
| 202 |
|
| 203 |
# Fix auto-fixable issues. |
| 204 |
npm run lint:css -- --fix |
| 205 |
``` |
| 206 |
|
| 207 |
#### Testing |
| 208 |
|
| 209 |
For testing instructions, please consult [](TESTING.mdTESTING.md](TESTING.md](TESTING.md). |
| 210 |
|
