Free WordPress Gutenberg block-type Plugin Boilerplate for Developers.

Overview

ClioWP Blocks Boilerplate

ClioWP Blocks Boilerplate is a Free WordPress Gutenberg block-type Plugin Boilerplate for Developers.

Links

How to use it

In order to create a custom Gutenberg block, actually, you have to create a plugin. A block-type WordPress plugin.

Official documentation: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/

  • Create a folder in wp-content/plugins for your block-type plugin
  • Copy boilerplate in this folder
  • Define your project with npm init (this will create package.json file)
  • Install @wordpress/scripts npm install @wordpress/scripts --save-dev
  • Add start and build scripts in package.json
  "scripts": {
    "start": "wp-scripts start src/editor.js src/frontend.js",
    "build": "wp-scripts build src/editor.js src/frontend.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  • Run npm run start

Details at: https://www.pontikis.net/blog/how-to-write-js-and-css-in-wordpress-with-industry-standard-tools

The block.json file

block.json (in the root of your plugin folder) is the canonical way to register a block-type plugin since WordPress 5.8

This file allows your plugin to be included in WordPress block directory https://wordpress.org/plugins/browse/block/

Also it makes assets (JS and CSS) management more easy.

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "cliowp-blocks/boilerplate",
    "title": "Hello Gutenberg",
    "category": "common",
    "icon": "universal-access",
    "description": "Free WordPress Gutenberg block-type Plugin Example for Developers",
    "editorScript": "file:./build/editor.js",
    "editorStyle": "file:./build/editor.css",
    "script": "file:./build/frontend.js",
    "style": "file:./build/frontend.css"
}
  • editorScript: Javascript will only be enqueued in the context of the editor.
  • editorStyle: CSS will only be enqueued in the context of the editor.
  • script: Javascript will be enqueued both in the editor the front end.
  • style: CSS will be enqueued both in the editor the front end.
  • icon: from Dashicons without the dashicon- prefix https://developer.wordpress.org/resource/dashicons

As you can see in the official documentation

  • there is a viewScript property, but it will not be used if you are using a PHP render callback
  • there is not (at least for now) a viewStyle property (WordPress/gutenberg#41236)

So, I use script and style for front end assets.

Reference: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/

You might also like...
A boilerplate single php file for all your needs, no frameworks, no libraries.

SINGLE PHP FILE A boilerplate single php file for all your needs, no frameworks, no libraries. Avoid repetitive work It is a well known architecture d

High scalable boilerplate for Laravel - Vue using laravel-mix.

Why use this ? This boilerplate make developer easier to make monolith Laravel project which integrated with Vue.js and vue-router as default front-en

A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:
A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:

Laravel Vue Sanctum SPA Laravel and vue spa using tailwind (laravel/ui looks) for styling and sanctum for authentification Features Laravel 8 Vue + Vu

Laravel Boilerplate with AdminLTE Theme

Welcome to FastLaravel Laravel Boilerplate for AdminLTE Theme Laravel Boilerplate with AdminLTE Theme with FastLaravel.

Modular Laravel - Boilerplate project starter

MODULAR About Modular Laravel This project is a personal blueprint starter with customized modular / SOA architecture. Kostadin Keljtanoski Install Yo

Boilerplate for a standard tested resourceful Laravel app

Gold Standard A Laravel boilerplate resource This repo is an example of what I consider to be my "gold standard" of a resource-oritented application w

Laravel and AngularJS Starter Application Boilerplate featuring Laravel 5.3 and AngularJS 1.5.8

💁 Zemke/starter-laravel-angular has been upgraded to AngularJS 1.5.8. 💁 Zemke/starter-laravel-angular has been upgraded to Laravel 5.3. You can pull

Laravel app boilerplate with email verification process on registration

The default master branch is for Laravel 5.4 , for Laravel 5.3 boilerplate switch to the v5.3 branch Laravel app boilerplate with email verification o

Laravel 5 boilerplate with front-end and back-end support

Laravel 5 Boilerplate with Skeleton framework Skeleton (as of now) Laravel 5 framework application. Application includes and/or are currently being us

Releases(v1.0.0)
Owner
Christos Pontikis
Full-Stack Web Development: Linux, Git, Apache, Php, MySQL, PostgreSQL, Vanilla JavaScript, Jquery, Bootstrap, WordPress, React.
Christos Pontikis
The Laravel Boilerplate Project - https://laravel-boilerplate.com

Laravel Boilerplate (Current: Laravel 8.*) (Demo) Demo Credentials Admin: [email protected] Password: secret User: [email protected] Password: secret Offici

Anthony Rappa 5.4k Dec 2, 2022
WP React Plugin Boilerplate - WordPress Setting via React and Rest API

WP React Plugin Boilerplate is a starter WordPress plugin to develop WordPress Plugin via React and Rest API. WP React Plugin Boilerplate WP React Plu

Santosh Kunwar 35 Nov 24, 2022
Hassle-free Laravel + Inertiajs + Svelte + TailwindCSS Boilerplate

Hassle-free Laravel + Inertiajs + Svelte + TailwindCSS Boilerplate

Michael S 45 Dec 6, 2022
There is no better way to learn than by watching other developers code live. Find out who is streaming next in the Laravel world.

Larastreamers This is the repository of https://larastreamers.com. It shows you who is live coding next in the Laravel world. Installation Steps clone

Christoph Rumpel 201 Nov 24, 2022
LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like Advanced CRUD Generation, Module Manager, Backups and many more.

LaraAdmin 1.0 LaraAdmin is a Open source CRM for quick-start Admin based applications with features like Advanced CRUD Generation, Schema Manager and

Dwij IT Solutions 1.5k Nov 3, 2022
A Laravel 5 package that switchs default Laravel scaffolding/boilerplate to AdminLTE template and Pratt Landing Page with Bootstrap 3.0

AdminLTE template Laravel package A Laravel package that switch default Laravel scaffolding / boilerplate to AdminLTE template with Bootstrap 3.0 and

Sergi Tur Badenas 1.8k Nov 4, 2022
:computer: :octocat: A hackathon/MVP boilerplate for laravel web applications. Start your hackathons without hassle.

Laravel Hackathon Starter - SUSUMU 進 If you have attended any hackathons in the past, then you know how much time it takes to get a project started: d

Prosper Otemuyiwa 1.6k Dec 7, 2022
A Laravel 5.8 API Boilerplate to create a ready-to-use REST API in seconds.

Laravel API Boilerplate (JWT Edition) for Laravel 5.8 Laravel API Boilerplate is a "starter kit" you can use to build your first API in seconds. As yo

Francesco Malatesta 1.2k Nov 17, 2022
Rest API boilerplate for Lumen micro-framework.

REST API with Lumen 5.5 A RESTful API boilerplate for Lumen micro-framework. Features included: Users Resource OAuth2 Authentication using Laravel Pas

Hasan Hasibul 484 Sep 16, 2022
:elephant: A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.

Laravel Vue Boilerplate A Laravel 6 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with: A users

Alefe Souza 530 Dec 4, 2022