Add ES5 examples back

WordPress · Mar 8, 2019 · 2c62df1 · 2c62df1
1 parent aab707b
commit 2c62df1
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 3 deletions.
diff --git a/packages/plugins/README.md b/packages/plugins/README.md
@@ -48,6 +48,20 @@ A component that renders all plugin fills in a hidden div.
 
 **Usage**
 
+```js
+var el = wp.element.createElement;
+var PluginArea = wp.plugins.PluginArea;
+
+function Layout() {
+	return el(
+		'div',
+		{},
+		'Content of the page',
+		PluginArea
+	);
+}
+```
+
 ```js
 const { PluginArea } = wp.plugins;
 
@@ -71,6 +85,40 @@ Registers a plugin to the editor.
 
 **Usage**
 
+```js
+var el = wp.element.createElement;
+var Fragment = wp.element.Fragment;
+var PluginSidebar = wp.editPost.PluginSidebar;
+var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+var registerPlugin = wp.plugins.registerPlugin;
+
+function Component() {
+	return el(
+		Fragment,
+		{},
+		el(
+			PluginSidebarMoreMenuItem,
+			{
+				target: 'sidebar-name',
+			},
+			'My Sidebar'
+		),
+		el(
+			PluginSidebar,
+			{
+				name: 'sidebar-name',
+				title: 'My Sidebar',
+			},
+			'Content of the sidebar'
+		)
+	);
+}
+registerPlugin( 'plugin-name', {
+	icon: 'smiley',
+	render: Component,
+} );
+```
+
 ```js
 const { Fragment } = wp.element;
 const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
@@ -117,6 +165,12 @@ Unregisters a plugin by name.
 
 **Usage**
 
+```js
+var unregisterPlugin = wp.plugins.unregisterPlugin;
+
+unregisterPlugin( 'plugin-name' );
+```
+
 ```js
 const { unregisterPlugin } = wp.plugins;
 unregisterPlugin( 'plugin-name' );

diff --git a/packages/plugins/src/api/index.js b/packages/plugins/src/api/index.js
@@ -26,7 +26,42 @@ const plugins = {};
  * or an element (or function returning an element) if you choose to render your own SVG.
  * @param {Function}                  settings.render A component containing the UI elements to be rendered.
  *
- * @example
+ * @example <caption>ES5</caption>
+ * ```js
+ * var el = wp.element.createElement;
+ * var Fragment = wp.element.Fragment;
+ * var PluginSidebar = wp.editPost.PluginSidebar;
+ * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
+ * var registerPlugin = wp.plugins.registerPlugin;
+ *
+ * function Component() {
+ * 	return el(
+ * 		Fragment,
+ * 		{},
+ * 		el(
+ * 			PluginSidebarMoreMenuItem,
+ * 			{
+ * 				target: 'sidebar-name',
+ * 			},
+ * 			'My Sidebar'
+ * 		),
+ * 		el(
+ * 			PluginSidebar,
+ * 			{
+ * 				name: 'sidebar-name',
+ * 				title: 'My Sidebar',
+ * 			},
+ * 			'Content of the sidebar'
+ * 		)
+ * 	);
+ * }
+ * registerPlugin( 'plugin-name', {
+ * 	icon: 'smiley',
+ * 	render: Component,
+ * } );
+ * ```
+ *
+ * @example <caption>ESNext</caption>
  * ```js
  * const { Fragment } = wp.element;
  * const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
@@ -106,7 +141,14 @@ export function registerPlugin( name, settings ) {
  *
  * @param {string} name Plugin name.
  *
- * @example
+ * @example <caption>ES5</caption>
+ * ```js
+ * var unregisterPlugin = wp.plugins.unregisterPlugin;
+ *
+ * unregisterPlugin( 'plugin-name' );
+ * ```
+ *
+ * @example <caption>ESNext</caption>
  * ```js
  * const { unregisterPlugin } = wp.plugins;
  * unregisterPlugin( 'plugin-name' );

diff --git a/packages/plugins/src/components/plugin-area/index.js b/packages/plugins/src/components/plugin-area/index.js
@@ -18,7 +18,22 @@ import { getPlugins } from '../../api';
 /**
  * A component that renders all plugin fills in a hidden div.
  *
- * @example
+ * @example <caption>ES5</caption>
+ * ```js
+ * var el = wp.element.createElement;
+ * var PluginArea = wp.plugins.PluginArea;
+ *
+ * function Layout() {
+ * 	return el(
+ * 		'div',
+ * 		{},
+ * 		'Content of the page',
+ * 		PluginArea
+ * 	);
+ * }
+ * ```
+ *
+ * @example <caption>ESNext</caption>
  * ```js
  * const { PluginArea } = wp.plugins;
  *