feat: new Curated List block, block pattern, and map functionality #3

dkoo · 2020-09-28T21:05:00Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Establishes a Curated List block in favor of the now-deprecated Curated List CPT. This means that Curated Lists are simply instances of the new block, which can be turned into reusable blocks like any core block.

Also implements the first block pattern (Business Listing) to establish the idea of using block patterns to help editors create listings of different types using a small number of CPTs.

Also implements experimental map functionality using the Jetpack Map block.

How to test the changes in this Pull Request:

Before testing

This PR invalidates any Curated List posts you might have created in the previous versions of this plugin.
You may want to refresh permalinks by going to Settings > Permalinks and saving without making changes before testing this PR.

Creating a Curated List

Create a new or edit any existing post or page. (Curated List blocks are available everywhere core blocks are.)
Using the block inserter, observe a new Curated List block under the Newspack block category. Add one to your post content.
Observe the block with a notice that the list is empty:

Click the [+] appender button inside the Curated List block and observe that the only blocks available to insert are the listing blocks (Event, Generic, Marketplace, or Place listings).
Add a listing of any type (currently, there is no functional difference between any of the listing types, although this will change in the future). Observe an autocomplete search field in the listing block.

If you haven't created any listings of the type you added, create and publish some with any amount of test content, or click the "Create new [listing type]" button from within the Curated List block editor.
After you have several published listings, search for the listing by title in the autocomplete search bar. Confirm that selecting the listing changes the render of the listing item block to show a preview of the selected post's content.
Confirm that clicking "Replace listing" re-shows the search field and lets you type a new listing title into the autocomplete field.
Confirm that a.) the listing currently shown by this block isn't shown in autocomplete results, b.) selecting a different post replaces the preview with the new post, and c.) clicking "Cancel" here instead of selecting a new post goes back to the post preview display.
Add more listings of any type to your Curated List block. Observe that within the Curated List block, each specific post can only be added once (e.g. a listing post won't be shown in autocomplete results if it already exists in the list). Also confirm that listings CAN be added to different Curated List block instances within the same post.
Publish the post. View the front-end. Observe that a.) The list displays the selected items in the same order as shown in the editor, and b.) each item links to a singular page for that listing post.
In the editor, change the order of listing items within the Curated List. Update the post, refresh the front-end and observe that the list item order still matches between editor and front-end.
Test the following Curated List block attributes (which are currently the only ones that are functional):

Show list item numbers: ENABLED by default. Disable this, update the post, and observe that the item numbers are hidden in both the editor and on the front-end.
Show featured image/caption: ENABLED and DISABLED by default, respectively. When ENABLED, confirm that featured image and caption elements are displayed for all list items in the Curated List that have a featured image and caption, and vice versa when DISABLED. Also confirm that the "Show caption" option is only available when the "Show featured image" option is ENABLED.
Show map: See below for testing instructions.

Newspack Listing block patterns

There is one block pattern registered as part of this PR. This is just to establish the foundation for configuring and registering others. We will probably want to involve design in drafting a list of patterns to create and how they should look.

To test the Business Listing pattern:

In WP admin, go to Listings > Marketplace Listings.
Create a new Marketplace Listing post.
Open the Block Inserter menu (the [+] button in the upper-left corner of the editor). Click the "Patterns" tab and confirm that there is a "Newspack Listings" category with a single pattern called "Business Listing":

Select the Business Listing pattern to insert it into your post. The behavior should match all core Gutenberg block patterns. This pattern consists of a content area, map, website and social media links, and business hours.
Confirm that the Business Listing pattern is NOT available to any post type other than Place or Marketplace Listings.

Map/Geolocation functionality

This PR leverages the Jetpack Map block to allow editors to add location data to listings, and to show all locations on a single map for Curated List wrapper blocks. To test:

Create a new listing of any type.
Insert a Jetpack Map block into the post content (or insert a Business Listing pattern, which contains a map block, if editing a Marketplace Listing).
Add at least one location to the Map block and publish the post.
Repeat for a few different listings of various types—make sure some posts have a single location, and others have multiple locations in the same map, and still others have more than one Map block.
In a post or page, insert a Curated List block. Add the listings you created that have Jetpack Map blocks with one or more locations.
In the block attributes for the Curated List, ENABLE the "Show map" option. Observe that a map is automatically generated at the top of the Curated List block which contains markers for all locations associated with all listings in the Curated List. View the post's front-end and confirm that the map is rendered with the list, containing all locations.

Add or remove listings to the Curated List. Observe that the map updates itself automatically (adding locations if inserting new listing blocks with location data, removing locations if removing blocks). Confirm that the map updates locations in both editor and front-end.
DISABLE the "Show map" option. Observe that the map removes itself from both the editor and front-end.

