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

1. WordPress Development Site

2. 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).