Skip to content
This repository has been archived by the owner on Jan 27, 2024. It is now read-only.

Latest commit

 

History

History
97 lines (74 loc) · 5.98 KB

README.md

File metadata and controls

97 lines (74 loc) · 5.98 KB
Raw

Wholesome Boilerplate

Wholesome Boilerplate is a WordPress plugin boilerplate that supports best practices and a modern workflow.

Created by Matt Watson (@mattwatsoncodes) - Wholesome Code (@wholesomecode).

Features

Starter Code

An example settings panel that uses WordPress Editor (Gutenberg) Blocks

Inspired by the CodeinWP article Making a “Plugin Options Page” With Gutenberg Components by Hardeep Asrani the boilerplate contains an example settings page built with WordPress Editor (Gutenberg) blocks.

Block based settings panel

An example block editor plugin (sidebar)

The boilerplate contains an example custom sidebar plugin named Example Sidebar, this contains some quick start configuration, and inline documentation.

Custom sidebar

An example block

The boilerplate contains an example block named Example, this block contains some quick start configuration, and inline documentation.

Basic Block with Inspector and Block Controls

Lots of inline documentation

The boilerplate is not shy about telling you how something is done, or where the inspiration for the approach came from. Every file in this plugin is crammed with inline documentation to help you quickly find your feet.

Extensive webpack based tooling

  1. Extends the @wordpress/create-block npm script.
  2. A custom webpack configuration that has the following features:
  3. Extend wp-scripts to compile build and transpile JS.
  4. JS linting and fixing, configured via the /.stylelintrc file.
  5. JS minification.
  6. Prevent incorrect file creation.
  7. SCSS linting and fixing, configured via the /.eslintrc file.
  8. SCSS compile and build.
  9. CSS autoprefix and polyfills.
  10. CSS minification.
  11. Friendly Webpack errors.
  12. Multiple JS and CSS endpoints to support multiple enqueue types, more on this in a moment.
  13. SCSS and JS linting advice appears directly in the terminal while your code is compiling with npm start.
  14. PHP coding standards autofix and linting by using the npm run wpcs command (dependent on the correct installation and", configuration of phpcs and the WordPress coding standards).

An enqueue for everything

The /inc/namespace.php file enqueues several file types. Just remove the parts you don't need from this and webpack.

  1. block-styles.scss: styles for the front end and the block editor.
  2. block-editor.js: scripts for the block editor, with localization for custom settings, and auto enquing of WordPress block editor (Gutenberg) dependencies (thanks to @wordpress/create-block under the hood).
  3. block-editor.scss: styles for the block editor only.
  4. scripts.js: scripts for the front end of the site.
  5. styles.scss: styles for the front end of the site.
  6. admin.js: scripts for WordPress Admin area, with localization for custom settings, and auto enquing of WordPress block editor (Gutenberg) dependencies (thanks to @wordpress/create-block under the hood).
  7. admin.scss: styles for the WordPress Admin area.
  8. customizer.js: scripts for the Customizer screen.
  9. customizer.scss: styles for the Customizer screen.
  10. classic-editor.scss: styles for the classic editor TinyMCE textarea.

Get up and running quickly in the WordPress.org repository

The readme.txt file in the root of the template is the default generated by @wordpress/create-block with a few added tweaks.

This file is used for the displaying the plugin on the WordPress.org plugin repository.

Note that the /assets/ folder contains files specific to the WordPress.org plugin repository. These are:

  1. banner-1544x500.png: High definition version of the WordPress.org plugin repository banner image.
  2. banner-772x250.png: Standard definition version of the WordPress.org plugin repository banner image.
  3. icon-128x128.png: Standard definition version of the WordPress.org plugin repository icon image.
  4. icon-256x256.png: High definition version of the WordPress.org plugin repository icon image.
  5. screenshot-1.png: A plugin screenshot, supports png, jpg, jpeg, gif.
  6. screenshot-2.png: A second plugin screenshot, supports png, jpg, jpeg, gif.

Namespace driven architecture.

Inspired by the Human Made Engineering Handbook on Namespaced File Naming, the structure of this boilerplate uses the namespace based architecture.

Quick start

  1. Download or clone Wholesome Boilerplate from GitHub (https://github.com/wholesomecode/wholesome-boilerplate) into your WordPress plugins folder.
  2. Using the terminal cd into the plugins/wholesome-boilerplate folder and run npm start
  3. In the WordPress admin dashboard activate the Wholesome Boilerplate plugin.
  4. In the WordPress admin dashboard navigate into the settings menu option and view the example settings page.
  5. Edit a post or page in WordPress and note the 'Example' block.
  6. Edit a post or page in WordPress and note the 'Example' custom sidebar.
  7. Edit and add to the Wholesome Boilerplate to be your next best WordPress plugin.

Roadmap

Planned progress can be found on the project kanban board: https://github.com/wholesomecode/wholesome-boilerplate/projects/1

Requesting bugs / features

Just create a GitHub issue in the repository: https://github.com/wholesomecode/wholesome-boilerplate/issues