Skip to content
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.

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

Iterations on "Latest Posts" Block #1594

Closed
7 of 9 tasks
melchoyce opened this issue Jun 29, 2017 · 68 comments
Closed
7 of 9 tasks

Iterations on "Latest Posts" Block #1594

melchoyce opened this issue Jun 29, 2017 · 68 comments

Comments

@melchoyce
Copy link
Contributor

@melchoyce melchoyce commented Jun 29, 2017

This description has been edited — please see issue history for older mockups!

Next steps

  • Featured image support, in its own sidebar section.
    • Include core image size controls.
    • Include core alignment controls.
  • Post content support, in its own sidebar section.
    • Toggle on/off post content.
    • When post content is toggled on, choose between excerpt or full post. (Am I missing a default core option? If it's just the two, maybe this should be a radio button instead).
    • Slider to control excerpt length when the excerpt is selected.
  • Post meta support, in its own sidebar section.
    • Move "Display post date" into here. #13698
    • Add toggle to show/hide post author. #13698
  • Organize settings
    • Move "Order by" and "Category" into its own sidebar section, "Sorting and Filtering." #13698
    • Group "Number of posts" and "Columns" (when grid is selected) into their own sidebar section, "Display Settings." #13698

Why

In preparation for working on page templates in Gutenberg, we'll want a robust set of dynamic blocks that can be dropped into any post or page. Expanding this block will put us in a better position to tackle more complex dynamic or global blocks in the future.

Users shouldn't have to know how to write custom queries or understand the loop to add some posts to their homepage. The Recent Posts block is a great start, but to be a fully functioning solution, it needs to support more than titles and post dates.

What's changed

Before

image

image

After

recent posts list all

recent posts grid all

  • Added support for featured images, post content and excerpts, and post meta.
  • Reorganized the sidebar settings into groups.
  • Used the new Toolbar grouping design (unsure if this has been implemented yet).
  • Updated the icons, but this is optional, we can continue using the existing Dashicons for now.

View the complete prototype.

Future iterations

h/t @paaljoachim for a couple of these suggestions:

  • Expand on taxonomy offerings, like tags.
  • CPT support.
  • A way to update the "read more" text.
  • A way to rearrange all the elements inside of the block — move up meta, move featured image below title, etc.
  • Potentially display comment information (like # of comments).

Note to new contributors

This issue itself is big but can be divided into smaller tasks which should be a great way to start contributing to Gutenberg with code. If you want to help please leave a comment and we will discuss what would be the best next step.

@westonruter
Copy link
Member

@westonruter westonruter commented Jun 30, 2017

I love this. Pairing these initial display attributes with eventual query attributes will be extremely powerful. I agree that adding query attributes could be a separate issue, but it will be amazing to have a component that allows for query building. Imagine a UI that allows you to construct the params for WP_Query. Not only would that allow for the block to pull posts from multiple post types, but there could also be a UI for selecting specific posts to show in a specific order, and as such it would be a curation block as well. Maybe that should be a separate block type.

Loading

@brentjett
Copy link

@brentjett brentjett commented Jun 30, 2017

I love the idea. My only thing is it should be as close to effortless for theme authors to support as possible. If it can output all the layouts without any styling burden on the theme then 💯

This could be a great way to accomplish "related posts" blocks (echoing what Weston said above about curation)

Loading

@paaljoachim
Copy link
Contributor

@paaljoachim paaljoachim commented Jun 30, 2017

Actually prettifying the archive block as well would be helpful.
#1464

Loading

@StaggerLeee
Copy link

@StaggerLeee StaggerLeee commented Jun 30, 2017

Would be perfect for Related Articles (manual, not by tags). Just one search field at the top (Post setting is best place for search) where we could type title of Post, and make Related Articles block after all content.

Still I find it as more used than simple listing of Latest Posts. If navigation and structure of website is done well Latest Posts blocks are not needed.

Have to say all the time, it is my personal experience. I dont know how others use it, and how much.
I never used Latest posts widget. Used several times Related Posts plugins, or ACF field for it.

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Jun 30, 2017

agree that adding query attributes could be a separate issue, but it will be amazing to have a component that allows for query building. Imagine a UI that allows you to construct the params for WP_Query.

This is what I love about the Make theme from Theme Foundry! It allows someone like me, who struggles with development, to build a more dynamic site. I think this is one of the reasons themes like Make and Divi are so popular — you can build pretty decent sites for clients even without a whole lot of development experience. So many of the freelancers I encounter are jack-of-all-trades, rather than specialists, and rely on themes and plugins to do the heavy lifting. If we make this easier and standard in core, we open up a lot more opportunities for folks with broad skills to make a living using WordPress.

Have to say all the time, it is my personal experience. I dont know how others use it, and how much. I never used Latest posts widget.

I haven't really used it either, because IMO it's not particularly useful in its current form. This is why I think we should enhance it. Imagine building a homepage where you have a nice cover (hero) image at the top, a list of services, and then some of your latest news posts in a grid. Previously you either had to build this yourself, or find a theme that does it — and even then, setting up themes can be super hard. Hopefully blocks can make something like that much easier.

Loading

@celloexpressions
Copy link

@celloexpressions celloexpressions commented Jul 3, 2017

there could also be a UI for selecting specific posts to show in a specific order, and as such it would be a curation block as well. Maybe that should be a separate block type.

I opened #1651 for this. This is where menus can be integrated with widgets and editor blocks.

Loading

@folletto
Copy link
Contributor

@folletto folletto commented Jul 3, 2017

it will be amazing to have a component that allows for query building

If we make this easier and standard in core, we open up a lot more opportunities for folks with broad skills to make a living using WordPress.

What if it's a reusable sidebar "panel" that can be added inside the inspector sidebar, so we can design it once, and any component that does queries can show that. Universal, standardized, yet allows each component to decide what to do with that data?

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Jul 4, 2017

What if it's a reusable sidebar "panel" that can be added inside the inspector sidebar, so we can design it once, and any component that does queries can show that. Universal, standardized, yet allows each component to decide what to do with that data?

Having trouble understanding your idea — can you draw up a quick sketch?

Loading

@folletto
Copy link
Contributor

@folletto folletto commented Jul 4, 2017

gutenberg-standard-posts-filter

It's ugly as hell, and I would probably never ship something like this but yeah, just to give the idea...

In short, it's a "WP Query Panel".

It's an API, provided by the Editor, that any block can make use of. Any block that filters content can just declare "show that Filter Content UI" and they have it, without any need to write it from scratch. It's basically a way for the block to say "give me a list of posts for me to work on, and show the standard UI to the user".

It can start super simple (just number of returned items and sorting maybe? or just categories?) and then it can evolve and become as complex as research will tell us to evolve, the limit being just the power of WP_Query.

Benefits:

  1. Any developer that needs to get content in their block, can simply implement it, without having to program the UI from scratch.
  2. If WordPress updates and there are upgrades to the UI of the "Filter Content" panel, every block that makes use of it will get automatically upgraded too.

Cons:

  1. I can't see any cons to this approach, except deadlines: we might want something VERY simple to start with, so Core and new block plugins can use it, and then start upgrading it over time as it can blow up in a fairly complex UI.

I hope it's clearer.

Loading

@westonruter
Copy link
Member

@westonruter westonruter commented Jul 8, 2017

@folletto Eventually, what about this WP Query Panel being similar to the Inserter? All of these fields you have mocked here could be hidden, and then there could be an “Add filter” button that pops open an Inserter dialog similar to the Inserter for blocks, and then you could select from that dialog the conditions that you want to filter by, whether that be categories, tags, other taxonomies, meta, authors, date ranges, and so on.

Loading

@StaggerLeee
Copy link

@StaggerLeee StaggerLeee commented Jul 8, 2017

It is difficult one, very difficult. After so much time dealing with WP I still have no clue what are my favorite WP_Query parameters. Somehow ends you allways use different ones. So, what to put inside this block, what options. All parameters ?

Only if WP fields API had repeater field, so we could type parameters manually, and add next one after another. Space is problem, parameters are many. Not so many, but for right sidebar to much.

Loading

@folletto
Copy link
Contributor

@folletto folletto commented Jul 10, 2017

It is difficult one, very difficult.

Absolutely. That's exactly why I think providing a standardized UI is better than leaving it up to every single block author. :)

what about this WP Query Panel being similar to the Inserter?

It can totally be! To be clear: I don't mean at all to propose the one I designed above to be a good solution, it's just a mockup to make clear what I was referring to.

If we think it's a good idea (as it seems to be), I'd suggest to split it in a new issue and at least 2 phases, if not more:

  1. Define a few minimal fields to ship quickly, with the API at the code level, so author can make use if it from launch, even if it's not exhaustive. This could have a design with simple dropdowns / text areas as it's just a couple of fields.
  2. Once that's in place, do a more extensive research and design and define a richer filtering UI, which might look like the one to Insert blocks, or others (could be a tag system, could be like Automator, etc – needs to be done separately).

Loading

@westonruter
Copy link
Member

@westonruter westonruter commented Jul 10, 2017

@folletto sounds like a good plan! So with these implemented, should the block be renamed from “Latest Posts” to something more general, like “Post List”?

Loading

@folletto
Copy link
Contributor

@folletto folletto commented Jul 11, 2017

I think the block could be the same – at least for v1 – as that's a better conversion from the past – as well as I don't think we will build a super complicated Query Panel for v1 (I'm not sure if it should have sorting from the start, maybe yes, maybe no?). In the future as the Query Panel adds more option, might be a good idea.

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Jul 12, 2017

I agree that we can release a simpler v1 (v2 at this point?) of the block, and then take more time to explore what more complex queries could look like — maybe in tandem with #1651. I think it's worth taking more time to get it right.

Loading

@StaggerLeee
Copy link

@StaggerLeee StaggerLeee commented Jul 30, 2017

Latest Posts block has some delay od 4-6 seconds when increasing number of Posts with "Number of posts to show" (Localhost. Website has a bit more over 1500 public Posts).

This delay is of course maybe normal, but under this time no visual indicator is there that shows Post(s) is retreiving in background.

I am afraid it can result in many clicks around, or changing value in same option, again and again. User can think it is not working.

Decraeasing number of Posts is immediately, in millisecond.

Loading

@westonruter
Copy link
Member

@westonruter westonruter commented Jul 31, 2017

Yes, there should be a loading indicator.

Loading

@draganescu
Copy link
Contributor

@draganescu draganescu commented May 2, 2019

I have merged #14627 a PR by @AmartyaU that adds post content support with some improvements to the excerpt handling, which solves all the items in "Post content support, in its own sidebar section." in the original issue.

Loading

@paaljoachim
Copy link
Contributor

@paaljoachim paaljoachim commented Jun 4, 2019

Automattic is now working on a site editing experience.

(2P) FSE: a11y improvements for posts-list-block
Automattic/wp-calypso#33538

Loading

@kllp
Copy link

@kllp kllp commented Jun 8, 2019

I can't find the added support for featured images.
I found a PR but it was closed: #13698
Do you know a workaround so the images get displayed?
That would be awesome!

Loading

@rodrigodagostino
Copy link

@rodrigodagostino rodrigodagostino commented Jun 12, 2019

A while ago, I developed a custom block using the Latest Posts Block as base and worked from there. This is what my block looks like:

Opera Snapshot_2019-06-12_162611_localhost

Opera Snapshot_2019-06-12_162705_localhost

And just today I found out there was an opened issue to further develop the Latest Posts Block. I'm still a bit unfamiliar with the GitHub environment, but please, let me know if this can be of any help.

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Jun 12, 2019

@rodrigodagostino Would you mind sharing how you added featured images? Maybe someone would be able to turn that into a PR.

Loading

@rodrigodagostino
Copy link

@rodrigodagostino rodrigodagostino commented Jun 12, 2019

@melchoyce sure thing! After quite a lot of different attempts, the most practical way I found was to add extra information to the REST API. Doing it this way, there was no need to make extra fetch calls to get the information needed, and it is information that can also be easily obtained on the PHP side of the matter.

I wouldn't mind making a PR for this, but I understand that, regarding the WP code structure, this is probably not the “cleanest” way to implement a feature like this. I did the same for author, categories, comments and audio files. And again, my main focus was to keep the fetch calls limited to a single one in order to speed up the loading process.

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Jun 12, 2019

@draganescu @gziolo What do you think?

Loading

@gziolo
Copy link
Member

@gziolo gziolo commented Jun 13, 2019

It looks like @ajitbohra had some proposal for featured images. He simply closed his PR #13698 because there was an alternative one which contained more features. We should try to reuse the same logic and see if it works. Is it the only features missing?

Loading

@coreymckrill
Copy link
Contributor

@coreymckrill coreymckrill commented Jun 13, 2019

The Sponsors and Sessions blocks for WordCamp.org have an implementation of featured images that might be worth a look.

https://github.com/WordPress/wordcamp.org/tree/production/public_html/wp-content/mu-plugins/blocks/source

Loading

@StaggerLeee
Copy link

@StaggerLeee StaggerLeee commented Jun 13, 2019

This block is something most genial in WP for years.

Loading

@karmatosed karmatosed removed this from Widgets in Phase 2 Jul 16, 2019
@noisysocks noisysocks added this to In Progress in Blocks Jul 19, 2019
@davipontesblog
Copy link

@davipontesblog davipontesblog commented Aug 13, 2019

This block could definitely replace the Blog Posts listing block found in Full Site Editing plugin with these changes. Here is a plugin that currently offers a lot of these options as well now: https://wordpress.org/plugins/atomic-blocks/ (namely, the ability to filter by content type, show featured images or not, and also select pages or posts seem like great ways to extend the functionality here).

Loading

@gziolo
Copy link
Member

@gziolo gziolo commented Aug 13, 2019

@melchoyce - where are we in terms of this issue? Isn't it a good moment to close this one and open smaller tasks for remaining changes? Is the ability to use the featured image the last missing bit?

Edit: I see the todo list now, maybe we should move it up in the description :)

Loading

@melchoyce
Copy link
Contributor Author

@melchoyce melchoyce commented Aug 16, 2019

Moved the list up. @ryelle is going to look into turning the WordCamp featured image functionality into a PR for the Latest Posts block :)

Loading

@ryelle
Copy link
Contributor

@ryelle ryelle commented Aug 22, 2019

So the first step I'm taking here is creating the ImageSizeControl component based on the Image block's controls: #17148

Next, we need to figure out a way to get whatever the base imageHeight & imageWidth should be, since we can't assume all images will be the same size. I'm thinking if we can get the data for what each image size corresponds to (ie, thumbnail is 150x150, etc). I've added a draft PR for adding Featured Images, with some @todo comments that might explain this issue better.

Then we can use the sizes as max height/max width, rather than fixed height & width– that way images aren't skewed (also done in that PR).

Loading

jorgefilipecosta pushed a commit that referenced this issue Feb 9, 2020
See #1594. This commits builds on #17148 to add featured image to the Latest Posts block. It uses that new ImageSizeControl control and adds an alignment control for image alignment.
@sainthkh
Copy link
Contributor

@sainthkh sainthkh commented Feb 25, 2020

@draganescu All of the items in this issue are done, right? Because #17571 is merged.

And don't you think #17472 should be closed, too?

Loading

@youknowriad
Copy link
Contributor

@youknowriad youknowriad commented Feb 25, 2020

I'm closing this, let's open smaller focused issues if needed.

Loading

Blocks automation moved this from In Progress to Done Feb 25, 2020
@draganescu
Copy link
Contributor

@draganescu draganescu commented Feb 26, 2020

Howdy @sainthkh indeed this issue can be closed. It is continued in intention by #20046.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment