UC Santa Cruz Service Blocks

A collection of WordPress blocks Service Block for UC Santa Cruz. Additional blocks may be added as use cases arise.

TL;DR

Assumes you already have a local environment.

cd wp-content/plugins/
git clone https://github.com/ucsc/ucsc-service-blocks.git
cd ucsc-service-blocks
npm install
composer install
npm run start

See package.json file for additional npm scripts. See composer.json file for composer scripts.

Current Blocks

UCSC Course Catalog -- a block for embedding a course catalog onto a post or page
UCSC Class Schedule -- a block for embedding a class schedule onto a post or page
UCSC Campus Directory -- a block for embedding a campus directory onto a post or page

Requirements

Cloning and installing this plugin requires:

Git
GitHub Cli (optional but helpful)
Node.js/npm (MacOS and Linux can install with Homebrew)
Composer

Getting Started

The following will cover preqrequisites, development environment setup, basic block development and how to contribute.

Local development environment

Block development will require a local WordPress development environment.

WP-ENV

@wordpress/env.

Localwp.com

https://localwp.com/ is a tool to spin up and manage local wp sites

Development Environment Setup (Local.wp)

Create a multisite local site with localwp
In order for PHP Intelephense to work in VS Code open it with in the public directory.

cd ~/Local\ Sites/kumar-demo/app/public/

code .

In vscode's terminal clone this repo into the plugin directory

cd wp-content/plugins/

git clone https://github.com/ucsc/ucsc-service-blocks.git

Install and start wp-scripts

cd ucsc-service-blocks

npm install

composer install

npm run start

Basic Block Development

As a reference a commit to adding a demo block to this repo can be found here: https://github.com/ucsc/ucsc-gutenberg-blocks/commit/10dafbecede6286ae2ad2868b58e61d90443dc08

This commit show's how to create a Dynamic Block vs a Static block. There are many benefits to using Dynamic Blocks, here are some resources discussing the benefits:

Instructions

Create a file in the classes/ to hold the PHP/Wordpress code.
- Actions can be added
- Blocks can be registered
- Site and Network settings
Include the new file in the index.php file and instantiate the class
Create a js file in src/blocks/ directory
- This file can import libs and components but is not a component itself
- Create and export a function where you can register the block.
- Make sure the name you are registering here matches the name you registered in PHP
In src/index.js import your function and call it so that the block gets registered.

How To Contribute

Create Feature branch git checkout -b "feature/site-level-admin-form"
Write code
- See Anatomy of a Custom Block
Check git diff to see files that have been modified.
Git add the files you have modified or added: git add <filename> <filename> <filename> or use git add . if all the modified files need to be checked in
Commit with a good message git commit -m "feat: ✨ Updating README"
push code to github: git push origin feature/site-level-admin-form
In GitHub create a PR into the main branch