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
Clone the repo git clone git@github.com:ryanwelcher/gutenberg-snippets.git
Install dependencies npm install
Generate the snippets npm run generate
Package the extension npm run package
Install the package npm run loadYou need to have the code command line tool installedSee here for instructions
Reload VSCode.
Note that components that are marked as deprecated or experimental are not included in the snippets.
Snippets
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.
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
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.
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
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
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
Install the dependencies: npm install
DO WORK!
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 } />