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 git@github.com: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

block-editor

blocks

components

core-data

data

js

json

notices

php

structure

webpack

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 } />;