Skip to content

Block editor experimentation - #217

Draft
matt-bernhardt wants to merge 17 commits into
masterfrom
blk-editor-remix
Draft

Block editor experimentation#217
matt-bernhardt wants to merge 17 commits into
masterfrom
blk-editor-remix

Conversation

@matt-bernhardt

Copy link
Copy Markdown
Member

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

djanelle-mit and others added 13 commits August 31, 2026 16:10
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.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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.php hardcoded homepage markup with the_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.

Comment thread package.json
Comment on lines +24 to +27
"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>
Comment on lines +20 to +24
<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>
Comment on lines +13 to +18
<section id="using-the-libraries">
<div class="content-wrapper">
<RichText.Content tagName="h2" value={ heading } />
<div class="box-wrapper">
<div class="option-boxes">
<div>
Comment on lines +13 to +17
<section id="todays-hours">
<div class="content-wrapper">
<RichText.Content tagName="h2" value={ heading } />
<ol class="hours-list">
<li>
Comment on lines +3 to +4
* Plugin Name: Mitlib - Block - Featured Section
* Description: Displays the featured section with featured items and events feed
Comment on lines +23 to +27
/* eslint-disable no-console */
console.log(
'Hello World! (from create-block-mitlib-block-featured-and-events-section block)'
);
/* eslint-enable no-console */
Comment on lines +23 to +27
/* eslint-disable no-console */
console.log(
'Hello World! (from create-block-mitlib-block-hero-section block)'
);
/* eslint-enable no-console */
Comment on lines +23 to +27
/* 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...

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 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 (not class). React treats class as an invalid DOM property, which can lead to missing classes/styling; this file uses class throughout (example below).
    web/app/plugins/mitlib-block-featured-collection-section/src/mitlib-block-featured-collection-section/save.js:23
  • JSX should use className instead of class, and the style prop must be an object (a string style attribute won’t be applied by React). Also, using useBlockProps.save() ensures the wrapper gets the wp-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

Comment on lines +40 to +46
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">
Comment on lines +1 to +8
/**
* 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';

Comment on lines +1 to +8
/**
* 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';

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants