Developer Notes

A collection of links, code snippets, and documentation of things we've learned along the way.

Deployment looks like this.

1. In theme directory, run npm run build && composer install
2. Release npm run release -- --release-as X.X.X-beta.X
   • Updates the CHANGELOG
   • Bumps version in NPM package
   • TODO: how to bump version in style.css?
3. Run npm run zip

• Added build directory to the repo and deploying from Github directly to the CampusPress Bitbucket repo.
• We need to add pre-deploy testing and code formatting

Helpful Links

Block Patterns

• Block Patterns Documentation

Styles (block and theme)

• Block Styles Documentation
• FSE: Global Style Variations

Building Block Themes

• An Introduction to WordPress Block Themes
• How to Use The @wordpress/scripts Build Tool with Custom WordPress Blocks

WordPress/PHP code formatting for VS Code

1. Install PHP_CodeSniffer
2. Install the WordPress Coding Standards in a permanent location in your filesystem. PHPCS will need to reference the location.
3. Add the WPCS path from above ⬆️ to PHPCS's installed_paths config setting.
4. Install PHPCS extension for VC Code
5. Add settings to VS Code (settings.json):

"phpcs.enable": true,
"phpcs.executablePath": "./vendor/bin/phpcs",
"phpcs.standard": "WordPress",
"phpcs.showWarnings": true,
"phpcs.composerJsonPath": "composer.json",

• https://publishing-project.rivendellweb.net/linting-wordpress-php-code/
• https://seravo.com/blog/coding-wordpress-in-style-with-phpcs/
• https://tommcfarlin.com/php-codesniffer/

Block Patterns

Official docs for 'patterns,' a way to group blocks into reusable patterns. Patterns are available everywhere you can use blocks.

Example code snippet for a reusable block

{
	"__file": "wp_block",
	"title": "UCSC Global Navigation",
	"content": "<!-- wp:navigation {\"textColor\":\"ucsc-primary-blue\",\"showSubmenuIcon\":false,\"layout\":{\"type\":\"flex\",\"justifyContent\":\"left\"},\"style\":{\"typography\":{\"textTransform\":\"capitalize\",\"fontStyle\":\"normal\",\"fontWeight\":\"600\",\"lineHeight\":\"1.2\",\"fontSize\":\"1.125rem\"}}} --> <!-- wp:navigation-link {\"label\":\"MyUCSC\", \"url\":\"https://my.ucsc.edu/\"} /--> <!-- wp:navigation-link {\"label\":\"All the People\", \"url\":\"https://www.ucsc.edu/tools/people.html\"} /--> <!-- wp:navigation-link {\"label\":\"Calendars\", \"url\":\"https://www.ucsc.edu/tools/calendars.html\"} /--> <!-- wp:navigation-link {\"label\":\"Maps\", \"url\":\"https://www.ucsc.edu/visit/maps-directions.html\"} /--> <!-- wp:navigation-link {\"label\":\"A-Z Index\", \"url\":\"https://www.ucsc.edu/tools/azindex.html\"} /--> <!-- /wp:navigation -->"
}