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 Visual Composer Website Builder plugin.
- node > 8.0, recommended latest
- PHP > 5.4, recommended latest (7.2)
- Clone this repository
git clone https://github.com/VisualComposer/vcwb-demo-element-example-plugin.gitto wp-content/plugins directory - Go to the plugin page in your wp admin area and activate the plugin
- That's it. You can open the editor and find new plugin elements here.
- Run
yarn installin the element directory - Build via
yarn buildin the element directory - Once an element is built it will appear in the Visual Composer editor
An element is the independent part of the system which represents HTML based block with the ability to output media and dynamic content.
The editor works with elements as React components. These components must be built with webpack and enqueued by API. Every element has a preview image, thumbnail image, category and React-based component.
Each element contains
- manifest.json - describes element data, preview image, thumbnail image, category and PHP files
- package.json - yarn install/update files for required node modules
- webpack.config files to build a component with webpack
Directory {tag} (must be renamed to the element tag name):
- cssMixins directory – cssMixin.pcss: POSTCSS file that holds mixin for custom generated style
- public directory – may contain custom CSS, JS, and images for public view
- index.js - the main file, build with webpack
- component.js - ReactJS component contains Visual Composer editor component. NOTE: This component is used only in the editor, not the View Page
- settings.json - Describes element attributes
- *.php files - Required PHP files(must be described in ../manifest.json)
- editor.css - CSS file which will be used only in the editor
- style.css - CSS file which will be used on the frontend to display content
yarn install // Install all the element dependencies
yarn build // Builds development build
yarn watch // Watches & Builds development version on file modification
yarn build-production // Builds the minified build
lessc elementName/public/src/init.less elementName/styles.css // compile LESS source file to CSS output
../../node_modules/.bin/webpack --config=webpack.config.js -p // minify JS file for public use inside elementName/public folder