Skip to content

Docs: How to pull a Gutenberg PR to your local WP develop environment setup. #25202

@paaljoachim

Description

@paaljoachim

----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

1-Clone-Gutenberg

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

3-Run-PR

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

4-install-dependencies

-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

5-generate-production-ready-Gutenberg-plugin

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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions