sample-wp-block-theme

Repo for practice task for Autonomic front-end recruitment.

Instructions:

• Replicate craze.co.uk as a WordPress block theme.
• Notes:
  • You can use the provided 'Inter' font in /assets/fonts/ as the main sans-serif font in use on the site.
  • Similarly, you can use any monospace font in place of the MD IO typeface the website is using for monospace text.
  • The breadcrumb on top doesn't need to be functionaly. You can use static text.
  • You don't need to copy all of the site's content. Feel free to use placeholder text.
  • Majority of the site's styling should be implemented via theme.json.
  • The theme should have at least two templates, an index or home template, and a single page/post template.

Running the site locally

Note With all methods, you'll see a white screen when you visit the local instance, because this theme is blank! You can check things are working by visiting the local URL before the theme activate step, or just go straight to the dashboard at /wp-admin and start hacking.

wp-env

Note The latest wp-env requires "Docker Compose V2"; if docker compose gives 'compose' is not a docker command. then run npm -g i @wordpress/env@8.13.0 instead of the first command.

You can launch an instance of WordPress pre-installed with this theme using the wp-env tool.

$ npm -g i @wordpress/env
$ cd /path/to/theme/Repo
$ wp-env start
$ wp-env run cli wp theme activate sample-wp-block-theme

This will launch a WordPress local instance at http://localhost:8888. You can log into the dashboard at http://localhost:8888/wp-admin with admin as the username and password as the password.

Note: This method assumes you already have docker and docker-compose installed locally.

Lando

Install Lando, then:

$ lando start
$ lando wp --path=/app/web/ core install \
    --title="Dev Env" \
    --admin_user=admin --admin_password=admin --admin_email=admin@example.com \
    --skip-email --url=https://sample-block-theme.lndo.site/
$ lando wp --path=/app/web/ theme activate sample-wp-block-theme

docker-compose

Install Docker-compose, then:

$ docker-compose up -d
# wait a few seconds, run `docker-compose logs` to check start-up
$ docker-compose exec --user=user wordpress wp core install \
    --title="Dev Env" \
    --admin_user=admin --admin_password=admin --admin_email=admin@example.com \
    --skip-email --url=http://sample-block-theme.localhost:8080
$ docker-compose exec --user=user wordpress wp theme activate sample-wp-block-theme

This should also work with docker compose (i.e. newwer Docker / Compose 2); just replace docker-compose with docker compose in the above.