# WordPress Blade Template

----

   

 

## Requirements

-----------
This theme relies on the following plugins:

* Advanced Custom Fields

This theme uses the following helper software:

* Blade - https://github.com/EFTEC/BladeOne
* Tailwind - https://tailwindcss.com/

This theme also relies on the following external tools:

* Composer v2
* Node (version 16.9.3)
* npm (version 8.19.3)

Please note: anytime the below says "In terminal, run", assume that this needs to be run from within the theme
directory.

## Setting up the project

* Setup a WordPress installation and create a new theme folder
* Clone the repository into this folder
* In Terminal, navigate to the theme folder
* Depending on your setup, you must run the following commands:

composer install

This will also automatically run `npm install` and `npm run dev`

## Command in Project

You must have the node dev environment running to generate the appropriate Build files.

- `npm run dev` - This will compile all assets in `/resources` folder whilst also scanning all Blade files within
the `/resoures/views` and `/app/Blocks` to create Tailwind CSS
- `npm run watch` - This will achive the same as `npm run dev` continuously
- `npm run blocks` - This will compile the asset within `/app/Blocks/BlockName/src`
- `npm run clean` - This will delete all compiled asset within `/app/Blocks/BlockName/`

# Blocks
----------

## Creating a new block

This will create the necessary resources to build the block

* In terminal, run:

wp create-block "Block Name"

## Using a component

If you're using an app component, you need to pass the app components folder into the template.

In the block:

global $bladeComponents;
echo wp_bladeone_blocks()->run('BLOCK_NAME.view.render', [
    ...
    'components' => $bladeComponents,
    ...
]);

Replace "BLOCK_NAME" with the stringified folder path for the component, based on the `app/Components` folder
e.g. `TeamsBlock.view.render` (case sensitive)

In the template:

{!! $components->run('COMPONENT_NAME', $dataArray) !!}

Replace "COMPONENT_NAME" with the stringified folder path for the component, based on the `app/Components` folder
e.g. `Teams.name` (case sensitive)

Replace $dataArray with the appropriate array e.g. `['data' => $team]`

# Using an Root component

If you're using a root component, you need to pass the respources folder into the template. So:

In the block:

global $blade;
echo wp_bladeone_blocks()->run('TestBlock.view.render', [
    ...
    'root_components' => $blade,
    ...
]);

In the template:

{!! $root_components->run('COMPONENT_NAME', $dataArray) !!}

Replace "COMPONENT_NAME" with the stringified folder path for the component, based on the `resources/views` folder
e.g. `Components.alert` (case sensitive )

Replace $dataArray with the appropriate array e.g. `['message' => $message]`

## Naming Convention

For compatability purposes, please use the following naming convention:

* 'app' components (in the folder app/Components) - "components"
* 'root' components (in the folder resources/views) - "root_components"

# Pages
-----------

## Creating a new page

#TODO

## Updating a page

#TODO

# ACF Fields

#TODO

# CPT's

#TODO