Block editor experimentation - #217
Conversation
This sets up a root-level package.json that will manage all the plugins' internal dependencies via workspaces. It allows us to only have one package-lock.json file, rather than one per plugin, which makes keeping dependencies in sync across plugins easier to achieve. It also saves a bit of space in the respository, as these files can be tens of thousands of lines long and largely duplicative.
73e60a8 to
fbac133
Compare
There was a problem hiding this comment.
🟡 Changes recommended
It introduces front-end console logging, React/Gutenberg JSX class prop usage that should be className, and an npm workspaces change that will break npm ci until the lockfile is updated.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR experiments with enabling Gutenberg/block-editor driven home page sections by switching the home template to output post content blocks, and scaffolding several custom block plugins (including CI enforcement that committed build artifacts are up to date).
Changes:
- Replaces the
page-home-v2.phphardcoded homepage markup withthe_content()so the homepage can be assembled via blocks. - Adds multiple custom “MITLIB” block plugins (hero, hours, using-the-libraries, featured/events, featured collection) plus their generated
build/artifacts. - Introduces a GitHub Actions workflow to ensure block build outputs are committed and current.
File summaries
| File | Description |
|---|---|
| web/app/themes/mitlib-parent/templates/page-home-v2.php | Switch homepage template to render block content. |
| web/app/plugins/mitlib-pull-hours/package.json | Adds workspace package config for block build in pull-hours plugin. |
| web/app/plugins/mitlib-pull-hours/mitlib-pull-hours.php | Registers block types from build manifest (plugin version bump). |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/view.js | Compiled front-end script for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/view.asset.php | Asset metadata for compiled front-end script. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/style-index.css | Compiled shared styles for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/style-index-rtl.css | Compiled RTL shared styles for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/index.js | Compiled editor script for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/index.css | Compiled editor-only styles for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/index.asset.php | Asset metadata for compiled editor script. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/index-rtl.css | Compiled RTL editor-only styles for hours block. |
| web/app/plugins/mitlib-pull-hours/build/mitlib-block-hours-section/block.json | Built block metadata for hours block. |
| web/app/plugins/mitlib-pull-hours/build/blocks-manifest.php | Built blocks manifest used for registration. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/view.js | Source front-end script for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/style.scss | Source shared styles for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/save.js | Source save markup for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/index.js | Source registration entry for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/editor.scss | Source editor-only styles for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/edit.js | Source editor UI for hours block. |
| web/app/plugins/mitlib-pull-hours/blocks/mitlib-block-hours-section/block.json | Source block metadata for hours block. |
| web/app/plugins/mitlib-pull-hours/.gitignore | Local ignore rules for block build tooling in plugin. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/view.js | Source front-end script for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/style.scss | Source shared styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/save.js | Source save markup for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/index.js | Source registration entry for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/editor.scss | Source editor-only styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/edit.js | Source editor UI for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/block.json | Source block metadata for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/readme.txt | Scaffolded plugin readme. |
| web/app/plugins/mitlib-block-using-the-libraries-section/package.json | Workspace package config for using-the-libraries plugin. |
| web/app/plugins/mitlib-block-using-the-libraries-section/mitlib-block-using-the-libraries-section.php | Registers block types from build manifest. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/view.js | Compiled front-end script for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/view.asset.php | Asset metadata for compiled front-end script. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/style-index.css | Compiled shared styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/style-index-rtl.css | Compiled RTL shared styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/index.js | Compiled editor script for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/index.css | Compiled editor-only styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/index.asset.php | Asset metadata for compiled editor script. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/index-rtl.css | Compiled RTL editor-only styles for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/mitlib-block-using-the-libraries-section/block.json | Built block metadata for using-the-libraries block. |
| web/app/plugins/mitlib-block-using-the-libraries-section/build/blocks-manifest.php | Built blocks manifest used for registration. |
| web/app/plugins/mitlib-block-using-the-libraries-section/.gitignore | Local ignore rules for plugin tooling. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/view.js | Source front-end script for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/style.scss | Source shared styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/save.js | Dynamic block save stub (renders via PHP). |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/render.php | Server-side render template for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/index.js | Source registration entry for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/editor.scss | Source editor-only styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/edit.js | Source editor UI for hero block. |
| web/app/plugins/mitlib-block-hero-section/src/mitlib-block-hero-section/block.json | Source block metadata for hero block. |
| web/app/plugins/mitlib-block-hero-section/readme.txt | Scaffolded plugin readme. |
| web/app/plugins/mitlib-block-hero-section/package.json | Workspace package config for hero plugin. |
| web/app/plugins/mitlib-block-hero-section/mitlib-block-hero-section.php | Registers block types from build manifest. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/view.js | Compiled front-end script for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/view.asset.php | Asset metadata for compiled front-end script. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/style-index.css | Compiled shared styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/style-index-rtl.css | Compiled RTL shared styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/render.php | Built server-side render template for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/index.js | Compiled editor script for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/index.css | Compiled editor-only styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/index.asset.php | Asset metadata for compiled editor script. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/index-rtl.css | Compiled RTL editor-only styles for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/mitlib-block-hero-section/block.json | Built block metadata for hero block. |
| web/app/plugins/mitlib-block-hero-section/build/blocks-manifest.php | Built blocks manifest used for registration. |
| web/app/plugins/mitlib-block-hero-section/.gitignore | Local ignore rules for plugin tooling. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/view.js | Source front-end script for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/style.scss | Source shared styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/save.js | Source save markup for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/index.js | Source registration entry for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/editor.scss | Source editor-only styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/edit.js | Source editor UI for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/block.json | Source block metadata for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/readme.txt | Scaffolded plugin readme. |
| web/app/plugins/mitlib-block-featured-collection-section/package.json | Workspace package config for featured-collection plugin. |
| web/app/plugins/mitlib-block-featured-collection-section/mitlib-block-featured-collection-section.php | Registers block types from build manifest. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/view.js | Compiled front-end script for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/view.asset.php | Asset metadata for compiled front-end script. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/style-index.css | Compiled shared styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/style-index-rtl.css | Compiled RTL shared styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/index.js | Compiled editor script for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/index.css | Compiled editor-only styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/index.asset.php | Asset metadata for compiled editor script. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/index-rtl.css | Compiled RTL editor-only styles for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/mitlib-block-featured-collection-section/block.json | Built block metadata for featured-collection block. |
| web/app/plugins/mitlib-block-featured-collection-section/build/blocks-manifest.php | Built blocks manifest used for registration. |
| web/app/plugins/mitlib-block-featured-collection-section/.gitignore | Local ignore rules for plugin tooling. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/view.js | Source front-end script for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/style.scss | Source shared styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/save.js | Dynamic block save stub (renders via PHP). |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/render.php | Server-side render template for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/index.js | Source registration entry for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/editor.scss | Source editor-only styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/edit.js | Source editor UI for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/src/mitlib-block-featured-and-events-section/block.json | Source block metadata for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/readme.txt | Scaffolded plugin readme. |
| web/app/plugins/mitlib-block-featured-and-events-section/package.json | Workspace package config for featured+events plugin. |
| web/app/plugins/mitlib-block-featured-and-events-section/mitlib-block-featured-and-events-section.php | Registers block types from build manifest. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/view.js | Compiled front-end script for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/view.asset.php | Asset metadata for compiled front-end script. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index.css | Compiled shared styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index-rtl.css | Compiled RTL shared styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/render.php | Built server-side render template for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index.js | Compiled editor script for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index.css | Compiled editor-only styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index.asset.php | Asset metadata for compiled editor script. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index-rtl.css | Compiled RTL editor-only styles for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/block.json | Built block metadata for featured+events block. |
| web/app/plugins/mitlib-block-featured-and-events-section/build/blocks-manifest.php | Built blocks manifest used for registration. |
| web/app/plugins/mitlib-block-featured-and-events-section/.gitignore | Local ignore rules for plugin tooling. |
| package.json | Adds npm workspaces/scripts for building blocks in CI. |
| .gitignore | Un-ignores new custom block plugins. |
| .github/workflows/ensure-build.yml | CI job to verify build/ artifacts are current. |
| .editorconfig | Adjusts editor config (PHP indentation settings). |
Review details
Files not reviewed (3)
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index.js: Generated file
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index-rtl.css: Generated file
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index.css: Generated file
- Files reviewed: 109/114 changed files
- Comments generated: 11
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| "workspaces": [ | ||
| "web/app/plugins/mitlib-block-*", | ||
| "web/app/plugins/mitlib-pull-hours" | ||
| ], |
| ?><section id="featured-and-events"> | ||
| <div class="content-wrapper"> | ||
| <div class="featured-content"> | ||
| <h2><?php echo esc_html( $attributes['heading'] ); ?></h2> |
| <section id="featured-collection"> | ||
| <div class="content-wrapper"> | ||
| <div class="featured-collection-image" role="img" aria-label="Architectural elevation of a house with two gables and two chimneys by Howe, Manning and Almy Architects, dated 1927." style="background-image: url('https://libraries.mit.edu/app/uploads/2026/07/Howe-Manning-Almy-1.jpg');"> | ||
| <span class="featured-collection-tag">Exhibit</span> | ||
| </div> |
| <div class="overlay"> | ||
| <div class="content-wrapper"> | ||
| <div class="hero-content"> | ||
| <h1><?php echo wp_kses_post( $attributes['heading'] ); ?></h1> |
| <section id="using-the-libraries"> | ||
| <div class="content-wrapper"> | ||
| <RichText.Content tagName="h2" value={ heading } /> | ||
| <div class="box-wrapper"> | ||
| <div class="option-boxes"> | ||
| <div> |
| <section id="todays-hours"> | ||
| <div class="content-wrapper"> | ||
| <RichText.Content tagName="h2" value={ heading } /> | ||
| <ol class="hours-list"> | ||
| <li> |
| * Plugin Name: Mitlib - Block - Featured Section | ||
| * Description: Displays the featured section with featured items and events feed |
| /* eslint-disable no-console */ | ||
| console.log( | ||
| 'Hello World! (from create-block-mitlib-block-featured-and-events-section block)' | ||
| ); | ||
| /* eslint-enable no-console */ |
| /* eslint-disable no-console */ | ||
| console.log( | ||
| 'Hello World! (from create-block-mitlib-block-hero-section block)' | ||
| ); | ||
| /* eslint-enable no-console */ |
| /* eslint-disable no-console */ | ||
| console.log( | ||
| 'Hello World! (from create-block-mitlib-block-hours-section block)' | ||
| ); | ||
| /* eslint-enable no-console */ |
** Why are these changes being introduced: We already have a plugin that implements the hours ecosystem, so it makes sense to define the new hours block for the homepage within that plugin, rather than in a separate plugin. ** How does this address that need: This moves the content of the hours block into the existing hours plugin. As part of this move, a few things get adjusted: * Package.json at the repostitory root gets the new plugin path added to its list of workspaces * Because the hours plugin already uses the src/ folder to define PHP classes, it doesn't make sense to re-use that location for the block source files. We instead take a page from WordPress itself, and place those materials in the blocks/ folder. * Because the path to the block materials changes, we need to update the package.json file in the plugin to pass the --source-path argument to the build and start scripts. * The PHP script at the plugin root needs to merge with the existing plugin. The only unique part from the new plugin is the block block registration function (which is hooked to the init action) - so we use that and leave the rest of the boilerplate behind. * The readme.txt file from the old plugin is no longer needed, as this is a file we don't really use in this monorepo. * We also re-run the build command to make sure that everything is wired up correctly. This updates the hash and index.js file. * All of this means we bump the plugin version number. ** Document any side effects to this change: Hopefully none...
61dcfde to
f5434b5
Compare
There was a problem hiding this comment.
🟡 Changes recommended
Several blocks have incorrect/omitted Gutenberg save markup props (e.g., missing useBlockProps.save(), invalid JSX class/style usage) that will prevent expected classes/styles from being applied and can trigger runtime warnings.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
Files not reviewed (3)
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/index.js: Generated file
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index-rtl.css: Generated file
- web/app/plugins/mitlib-block-featured-and-events-section/build/mitlib-block-featured-and-events-section/style-index.css: Generated file
Suppressed comments (3)
web/app/plugins/mitlib-block-using-the-libraries-section/src/mitlib-block-using-the-libraries-section/save.js:18
- JSX should use
className(notclass). React treatsclassas an invalid DOM property, which can lead to missing classes/styling; this file usesclassthroughout (example below).
web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/save.js:23 - JSX should use
classNameinstead ofclass, and thestyleprop must be an object (a string style attribute won’t be applied by React). Also, usinguseBlockProps.save()ensures the wrapper gets thewp-block-…class for styling.
web/app/plugins/mitlib-block-featured-and-events-section/mitlib-block-featured-and-events-section.php:4 - The plugin header name doesn’t match the plugin’s directory/text-domain (it omits “and Events”), which can make it harder to identify in wp-admin.
* Plugin Name: Mitlib - Block - Featured Section
* Description: Displays the featured section with featured items and events feed
- Files reviewed: 106/111 changed files
- Comments generated: 6
- Review effort level: Lite
| function register_blocks() { | ||
| wp_register_block_types_from_metadata_collection( | ||
| __DIR__ . '/build', | ||
| __DIR__ . '/build/blocks-manifest.php' | ||
| ); | ||
| } | ||
| add_action( 'init', 'Mitlib\PullHours\register_blocks' ); |
| </PanelBody> | ||
| </InspectorControls> | ||
| <section { ...useBlockProps() } id="using-the-libraries"> | ||
| <div class="content-wrapper"> |
| const { heading, askUsTitle, askUsDescription, askUsLinkText, askUsLinkUrl } = attributes; | ||
|
|
||
| return ( | ||
| <section id="using-the-libraries"> |
| const { heading, linkText, linkUrl } = attributes; | ||
|
|
||
| return ( | ||
| <section id="todays-hours"> |
| /** | ||
| * React hook that is used to mark the block wrapper element. | ||
| * It provides all the necessary props like the class name. | ||
| * | ||
| * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops | ||
| */ | ||
| import { useBlockProps } from '@wordpress/block-editor'; | ||
|
|
| /** | ||
| * React hook that is used to mark the block wrapper element. | ||
| * It provides all the necessary props like the class name. | ||
| * | ||
| * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops | ||
| */ | ||
| import { useBlockProps } from '@wordpress/block-editor'; | ||
|
|
This takes the work that Dave is doing to build block-enabled features, and riffs on its tooling to see what might be achievable across the network and our CI tooling