-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Description
----The following issue is being worked on...---
I am first adding this issue with steps that @noahtallen shared with me.
I am first creating the issue, and will then very soon create the PR documentation.
Having documentation on how to run a Gutenberg PR will help make it possible for additional people to test the PR's and be able to give feedback as a feature is being built. Gutenberg.run is not reliable and we need a reliable way to test PR's.
There is a prerequisite one will need to do before following the below Quick Guide.
Go to the documentation for setting up a
Local WP Development Environment.
In the above documentation we set up the needed JavaScript tools and create a local WordPress development site.
Quick Guide
The first question you should ask yourself is.
Are you planning on only running PR's or do you think you might also contribute a PR to Gutenberg?
-1A- For running and optionally submitting PR's.
First we need to create a fork of the Gutenberg Github repository.
Go to: https://github.com/WordPress/gutenberg
Click the Fork button in the top right area of the screen. This creates a clone of the WordPress Gutenberg repository to your own Github account.
Open terminal and run: git clone https://github.com/YOUR-USER-NAME/gutenberg
Change YOUR-USER-NAME to your own Github repo account name.
This clones (downloads) the gutenberg repository locally to a gutenberg folder on you computer.
Go to step 2.
-1B- For only running Gutenberg PR's locally.
First we need to download the Gutenberg Github repository.
Go to: https://github.com/WordPress/gutenberg
Click the green Code button.
Click "Use HTTPS" text link.
Click the copy link icon containing this link: https://github.com/WordPress/gutenberg.git
Open terminal it will be in the root. (If you want to switch to another folder then add: cd nameoffolder.)
Add the following:
git clone https://github.com/WordPress/gutenberg.git
This will clone Gutenberg into the folder that is currently selected. I am in the root folder.
This is what I looked like in terminal on my Mac.
paaljoachimromdahl@Paals-MacBook-Pro ~ % git clone https://github.com/WordPress/gutenberg.git
Cloning into 'gutenberg'...
remote: Enumerating objects: 124, done.
remote: Counting objects: 100% (124/124), done.
remote: Compressing objects: 100% (105/105), done.
remote: Total 259637 (delta 56), reused 44 (delta 16), pack-reused 259513
Receiving objects: 100% (259637/259637), 1.07 GiB | 1.79 MiB/s, done.
Resolving deltas: 100% (183788/183788), done.
paaljoachimromdahl@Paals-MacBook-Pro ~ %
If you want the Gutenberg folder in another directory, then you need to use the command cd nameofdirectory/folder and switch to that before cloning gutenberg.
Go to step 2.
-2-
In terminal. Add cd gutenberg to go to the newly downloaded Gutenberg folder.
-3-
Now we need to find the PR that we would like to run.
Here is an example of a Gutenberg PR I want to test:
#24419
I click the clipboard icon next to where it says update/list-view-design, and the following is copied:
update/list-view-design
In terminal I add:
git checkout update/list-view-design
This will copy the branch (PR) to our local version of gutenberg.
Result:
paaljoachimromdahl@Paals-MacBook-Pro ~ % cd gutenberg
paaljoachimromdahl@Paals-MacBook-Pro gutenberg % git checkout update/list-view-design
Branch 'update/list-view-design' set up to track remote branch 'update/list-view-design' from 'origin'.
Switched to a new branch 'update/list-view-design'
paaljoachimromdahl@Paals-MacBook-Pro gutenberg %
-4-
We now need to run npm install from inside the gutenberg directory. It will install all of the project’s/Gutenberg(?) dependencies.
In terminal add: npm install
-5-
We now need to run npm run build in order to generate a production-ready build of the Gutenberg plugin. In terminal add: npm run build
NB!
-6-
In the prerequisite documentation for Setting up a Local WP development environment we started wp-env in the root folder. We now need to stop wp-env in the root as we are now working in the gutenberg folder.
In terminal add: cd ~/ which brings us back to the root folder. Then in terminal add: wp-env stop
Go back to the gutenberg folder by adding: cd gutenberg.
-7-
The following will start a wp-env instance within the Gutenberg folder.
In terminal add: npx wp-env start
It downloads WordPress.
Now test run a PR you have added above. In your browser click this link: http://localhost:8888/
It will open your local WP development environment site.
User name: admin and password: password
To test another Pull Request (PR)
-1- NB. Can probably be skipped if you have recently run other PR's.
Run: git pull to make sure all the latest changes from Github is available locally.
NEEDED -2-
Run: git checkout $branchname (change branchname to the correct name of the PR you are testing) will change the code files on your computer to be the ones in the other branch.
NEEDED -3-
Run: npm run build will build those files. Sometimes we need to run npm install first if the dependencies have changed.
-4- (Just refresh: http://localhost:8888/ and it should work fine. No need to restart npx wp-env start.)
Start up again localhost at http://localhost:8888/ and add in terminal:
npx wp-env start
Then check the PR you are running.
Uninstall
-1-
In terminal go to to the gutenberg folder cd gutenberg directory and add: npx wp-env destroy. That destroys the WordPress environment and data that was installed inside the gutenberg folder.
-2-
Outside of terminal. Locate the gutenberg folder inside the root user folder. Then delete the gutenberg folder.



