# Proud Nerds | WP Base 

The base installation for new WordPress websites

***

## Requirements

* PHP 8.2+
* Composer
* Node.js 16+
* Yarn

***

## Getting started

`composer create-project proudnerds/wp-base --repository-url=https://composer.wp.proudnerds.com/all.json [path/to/project]`

replace _[path/to/project]_ with the path to your install folder and the folder/name you want to give to your project

***

## Core functionality and other composer packages

Core functionality (package `proudnerds/core`) is installed via a Composer package.

***

## How to add favicons
Run an export on https://realfavicongenerator.net/ and add them to {{themefolder}}/assets/img/favicon

## Icons

Icons are optimized automatically with [SVGO](https://github.com/svg/svgo) when Vite is running. You can also run the optimization manually with `make icons`. Add icons in the `{{themefolder}}/assets/icons` folder as regular SVG files.

### Using icons in twig files

Use the following Twig function to include an icon in your templates:

```twig
{{ icon('name-of-icon') }}
```

`name-of-icon` should be the name of the SVG file without the `.svg` extension.

You can also add classes to the icon like so:

```twig
{{ icon('name-of-icon', 'class1 class2') }}
```

## Block functions
See blocks/Example/Example.php for an example of how to create a block. This block contains some basic functionality to get you started.
However, there are some extra functions you can add to your block:

### getParentBlock()
This function allows you to only use this block in given parent blocks. This is useful when you want to use a block in a specific context. For example, if you only want to use a block in a content-wrapper block, you can add the following function to your block:

```php
    public function getParentBlock(): ?array
    {
        return ['acf/content-wrapper'];
    }
```

### getAllowedInnerBlocks()
This function allows you to only use specific blocks inside your block. This is useful when you want to restrict the blocks that can be used as inner blocks. Example:

```php
    public function getAllowedInnerBlocks(): ?array
    {
        return ['acf/editor', 'core/paragraph', 'core/heading'];
    }
```

### getStyles()
This function allows you to add custom styles to your block. It is user friendly and creates a class that is added to the block and you can use to style. This is useful when you want to add custom styles to your block like border radius, background color, etc.. Example:

```php
       public function getStyles(): array
    {
        return [
            [
                'name' => 'border-radius-none',
                'label' => 'Geen borderradius',
                'is_default' => true,
            ],
            [
                'name' => 'border-radius-10',
                'label' => 'Borderradius 10px',
            ],
        ];
    }
```

### getIconBackgroundColor()
This function allows you to add a background color to the icon of your block. This is useful when you want to make your block more important or show de customer that these blocks are custom made by adding de site primary color. Example:

```php
    public function getIconBackgroundColor(): string
    {
        return '#f00';
    }
```

### getMode()
This function allows you to set the mode of your block. Available settings are “auto”, “preview” and “edit”. Defaults to “preview”.
auto: Preview is shown by default but changes to edit form when block is selected. preview: Preview is always shown. Edit form appears in sidebar when block is selected. edit: Edit form is always shown.
Note. When in “preview” or “edit” modes, an icon will appear in the block toolbar to toggle between modes. Example:

```php
    public function getMode(): string
    {
        return 'edit';
    }
```

### hasModeSwitch()
This function allows you to show or hide the mode switcher in the block toolbar. Example:

```php
    public function hasModeSwitch(): bool
    {
        return false;
    }
```

### enableJSX()
This function allows you to enable JSX for your block. Needed if you want to use innerblocks. Example:

```php
    public function enableJSX(): bool
    {
        return true;
    }
```

### getAllowedPageTemplates()
This function allows you to only use this block in given page templates. This is useful when you want to use a block in a specific context. For example, if you only want to use a block in a specific page template, you can add the following function to your block:

```php
    public function getAllowedPageTemplates(): ?array
    {
        return ['template-name.php'];
    }
```

# Edit environment variables on servers
When using our build-image the .env file can always be found at the same location. Simply login with your ssh-key to the desired server by running

```bash
ssh [site-user-name]@[destination-server]
```

The user name and server can be found in our password manager. To connect to our testing or acceptance environments, please use these servers:

- oat02.cb.proudhosting.eu (Operational Acceptance Testing = *.wp.proudtesting.com)
- uat02.cb.proudhosting.eu (User Acceptance Testing = *.wp.proudacceptance.com)
- sharedwp01.cb.proudhosting.eu (Our shared server)
- For other VPS's check the password manager.

Once logged in on the server run the following command to edit the .env file:

```bash
nano ~/builds/shared/.env
```

Now you can make changes to the .env file. To save use CTRL-W (Yes, also on a Mac) and to Save and Quit use CTRL-X)