Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/widilo/widilo-gutenberg-boilerplate
Gutenberg Blocks Boilerplate Plugin
https://github.com/widilo/widilo-gutenberg-boilerplate
blocks boilerplate gutenberg gutenberg-blocks wordpress wordpress-plugin
Last synced: 6 days ago
JSON representation
Gutenberg Blocks Boilerplate Plugin
- Host: GitHub
- URL: https://github.com/widilo/widilo-gutenberg-boilerplate
- Owner: widilo
- License: other
- Created: 2022-09-25T09:04:20.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-10T06:58:32.000Z (about 2 years ago)
- Last Synced: 2024-12-14T16:36:59.175Z (10 days ago)
- Topics: blocks, boilerplate, gutenberg, gutenberg-blocks, wordpress, wordpress-plugin
- Language: JavaScript
- Homepage: https://github.com/widilo/widilo-gutenberg-boilerplate
- Size: 88.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# widilo® Gutenberg Boilerplate (widilo-gutenberg-boilerplate)
A boilerplate for the time-saving creation of WordPress Gutenberg Blocks or plugins for the Gutenberg Block Editor.
## Installation:
1. Login to your WP installation via SSH/Terminal
2. Switch to the WP plugin directory (wp-content/plugins)
3. Install our boilerplate plugin using the following command:
`npm i @widilo/widilo-gutenberg-boilerplate`
4. After installation you can activate the boilerplate plugin in your WordPress backend or via WP-CLI.
With **widilo-gutenberg-boilerplate** you can add Gutenberg blocks, custom fields and other functionalities to the Gutenberg editor or your WordPress site very quickly, effectively and easily.
## Usage
All gutenberg blocks are organized in the plugins folder **wp-content/plugins/widilo-gutenberg-boilerplate/blocks**. Inside the **blocks** folder you can create individual folders and files for every block you want to add.
As an example we have created a block called **widilo Boilerplate Block** -> widilo-gutenberg-boilerplate/blocks/boilerplate-block/boilerplate_block.js.
Feel free to change the **widilo Boilerplate Block** to your needs. Therefore open **boilerplate_block.js** -> widilo-gutenberg-boilerplate/blocks/boilerplate-block/boilerplate-block.js.
You can change the title of your block, the block icon, the category and the block content as you wish.
After you have finished your changes, run `npm run dev` in the plugin folder to make the magic happen.
boilerplate_block.js:
```javascript
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
registerBlockType( 'widilo-gutenberg-boilerplate/block-boilerplate-block', {
title: __( 'widilo Boilerplate Block', 'widilo_gutenberg_boilerplate' ),
icon: 'marker',
category: 'common',
keywords: [
__( 'widilo Boilerplate Block', 'widilo_gutenberg_boilerplate' ),
__( 'boilerplate-block', 'widilo_gutenberg_boilerplate' ),
],
edit: function( props ) {
return (
{ __(`This is an example Gutenberg Block. Feel free to change it to your needs. Therefore open your plugins folder -> widilo-gutenberg-boilerplate -> blocks -> boilerplate-block -> boilerplate-block.js. You can change the title of your block, the block icon, the category and the block content as you wish. After you have finished your changes, run 'npm run dev' in the plugin folder to make the magic happen.`, 'widilo_gutenberg_boilerplate') }
);
},
save: function( props ) {
return (
{ __(`This is an example Gutenberg Block. Feel free to change it to your needs. Therefore open your plugins folder -> widilo-gutenberg-boilerplate -> blocks -> boilerplate-block -> boilerplate-block.js. You can change the title of your block, the block icon, the category and the block content as you wish. After you have finished your changes, run 'npm run dev' in the plugin folder to make the magic happen.`, 'widilo_gutenberg_boilerplate') }
);
},
} );
```
If you want to create your own block you can simply make a copy of the **boilerplate-block** folder. Please make sure to change the name of the folder and the name of the js file inside your new, renamed block folder after copying.
## npm
https://www.npmjs.com/package/@widilo/widilo-gutenberg-boilerplate
## What's next?
We will add additional block examples in the next version : )
## Changelog:
1.0.0
-
1.0.1
- Update README.md
1.0.2, 1.0.3, 1.0.4
- Update README.md
- Update "devDependencies" in package.json
- Add / update license.txt
1.0.5
- Update README.md
- Update package.json
## License
GPL v.3 or later
**widilo® Gutenberg Boilerplate** (widilo-gutenberg-boilerplate)
Copyright (C) 2022 widilo® Muennecke & Vollmers GbR