Table of contents
Step 1
Setup local WordPress environment on Ubuntu
run-sudo apt install docker.io docker-compose
for installing docker-engine refer to the instructions here://https://docs.docker.com/engine/install/ubuntu/
docker-compose is required, you may need it to install separately,
see:https://docs.docker.com/compose/install/
Troubleshooting:
/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
Check if docker is not running, and try to start the service:
sudo systemctl start docker. service
If docker is running not listening to how the WordPress environment trying to communicate. Try After adding the following service override file to include to listen tcp.
/etc/systemd/system/docker.service.d/override.conf
[Service] ExecStart= ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2376
Restart service from command line
sudo systemctl daemon-reload
sudo systemctl restart docker.service
After restarting services set the environment variable and try starting
export DOCKER_HOST=tcp://127.0.0.1:2376
npm run wp-env start
Step 2 create-block a tutorial in the WordPress block editor
Prerequisites:
1. Node/NPM Development Tools
WordPress Development Site
Code Editor-VsCode preferable
Quick start
1. Install Node Development Tools:
Download and install Node Version Manager(nvm)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
after restart terminal
and install: nvm install 14
2.WordPress Development Site
First download, install and start Docker Desktop for respective your OS.
start environment from an existing plugin or theme directory, or a new working directory:wp-env start
Navigate to: http://localhost:8888 Use your browser and log in
to the WordPress dashboard at http//localhost:8888/wp-admin using
'admin' as user name and Password "password" without quotes
3. Code Editor
You can use any code editor but Visual Studio Code give you some functionality compared to others.
Node Development Tools
Node and NPM.Node js is a runtime environment that allows running javascript outside of the browser.NPM is a node package manager used for installing dependencies and running scripts. npx is also used to run packages and used in this tutorial to bootstrap a block.
wp-env tool uses docker to create a virtual machine that runs a WordPress site.
Run the command on cmd to install nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
in mac required developer tools are not installed by default, it may ask you to download and install
After installing nvm, you need to install Node.js :
nvm install 14
if an error is encountered then quit and restart your terminal. If the still error remains you need to create a profile file.
after creating the profile file re-run and install the command;
nvm install 14
After that check they have been installed on your system by following the commands:
node -v
npm -v
WordPress Development Site
There are several ways to run locally WordPress on your machine.
The WordPress wp-env-package lets you set up a local WordPress environment for building and testing plugins and themes, without additional configuration.
After installing go ahead and install wp-env tool
npm -g install @ wordpress/env
check to confirm
wp-env --version
You can use this script to start an environment with your plugin activated by running it from the directory containing your plugin.
npx @wordpress/create-block starter-block
cd starter-block
wp-env start
You can access environment in your browser at:http//localhost:8888
if you run wp-env start from a directory which does not contain a plugin or theme it would show an error.
See the @wordpresse/env package for additional details.
^Troubleshooting
A common issue when running this wp-env is an Error while running docker-compose command.
Error:-Host is already in use by another container
\>Stop the container in the directory from where you start
\>if you don't remember directory stop all containers with
docker stop $(docker ps -q).