| 1 |
# Demo plugin with custom elements for Visual Composer Website Builder |
| 2 |
|
| 3 |
This is a Demo (example) plugin for developers to showcase custom elements. It acts as a sandbox for developers. To see it in action download and install it on your WordPress instance along with the [](https://github.com/VisualComposer/builderVisual Composer Website Builder](https://github.com/VisualComposer/builder](https://github.com/VisualComposer/builder) plugin. |
| 4 |
|
| 5 |
## What is an element? |
| 6 |
An element is the independent part of the system which represents HTML based block with the ability to output media and dynamic content. |
| 7 |
|
| 8 |
## How does it work? |
| 9 |
The editor works with elements as [](https://reactjs.org/docs/react-component.htmlReact components](https://reactjs.org/docs/react-component.html](https://reactjs.org/docs/react-component.html). These components must be built with [](https://webpack.js.org/webpack](https://webpack.js.org/](https://webpack.js.org/) and enqueued by API. |
| 10 |
Every element has a preview image, thumbnail image, category and React-based component. |
| 11 |
|
| 12 |
### Element content |
| 13 |
Each element contains |
| 14 |
- manifest.json - describes element data, preview image, thumbnail image, category and PHP files |
| 15 |
- package.json - yarn install/update files for required node modules |
| 16 |
- webpack.config files to build a component with webpack |
| 17 |
|
| 18 |
Directory {tag} (must be renamed to the element tag name): |
| 19 |
- cssMixins directory – cssMixin.pcss: POSTCSS file that holds mixin for custom generated style |
| 20 |
- public directory – may contain custom CSS, JS, and images for public view |
| 21 |
- index.js - the main file, build with webpack |
| 22 |
- component.js - ReactJS component contains Visual Composer editor component. NOTE: This component is used only in the editor, not the View Page |
| 23 |
- settings.json - Describes element attributes |
| 24 |
- *.php files - Required PHP files(must be described in ../manifest.json) |
| 25 |
- editor.css - CSS file which will be used only in the editor |
| 26 |
- style.css - CSS file which will be used on the frontend to display content |
| 27 |
|
| 28 |
### Requirements |
| 29 |
- node > 8.0, recommended latest |
| 30 |
- PHP > 5.4, recommended latest (7.2) |
| 31 |
|
| 32 |
## Installation |
| 33 |
- Clone this repository `git clone https://github.com/VisualComposer/vcwb-demo-element-example-plugin.git` |
| 34 |
- Run `yarn install` in the element directory |
| 35 |
- Build via `yarn build` in the element directory |
| 36 |
- Once an element is built it will appear in the Visual Composer editor |
| 37 |
|
| 38 |
### Commands |
| 39 |
``` |
| 40 |
yarn install // Install all the element dependencies |
| 41 |
yarn build // Builds development build |
| 42 |
yarn watch // Watches & Builds development version on file modification |
| 43 |
yarn build-production // Builds the minified build |
| 44 |
|
| 45 |
lessc elementName/public/src/init.less elementName/styles.css // compile LESS source file to CSS output |
| 46 |
../../node_modules/.bin/webpack --config=webpack.config.js -p // minify JS file for public use inside elementName/public folder |
| 47 |
``` |
| 48 |
|
| 49 |
### Resources for Visual Composer API: |
| 50 |
- [](https://visualcomposer.com/help/api/API Documentation](https://visualcomposer.com/help/api/](https://visualcomposer.com/help/api/) |
| 51 |
- [](https://visualcomposer.com/blog/visual-composer-api-custom-elements-and-add-ons/Custom Element & Add-on Development](https://visualcomposer.com/blog/visual-composer-api-custom-elements-and-add-ons/](https://visualcomposer.com/blog/visual-composer-api-custom-elements-and-add-ons/) |
| 52 |
- [](https://visualcomposer.com/blog/visual-composer-theme-integration/Theme Integration](https://visualcomposer.com/blog/visual-composer-theme-integration/](https://visualcomposer.com/blog/visual-composer-theme-integration/) |
| 53 |
- [](https://visualcomposer.com/blog/visual-composer-on-staging/Staging Environment](https://visualcomposer.com/blog/visual-composer-on-staging/](https://visualcomposer.com/blog/visual-composer-on-staging/) |
| 54 |
|
