=== Flo Flex Builder ===
Contributors: Flothemes
Donate link: https://flothemes.com/
Tags: Flothemes builder
Requires at least: 5.0.0
Tested up to: 5.0.0
Version: 1.0
Stable tag: 1.0

## Description:

Plugin adding a visual builder block to the Flothemes layout builder. Works only with themes released after February 1, 2017

# How to Use for Development:

## 0. Cloning the project, fetching submodules (WP plugin and the react-app as a submodule)

```
mkdir flo-flex-builder
cd flo-flex-builder
git clone --recurse-submodules git@git.flosites.com:alexb/flo-flex-builder.git .
```

### 0.1 OPTIONAL. In case you want to add a submodule, you do it this way:

```
git submodule add git@git.flosites.com:alexb/flo-flex-builder-react-app.git ./app-files
```

## 1. On repository updates, make sure there are no updates in submodules:

```
git pull --recurse-submodules
```

## 2. Check Node Version

```
node -v
```

**THE MINIMUM REQUIRED NODE VERSION: 10.0.0**

If you have a lower version and projects running on it, you can install a separate newer node version and switch between versions when necessary via n: https://github.com/tj/n
sudo may be required depending on your system configuration:

```
npm install -g n
n 10
```

The commands above will install and active the necessary Node version.
To switch back to your previous version, type in "n" in the terminal:

```
n

  node/6.14.3
  node/6.10.1
o node/10.0.0
  node/11.10.0
```

## 3. Install dependencies

**make sure the terminal is open in the WordPress plugin root**:

```
npm run flo-install
```

## 5. Start the app:

```
npm start
```

The WordPress plugin can be accessed from http://localhost:3000/link-to-your-wp-installation/ for frontend live reload

## 6.1 Compile the files:

```
npm run build
```

## 6.2 Generating a plugin ZIP file:

```
npm run pack
```

## 7. Deployoing to staging

```
npm run upload
```

In order for this task to run, you must have a working SSH key that connects to staging server.
To check if the SSH connection works, run:

```
ssh flo@demo.stage.flosites.com
```

## 7.1. Deployoing to demo

```
npm run upload-demo
```

In order for this task to run, you must have a working SSH key that connects to Demo server.
To check if the SSH connection works, run:

```
ssh flo@demo.flothemes.com
```

## 8. Pushing a new Release

Before pushing a release make sure you have the following:

- Add the proper version number in the main file flo-flex-builder.php
- Edit the changelog.txt including the new version number and the update Date
- update-data.php -> if necessary update the 'requires' and 'tested' meta at the top

```
npm run release --floversion=1.0.9
```

OR if you already have the zip file generated and only need to deploy it, pass an additional parameter to ignore the pack step:

```
npm run release --floversion=1.0.9 --pack=false
```

the default 'pack' flag value is set in .npmrc

## 8.1. Pushing a new Release for Beta testers

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

Or if it is not necessary to build the zip:

```
npm run release-beta --floversion=3.0.3 --pack=false
```

## 9. Clearing change log cache on flothemes.com

```
https://flothemes.com/flex-changelog?rem_flex_log_transient=1
```

## Keep bundles small!!!

- be attentive when importing modules from `/admin/` domain to `/public/`, you may import, by accident, libs like React, React-DOM, jQuery, etc.  
  `import $ from 'jquery` is prohibited in `/public/`!!!
- do not import jQuery in `/public/` domain (e.g. elements). Use directly `jQuery` or `window.$`, as it's injected by WP in DOM
- if an element/module is large (e.g. Countdown or Video element, they import all kind of third-part libs), do next:
  - create your file, and import your libs as usually. PS: jQuery can be used as `$` or `jQuery`
  - attach a window hook to the wrapping function, starting with "flex" e.g. `window.flexInitVideoElement = () => {/code/}`
  - in listeners or whatever location, use `if (window.flexInitVideoElement) window.flexInitVideoElement()`
  - if you don't need listeners, try to fit everything in the main file. One concern - `public.min.js` will be loaded LATER.
  - in `/config/webpack.entries.js` add an entry to the `const standaloneElements` object.
  - this will make sure Webpack will create a separated file, and load it prior to public.min.js
- always watch the bundles, after any written module, with `npm run analyzer` command. It will open 2 analyser pages with all bundles containers.

## Wiki docs

https://git.flosites.com/alexb/flo-flex-builder/-/wikis/home