Questions

This feature attempts to use the existing Jetpack Map block for all location-based functionality. Instead of storing location data as metadata for each listing, we parse listing block content and pick out the location data from Map block attributes. It seems to work pretty well and allows us to completely sidestep creating our own maps functionality, but just how bad of an idea is this?
This also ties in with the question above about block content vs. meta fields. All geolocation data is stored in each listing post as block content rather than structured data. Does this paint us into a corner by not being able to easily search/filter by this content? UPDATE: We're now doing both! :porquenolosdos: On the back-end, we're hooking into the save_post action on listing CPTs and looking for the existence of certain blocks in the post content. If those blocks exist in content, we parse the blocks and save certain attributes into post meta. Details here: 49d93c8
The map generated by the Curated List block is just another Jetpack Map block instance. I would love to be able to prevent editors from being able to move or delete this block using core block UI, but I can't lock the block template otherwise map blocks can't be programmatically inserted or deleted. Any suggestions for how to hide or disable the block UI in this instance? I'm talking mostly about the popover toolbar that appears when you click on the block:

It seems that this element isn't targetable by block instance (it's a slotfill that's shared by all blocks in the editor), and there used to be an experimentalUIParts API that let you hide this toolbar and other UI elements, but it seems to have been removed in recent Gutenberg versions. Just wanted to see if there are other patterns that anyone knows of that I haven't discovered yet.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

Sets up custom post types and Listing block prototype.

Instead of just registering a single Listing block and selecting the type in the parent post, this registers a separate block for each listing type (all of which use the same code).

Addresses pull request feedback and refactors post types config into a more DRY treatment.

This removes the Curated List CPT in favor of a wrapper block that can be inserted into any other post or page. This block can contain Listing blocks to create curated lists anywhere, and can be converted to a Reusable Block if it needs to be reusable.

Lays out a method of passing attributes data from the Curated List block to its child Listing inner blocks, without relying on contexts. We basically duplicate parent block attributes on each child block and sync the values of those attributes.

This establishes a pattern for providing block patterns for particular listings CPTs. This might let us provide structured content without having to register metadata fields for listing content.

Adds support for location-based data using the jetpack/maps block. If a listing CPT of any type contains a jetpack/map block with location data, the location data is used to show the listing on a map for any Curated List blocks containing the listing post.

Sets up a sync from certain content blocks to post meta fields. This will help us more easily implement search/filter functionality for listing posts on a large scale.

We want to avoid letting editors nest Curated Lists inside list items which could be nested inside Curated Lists which could be inside list items which could be... etc.

jeffersonrabb

I did a pass at some functional testing, and a few things came up:

The block pattern only appears if the Gutenberg plugin is enabled. Without it, the Patterns panel doesn't have the category drop down, and the custom category isn't shown.
Curiously, the Curated List block only appears if Gutenberg is disabled. I was not able to determine the cause.
In the Curated List block, after clicking Replace Listing, the item being replaced appears in the autocomplete results. The testing instructions indicate this should not be happening.
When starting fresh on a new site, all of the single pages returned Not Founds. Flushing permalinks resolved this, but I expected flushing to be necessary only if a previous version of the plugin had been in use?
I was able to add the same Listing multiple times in the Curated List block.

Block patterns and block pattern categories can only be registered on init or admin_init hooks in WP 5.5.

dkoo · 2020-10-15T22:49:44Z

The block pattern only appears if the Gutenberg plugin is enabled. Without it, the Patterns panel doesn't have the category drop down, and the custom category isn't shown.

Nice catch—this is fixed in 48d027c. Apparently in older versions of Gutenberg, the register_block_pattern and register_block_pattern_category functions are only executed if called in init or admin_init, as far as I can tell.

Curiously, the Curated List block only appears if Gutenberg is disabled. I was not able to determine the cause.

I'm not able to reproduce this. I see the Curated List block as an available block in posts and pages both with and without the Gutenberg plugin (my WP version: 5.5.1). I also tested both with and without Newspack and Newspack Blocks plugins activated. The plugin relies on some functions that were introduced in WP 5.5, so maybe verify that you're running this locally?

In the Curated List block, after clicking Replace Listing, the item being replaced appears in the autocomplete results. The testing instructions indicate this should not be happening.

