Skip to content

Introduce blocks for homepage content - #219

Open
matt-bernhardt wants to merge 49 commits into
masterfrom
block-remix
Open

matt-bernhardt wants to merge 49 commits into
masterfrom
block-remix

Conversation

@matt-bernhardt

@matt-bernhardt matt-bernhardt commented Sep 4, 2026

Copy link
Copy Markdown
Member

This is the feature branch which introduces a set of blocks that allow us to more easily managed content on the new Libraries' homepage.

djanelle-mit and others added 18 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.
** 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...
@matt-bernhardt matt-bernhardt changed the title Block remix Block CI debugging Sep 4, 2026
(Squashed to remove build artifacts for on block)
@matt-bernhardt matt-bernhardt changed the title Block CI debugging [WIP] Introduce blcoks for homepage content Sep 8, 2026
@matt-bernhardt matt-bernhardt changed the title [WIP] Introduce blcoks for homepage content [WIP] Introduce blocks for homepage content Sep 8, 2026
djanelle-mit and others added 7 commits September 8, 2026 12:41
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
djanelle-mit and others added 15 commits September 11, 2026 09:28
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

@accesslint accesslint Bot 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.

Found 1 issue across 1 rule.

Reviewed by AccessLint, which checks every pull request for accessibility issues.

Comment thread web/app/plugins/mitlib-blocks/blocks/hero-section/render.php Outdated
@matt-bernhardt
matt-bernhardt marked this pull request as ready for review September 15, 2026 13:27
@matt-bernhardt
matt-bernhardt requested a lite review from Copilot September 15, 2026 13:27
@matt-bernhardt
matt-bernhardt marked this pull request as draft September 15, 2026 13:29

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

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_date is a local calendar date, but gmdate() 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 as current_time( 'Ymd' ), for this comparison.
			$today = gmdate( 'Ymd' );

web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php:34

  • expert_url is 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 empty href and 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_event flag is not 1. If 20 future posts without that flag precede valid events, the homepage incorrectly shows fewer events or the empty state; include is_event = 1 in 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 style prop 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 a backgroundImage object 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 heading attribute 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,

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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).

Comment on lines +10 to +12
export default function save() {
return (
<section id="featured-collection">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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).

Comment on lines +7 to +13
import { RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
const { heading, linkText, linkUrl } = attributes;

return (
<section id="todays-hours">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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).

Comment on lines +7 to +19
import { RichText } from '@wordpress/block-editor';

export default function save( { attributes } ) {
const {
heading,
askUsTitle,
askUsDescription,
askUsLinkText,
askUsLinkUrl,
} = attributes;

return (
<section id="using-the-libraries">

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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).

Comment on lines +15 to +18
* MITLIB - Hero Section
* MITLIB - Featured and Events Section
* MITLIB - Featured Collection Section
* MITLIB - Using the Libraries Section

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

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.
@matt-bernhardt
matt-bernhardt marked this pull request as ready for review September 15, 2026 20:27
@matt-bernhardt

Copy link
Copy Markdown
Member Author

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.

:shipit:

@matt-bernhardt matt-bernhardt changed the title [WIP] Introduce blocks for homepage content Introduce blocks for homepage content Sep 16, 2026
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