How to use @wordpress/plugins - 10 common examples
To help you get started, we’ve selected a few @wordpress/plugins examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Automattic / wp-calypso / apps / full-site-editing / full-site-editing-plugin / starter-page-templates / index.js View on Github 
return (
);
},
} );
}
// Always register ability to open from document sidebar.
registerPlugin( 'page-templates-sidebar', {
render: () => {
return (import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { registerPlugin } from '@wordpress/plugins';
// GUTENBERG JS - use addQueryArgs instead of hard coding
// 'edit.php?post_type=wp_block'
import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import CopyContentMenuItem from './copy-content-menu-item';
import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
registerPlugin( 'edit-post', {
render() {
return (
{ ( { onClose } ) => (
<menuitem href="{" role="menuitem">
{ __( 'Manage All Reusable Blocks' ) }
</menuitem>
) }// Simple track - just based on the event name.
tracksRecordEvent( tracker );
} else if ( typeof tracker === 'function' ) {
// Advanced tracking - call function.
tracker( ...args );
}
return originalAction( ...args );
};
} );
}
return actions;
},
} ) );
// Registers Plugin.
registerPlugin( 'wpcom-block-editor-tracking', {
render: () => {
EVENT_TYPES.forEach( eventType =>
document.addEventListener( eventType, delegateEventTracking )
);
return null;
},
} );
}extensions.forEach( extension => {
const { childBlocks, name, settings } = extension;
const { available } = getJetpackExtensionAvailability( name );
if ( has( settings, [ 'render' ] ) ) {
// If the extension has a `render` method, it's not a block but a plugin
const pluginName = `jetpack-${ name }`;
const registered = getPlugin( pluginName );
if ( available && ! registered ) {
registerPlugin( pluginName, settings );
} else if ( ! available && registered ) {
unregisterPlugin( pluginName );
}
} else {
const blockName = `jetpack/${ name }`;
const registered = getBlockType( blockName );
if ( available && ! registered ) {
registerBlockType( blockName, settings );
if ( childBlocks ) {
childBlocks.forEach( ( { name: childName, settings: childSettings } ) => {
// This might have been registered by another parent before
if ( ! getBlockType( `jetpack/${ childName }` ) ) {
registerBlockType( `jetpack/${ childName }`, childSettings );
}
} );
}
} else if ( ! available && registered ) {extensions.forEach( extension => {
const { childBlocks, name, settings } = extension;
const { available } = getJetpackExtensionAvailability( name );
if ( has( settings, [ 'render' ] ) ) {
// If the extension has a `render` method, it's not a block but a plugin
const pluginName = `jetpack-${ name }`;
const registered = getPlugin( pluginName );
if ( available && ! registered ) {
registerPlugin( pluginName, settings );
} else if ( ! available && registered ) {
unregisterPlugin( pluginName );
}
} else {
const blockName = `jetpack/${ name }`;
const registered = getBlockType( blockName );
if ( available && ! registered ) {
registerBlockType( blockName, settings );
if ( childBlocks ) {
childBlocks.forEach( ( { name: childName, settings: childSettings } ) => {
// This might have been registered by another parent before
if ( ! getBlockType( `jetpack/${ childName }` ) ) {import * as plugins from '@wordpress/plugins';
plugins.registerPlugin('my-plugin', {
icon: 'welcome-learn-more',
render: () => <h1>Hello World</h1>,
});
plugins.getPlugins();
plugins.getPlugin('my-plugin');
plugins.unregisterPlugin('my-plugin');
interface OwnProps {
foobar: number;
}
interface ContextProps {
iconName: string;import * as plugins from '@wordpress/plugins';
plugins.registerPlugin('my-plugin', {
icon: 'welcome-learn-more',
render: () => <h1>Hello World</h1>,
});
plugins.getPlugins();
plugins.getPlugin('my-plugin');
plugins.unregisterPlugin('my-plugin');
interface OwnProps {
foobar: number;
}
interface ContextProps {
iconName: string;
}
type Props = OwnProps & ContextProps;
const Foo = ({ iconName, foobar }: Props) => (
<ul>
<li>{iconName}</li>
<li>{foobar}</li>
</ul>import * as plugins from '@wordpress/plugins';
plugins.registerPlugin('my-plugin', {
icon: 'welcome-learn-more',
render: () => <h1>Hello World</h1>,
});
plugins.getPlugins();
plugins.getPlugin('my-plugin');
plugins.unregisterPlugin('my-plugin');
interface OwnProps {
foobar: number;
}
interface ContextProps {
iconName: string;
}
type Props = OwnProps & ContextProps;
const Foo = ({ iconName, foobar }: Props) => (
<ul>
<li>{iconName}</li></ul>import * as plugins from '@wordpress/plugins';
plugins.registerPlugin('my-plugin', {
icon: 'welcome-learn-more',
render: () => <h1>Hello World</h1>,
});
plugins.getPlugins();
plugins.getPlugin('my-plugin');
plugins.unregisterPlugin('my-plugin');
interface OwnProps {
foobar: number;
}
interface ContextProps {
iconName: string;
}
type Props = OwnProps & ContextProps;
const Foo = ({ iconName, foobar }: Props) => (InserterIconImage: (
<img src="data:image/svg+xml;charset=utf8,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.824 0C3.97 0 0 3.97 0 8.824c0 4.853 3.97 8.824 8.824 8.824 4.853 0 8.824-3.971 8.824-8.824S13.677 0 8.824 0zM7.94 5.294v2.647H5.294v1.765h2.647v2.647h1.765V9.706h2.647V7.941H9.706V5.294H7.941zm-6.176 3.53c0 3.882 3.176 7.059 7.059 7.059 3.882 0 7.059-3.177 7.059-7.06 0-3.882-3.177-7.058-7.06-7.058-3.882 0-7.058 3.176-7.058 7.059z' fill='%234A4A4A'/%3E%3Cmask id='a' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.824 0C3.97 0 0 3.97 0 8.824c0 4.853 3.97 8.824 8.824 8.824 4.853 0 8.824-3.971 8.824-8.824S13.677 0 8.824 0zM7.94 5.294v2.647H5.294v1.765h2.647v2.647h1.765V9.706h2.647V7.941H9.706V5.294H7.941zm-6.176 3.53c0 3.882 3.176 7.059 7.059 7.059 3.882 0 7.059-3.177 7.059-7.06 0-3.882-3.177-7.058-7.06-7.058-3.882 0-7.058 3.176-7.058 7.059z' fill='%23fff'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%23444' d='M0 0h17.644v17.644H0z'/%3E%3C/g%3E%3C/svg%3E" alt="{">
),
}
) }
<p></p>
);
}
registerPlugin( 'wpcom-block-editor-nux', {
render: () => ,
} );
@wordpress/plugins
Plugins module for WordPress.
