Modern WordPress Development Snippets

VSCode snippets for modern WordPress development and Gutenberg. This is by no means an exhaustive list. It's mostly the items I use during my live streams and random projects

Props

This project was heavily inspired by the wordpress-components-snippets extension and steals the same approach to managing and building the snippets. Thanks to Q for the groundwork!

Installation

1. Clone the repo git clone [email protected]:ryanwelcher/gutenberg-snippets.git
2. Install dependencies npm install
3. Generate the snippets npm run generate
4. Package the extension npm run package
5. Install the package npm run load You need to have the code command line tool installed See here for instructions
6. Reload VSCode.

Note that components that are marked as deprecated or experimental are not included in the snippets.

Snippets

api

Name	Snippet(s)	Description
registerBlockVariation	rw,variation	Register a block variation
DomReady	rw,domready	Setup domReady
registerFormatType	rw,format	Register a format type
registerPlugin	rw,registerPlugin	Register a plugin for slotfill
Command Pallette	rw,command	Register a command

block-editor

Name	Snippet(s)	Description
InspectorControls	rw,wp_blockEditor,InspectorControls	Inspector Controls appear in the post settings sidebar when a block is being edited
RichText.Content	rw,wp_blockEditor,block-editor,RichText	Inserts a RichText component.
RichText	rw,wp_blockEditor,block-editor,RichText	Inserts a RichText component.

blocks

Name	Snippet(s)	Description
getCategories	rw,wp_blocks,getCategories	Returns all the available block categories.
setCategories	rw,wp_blocks,setCategories	Returns an action object used to set block categories.
setDefaultBlockName	rw,wp_blocks,setDefaultBlockName	Returns an action object used to set the default block name.

components

