Skip to content

Early-bird lifetime licence: $199 once, for the first 200 buyers only. See the offer

All docs

Editor app extensions (JavaScript)

The editor app is a React app built on WordPress's own React and wp.hooks. Snipfire Pro adds its part of the editor through the extension points below; you can use them for your own add-on.

Register at load time, before the app first renders: enqueue your script on the snipfire_before_app_script action (see PHP hooks), with wp-hooks and wp-element as dependencies.

wp.hooks.addFilter( 'snipfire.slot.settings.top', 'my-addon', ( fills, props ) => [
    ...fills,
    MyField,
] );

Filters run on every render, so they may read the props they get. Everything on this page is the contract add-ons build against, and is kept stable.

Common props ("ctx")

Passed to slots, filters and views where noted:

Prop What it is
config window.SnipfireApp: restUrl, nonce, schema, siteUrl, toolsUrl, …
pro window.SnipfireApp.pro, or null without Snipfire Pro
access { level, canEdit, canPhp, canImport, canSettings, designHooks }
api REST client: api.request( method, path, body, query ) → Promise (path relative to snipfire/v1/), plus list, get, update, …, and api.url( path, query ) for links
toast toast( 'success' \| 'warning' \| 'error', message )
ask ask( { title, message, input?, confirmLabel, danger } ) → Promise: a confirm dialog
openView openView( name, { value, params } ) opens a registered view (routed as #/name/value?params)
openSnippet openSnippet( id ) opens a snippet (asks about unsaved changes)

Component slots

Filter snipfire.slot.<name>, starting value []. Return an array of React components (rendered with the slot's props) or elements. They're rendered in array order, in place.

Slot Where Props
settings.top Top of the settings panel draft, onChange( patch ), readOnly (bool), items, schema, config, pro, access, openSnippet
settings.afterWhere After How it runs / Where / Priority / Shortcode, before Load as same
settings.customHook Under the custom hook name field same
settings.bottom After Conditions same
editor.banners Under the toolbar, after the read-only banner, before the error banner draft, dirty, busy, readOnly (reason text or null), onChange( patch ), save( patch? ) → Promise (merges the patch, then saves), config, pro, access, api, toast
sidebar.itemBadges In each sidebar item, after the title item (snippet settings, no code), config, pro

Value filters

Filter snipfire.<name>:

Filter Arguments Returns
kinds kinds, { config, pro } The snippet kinds in the type picker and + New, in order: [ { kind, label, type, lang, language, tip } ]. kind is the id in #/new/<kind>; type/lang are what a new snippet gets; language is the Monaco language; tip() returns the hint under the editor
statusFilters filters, { config, pro } Sidebar status chips: [ { key, label, match( item ) } ]
toolbarStatus { label, className }, draft, { config, pro } Text next to the Active switch, and a class for its label (e.g. is-testing)
moreMenu items, ctx + { draft, readOnly } The ⋯ menu: [ { id, label, onClick, danger, disabled } ]. Built-in ids: duplicate, export, minimap, theme, settings, classic, delete
sidebarLinks links, ctx Sidebar footer links: [ { id, label, href } \| { id, label, onClick } ]. Built-in ids: tools, library, import, export, classic
views views, { config, pro, access } Extra full-width views: { name: { component } }. The component replaces the editor pane and gets ctx + { route: { value, params }, items, exists( id ), close(), reload() }. Names in use: snippet, new, import
draftChange next, patch, previous Every edit of the draft in the editor: return the draft to keep
historyFieldLabel label, field The name of a setting in the History view

Actions

Action snipfire.<name>:

Action Arguments When
monaco monaco, { formatCode( language, code, options ), emmetCSS, emmetHTML } Monaco has loaded (once, when the first editor opens). Register languages, formatters, Emmet, themes

Opening the editor pre-filled

Links can open a new snippet with settings filled in:

/wp-admin/admin.php?page=snipfire#/new/html?hook=woocommerce_before_cart&title=Cart%20notice
/wp-admin/admin.php?page=snipfire#/new/php?code=…

The hook finder uses this for Add HTML here and Add PHP on this hook.

Something unclear or missing? Tell us