Skip to content

Let editor select a featured librarian from the block editor #224

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
djanelle-mit wants to merge 4 commits into
base: block-remix
Choose a base branch
from
Open

Let editor select a featured librarian from the block editor #224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de0a102
First draft select a featured librarian
djanelle-mit Sep 9, 2026
a9aded2
Casting ID as int
djanelle-mit Sep 9, 2026
c2f8d50
Changes to featured expert copy and logic
djanelle-mit Sep 11, 2026
9184c27
Calculate string for alt text alongside other variable declarations
djanelle-mit Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
"heading": {
"type": "string",
"default": "Featured"
},
"featuredExpertId": {
"type": "number",
"default": 0
}
},
"supports": {
Expand Down
37 changes: 35 additions & 2 deletions web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,47 @@
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
*/
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl, Spinner } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import './editor.scss';

export default function Edit( { attributes, setAttributes } ) {
const { heading } = attributes;
const { heading, featuredExpertId } = attributes;

const { experts, hasResolvedExperts } = useSelect( ( select ) => {
const query = { per_page: -1, status: 'publish', orderby: 'title', order: 'asc' };

@djanelle-mit djanelle-mit Sep 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Asked VS Code's copilot about this feedback:

Why per_page: -1 won't fail here: @wordpress/api-fetch ships a fetchAllMiddleware that's part of apiFetch's default middleware stack (used by @wordpress/core-data). When it sees per_page: -1 in the query, it never actually sends -1 to the REST endpoint — it strips it, requests page 1 with a large bounded per_page, then keeps requesting subsequent pages and concatenating results until it runs out, based on the X-WP-Total/X-WP-TotalPages headers. This is the same mechanism core Gutenberg blocks rely on (e.g. the Categories block, Page List block, Query Loop's post-type dropdowns) to fetch "all" entities regardless of count. So the dropdown won't come back empty because of this — it works by design.

@djanelle-mit djanelle-mit Sep 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Leaving this alone for the time being. I don't expect this field to ever have more than 99 experts, but if this is common convention I'd rather go down that route.

return {
experts: select( coreStore ).getEntityRecords( 'postType', 'experts', query ),
hasResolvedExperts: select( coreStore ).hasFinishedResolution( 'getEntityRecords', [ 'postType', 'experts', query ] ),
};
}, [] );

const expertOptions = [
{ label: __( 'Select an expert…', 'mitlib-blocks' ), value: 0 },
...( experts || [] ).map( ( expert ) => ( {
label: expert.title.rendered,
value: expert.id,
} ) ),
];