I believe I stealth-fixed this in 7349944 (in #5). Let's revisit and retest this in that PR, if possible? The issue is that I introduced a middleman wrapper block to contain the list items inside the Curated List block, so I need to explicitly look for the InnerBlocks for that middleman block instead of the InnerBlocks of the top-level Curated List block.

When starting fresh on a new site, all of the single pages returned Not Founds. Flushing permalinks resolved this, but I expected flushing to be necessary only if a previous version of the plugin had been in use?

Should be fixed with 39d2912. Closes #2.

I was able to add the same Listing multiple times in the Curated List block.

This is related to item (3) above. Should be fixed with 7349944 in #5. Let's revisit and retest there.

jeffersonrabb · 2020-10-26T13:05:12Z

Confirm that clicking "Replace listing" re-shows the search field and lets you type a new listing title into the autocomplete field.

Had trouble with this flow:

Click + in Curated Lists block, search and find an item, add it.
Click "Replace Listing"
Search and find the same listing.
Observe the spinner runs endlessly.

https://cloudup.com/cUwWYLqlNm0

jeffersonrabb · 2020-10-26T13:12:57Z

Observe that within the Curated List block, each specific post can only be added once (e.g. a listing post won't be shown in autocomplete results if it already exists in the list).

I was able to add the same listing twice to a single curated list block. Demo:

https://cloudup.com/cot3gWHyeL2

jeffersonrabb · 2020-10-26T13:25:58Z

Show featured image

This control doesn't seem to be having any effect in the editor. The block respects the state of the setting when the editor page is first loaded, but toggling doesn't change it. The front-end display appears to correctly reflect the editor state, however. Demo:

https://cloudup.com/clovAWq-E2g

UPDATE: Similar issue with the Featured Image Caption toggle.

UPDATE: Also, some issue related to changes to the caption toggle. At the end of this demo the toggle is switched on the post published, but the captions don't appear in front end.

jeffersonrabb · 2020-10-26T13:36:53Z

Confirm that the Business Listing pattern is NOT available to any post type other than Place or Marketplace Listings.

I am seeing the Business Listing pattern in all Listing post types, e.g. Generic Listing. However, I don't see it in normal Posts.

jeffersonrabb · 2020-10-26T13:48:31Z

This feature attempts to use the existing Jetpack Map block for all location-based functionality. Instead of storing location data as metadata for each listing, we parse listing block content and pick out the location data from Map block attributes. It seems to work pretty well and allows us to completely sidestep creating our own maps functionality, but just how bad of an idea is this?

I actually like the approach! It seems to work well and is a clever way to bridge the gap between block-based authoring and structured data, at the same time maintaining a single source of truth. Do you have any specific nagging concerns?

jeffersonrabb · 2020-10-26T13:50:08Z

The map generated by the Curated List block is just another Jetpack Map block instance. I would love to be able to prevent editors from being able to move or delete this block using core block UI, but I can't lock the block template otherwise map blocks can't be programmatically inserted or deleted. Any suggestions for how to hide or disable the block UI in this instance? I'm talking mostly about the popover toolbar that appears when you click on the block:

I think we'll be able to achieve this, but don't worry about it in this PR. I'd open an issue in this repo so we can track, then we can open a Jetpack PR enabling that level of control.

jeffersonrabb · 2020-10-26T13:54:42Z

It seems that this element isn't targetable by block instance (it's a slotfill that's shared by all blocks in the editor), and there used to be an experimentalUIParts API that let you hide this toolbar and other UI elements, but it seems to have been removed in recent Gutenberg versions. Just wanted to see if there are other patterns that anyone knows of that I haven't discovered yet.

I might be misunderstanding the question, but are you trying to add a control to that? If so, the component is BlockControls and in the screenshot there actually is an icon which is added by the Jetpack Map block, here: https://github.com/Automattic/jetpack/blob/master/extensions/blocks/map/edit.js#L241-L247

jeffersonrabb

I did a bunch more functional testing and left comments about any situation where the experience didn't match the testing instructions. Since the PR is so big I didn't try to tie the comments to specific code and simply left them as comments on the PR - I hope this isn't confusing. Note that all testing occurred with Gutenberg 9.2.1 installed.

dkoo · 2020-10-26T20:19:13Z

@jeffersonrabb Apologies if this is confusing. Several of the issues you brought up are or will be addressed in other PRs:

"Replace" functionality: @thomasguillot suggests that from a UX standpoint, this is duplicative/redundant since editors can simply remove the block and create a new one. I've removed this functionality as part of feat: listing taxonomies and query mode #6 with 2962fc4.
Featured image, caption controls in editor/front-end: these controls should be working in feat: display options for curated lists #5.

I was able to add the same listing twice to a single curated list block.

This should be fixed in feat: display options for curated lists #5 with 7349944.

I am seeing the Business Listing pattern in all Listing post types, e.g. Generic Listing. However, I don't see it in normal Posts.

This should be fixed by 48d027c.

Given the above, and that this plugin is not yet released, I think the best course of action is to merge this and re-test the above in #5 and #6, do you agree?

To answer your questions:

I actually like the approach! It seems to work well and is a clever way to bridge the gap between block-based authoring and structured data, at the same time maintaining a single source of truth. Do you have any specific nagging concerns?

I'm glad this sounds like the right approach to you! My main concern is the dependency on Jetpack. Currently if the plugin loads on a site without Jetpack, we simply don't show Jetpack-dependent features such as the map, business hours, and contact info blocks in the Business pattern. Although maybe this is not really a concern since all Newspack customers will have Jetpack. Then there's always the concern that the Jetpack team will change this block in a way that breaks our functionality, since this plugin expects Jetpack Map attribute data to be formatted in a particular way.

I might be misunderstanding the question, but are you trying to add a control to that? If so, the component is BlockControls and in the screenshot there actually is an icon which is added by the Jetpack Map block, here: https://github.com/Automattic/jetpack/blob/master/extensions/blocks/map/edit.js#L241-L247

What I actually want to do is hide or disable the BlockControls for the map inside a Curated List block. Currently, when you toggle map functionality on, the block automatically creates a map with the right locations based on the items in the list. But you're able to move the map around, remove it, or even add additional map blocks to the list, which could seem like a mistake. I think this is a relatively minor UX concern, though.

jeffersonrabb

Given the above, and that this plugin is not yet released, I think the best course of action is to merge this and re-test the above in #5 and #6, do you agree?

Agreed. Its a big PR and I'm sure I've missed things but let's merge and move on to the other PRs.

# 1.0.0-alpha.1 (2020-12-16) ### Features * initial post type and block setup ([#1](#1)) ([47dc0c1](47dc0c1)) * listing taxonomies and query mode ([#6](#6)) ([528e1e5](528e1e5)) * new Curated List block, block pattern, and map functionality ([#3](#3)) ([9be6e7e](9be6e7e))

matticbot · 2020-12-16T00:28:11Z

🎉 This PR is included in version 1.0.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# 1.0.0 (2020-12-16) ### Features * initial post type and block setup ([#1](#1)) ([47dc0c1](47dc0c1)) * listing taxonomies and query mode ([#6](#6)) ([528e1e5](528e1e5)) * new Curated List block, block pattern, and map functionality ([#3](#3)) ([9be6e7e](9be6e7e))

matticbot · 2020-12-16T17:18:15Z

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# 1.0.0-alpha.1 (2021-07-19) ### Bug Fixes * avoid meta sync update error ([#95](#95)) ([cab16aa](cab16aa)) * do not register post-specific sidebars in widgets page ([#93](#93)) ([7716775](7716775)) * editor errors with reusable blocks ([#89](#89)) ([fdc46d3](fdc46d3)) * errors and bugs related to WP 5.8 ([#83](#83)) ([90da6c5](90da6c5)) * force alpha rebuild ([acc2075](acc2075)) * minor bug fixes ([#21](#21)) ([5f90bc7](5f90bc7)) * missing condition for block appender in list container ([#74](#74)) ([2c49896](2c49896)) * syncing attributes from curated list block to inner blocks ([#64](#64)) ([cdbc0bb](cdbc0bb)) * use synced attributes for ListContainer directly ([#73](#73)) ([f8641a7](f8641a7)) ### Features * add block patterns ([#23](#23)) ([a273a40](a273a40)) * bump max number of items per list from 20 to 50 ([#97](#97)) ([009deab](009deab)) * initial post type and block setup ([#1](#1)) ([47dc0c1](47dc0c1)) * listing taxonomies and query mode ([#6](#6)) ([528e1e5](528e1e5)) * more block patterns (real estate, classified ads) ([#84](#84)) ([a51f5af](a51f5af)) * new Curated List block, block pattern, and map functionality ([#3](#3)) ([9be6e7e](9be6e7e)) * remove borders and padding in editor to match front-end styles ([#14](#14)) ([6c47a17](6c47a17)) * v2 release (#85) ([748810d](748810d)), closes [#85](#85) [#40](#40) [#39](#39) [#32](#32) [#41](#41) [#49](#49) [#43](#43) [#56](#56) [#51](#51) [#57](#57) [#61](#61) [#67](#67) [#60](#60) [#70](#70) [#65](#65) [#71](#71) [#66](#66) [#58](#58) [#77](#77) [#81](#81) ### BREAKING CHANGES * This feature will deprecate existing custom taxonomies, so any existing terms for those taxonomies will be lost. To fix, we can convert terms from the deprecated taxonomies to standard post categories/tags via a migration script.

dkoo added 17 commits September 11, 2020 16:10

feat: initial post type and block setup

bdb56d9

Sets up custom post types and Listing block prototype.

feat: improvements to block structure and meta

8eb2322

Instead of just registering a single Listing block and selecting the type in the parent post, this registers a separate block for each listing type (all of which use the same code).

fix: error after fetching post

305a3fa

feat: handle meta programmatically, add permalink prefix

23fe169

fix: pull request feedback; refactor post types config

bb2d887

Addresses pull request feedback and refactors post types config into a more DRY treatment.

chore: use permalink slugs defined in constant; spaces in JSON

52a6a92

chore: update class docblocks, move blocks to newspack category

d3cdb46

chore: remove unused block_categories filter

59dfd86

fix: remove fse action

59210b5

Merge branch 'feat/initial-setup' into feat/curated-list-block

d29df56

Merge branch 'master' into feat/curated-list-block

e0db05a

fix: wrong selector in sidebar JS

d879a7d

feat: change curated list to dynamic render

1f8adeb

feat: add "business" block pattern for Marketplace listings

1ac0cb4

This establishes a pattern for providing block patterns for particular listings CPTs. This might let us provide structured content without having to register metadata fields for listing content.

dkoo requested review from jeffersonrabb, adekbadek and joeboydston September 28, 2020 21:05

dkoo self-assigned this Sep 28, 2020

dkoo added 9 commits September 28, 2020 15:42

feat: check for jetpack/maps block before using

347d9ed

feat: add Jetpack Contact Info block to Business Listing block pattern

dac8564

feat: sync block content to post meta

49d93c8

Sets up a sync from certain content blocks to post meta fields. This will help us more easily implement search/filter functionality for listing posts on a large scale.

fix: use listing post meta to get locations in curated list block

9a0dafa

chore: phpdoc types should be lowercase

b712515

feat: don't register Curated List block in listings CPTs

28cf7bb

We want to avoid letting editors nest Curated Lists inside list items which could be nested inside Curated Lists which could be inside list items which could be... etc.

fix: css fixes for compatibility with core block editor (sans plugin)

8cd23d0

fix: listing block parent should be list container, not curated list

231e4dc

fix: callable for settings fields

917116b

jeffersonrabb suggested changes Oct 15, 2020

View reviewed changes

dkoo added 3 commits October 15, 2020 16:19

fix: block patterns for core WP

48d027c

Block patterns and block pattern categories can only be registered on init or admin_init hooks in WP 5.5.

chore: remove redundant docblock comment

bb32751

fix: flush permalinks only after registering CPTs

39d2912

dkoo requested a review from jeffersonrabb October 15, 2020 23:06

jeffersonrabb suggested changes Oct 26, 2020

View reviewed changes

jeffersonrabb added the [Status] Needs changes or feedback label Oct 26, 2020

dkoo requested a review from jeffersonrabb October 26, 2020 20:28

jeffersonrabb approved these changes Oct 27, 2020

View reviewed changes

jeffersonrabb added [Status] Approved and removed [Status] Needs changes or feedback labels Oct 27, 2020

dkoo merged commit 9be6e7e into master Oct 27, 2020

dkoo deleted the feat/curated-list-block branch October 27, 2020 17:58

matticbot added the released on @alpha label Dec 16, 2020

matticbot added the released label Dec 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: new Curated List block, block pattern, and map functionality #3

feat: new Curated List block, block pattern, and map functionality #3

dkoo commented Sep 28, 2020 •

edited

Loading

jeffersonrabb left a comment

dkoo commented Oct 15, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020 •

edited

Loading

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb left a comment

dkoo commented Oct 26, 2020

jeffersonrabb left a comment

matticbot commented Dec 16, 2020

matticbot commented Dec 16, 2020

feat: new Curated List block, block pattern, and map functionality #3

feat: new Curated List block, block pattern, and map functionality #3

Conversation

dkoo commented Sep 28, 2020 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Before testing

Creating a Curated List

Newspack Listing block patterns

Map/Geolocation functionality

Questions

Other information:

jeffersonrabb left a comment

Choose a reason for hiding this comment

dkoo commented Oct 15, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020 • edited Loading

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb commented Oct 26, 2020

jeffersonrabb left a comment

Choose a reason for hiding this comment

dkoo commented Oct 26, 2020

jeffersonrabb left a comment

Choose a reason for hiding this comment

matticbot commented Dec 16, 2020

matticbot commented Dec 16, 2020

dkoo commented Sep 28, 2020 •

edited

Loading

jeffersonrabb commented Oct 26, 2020 •

edited

Loading