Name	Snippet(s)	Description
Alignment Matrix Control	rw,wp_components,components,AlignmentMatrixControl	AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
AnglePickerControl	rw,wp_components,components,AnglePickerControl	AnglePickerControl is a React component to render a UI that allows users to pick an angle. Users can choose an angle in a visual UI with the mouse by dragging an angle indicator inside a circle or by directly inserting the desired angle in a text field.
Animate	rw,wp_components,components,Animate	Simple interface to introduce animations to components.
Autocomplete	rw,wp_components,components,Autocomplete	This component is used to provide autocompletion support for a child input component.
BaseControl	rw,wp_components,components,BaseControl	BaseControl component is used to generate labels and help text for components handling user inputs.
ButtonGroup	rw,wp_components,components,ButtonGroup	ButtonGroup can be used to group any related buttons together. To emphasize related buttons, a group should share a common container.
Button	wp.components,components,Button	Buttons let users take actions and make choices with a single click or tap.
CheckboxControl	wp.components,components,CheckboxControl	Checkboxes allow the user to select one or more items from a set.
ColorIndicator	wp.components,components,ColorIndicator	Displays a color.
ColorPalette	wp.components,components,ColorPalette	Display a color palette
ColorPicker	wp.components,components,ColorPicker	ColorPicker is a color picking component based on react-colorful. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.
ComboboxControl	wp.components,components,ComboboxControl	ComboboxControl is an enhanced version of a SelectControl, with the addition of being able to search for options using a search input.
CustomSelectControl	wp.components,components,CustomSelectControl	CustomSelectControl allows users to select an item from a single-option menu just like SelectControl, with the addition of being able to provide custom styles for each item in the menu. This means it does not use a native , so should only be used if the custom styling is necessary.
Dashicon	wp.components,components,Dashicon	add description
DateTimePicker	wp.components,components,DateTimePicker	DateTimePicker is a React component that renders a calendar and clock for date and time selection. The calendar and clock components can be accessed individually using the DatePicker and TimePicker components respectively.
Disabled	wp.components,components,Disabled	Disabled is a component which disables descendant tabbable elements and prevents pointer interaction.
Draggable	wp.components,components,Draggable	Draggable is a Component that provides a way to set up a a cross-browser (including IE) customisable drag image and the transfer data for the drag event. It decouples the drag handle and the element to drag. Use it by wrapping the component that will become the drag handle and providing the DOM ID of the element to drag.
DropdownMenu	wp.components,components,DropdownMenu	The DropdownMenu displays a list of actions (each contained in a MenuItem, MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover after the user has interacted with an element (a button or icon) or when they perform a specific action.
Dropdown	wp.components,components,Dropdown	Dropdown is a React component to render a button that opens a floating content modal when clicked.
Dropzone	wp.components,components,Dropzone	DropZone is a Component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event.
DuotonePicker & DuotoneSwatch	wp.components,components,DuotonePicker,DuotoneSwatch	add description
ExternalLink	wp.components,components,ExternalLink	add description
FocalPointPicker	wp.components,components,FocalPointPicker	Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.
FontSizePicker	wp.components,components,FontSizePicker	FontSizePicker is a React component that renders a UI that allows users to select a font size
FormFileUpload	wp.components,components,FormFileUpload	Renders a FormFileUpload
FormToggle	wp.components,components,FormToggle	Renders a FormToggle
FormTokenField	wp.components,components,FormTokenField	A FormTokenField is a field similar to the tags and categories fields in the interim editor chrome, or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.
Guide	wp.components,components,Guide	Guide is a React component that renders a user guide in a modal.
PanelBody	rw,wp_components,PanelBody	The PanelBody creates a collapsible container that can be toggled open or closed.

core-data

Name	Snippet(s)	Description
getCurrentUser	rw,wp_coreData,getCurrentUser	Returns the current user

data

Name	Snippet(s)	Description
getEmbedPreview	rw,wp_data,getEmbedPreview	add description

js

Name	Snippet(s)	Description
requestAnimationFrame	rw,animate	requestAnimationFrame

json

Name	Snippet(s)	Description
Generate block.json file	rw,wp,json,block	Generates the contents of a block.json file
Generate a basic theme.json file	rw,wp,json,theme	Generates the contents of a theme.json file

notices

Name	Snippet(s)	Description
createErrorNotice	rw,wp_notices,createErrorNotice	Returns an action object used in signalling that an error notice is to be created. Refer to createNotice for options documentation.
createInfoNotice	rw,wp_notices,wp_data,createInfoNotice	Returns an action object used in signalling that an info notice is to be created. Refer to createNotice for options documentation.
createNotice	rw,wp_notices,wp_data,createNotice	Returns an action object used in signalling that a notice is to be created.
createSuccessNotice	rw,wp_notices,wp_data,createSuccessNotice	Returns an action object used in signalling that a success notice is to be created. Refer to createNotice for options documentation.
createWarningNotice	rw,wp_notices,wp_data,createWarningNotice	Returns an action object used in signalling that a warning notice is to be created. Refer to createNotice for options documentation.
getNotices	rw,wp_notices,wp_data,getNotices	Returns all notices as an array, optionally for a given context. Defaults to the global context.
removeNotice	rw,wp_notices,wp_data,removeNotice	Returns an action object used in signalling that a notice is to be removed.

php

Name	Snippet(s)	Description
Admin Screen	rw,screen	Register a new admin screen
Insert WordPress debug constants	rw,wp,debug	Inserts the WP_DEBUG and WP_DEBUG_LOG and other debug related constants.
Enqueue a script from a plugin in the block editor	rw,wp,php,enqueue-from-plugin	Enqueues a script in the block editor stored in a plugin
Enqueue a script from a theme in the block editor	rw,wp,php,enqueue-from-plugin	Enqueues a script in the block editor stored in a theme
Enqueue a viewScript file	rw,wp,enqueue,viewScript	Enqueue the viewScript file for a dynamic block

structure

Name	Snippet(s)	Description
Block Edit component	rw,block,edit	Create an Edit component for custom block development.
Block Save component	rw,block,save	Create a Save component for custom block development.
Retrieve from the WordPress datastore	rw,wp,getEntityRecords,get-data	Add getEntityRecords selector with isLoading and invalidateResolution.

webpack

Name	Snippet(s)	Description
Custom entry points	rw,webpack,entrypoints	Create a webpack config with custom entry points

Development

1. Install the dependencies: npm install
2. DO WORK!
3. Generate the updated snippets: npm run generate

The snippets are stored in the snippet-data directory in a subdirectory that corresponds to the snippet's category. For example, the components that are part of the @wordpress/components package are stored in the components directory, PHP related snippets are stored in the php directory and so on.

To add a new snippet category, simply add a new directory to the snippet-data directory and update the package.json file to include the new category to the contributes.snippets array.

To add a new snippet to any category, create a new file called {snippet}.snip. Please use a name that makes it clear what the snippet represents. For example, a snippet for the <Button /> component would be named button.snip.

Once the file has been created, there is a custom snippet for the workspace that will automatically add the snippet to the snippet file. Trigger it by typing snip in the new file. Please use this scaffold as a starting point to keep the format consistent.

The .snip files use front-matter to store the data about the snippet

Raw snippet file:

---
title: Alignment Matrix Control
prefix: wp.components|AlignmentMatrixControl
description: AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
---

$LINE_COMMENT Reference: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/alignment-matrix-control",

import { AlignmentMatrixControl } from '@wordpress/components';

<AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />

Converts to in snippet file:

"Alignment Matrix Control": {
    "prefix": [
      "wp.components",
      "AlignmentMatrixControl"
    ],
    "description": "AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.",
    "body": [
      "$LINE_COMMENT Reference: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/alignment-matrix-control\",",
      "",
      "import { AlignmentMatrixControl } from '@wordpress/components';",
      "",
      "<AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />"
    ]
},

Note that the prefix is pipe-delimited and is converted to an array in the json.

Inserted Snippet:

// Reference: https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/alignment-matrix-control",

import { AlignmentMatrixControl } from '@wordpress/components';

<AlignmentMatrixControl value={ alignment } onChange={ setAlignment } />;