Recent Posts Block

[gregrickaby]

Duplicate our current Hero Block functionality as a Gutenblock.

http://gutenberg.wdslab.com/acf-blocks-page/

Requirements

• Title
• Number of Posts
• Categories Selector
• Tags Selector
• Background Image, Video, and Color
• Font Color
• Custom CSS Class

Screenshot

[gregrickaby]

From Kick-Off Call:

Not that different from current "Latest Post" gutenblock, however ours is a card. Clone the Latest Post gutenblock and then re-style.

[coreymcollins]

It doesn't look like Gutenberg provides a multi-select option out of the box. Started looking around for some implementations of one and found this: https://github.com/JedWatson/react-select

There are many to choose from, but that one made the most sense to me straight away. Started to play around with that a bit to see what I can learn, but... dinner calls.

[coreymcollins]

Added a standalone task for building out a multiselect component in #28.

[jomurgel]

This may or may not be helpful for grabbing API data https://github.com/WordPress/gutenberg/tree/master/components/higher-order/with-api-data

[jomurgel]

Pulled in the Latest Posts block from the Core Gutenberg and updated for WDS standards. Going to refactor a bunch of this and add some of the WDS block options/backgrounds/etc to extend the functionality.

Will update with #28 once that's in a place to go.

Need to set a set a series of defaults for various fields that don't necessarily have defaults out of the box.

[jomurgel]

Made some progress here.

Description

• Added BlockTitle component to the block.
• Wrapped output in Section.
• Refactored the render function — added new attributes, namespaced.
• Added custom attributes to register_block_type array.
• Output block title.

Issues

I'm having a couple of issues with the Background Type drop-down. Color works just fine, and the drop-down works functionally, but selecting image or video throws this error.

I'm also getting an error when trying to call the <?php \WDS\Gutenberg\template_tags\display_block_options( $attributes ); ?> function inside the render.php file

Error

Fatal error: Uncaught Error: Call to undefined function WDS\Gutenberg\template_tags\display_block_options() in .../gutenberg/wp-content/plugins/wds-gutenberg/src/blocks/recent-posts/render.php:74

Overall I've set some new defaults, refactored some code, issued a PR to Gutenberg Core WordPress/gutenberg#6258 to fix the output of layout classes in the front end, and improved the output.

Screenshots

[jomurgel]

Solved the error with the Background Type Image/Video selection in the drop-down.

Solution:
Replacing

import { get, isUndefined, pickBy } from 'lodash'

with

import _get from 'lodash/get';
import _isUndefined from 'lodash/isUndefined';
import _pickBy from 'lodash/pickBy';

Ensures _ is scoped to the block's code and not to the global _ object. Without this distinction _ was not bound to this and therefore undefined. If I understand the problem.

Issue referenced: WordPress/gutenberg#4043 (comment)

Output:
Image

Video

The backgroundImage and backgroundVideo attribute objects aren't being saved to attributes as the attributes can only be saved as strings.

May need to figure out a workaround for these.

[jomurgel]

The error related to the display_block_options function was resolved by changing up the namespaced location of the function itself.

The block is now saving/updating as expected.

(video)

The output and attributes are being saved and updated on reload as expected.

At this particular moment, the block has been updated to include fixes from the core Gutenberg PR, add WDS functionality (title and block options) and the render function has been updated.

Some cleanup can be done here, but more or less waiting for the multi-select task #28 to be rolled into this block.

[jomurgel]

Updates here.

Branch adds the Multiselect to the sidebar.

Multiselect needs a little work yet to get hooked up. Also, the multi-select in this branch is different and has some updates vs working #28.

Needs:
Working multi-select
Add multi-select results to withAPIData call.

Notes:
The Latest Posts, and so our Recent Posts block (also may affect Related Posts) have some known issues around the API with Gutenberg, referenced here: WordPress/gutenberg#6277

[efuller]

Update:

Overall, I think the majority of the functionality is in place here.

For now, there is the ability to limit posts by tags and categories. Tags or categories can be selected and posts will filter.

When working with dynamic data like this, there is a fine line between using state and using props (attributes). At times, it take some trial an error to get the right combo.

Issues

There are a few items of note in terms of Gutenberg that seem to be having a direct impact on this component.