return (
<div { ...useBlockProps() }>
<InspectorControls>
<PanelBody title={ __( 'Featured Expert', 'mitlib-blocks' ) }>
{ hasResolvedExperts ? (
<SelectControl
label={ __( 'Featured expert', 'mitlib-blocks' ) }
value={ featuredExpertId }
options={ expertOptions }
onChange={ ( value ) => setAttributes( { featuredExpertId: Number( value ) } ) }
/>
) : (
<Spinner />
) }
</PanelBody>
</InspectorControls>
<RichText
tagName="h2"
value={ heading }
Expand Down
51 changes: 47 additions & 4 deletions web/app/plugins/mitlib-blocks/blocks/featured-and-events-section/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,45 @@
* @var string $content Block default content.
* @var WP_Block $block Block instance.
*/

// Look up the librarian chosen in the block editor's "Featured Librarian" panel.
$featured_expert = null;
$featured_expert_id = absint( $attributes['featuredExpertId'] ?? 0 );
if ( $featured_expert_id ) {
$maybe_expert = get_post( $featured_expert_id );
if ( $maybe_expert && 'experts' === $maybe_expert->post_type && 'publish' === $maybe_expert->post_status ) {
$featured_expert = $maybe_expert;
}
}

// Fallback used when no librarian has been selected in the block editor.
$default_expert = array(

@matt-bernhardt matt-bernhardt Sep 10, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

probably a requested change?

I think it will be cleaner and more supportable if we handle all the variable assignments up here, prior to the start of markup beginning on line 28. There are three operations happening within the markup that I fear are going to make supporting this harder over time:

  1. Defining all the $experts... variables on lines 43-57
  2. Defining the alt attribute text via sprintf() on line 61
  3. Defining the "How can $NAME help you?" question via sprintf() on lines 73-77

(The block to compile the events down on lines 131-217 is another concern, but I'm setting that aside since it's already merged)

I think I'd propose that we handle all the variable assignment in one chunk, and leave the markup portions of this template to only call the escaping functions.

This said, if you feel strongly that we need to merge this and just be done with it, I'm open to pushback here - this seems to work.

(As an aside - In my suggested code below, I'm also dropping the use of the __() translation function. This is intentional, but I'm not super committed to not using it here. We've never made any real move to support translation, so I've been Occam's razoring it out over time, but I'm also happy to hear about a push to move in that direction in a more systematic way)

'name' => 'Alejandro Paz',
'first_name' => 'Alejandro',
'url' => 'https://libguides.mit.edu/profiles/apaz',
'image' => 'https://libapps.s3.amazonaws.com/accounts/349/images/apaz-100x100.jpg',
'excerpt' => 'Librarian for Energy and Environment',
);

// If we have a valid expert, use those values. If not, use the fallback values.
if ( $featured_expert ) {
$expert_name = get_the_title( $featured_expert );
$expert_first_name = strtok( $expert_name, ' ' );
$expert_url = get_post_meta( $featured_expert->ID, 'expert_url', true );
$expert_image = get_the_post_thumbnail_url( $featured_expert, 'thumbnail' );
$expert_excerpt = get_the_excerpt( $featured_expert );
} else {
$expert_name = $default_expert['name'];
$expert_first_name = $default_expert['first_name'];
$expert_url = $default_expert['url'];
$expert_image = $default_expert['image'];
$expert_excerpt = $default_expert['excerpt'];
}

// Generate the strings for alt text and help link text
$expert_alt_text = "Headshot of " . $expert_name;
$expert_help_link_text = "How can " . $expert_first_name . " help you?";

?><section id="featured-and-events">
<div class="content-wrapper">
<div class="featured-content">
Expand All @@ -23,15 +62,19 @@
</article>
<article class="featured-item side-by-side">
<span class="item-type spotlight">Spotlight</span>
<img src="https://libapps.s3.amazonaws.com/accounts/349/images/apaz-100x100.jpg" alt="Headshot of Alejandro Paz" />
<?php if ( $expert_image ) : ?>
<img src="<?php echo esc_url( $expert_image ); ?>" alt="<?php echo esc_attr( $expert_alt_text ); ?>" />
<?php endif; ?>
<div class="featured-item-content">
<hgroup>
<h3><a href="https://libguides.mit.edu/profiles/apaz">Alejandro Paz</a></h3>
<h3><a href="<?php echo esc_url( $expert_url ); ?>"><?php echo esc_html( $expert_name ); ?></a></h3>
<div>
<p>Librarian for Energy and Environment</p>
<p><?php echo esc_html( $expert_excerpt ); ?></p>
</div>
</hgroup>
<a class="arrow-right" href="https://libguides.mit.edu/profiles/apaz">How can Alejandro help you?</a>
<a class="arrow-right" href="<?php echo esc_url( $expert_url ); ?>">
<?php echo esc_html( $expert_help_link_text ); ?>
</a>
</div>
</article>
<article class="featured-item side-by-side">
Expand Down
4 changes: 4 additions & 0 deletions web/app/plugins/mitlib-blocks/build/blocks-manifest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
'heading' => array(
'type' => 'string',
'default' => 'Featured'
),
'featuredExpertId' => array(
'type' => 'number',
'default' => 0
)
),
'supports' => array(
Expand Down
4 changes: 4 additions & 0 deletions web/app/plugins/mitlib-blocks/build/featured-and-events-section/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@
"heading": {
"type": "string",
"default": "Featured"
},
"featuredExpertId": {
"type": "number",
"default": 0
}
},
"supports": {
Expand Down
2 changes: 1 addition & 1 deletion web/app/plugins/mitlib-blocks/build/featured-and-events-section/index.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'adae8abbc4a7ca67c4b9');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n'), 'version' => '08aea560c65be378d62e');
2 changes: 1 addition & 1 deletion web/app/plugins/mitlib-blocks/build/featured-and-events-section/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

