https://github.com/wp-blocks/typescript-wp-block

A clean boilerplate for WordPress Blocks (Gutenberg Editor), in typescript
https://github.com/wp-blocks/typescript-wp-block

gutenberg typescript wordpress wp-block

Last synced: about 2 months ago
JSON representation

A clean boilerplate for WordPress Blocks (Gutenberg Editor), in typescript

• Host: GitHub
• URL: https://github.com/wp-blocks/typescript-wp-block
• Owner: wp-blocks
• License: gpl-3.0
• Created: 2023-01-12T16:05:46.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-08T13:09:50.000Z (12 months ago)
• Last Synced: 2024-04-13T15:33:31.721Z (9 months ago)
• Topics: gutenberg, typescript, wordpress, wp-block
• Language: TypeScript
• Homepage:
• Size: 316 KB
• Stars: 14
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Typescript WP-Block boilerplate

> A clean boilerplate for WordPress Blocks (Gutenberg Editor) 

## Features:

- 🪄️ **Typed** - Write you next WordPress block with next gen strongly typed javascript  

- 🛡️️ **Testable** - With unit and e2e tests already in place (with coverage checking)

- 🪶 **Lightweight** - Only what to you need to start your project, nothing else!

- 🎈 **No dependencies** - Dependencies tend to have dependencies endlessly and this can lead to security issues. This is a package, and it doesn't need anything else!

- 🚀 **Ready-to-go** - download, replace the string "boilerplate", install, and you are done!  

- 😎 **CI** - Continuous integration with multiple node builds and testing

- 📦 **Bundled** - Webpack optimized and minified build with types!

- 🪅 **Easy to use** - No extra skills required! You will build your own plugin according to your knowledge

### Setup:

clone the project into your plugin folder:

```shell

git clone https://github.com/your-username/typescript-wp-block.git

```

Then: 

- Rename the plugin folder with the chosen plugin name slug

- Do the same for the [typescript-wp-block.php](typescript-wp-block.php) file with the same string as the directory

- Replace every occurrence of word "boilerplate" with your own plugin name.

- Once the above points are completed, install with npm

```shell

npm install

```

and you are 🎉 Done!

---

### Getting started with WordPress Block Editor

https://developer.wordpress.org/block-editor/getting-started/

---

### LINKS

- Jest - https://jestjs.io/docs/getting-started

- WordPress e2e testing - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-e2e-test-utils/

- Typescript - https://www.typescriptlang.org/