feat: listing taxonomies and query mode #6

dkoo · 2020-10-13T23:44: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:

Adds categories and tags to all listings CPTs (taxonomies are shared by all CPTs)
Adds a "query mode" to Curated List blocks which lets editors choose query options to populate the list, instead of manually selecting each listing item
Adds optional "load more" functionality to Curated Lists blocks in query mode that have more listings than the "max number of items" setting

How to test the changes in this Pull Request:

Testing display options

Previously from #5. Test the following display attributes for Curated List blocks:

Show list item numbers: toggles display of numbers alongside listings
Show featured image: toggles display of featured image
Show featured image caption (only available if featured image is enabled): toggles display of featured image caption
Featured image position (only available if featured image is enabled): sets position of featured image to top, left, or right
Mobile stack (only available if featured image position is left or right): if ON, featured image will stack on top of post content at smaller viewports.
Show author: toggles display of listing post authors
Show excerpt: toggles display of listing post excerpts
Type scale: sets font size of listing title, author, and excerpt
Text color: sets font color of listing title, author, and excerpt

Testing categories and tags

Check out this PR. Flush permalinks.
In WP Admin, under "Listings", observe new "Listing Categories" and "Listing Tags" menu items.
Edit or create several listing posts. In the Document sidebar, observe that there are now Categories and Tags panels to add those terms.
Add/create several categories and tags to several listings posts.
In WP Admin, go to Listing Categories/Tags and observe that the terms you created contain the posts to which you added the terms.
~~View a term page. Observe that it shows a standard archive page displaying the listings (any type) that have that term.~~ We're removing archive pages for phase 1.

Testing Query Mode

Ensure that you have multiple listing posts of various types created and published, with categories, tags, test content and featured images
Edit or create a post and add a Curated List block to the content.
Observe a UI asking whether you want to start with a query or specific listings. Select "specific listings".

While the block is NOT in query mode, add several listings manually to the Curated List block and save/publish the post.
View the post's front-end and observe that the manually selected listing items are rendered in the same order as in the editor.
In the editor, create a new Curated List block. This time, select "query".
Observe that the block render changes to display queried listings. Default options are: all listing types, shown in descending order of publish date, max 10 items
Save/update the post, view the front-end, observe that the listings shown match what's shown in the editor.
In the editor, change some query options in the Curated List block sidebar (listing type, categories, tags, sort order, etc.). Confirm that the listings shown in both the editor and the front-end match the selected query options.
Repeat with other query options, confirming each time that the results are as expected and match in editor vs. front-end.

Testing "load more" functionality

Create a Curated List in query mode. Observe a "Show load more button" option in the block sidebar that is OFF by default.
Make sure the query options are broad enough to show a bunch of listings. Use the "Max number of items" option to reduce the number of items shown in the list to something less than the number of listings that match the query options.
Turn ON the "Show load more button" option. Observe that a "Show more listings" button appears at the bottom of the Curated List block.
Also observe a new "Load more button text" option that appears only when the "Show load more button" option is on. Change the text in this setting and observe that the button label changes accordingly.
Publish/update the post and view the front-end. Observe that there's a "Show more listings" button at the bottom of the list block with a label matching your "Load more button text" setting.
Click the button, observe that more listings load as expected.
Keep going until all listings are loaded. Observe that the "Show more listings" button disappears once all listings matching the query options are loaded.
Test in both AMP and non-AMP mode—behavior should be identical.

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.

Moves shared styles to a `shared` SCSS folder and implements helpers to output the same class names in editor + front-end based on curated list block attributes.

- show author - text color - type scale - all options reflected in both editor and front-end

dkoo · 2020-11-06T18:07:02Z

When the Curated List block is unfocused, we shouldn't see the borders, paddings, [+], etc...

@thomasguillot My thought with this was that without the borders, it becomes really hard to tell that the listings are part of the same "parent" list when you have more than a few items in a list. Also, if we have no borders/padding when the block is unfocused, but add borders/padding when it is focused, won't that cause jitter and text reflow when the padding is added?

