News Block PR Review

Overview

Modern Tribe created a PR that creates the News Block in the Custom Functionality Plugin

This PR adds a News Block icon in the block chooser of a Page or Post editor with the ucsc name space.

Conclusion

TLDR;

This is a functional prototype. It pulls posts from Pantheon Dev News into a block, returning structured html. Here are a number of fixes and suggestions:

Fixes:

Questions:

Should the presence of the block be indicated in the #Editor Experience?
Should #Title and Description be stylable?
Are we omitting #Taxonomies on purpose?
Should we be able to control the number of #Posts per page?

Analysis

This analysis is based on a review of the Register News Block pull request by Modern Tribe.

Editor Experience

Question

Should there be some indicator that there is a "news block" on the page in the editor?

The new block is available in block chooser.

Once the block is dropped onto a Page or Post, however, there is initially no visual indication that the block is on the page

But Block options appear in the right-hand settings column.

Block Options

Discussion of the block options in the right-hand sidebar.

Title and Description

Question

Should these elements be styleable?

Title and Description are form fields that return a <h2> and <div>, respectively; however, they are not "styleable." One cannot adjust their font size, color, background, padding or margin on these elements.

Header Alignment

Fix

Option to align Header Center or Left does not work.

The Header's <h2 class="ucsc-news-block__header-title"> and the description's <div class="ucsc-news-block__header-description"> elements are wrapped in <div class="ucsc-news-block__header">. The Header alignment settings target this outer div.

Left Alignment

Selecting Left alignment adds a class, align-header-left, to the outer <div> and has no effect, as the default is already left-aligned. Additionally, there is no style definition for .align-header-left in the Styles panel of the Element Inspector.

<div class="ucsc-news-block__header align-header-left">
<h2 class="ucsc-news-block__header-title">News block</h2>
<div class="ucsc-news-block__header-description">Testing the news block</div>
</div>

Center Alignment

Selecting Center Alignment has no effect. No additional classes are added to <div class="ucsc-news-block__header">

<div class="ucsc-news-block__header">
<h2 class="ucsc-news-block__header-title">News block</h2>
<div class="ucsc-news-block__header-description">Testing the news block</div>
</div>

Taxonomies

Question

Are we purposefully omitting People, Sections and Story Types?
How are the taxonomies pulled in?

As the instructions indicate, both a taxonomy type (Categories, etc. ) and a taxonomy term need to be selected before content appears in the editor. Taxonomy terms change relative to the type that is chosen. Multiple terms can be selected. Currently only four taxonomies are available via the block options:

but there are more on the news site:

Categories
Academic Divisions
Administrative Divisions
Colleges
People
Sections
Story Types

Toggle options

Note

All toggle options work as expected

Additional Issues

Whole Card Wrapped in Link

Fix

The entire card is wrapped in an <a> tag.

This is a significant issue. The card's entire content is wrapped in an <a> tag. Which means everything is a link.
Code:

On the front end (hover):

Posts per page

Question

Should controlling the number news items returned be an option?

The WordPress Query Block provides options to control the number of posts per page that are returned. Should/could we add this as an option to this block?