## Introduction

This plugin will register more Gutemberg blocks in the Wordpress editing area ecosystem, and will be mainly used by Flothemes and their products.  
This starter plugin was initially created using the [@wordpress/block](https://make.wordpress.org/core/2020/02/28/new-wordpress-create-block-package-for-block-scaffolding/).

Tutorial can be found [here](https://www.designbombs.com/creating-a-gutenberg-block-using-the-official-new-package/).
<br/><br/>

## Installation

### Requirements (tested software versions):

`node v12.18.3`  or `node v14.15.5`
`npm v6.14.6`

**Please make sure you're in the `/wp-content/plugins/` folder**. Add these in terminal:

```
git clone --recurse-submodules git@git.flosites.com:flothemes/flo-gutenberg-blocks.git
cd flo-guten-blocks
npm install
```

<br/>

## Starting up (see package.json for more commands)

```
npm start
```

_*Note: do not forget to activate the plugin the in Plugins page.*_
<br/>

## Build command

```
npm run build
```

For production-ready zip-file, additional command:

```
npm run pack
```

Alternatively the wp-cli command can be used:

```
wp dist-archive ./
```

Note, `wp-cli` should be installed to run this command! [Building the distribution ZIP archive](https://developer.wordpress.org/cli/commands/dist-archive/).

Use the `wp dist-archive` command by installing the command's package:

```
wp package install wp-cli/dist-archive-command
```

Once the package is successfully installed, the `wp dist-archive` command will appear in the list of available commands.
<br/>

_*In the working plugin, create a `.distignore` file and include all the files that should be ignored in the distribution ZIP*_

## Deploy to test site

The test site is hosted on FlyWheel - http://test-irina.flywheelsites.com/

After building the distribution archive run the following command to deploy on staging:


```
npm run upload
```
It will execute the upload-staging.sh script.


## Release new update

```
npm run release --floversion=1.0.2
```
The indicated version is being used for tagging, therefore make sure to not run this command with the same version more than one time because Git will not allow that.

After a successful release the download URL should be publicly available [here]: https://themes-downloadable-resources.s3.amazonaws.com/plugins/flo-gutenberg-blocks.zip

## Release new update for Beta Testers

```
npm run release-beta --floversion=1.0.2
```

## Change log

Add please the change log in the Readme.txt and make sure the readme section is the last one in the file.
That readme is used by the plugin updater and then is parsed and displayed in the Plugin Information iframe.

## How to add new blocks

- in plugin.php before the register_block_type() add the new block name to the array.

- in src/blocks - add a new folder and add inside the same files as in 'block_1', then modify the files

- in src/index.js include all the blocks like 'import './blocks/block_2/index.js';'
  <br/>

## Hot reloading - enqueue the following script to enable hot reloading

```
if (is_admin() &&
    (
        (defined('ENABLE_HOT_RELOADING_FOR_DEV') && ENABLE_HOT_RELOADING_FOR_DEV) ||
        (isset($_ENV['ENABLE_HOT_RELOADING_FOR_DEV']) && $_ENV['ENABLE_HOT_RELOADING_FOR_DEV'])
    )
) {
    wp_register_script(
        'livereload',
        'http://localhost:35729/livereload.js'
    );
    wp_enqueue_script(
        'livereload'
    );
}

```

More info about [hot reloading here](https://github.com/middleman/middleman-livereload/issues/90).

## Testing

[Inspired from this Tutorial](https://www.liip.ch/en/blog/how-to-test-your-gutenberg-blocks) Check it for details.

Follow the steps:

- Start the Docker enviroment

  ```
  npm run wp-env start
  ```

- Start the test

  ```
  npm run test:e2e
  ```

  - if the attributes have changed since last test run, we must regenerate the snapshot which is used bu the 'toMatchSnapshot'. This can be done using the command below. By setting this option all snapshots will be updated.

    ```
    npm run test:e2e -- -u
    ```

    Interactive mode:

    ```
    npm run test:e2e -- --puppeteer-interactive
    ```

    or the following command to run a specific test:

    ```
    npm run test:e2e -- -t 'my test'

    real example:
    npm run test:e2e -- --wordpress-base-url=http://localhost:3338/ --puppeteer-interactive -t 'Flo Post Cards'
    npm run test:e2e -- --wordpress-base-url=http://localhost/flo/fiji2/ --wordpress-username=admin --wordpress-password=qweasd --puppeteer-interactive -t "Flo Slider Block"
    ```

    Run a specific URL. Useful when necessary to use a custom port or when necessary to run a test against a Non-Docker environment. The examples below work for the Docker container crated by this project

    ```
    npm run test:e2e -- --wordpress-base-url=http://localhost:3338/
    npm run test:e2e -- --wordpress-base-url=http://localhost:3338/ --puppeteer-interactive

    ```
- When done, stop the Docker env to prevent resources usage

  ```
  npm run wp-env stop
  ```

## Linting

LInting is made by JSLint and JSHint. Options can be found in `.eslintrc.js` file. It works along with `.prettierrc` rules.

You can lint all JS files by using the package.json command:

    npm run lint:js

Also, you can use directly the `eslint` tool and lint a specific directory:

    ./node_modules/.bin/eslint ./src/blocks/slider-block/

This is to lint only the `slider-block` directory.