Also thinking that we should tackle further design updates in a separate PR, since I don't want this one to grow more than it has to.

jeffersonrabb

This feels really close to ready. I added a few more comments and confirmed/resolved most of the ones from the last round.

I'm comfortable coming back to the Map/Load More one in a separate PR. That's going to require some gymnastics.

Once you've resolved those last few things, I'll do one more round of functional testing just looking for regressions, then we should be good to go!

src/blocks/curated-list/edit.js

The src folder is not copied during release archiving.

jeffersonrabb

Let's 🚢 this monster!

# 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:08Z

🎉 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:18Z

🎉 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 30 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.

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

feat: display attributes for listings in editor and front-end

7349944

Moves shared styles to a `shared` SCSS folder and implements helpers to output the same class names in editor + front-end based on curated list block attributes.

feat: more display options

f9250a9

- show author - text color - type scale - all options reflected in both editor and front-end

feat: register categories and tags for listings CPTs

d4e76c8

feat: clean up placeholder styles

d646089

thomasguillot added 4 commits November 6, 2020 10:58

feat: update colour variables

56b83f1

feat: adjust hover/active style of the components-button

12ccf35

fix: adjust components-spinner position

6f69012

fix: autocomplete-tokenfield style to match search suggestions

e0ff5a8

This was referenced Nov 6, 2020

[design] Focused vs. unfocused styles #9

Closed

[design] Add icon + title to new listing blocks #10

Closed

jeffersonrabb suggested changes Dec 1, 2020

View reviewed changes

src/blocks/curated-list/edit.js Outdated Show resolved Hide resolved

src/blocks/curated-list/edit.js Outdated Show resolved Hide resolved

src/blocks/curated-list/edit.js Show resolved Hide resolved

jeffersonrabb added [Status] Needs changes or feedback and removed [Status] Needs Review labels Dec 1, 2020

dkoo added 3 commits December 1, 2020 10:00

fix: fatal errors when SCRIPT_DEBUG is on

62a317f

fix: debounce the fetchPosts function properly

8377d88

fix: make list container block truly undeleteable

c5ac87a

jeffersonrabb self-requested a review December 1, 2020 19:50

jeffersonrabb added [Status] Needs Review and removed [Status] Needs changes or feedback labels Dec 1, 2020

dkoo added 2 commits December 1, 2020 15:06

fix: move AMP JS out of src folder

a055560

The src folder is not copied during release archiving.

fix: add missing JS

e7114f2

jeffersonrabb approved these changes Dec 1, 2020

View reviewed changes

jeffersonrabb added [Status] Approved and removed [Status] Needs Review labels Dec 1, 2020

dkoo merged commit 528e1e5 into master Dec 1, 2020

dkoo deleted the feat/taxonomies-and-query branch December 1, 2020 22:21

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: listing taxonomies and query mode #6

feat: listing taxonomies and query mode #6

dkoo commented Oct 13, 2020 •

edited

Loading

dkoo commented Nov 6, 2020 •

edited

Loading

jeffersonrabb left a comment

jeffersonrabb left a comment

matticbot commented Dec 16, 2020

matticbot commented Dec 16, 2020

feat: listing taxonomies and query mode #6

feat: listing taxonomies and query mode #6

Conversation

dkoo commented Oct 13, 2020 • edited Loading

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Testing display options

Testing categories and tags

Testing Query Mode

Testing "load more" functionality

Other information:

dkoo commented Nov 6, 2020 • edited Loading

jeffersonrabb left a comment

Choose a reason for hiding this comment

jeffersonrabb left a comment

Choose a reason for hiding this comment

matticbot commented Dec 16, 2020

matticbot commented Dec 16, 2020

dkoo commented Oct 13, 2020 •

edited

Loading

dkoo commented Nov 6, 2020 •

edited

Loading