BU labs-plugin-blocks (2024)

A skeleton / starter for creating plugins that can make use of Gutenberg blocks customized for Interactive Design (or not!)

Block aware labs-plugin-blocks using wp-scripts build; see https://github.com/bu-ist/id-gutenberg/issues/112

Stylesheet Structure

Blocks

There are styles for blocks broken up into a few different stylesheets:

• Block Shared Common Styles: These styles are for small elements that are shared across numerous blocks. It should be loaded as a dependency so it is included before the Block Base Styles.
• Block Base Styles: These styles control each block in both the frontend and editor.
  • Can be generated and enqueued with two options: Individual Block Stylesheets per block or a single "all_blocks" stylesheet for the entire project. This will require a decision to be made about our support for HTTP/2 vs HTTP/1. This structure is attempting to support both without refactoring the SASS.
• Block Decorative Styles: These styles extend each block with more opinionated styles and can be removed by a theme.
• Block Editor Styles: These styles are for making necessary adjustments to style a block in the Block Editor. It is only loaded in the Block Editor and overrides the base styles. These styles should be carefully targeted and minimal as much as possible.
  • blocks/<block-folder/>/editor.scss is compiled into build/<block-folder>/index.css and enqueued by block.json automatically.

Setup

Find and replace all plugin-specific code strings. These are case-sensitive and should not be limited to certain folders or file types as they exist in js, php, json, md, css/scss, dist, etc...

• rename the "index" file and folder
• PluginSlug - PascalCase; used for php ClassNames
• labs-plugin-blocks - lowecase-hyphen; used for text-domain, css class prefixes, phpdoc @package
• plugin_slug - lowecase_underscore; used for cmb2 prefixes, php function prefixes, php namespaces (note: you may need to add/edit the php namespace variations in /.phpcs.xml.dist see: https://github.com/bu-ist/bu-id-block-utils/blob/develop/.phpcs.xml.dist#L34-L39)
• PLUGIN_SLUG - UPPERCASE_UNDERSCORE; used for php constants

Note

This repo contains several optional files and folders that can speed up development. These can be removed without issue and should be if not used. These are:

• src/blocks/blockslug-static - Example block.
• src/blocks/blockslug-dynamic-render-a - Example block.
• src/blocks/blockslug-dynamic-render-b - Example block.
• src/blocks/blockslug-dynamic-norender - Example block.
• src/js/classic-editor.js - Classic editor only scripts.
• src/js/block-editor.js - Block editor only scripts.
• src/js/admin.js - Admin only scripts.

Linting Scripts

• npm run format - Formats source code in a consistent way using prettier.
• npm run lint - Runs all the following lint scripts:
• npm run lint:css - Lints css files using stylelint.
• npm run lint:html - Lints html inside php and js files using PHPCS.
• npm run lint:js - Lints js files using eslint.
• npm run lint:js:fix - Trys to fix as many issues as possible using eslint.
• npm run lint:md - Lints md files using markdownlint.
• npm run lint:php - Lints modified php files using PHPCS.
• npm run lint:php:all - Lints all php files using PHPCS.
• npm run lint:pkg - Lints package.json using npm-package-json-lint.

Build Scripts

• npm run start - Runs all the following watch scripts:
• npm run watch:scripts - Watches js and scss files for changes and compile uncompressed files when detected.
• npm run watch:theme - Watches theme.json files for changes and compile when detected.
• npm run build - Runs all the following build scripts:
• npm run build:theme - Builds the production ready theme.json file.
• npm run build:scripts - Builds compressed production ready css and js files.
• npm run build:i18n - Adds text domain to code and builds pot file.
• npm run build:version - Updates the version in style.css based on package version.