• The item referenced by @jomurgel above: Latest Posts Blocks don't retrieve content reliably WordPress/gutenberg#6277
• And when trying to use get_the_excerpt() inside a block, things seem to 💥 - get_the_excerpt is taking PHP out of memory in a block rendering WordPress/gutenberg#5572

One way to perhaps get around the get_the_excerpt() issue for us to just use a custom WP_Query. I briefly tested this and it did seem to help, but need to explore further.

Items To Do

• The render.php still needs some work. There are column and grid classes that aren't being saved and applied.
• It would be great to re-work the render.php in a way where the output isn't being concatenated. Using a WP_Query could fix this. We could just copy the output from the Related Posts Block #10.
• In the admin, when the block is not focused, the output needs to match what shows on the frontend.

Improvements

There are tons and tons of ways we can improve this. The work that I've done today is all about just getting something in place that works!

[efuller]

The column and grid issue in render.php has been fixed - 56ebab1

[efuller]

Update:

Nearly there.

Edits

• I've swapped out the recent posts function for our own custom WP_Query inside of the render.php. This allows us to display the excerpt without breaking all the things.
• The admin area should now display the posts as they appear on the frontend.

Todo

I'd like to have a bit of time to just look over my code and make sure it's 👌. After that, I think we are about ready for a PR!

[efuller]

Just a note for a reminder on the remaining requirement items. Things like background options and custom font colors. These need to be tested and accounted for.

[efuller]

Support for:

• Background Image, Video, and Color
• Font Color

has been added.

Need to look into Custom CSS Class. I feel like this is something that is not working on a global level? It shows in the admin, but not on the frontend.

[coreymcollins]

In testing on my local, the custom class (which is core Gutenberg, not from one of our global options components) is working on every block except Github Gist.

If you're rendering via PHP, the class should be coming through in the /template-tags/block-container-options.php in the display_block_options function:

// Setup defaults.
$defaults = array(
    'backgroundType' => isset( $attributes['backgroundType'] ) ? $attributes['backgroundType'] : '',
    'class'          => 'content-block',
    'className'      => isset( $attributes['className'] ) ? $attributes['className'] : '',
    'container'      => 'section',
    'textColor'      => isset( $attributes['textColor'] ) ? $attributes['textColor'] : '',
    'animationType'  => '',
);

And then gets set further in the file here:

// Set the custom css class.
if ( $attributes['className'] ) {
    $attributes['class'] .= ' ' . $attributes['className'];
}

This would only work if you're outputting the opening container tag for the block using display_block_options in a PHP render, and would also pick up the background, text, and other options.

[coreymcollins]

Testing this out locally and have some notes below.

Here, we don't need a <section> tag, as display_block_options will do the work of adding the <section> tag with the necessary classes similarly to how our ACF blocks work currently: https://github.com/WebDevStudios/wds-gutenberg/blob/feature/%239-recent-posts-block/src/blocks/recent-posts/render.php#L62

---

Confirmed that the custom class does not seem to be working here, but does in our other blocks as noted above. Adding:

'className' => array(
    'type' => 'string',
),

To the attributes array here seems to fix this: https://github.com/WebDevStudios/wds-gutenberg/blob/feature/%239-recent-posts-block/src/blocks/recent-posts/render.php#L114

---

I'm not seeing the grid layout on the frontend or backend:

---

Alphabetical Ordering does not seem to be totally accurate.

A-Z

Posts are going L -> V -> P. A-Z Order would be L -> P -> V.

Z-A

Last three posts are going S -> T -> P. Z-A Order would be T -> S -> P.

---

You have an errant " here causing an issue: https://github.com/WebDevStudios/wds-gutenberg/blob/feature/%239-recent-posts-block/src/blocks/recent-posts/render.php#L72

---

This is related to the MultiSelect but this and that component are so closely tied to one another that I'll add a note here. Need a space between words in the block titles - SelectTags. and SelectCategories.:

[efuller]

@coreymcollins

Here is an update! I've made adjustments for the follow:

• Removed the extra <section>
• Fixed the sorting issues
• Added spacing between Select Tags and Select Categories
• Added support for showing/hiding the date
• Removed that errant "

Sorting

From my testing, I am not able to recreate the grid and list views not working.

Here is what I see:

[coreymcollins]

It is very likely, btw, that I am an idiot and didn't even see the buttons to set the posts as list vs grid. 🤦‍♂️

[coreymcollins]

Closed via #42.