51 changes: 47 additions & 4 deletions web/app/plugins/mitlib-blocks/build/featured-and-events-section/render.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,45 @@
* @var string $content Block default content.
* @var WP_Block $block Block instance.
*/

// Look up the librarian chosen in the block editor's "Featured Librarian" panel.
$featured_expert = null;
$featured_expert_id = absint( $attributes['featuredExpertId'] ?? 0 );
if ( $featured_expert_id ) {
$maybe_expert = get_post( $featured_expert_id );
if ( $maybe_expert && 'experts' === $maybe_expert->post_type && 'publish' === $maybe_expert->post_status ) {
$featured_expert = $maybe_expert;
}
}

// Fallback used when no librarian has been selected in the block editor.
$default_expert = array(
'name' => 'Alejandro Paz',
'first_name' => 'Alejandro',
'url' => 'https://libguides.mit.edu/profiles/apaz',
'image' => 'https://libapps.s3.amazonaws.com/accounts/349/images/apaz-100x100.jpg',
'excerpt' => 'Librarian for Energy and Environment',
);

// If we have a valid expert, use those values. If not, use the fallback values.
if ( $featured_expert ) {
$expert_name = get_the_title( $featured_expert );
$expert_first_name = strtok( $expert_name, ' ' );
$expert_url = get_post_meta( $featured_expert->ID, 'expert_url', true );
$expert_image = get_the_post_thumbnail_url( $featured_expert, 'thumbnail' );
$expert_excerpt = get_the_excerpt( $featured_expert );
} else {
$expert_name = $default_expert['name'];
$expert_first_name = $default_expert['first_name'];
$expert_url = $default_expert['url'];
$expert_image = $default_expert['image'];
$expert_excerpt = $default_expert['excerpt'];
}

// Generate the strings for alt text and help link text
$expert_alt_text = "Headshot of " . $expert_name;
$expert_help_link_text = "How can " . $expert_first_name . " help you?";

?><section id="featured-and-events">
<div class="content-wrapper">
<div class="featured-content">
Expand All @@ -23,15 +62,19 @@
</article>
<article class="featured-item side-by-side">
<span class="item-type spotlight">Spotlight</span>
<img src="https://libapps.s3.amazonaws.com/accounts/349/images/apaz-100x100.jpg" alt="Headshot of Alejandro Paz" />
<?php if ( $expert_image ) : ?>
<img src="<?php echo esc_url( $expert_image ); ?>" alt="<?php echo esc_attr( $expert_alt_text ); ?>" />
<?php endif; ?>
<div class="featured-item-content">
<hgroup>
<h3><a href="https://libguides.mit.edu/profiles/apaz">Alejandro Paz</a></h3>
<h3><a href="<?php echo esc_url( $expert_url ); ?>"><?php echo esc_html( $expert_name ); ?></a></h3>
<div>
<p>Librarian for Energy and Environment</p>
<p><?php echo esc_html( $expert_excerpt ); ?></p>
</div>
</hgroup>
<a class="arrow-right" href="https://libguides.mit.edu/profiles/apaz">How can Alejandro help you?</a>
<a class="arrow-right" href="<?php echo esc_url( $expert_url ); ?>">
<?php echo esc_html( $expert_help_link_text ); ?>
</a>
</div>
</article>
<article class="featured-item side-by-side">
Expand Down
2 changes: 2 additions & 0 deletions web/app/plugins/mitlib-blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
"@wordpress/block-editor": "latest",
"@wordpress/blocks": "latest",
"@wordpress/components": "latest",
"@wordpress/core-data": "latest",
"@wordpress/data": "latest",
"@wordpress/i18n": "latest"
},
"devDependencies": {
Expand Down
Loading