Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/them-es/wordpress-blocks-boilerplate
Custom Blocks boilerplate for WordPress Themes or Plugins.
https://github.com/them-es/wordpress-blocks-boilerplate
gutenberg gutenberg-blocks gutenberg-boilerplate wordpress wordpress-blocks
Last synced: 2 months ago
JSON representation
Custom Blocks boilerplate for WordPress Themes or Plugins.
- Host: GitHub
- URL: https://github.com/them-es/wordpress-blocks-boilerplate
- Owner: them-es
- License: gpl-2.0
- Created: 2019-04-11T12:11:30.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-06T14:34:08.000Z (2 months ago)
- Last Synced: 2024-11-06T15:35:51.925Z (2 months ago)
- Topics: gutenberg, gutenberg-blocks, gutenberg-boilerplate, wordpress, wordpress-blocks
- Language: JavaScript
- Homepage: https://them.es
- Size: 39.1 KB
- Stars: 28
- Watchers: 5
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
> [!NOTE]
> The `main` branch is [only compatible with WordPress v6.6+](https://github.com/WordPress/gutenberg/blob/HEAD/packages/scripts/CHANGELOG.md#2800-2024-05-31).
## them.es WordPress Blocks
**them.es WordPress Blocks** is a WordPress "Gutenberg" blocks boilerplate which can be included in a theme (or plugin).
## What's included?
- Gutenberg blocks configuration tested in **WordPress v6.6+**
- **All legacy boilerplates have been archived in the following branches: WordPress <6.6 ("v2" branch) and WordPress <5.8 ("v1" branch)**
- NPM configuration
- ESNext
- Support for a category where all custom blocks can be organized
- A simple "Hello world" block implementation is included
- Optional: Easily add more blocks
## Setup
- Prerequisites: [Node.js](https://nodejs.org) (NPM) needs to be installed on your system
- [Download](https://github.com/them-es/wordpress-blocks-starter/archive/master.zip) the source code of this repository to a **new directory** (e.g. `/blocks`)
- Add the following code snippet to `functions.php` in your theme (or reference it in your plugin index file)
```
$theme_blocks = __DIR__ . '/blocks/index.php';
if ( is_readable( $theme_blocks ) ) {
require_once $theme_blocks;
}
```
- Open the `blocks` directory in Terminal and install the required Node.js dependencies:
- `$ npm install`
- A simple `Hello world` block implementation is included to get you started. More examples can be found in the official [Gutenberg examples repository](https://github.com/WordPress/gutenberg-examples)
- You can include additional blocks by duplicating `/src/#####`
- Run the **`start`** script:
- `$ npm run start`
- Develop the block(s) by modifying `/src/#####/index.js` - the official [Gutenberg Handbook](https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/writing-your-first-block-type) may help you learn how to build a custom block
- When you're done run the **`build`** script to create a minified version of your blocks:
- `$ npm run build`
- Test the block(s) in the WordPress Editor
## Technology
- [WordPress Scripts](https://github.com/WordPress/gutenberg/tree/master/packages/scripts), [GPLv2+](https://github.com/WordPress/gutenberg/blob/master/packages/scripts/package.json)
- [Gutenberg](https://wordpress.org/gutenberg/handbook/designers-developers/developers), [GPLv2+](https://github.com/WordPress/gutenberg/blob/master/LICENSE.md)
## Copyright & License
Code and Documentation © [them.es](https://them.es)
Code released under [GPLv2+](https://www.gnu.org/licenses/gpl-2.0.html)