In this article I’m going to cover the steps you need to know if you want to submit your custom element to Visual Composer Hub.
Once you’ve created a custom element you have an option to submit it to Visual Composer in order to showcase it in the Hub. If you decided to do so, there are some code style rules you have to follow.
Visual Composer dev team sticks to a certain set of code style rules in order to keep the code clean, more readable and reduce the amount of bugs. The general code style rules are listed in the official GitHub repository under the contributing guide.
Every element in the Hub undergoes a test, build and deploy process in the CI pipeline. During this process element files get validated for certain code style rules. Thus the submitted element has to match all of these rules.
Where to begin
First off you need to download the example plugin if you haven’t already. The code that comes within this plugin is already formatted to match the defined code style.
Once you’ve installed the example plugin you are now ready to edit it.
Setup code style
All of the code style rules are listed at standardjs.com/rules.html. No need to remember them all, the standardjs will format the code for you.
To start using it, inside terminal enter the elements’ folder (if you are working inside the example plugin):
This command will output any errors with description and location in file. In order to automatically format the code, run:
yarn standard --fix
To see formatting errors instantly inside your files you should install the appropriate plugin for your editor. Check if your editor has such a plugin at standardjs.
- Open Visual Studio Code editor;
- Click on the Extensions icon in the Activity Bar;
- Look for the right one and click install;
- Inside Settings click on the Workspace tab, to apply these settings only for this workspace;
- That’s it, you’re all set.
Now, the editor will instantly highlight the code that doesn’t pass the code style rules.
/* eslint-disable */
And in the end of the file, on the last row add:
/* eslint-enable */
These commands will prevent standardjs from validating these files.
Note: We encourage you to use this approach only in uttermost cases.
For the PHP we use PSR-2 Code style and CodeSniffer that is configured in elementName/ci/ruleset.xml file, to check PSR2 rules http://www.php-fig.org/psr/psr-2/.
NOTE: element folder should contain ci folder just like in the example plugin.
To validate PHP code style, inside terminal enter the elements’ folder (if you are working inside the example plugin):
Then to validate PHP code run (change logoSuperTest to your elements’ name):
php ci/phpcs.phar --standard=ci/ruleset.xml logoSuperTest
This command will output any errors with description and location in file.
Note: Again, we encourage you to use this approach only in uttermost cases.
Other files (JSON, CSS, etc.)
As for the other files formats like .json or .css there are not any strict rules, but still there are some general guidelines you should follow:
- Use 2 spaces for indentation;
- Use a space between a CSS selector and an opening bracket;
- Use a space after colon in JSON files.
You always can use existing Visual Composer elements files as a reference. These elements comes with a Free version and are available at the GitHub repository.
Once you’ve finished developing your element and prepared a zip file of your element as per Visual Composer element boilerplate, you are ready to submit it to us.
To submit share a link in our Slack channel to a GitHub repo of your element.
After element submission, our development team will carefully review the code and include your element in to the Hub to run tests against it. If any errors will be found we will provide you with a descriptive list of thing that needs to be fixed. After that, the submission process has to be repeated.
When your element will pass review and testing process, we will notify you about that and include your element in the Hub.