├── .editorconfig ├── .eslintrc ├── .github └── workflows │ └── main.yml ├── .gitignore ├── .vscode ├── Front Matter.code-snippets ├── launch.json └── settings.json ├── .vscodeignore ├── README.md ├── assets └── icon.png ├── package-lock.json ├── package.json ├── snippet-data ├── api │ ├── block-variations.snip │ ├── dom-ready.snip │ ├── format-api.snip │ ├── plugin.snip │ └── register-command.snip ├── block-editor │ ├── inspector-controls.snip │ ├── rich-text-content.snip │ └── rich-text.snip ├── blocks │ ├── get-categories.snip │ ├── set-categories.snip │ └── set-default-block-name.snip ├── components │ ├── alignment-matrix-control.snip │ ├── angle-picker-control.snip │ ├── animate.snip │ ├── autocomplete.snip │ ├── base-control.snip │ ├── button-group.snip │ ├── button.snip │ ├── checkbox-control.snip │ ├── color-indicator.snip │ ├── color-palette.snip │ ├── color-picker.snip │ ├── combobox-control.snip │ ├── custom-select-controls.snip │ ├── dashicon.snip │ ├── date-time-picker.snip │ ├── disabled.snip │ ├── draggable.snip │ ├── dropdown-menu.snip │ ├── dropdown.snip │ ├── dropzone.snip │ ├── duotone-picker-swatch.snip │ ├── external-link.snip │ ├── focal-point-picker.snip │ ├── font-size-picker.snip │ ├── form-file-upload.snip │ ├── form-toggle.snip │ ├── form-token-field.snip │ ├── guide.snip │ └── panel-body.snip ├── core-data │ └── get-current-user.snip ├── data │ └── get-embed-preview.snip ├── js │ └── requestAnimationFrame.snip ├── json │ ├── block.snip │ └── theme.snip ├── notices │ ├── create-error-notice.snip │ ├── create-info-notice.snip │ ├── create-notice.snip │ ├── create-success-notice.snip │ ├── create-warning-notice.snip │ ├── get-notices.snip │ └── remove-notice.snip ├── php │ ├── admin-screen.snip │ ├── debug.snip │ ├── enqueue-asset-plugin.snip │ ├── enqueue-asset-theme.snip │ └── view-script-enqueue.snip ├── structure │ ├── block-edit.snip │ ├── block-save.snip │ └── get-data.snip └── webpack │ └── custom-entry-points.snip ├── snippets ├── api.json ├── block-editor.json ├── blocks.json ├── components.json ├── core-data.json ├── data.json ├── js.json ├── json.json ├── notices.json ├── php.json ├── structure.json └── webpack.json └── src ├── constants.js ├── generate-readme.js ├── generate-snippets.js └── lint-snippet-data.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ] 3 | } -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: CI 4 | 5 | # Controls when the workflow will run 6 | on: 7 | # Triggers the workflow on push or pull request events but only for the trunk branch 8 | push: 9 | branches: [ trunk ] 10 | pull_request: 11 | branches: [ trunk ] 12 | 13 | # Allows you to run this workflow manually from the Actions tab 14 | workflow_dispatch: 15 | 16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 17 | jobs: 18 | # This workflow contains a single job called "build" 19 | Linting: 20 | # The type of runner that the job will run on 21 | runs-on: ubuntu-latest 22 | 23 | # Steps represent a sequence of tasks that will be executed as part of the job 24 | steps: 25 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 26 | - uses: actions/checkout@v2 27 | - uses: actions/setup-node@v1 28 | with: 29 | node-version: 14 30 | 31 | 32 | # Install 33 | - name: NPM install 34 | run: npm ci 35 | 36 | # Runs a set of commands using the runners shell 37 | - name: Lint JS and snippet data 38 | run: npm run lint 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | test/* 4 | *.vsix 5 | -------------------------------------------------------------------------------- /.vscode/Front Matter.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Add new snippet": { 3 | "prefix": "snip", 4 | "body": [ 5 | "---", 6 | "title: ${1:component}", 7 | "prefix: wp.${2:package}|${2:package}|${1:component}", 8 | "description: ${3:Insert a ${1:component}}", 9 | "---", 10 | "", 11 | "\\$LINE_COMMENT @see ${4:reference-link}", 12 | "", 13 | "${5:snippet}" 14 | ], 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Run Extension", 6 | "type": "extensionHost", 7 | "request": "launch", 8 | "runtimeExecutable": "${execPath}", 9 | "args": [ 10 | "--extensionDevelopmentPath=${workspaceFolder}" 11 | ] 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "[css][scss][javascript][json][markdown][yaml][json]": { 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.formatOnSave": true 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .gitignore 3 | snippet-data/** 4 | src/** 5 | .eslintrc 6 | .editorconfig 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Modern WordPress Development Snippets 2 | 3 | VSCode snippets for modern WordPress development and [Gutenberg](https://wordpress.org/gutenberg/). This is by no means an exhaustive list. It's mostly the items I use during my [live streams](https://www.twitch.tv/ryanwelchercodes) and random projects 4 | 5 | ## Props 6 | 7 | This project was heavily inspired by the [wordpress-components-snippets](https://github.com/ItsJonQ/wordpress-components-snippets) extension and steals the same approach to managing and building the snippets. Thanks to [Q](https://github.com/ItsJonQ/) for the groundwork! 8 | 9 | ## Installation 10 | 11 | 1. Clone the repo `git clone git@github.com:ryanwelcher/gutenberg-snippets.git` 12 | 2. Install dependencies `npm install` 13 | 3. Generate the snippets `npm run generate` 14 | 4. Package the extension `npm run package` 15 | 5. Install the package `npm run load` **You need to have the `code` command line tool installed** [See here for instructions](https://code.visualstudio.com/docs/setup/setup-overview) 16 | 6. Reload VSCode. 17 | 18 | Note that components that are marked as deprecated or experimental are not included in the snippets. 19 | 20 | 21 | 22 | ## Snippets 23 | ### api 24 | | Name | Snippet(s) | Description | 25 | | --- | --- | --- | 26 | | registerBlockVariation | `rw`,`variation` | Register a block variation 27 | | DomReady | `rw`,`domready` | Setup domReady 28 | | registerFormatType | `rw`,`format` | Register a format type 29 | | registerPlugin | `rw`,`registerPlugin` | Register a plugin for slotfill 30 | | Command Pallette | `rw`,`command` | Register a command 31 | 32 | ### block-editor 33 | | Name | Snippet(s) | Description | 34 | | --- | --- | --- | 35 | | InspectorControls | `rw`,`wp_blockEditor`,`InspectorControls` | Inspector Controls appear in the post settings sidebar when a block is being edited 36 | | RichText.Content | `rw`,`wp_blockEditor`,`block-editor`,`RichText` | Inserts a RichText component. 37 | | RichText | `rw`,`wp_blockEditor`,`block-editor`,`RichText` | Inserts a RichText component. 38 | 39 | ### blocks 40 | | Name | Snippet(s) | Description | 41 | | --- | --- | --- | 42 | | getCategories | `rw`,`wp_blocks`,`getCategories` | Returns all the available block categories. 43 | | setCategories | `rw`,`wp_blocks`,`setCategories` | Returns an action object used to set block categories. 44 | | setDefaultBlockName | `rw`,`wp_blocks`,`setDefaultBlockName` | Returns an action object used to set the default block name. 45 | 46 | ### components 47 | | Name | Snippet(s) | Description | 48 | | --- | --- | --- | 49 | | Alignment Matrix Control | `rw`,`wp_components`,`components`,`AlignmentMatrixControl` | AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI. 50 | | 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. 51 | | Animate | `rw`,`wp_components`,`components`,`Animate` | Simple interface to introduce animations to components. 52 | | Autocomplete | `rw`,`wp_components`,`components`,`Autocomplete` | This component is used to provide autocompletion support for a child input component. 53 | | BaseControl | `rw`,`wp_components`,`components`,`BaseControl` | BaseControl component is used to generate labels and help text for components handling user inputs. 54 | | 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. 55 | | Button | `wp.components`,`components`,`Button` | Buttons let users take actions and make choices with a single click or tap. 56 | | CheckboxControl | `wp.components`,`components`,`CheckboxControl` | Checkboxes allow the user to select one or more items from a set. 57 | | ColorIndicator | `wp.components`,`components`,`ColorIndicator` | Displays a color. 58 | | ColorPalette | `wp.components`,`components`,`ColorPalette` | Display a color palette 59 | | 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. 60 | | 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. 61 | | 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