Introduce blocks for homepage content - #219
matt-bernhardt wants to merge 49 commits into
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.
** 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...
(Squashed to remove build artifacts for on block)
ab0398f to
2b2e486
Compare
Moving to a single blocks plugin
This moves the source materials for the hours block into the new mitlib-blocks plugin - block.json - edit.js - editor.scss - index.js - save.js - style.scss It doesn't touch the built materials, that will happen in a future commit
Now that the hours block has been relocated into the new plugin, and the naming convention for folders in that plugin have been udpated, there are a few cleanup tasks that are necessary for everything to function: - package.json at the root level now only lists a single workspace, as the hours plugin no longer has one - package.json within mitlib-blocks needs to be told where to find the block materials - The hours plugin itself no longer needs a register_blocks function, nor does it need package.json or .gitignore - The text-domain value for the hours block needs to be updated to use its new home - The mitlib-blocks gitignore needs to ignore .map files There is an additional side effect in this commit, which is not strictly related but seems like a good idea at this point: - The PHPCS configuration now ignores materials in a build/ folder, as these are not meant to be run through any sort of static code analysis. Squash me
This also removes the deprecated build materials from the hours plugin
Move Hours block into new block plugin
Let editor select a featured librarian from the block editor
Most of these blocks don't use this boilerplate file, which only had a console.log statement. In those cases, we remove the file entirely, as well as the entry in block.json which called for it to be loaded.
These blocks aren't part of a javascript application stack, so there is no need to declare an entry point into their materials.
The boilerplace declares wordpress dependencies to _always_ use the latest version, which causes problems in our CI workflow because a new release may have become available between when the developer started a branch and when the CI runs to evaluate it. Keeping branches short-lived is only a partial solution. The more robust option is to declare our dependencies using a predictable version. This provides for consistency between environments (among developers, and with our CI workflows). The cost of this is that we need to manage dependency updates ourselves, but this is already something we are doing.
The javascript community has a set of formatting rules which they've adopted, and their tooling will automatically apply that formatting. This commit applies the changes necessary for `npm run lint:js` to return no output. (We can tweak the rules that it applies as we go forward - some of these seem pretty silly to me - but having those discussions will take time to reflect and reach consensus, and we want to get this branch done quickly for the moment.
This is part of the NPM linter, but there were so many of these changes that it seemed better to split them out into their own commit.
Use of ' instead of ' causes complaints by the linter...
The boilerplate included an import of useBlockProps - but then did not actually make use of it. Our choice is to either finish the implementation, or to stop importing it in the first place. I initially tried to actually implement this library for the blocks that are not rendered via render.php, but this resulted in editor-facing styles leaking out to the public UI. Instead, I've opted to remove the import entirely. It does not appear to impact how our defined options are updated via the editor interface, so I don't think this is something we need at this time.
The featured collection never passes any output through a translation function, so we do not need to import it in the first place.
This is the same fixup step for the PHP files as we previously took for the JS files. Run the linter, note what it complains about, and then fix those lines until the linter reports no output.
This keeps everything in sync with the latest releases of our tooling
Clean up block implementation
There was a problem hiding this comment.
Found 1 issue across 1 rule.
Reviewed by AccessLint, which checks every pull request for accessibility issues.
There was a problem hiding this comment.
🟡 Changes recommended
Unresolved critical and moderate issues affect expert selection, block styling, links, and event filtering.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Introduces a block-based homepage system with five WordPress blocks, dynamic content rendering, and a static fallback.
Changes:
- Adds homepage blocks with editor controls and generated assets.
- Adds featured expert and upcoming event rendering.
- Adds build tooling, CI validation, documentation, and plugin updates.
File summaries
| File | Reviewed change |
|---|---|
web/app/themes/mitlib-parent/templates/page-home-v2.php |
Supports block content with a static fallback. |
web/app/plugins/mitlib-pull-hours/mitlib-pull-hours.php |
Updates the plugin version. |
web/app/plugins/mitlib-blocks/readme.txt |
Documents the blocks plugin. |
web/app/plugins/mitlib-blocks/package.json |
Defines block build scripts and dependencies. |
web/app/plugins/mitlib-blocks/mitlib-blocks.php |
Registers block metadata. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/style-index.css |
Generated frontend styles. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/style-index-rtl.css |
Generated RTL frontend styles. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/index.js |
Generated editor bundle. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/index.css |
Generated editor styles. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/index.asset.php |
Generated asset metadata. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/index-rtl.css |
Generated RTL editor styles. |
web/app/plugins/mitlib-blocks/build/using-the-libraries-section/block.json |
Built block metadata. |
web/app/plugins/mitlib-blocks/build/hours-section/style-index.css |
Generated frontend styles. |
web/app/plugins/mitlib-blocks/build/hours-section/style-index-rtl.css |
Generated RTL frontend styles. |
web/app/plugins/mitlib-blocks/build/hours-section/index.js |
Generated editor bundle. |
web/app/plugins/mitlib-blocks/build/hours-section/index.css |
Generated editor styles. |
web/app/plugins/mitlib-blocks/build/hours-section/index.asset.php |
Generated asset metadata. |
web/app/plugins/mitlib-blocks/build/hours-section/index-rtl.css |
Generated RTL editor styles. |
web/app/plugins/mitlib-blocks/build/hours-section/block.json |
Built block metadata. |
web/app/plugins/mitlib-blocks/build/hero-section/style-index.css |
Generated frontend styles. |
web/app/plugins/mitlib-blocks/build/hero-section/style-index-rtl.css |
Generated RTL frontend styles. |
web/app/plugins/mitlib-blocks/build/hero-section/render.php |
Built hero renderer. |
web/app/plugins/mitlib-blocks/build/hero-section/index.js |
Generated editor bundle. |
web/app/plugins/mitlib-blocks/build/hero-section/index.css |
Generated editor styles. |
web/app/plugins/mitlib-blocks/build/hero-section/index.asset.php |
Generated asset metadata. |
web/app/plugins/mitlib-blocks/build/hero-section/index-rtl.css |
Generated RTL editor styles. |
web/app/plugins/mitlib-blocks/build/hero-section/block.json |
Built block metadata. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/style-index.css |
Generated frontend styles. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/style-index-rtl.css |
Generated RTL frontend styles. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/index.js |
Generated editor bundle. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/index.css |
Generated editor styles. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/index.asset.php |
Generated asset metadata. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/index-rtl.css |
Generated RTL editor styles. |
web/app/plugins/mitlib-blocks/build/featured-collection-section/block.json |
Built block metadata. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/style-index.css |
Generated frontend styles. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/style-index-rtl.css |
Generated RTL frontend styles. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/render.php |
Built featured/events renderer. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/index.js |
Generated editor bundle. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/index.css |
Generated editor styles. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/index.asset.php |
Generated asset metadata. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/index-rtl.css |
Generated RTL editor styles. |
web/app/plugins/mitlib-blocks/build/featured-and-events-section/block.json |
Built block metadata. |
web/app/plugins/mitlib-blocks/build/blocks-manifest.php |
Generated block registration manifest. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/style.scss |
Defines frontend styles. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/save.js |
Serializes the services section. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/index.js |
Registers the block. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/editor.scss |
Defines editor styles. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/edit.js |
Provides editor controls. |
web/app/plugins/mitlib-blocks/blocks/using-the-libraries-section/block.json |
Defines block metadata. |
web/app/plugins/mitlib-blocks/blocks/hours-section/style.scss |
Defines frontend styles. |
web/app/plugins/mitlib-blocks/blocks/hours-section/save.js |
Serializes library hours. |
web/app/plugins/mitlib-blocks/blocks/hours-section/index.js |
Registers the block. |
web/app/plugins/mitlib-blocks/blocks/hours-section/editor.scss |
Defines editor styles. |
web/app/plugins/mitlib-blocks/blocks/hours-section/edit.js |
Provides editor controls. |
web/app/plugins/mitlib-blocks/blocks/hours-section/block.json |
Defines block metadata. |
web/app/plugins/mitlib-blocks/blocks/hero-section/style.scss |
Defines frontend styles. |
web/app/plugins/mitlib-blocks/blocks/hero-section/save.js |
Configures dynamic serialization. |
web/app/plugins/mitlib-blocks/blocks/hero-section/render.php |
Renders the hero section. |
web/app/plugins/mitlib-blocks/blocks/hero-section/index.js |
Registers the block. |
web/app/plugins/mitlib-blocks/blocks/hero-section/editor.scss |
Defines editor styles. |
web/app/plugins/mitlib-blocks/blocks/hero-section/edit.js |
Provides heading controls. |
web/app/plugins/mitlib-blocks/blocks/hero-section/block.json |
Defines block metadata. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/style.scss |
Defines frontend styles. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/save.js |
Serializes collection content. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/index.js |
Registers the block. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/editor.scss |
Defines editor styles. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/edit.js |
Provides editor controls. |
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/block.json |
Defines block metadata. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/style.scss |
Defines frontend styles. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/save.js |
Configures dynamic serialization. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php |
Renders featured content and events. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/index.js |
Registers the block. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/editor.scss |
Defines editor styles. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/edit.js |
Provides expert selection controls. |
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/block.json |
Defines block metadata. |
web/app/plugins/mitlib-blocks/.gitignore |
Ignores development artifacts. |
phpcs.xml |
Configures generated-file exclusions. |
package.json |
Adds workspace build scripts. |
.gitignore |
Configures repository ignores. |
.github/workflows/ensure-build.yml |
Verifies generated assets. |
.editorconfig |
Defines project formatting rules. |
Review details
Suppressed comments (5)
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php:134
event_dateis a local calendar date, butgmdate()uses UTC. Around midnight UTC this can advance or lag the site's local date and hide today's events (or include tomorrow's events) for several hours. Use the WordPress/site timezone, such ascurrent_time( 'Ymd' ), for this comparison.
$today = gmdate( 'Ymd' );
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php:34
expert_urlis an optional field in the Experts data, but the selected expert is allowed to be any published expert. When that field is empty, both generated links receive an emptyhrefand point nowhere useful. Fall back to the expert permalink or exclude experts without a usable URL from the selector.
$expert_url = get_post_meta( $featured_expert->ID, 'expert_url', true );
web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php:150
- The query limits results to 20 date-bearing posts before the loop filters out records whose
is_eventflag is not1. If 20 future posts without that flag precede valid events, the homepage incorrectly shows fewer events or the empty state; includeis_event = 1in the query's meta conditions.
'meta_query' => array(
array(
'key' => 'event_date',
'value' => $today,
'compare' => '>=',
),
),
web/app/plugins/mitlib-blocks/blocks/featured-collection-section/save.js:18
- React's
styleprop must be a property-to-value object, not a CSS declaration string. This can make the block fail to render or drop the background style while editing/saving; use abackgroundImageobject or a CSS class instead.
style="background-image: url('https://libraries.mit.edu/app/uploads/2026/07/Howe-Manning-Almy-1.jpg');"
web/app/plugins/mitlib-blocks/blocks/hero-section/render.php:16
- The editable
headingattribute is never used by this server-side renderer, so changing the heading in the block editor has no effect on the homepage; every instance always renders the hard-coded text. Render the attribute here, with the default as a fallback.
<h1><?php echo esc_html( $attributes['heading'] ); ?></h1>
- Files reviewed: 80/82 changed files
- Comments generated: 7
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
|
||
| const { experts, hasResolvedExperts } = useSelect( ( select ) => { | ||
| const query = { | ||
| per_page: -1, |
There was a problem hiding this comment.
This contradicts the operations we observe when running the application, and is also in conflict with WordPress' documentation of the per_page variable in other contexts.
Bad bot.
| $expert_alt_text = 'Headshot of ' . $expert_name; | ||
| $expert_help_link_text = 'How can ' . $expert_first_name . ' help you?'; | ||
|
|
||
| ?><section id="featured-and-events"> |
There was a problem hiding this comment.
We are intentionally leaving this functionality out of our block rendering. We have moved the styles which were in style.scss into editor.scss after realizing that they were editor-facing, and not public-facing. This resolves the actual problem (that editor-facing styles were in a general-use stylesheet).
| export default function save() { | ||
| return ( | ||
| <section id="featured-collection"> |
There was a problem hiding this comment.
We are intentionally leaving this functionality out of our block rendering. We have moved the styles which were in style.scss into editor.scss after realizing that they were editor-facing, and not public-facing. This resolves the actual problem (that editor-facing styles were in a general-use stylesheet).
| * @var WP_Block $block Block instance. | ||
| */ | ||
|
|
||
| ?><section id="hero"> |
There was a problem hiding this comment.
We are intentionally leaving this functionality out of our block rendering. We have moved the styles which were in style.scss into editor.scss after realizing that they were editor-facing, and not public-facing. This resolves the actual problem (that editor-facing styles were in a general-use stylesheet).
| import { RichText } from '@wordpress/block-editor'; | ||
|
|
||
| export default function save( { attributes } ) { | ||
| const { heading, linkText, linkUrl } = attributes; | ||
|
|
||
| return ( | ||
| <section id="todays-hours"> |
There was a problem hiding this comment.
We are intentionally leaving this functionality out of our block rendering. We have moved the styles which were in style.scss into editor.scss after realizing that they were editor-facing, and not public-facing. This resolves the actual problem (that editor-facing styles were in a general-use stylesheet).
| import { RichText } from '@wordpress/block-editor'; | ||
|
|
||
| export default function save( { attributes } ) { | ||
| const { | ||
| heading, | ||
| askUsTitle, | ||
| askUsDescription, | ||
| askUsLinkText, | ||
| askUsLinkUrl, | ||
| } = attributes; | ||
|
|
||
| return ( | ||
| <section id="using-the-libraries"> |
There was a problem hiding this comment.
We are intentionally leaving this functionality out of our block rendering. We have moved the styles which were in style.scss into editor.scss after realizing that they were editor-facing, and not public-facing. This resolves the actual problem (that editor-facing styles were in a general-use stylesheet).
| * MITLIB - Hero Section | ||
| * MITLIB - Featured and Events Section | ||
| * MITLIB - Featured Collection Section | ||
| * MITLIB - Using the Libraries Section |
There was a problem hiding this comment.
We have removed this file entirely, as it isn't necessary in our context. We have other locations that document the plugins which we develop internally.
For each of the five blocks in this plugin, we do the following based on code review: 1. Move all editor-facing styles into editor.scss, and out of style.scss (we retain style.scss because it should be used shortly, and removing it entirely proved a bit tricky. Future-us is welcome to try that again if we don't end up using it) 2. Public facing stylesheet is still present, but has no content. 3. block.json has its "style" entry removed, because there are no user- facing styles in the blocks currently. Outside of the block definitions, we also remove the readme.txt file as unnecessary.
|
I said this in Slack, but I think for posterity I'll say it here too. I think this is ready to merge once we have stakeholder approval. I can't do a code review formally, so my comment here would be the same as if I had.
|
This is the feature branch which introduces a set of blocks that allow us to more easily managed content on the new Libraries' homepage.