Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit fb940f6 Mar 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
packages Publish Dec 13, 2018
screencasts
tasks
.eslintignore Fix internal linting setup and add missing headers (#1741) Mar 6, 2017
.eslintrc [Internal] Warn for missing brackets (#2151) May 15, 2017
.gitignore update screencast generation scripts and generate new screencast Feb 28, 2018
.yarnrc Enable Yarn check files (#3769) Jan 13, 2018
CHANGELOG.md CDE:: Clear changelog from create-react-app Dec 13, 2018
LICENSE Update file headers Feb 17, 2018
README.md
lerna.json
package.json Merge remote-tracking branch 'upstream/next' Feb 25, 2018
screencast-error.svg Add svg rendering for error example (#3825) Jan 17, 2018
screencast.svg update screencast generation scripts and generate new screencast Feb 28, 2018

README.md

Create Divi Extension

Create Divi Extensions with no build configuration.

Create Divi Extension works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

Quick Overview

cd .../wp-content/plugins
npx create-divi-extension my-extension
cd my-extension
yarn start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open your WordPress site to see your extension. When you’re ready to deploy to production, create a minified bundle with yarn build.

npx create-divi-extension my-extension

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Creating an Extension

You’ll need to have Node >= 6 on your local development machine.

To create a new extension, run a single command from inside your WordPress plugins directory:

npx create-divi-extension my-extension

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

It will create a directory called my-extension. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-extension
├── includes
│   ├── modules
│   │   └── HelloWorld
│   │       ├── HelloWorld.jsx
│   │       ├── HelloWorld.php
│   │       └── style.css
│   ├── loader.js
│   ├── loader.php
│   └── MyExtension.php
├── languages
├── node_modules
├── scripts
│   └── frontend.js
├── styles
├── my-extension.php
├── package.json
└── README.md

No configuration or complicated folder structures, just the files you need to build your extension. Once the installation is done, you can open your project folder:

cd my-extension

Inside the newly created project, you can run some built-in commands:

npm start or yarn start

Runs the extension in development mode. Open your WordPress website to view it.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Build errors

npm run build or yarn build

Builds the extension for production. It correctly optimizes the build for the best performance.

The build is minified. Your extension is ready to be deployed.

npm run zip or yarn zip

Runs build and then creates a production release zip file.

User Guide

The User Guide includes information on different topics, such as:

A copy of the user guide will be created as README.md in your project folder.

Philosophy

  • One Dependency: There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.

What’s Included?

Your environment will have everything you need to build a Divi extension:

  • React, JSX, ES6, and optional Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • Auto prefixed CSS, so you don’t need -webkit- or other prefixes.
  • A fast interactive unit test runner with built-in support for coverage reporting.
  • A live development server that warns about common mistakes.
  • A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
  • Hassle-free updates for the above tools via a single dependency.

Check out this guide for an overview of how these tools fit together.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain the configuration.

Contributing

We'd love to have your helping hand on create-divi-extension! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

Acknowledgements

We are grateful to the authors of create-react-app for creating the awesome tool on which create-divi-extension is based.

You can’t perform that action at this time.