Gutenberg block ideas
Display Posts block will have two panels:
- Query Options - for filtering the results.
- Layout Options - for selecting a layout and toggling layout options
- Include basic query options by default. Either a settings page or addon plugin for enabling advanced query options (taxonomy, meta...)
- Use conditional logic to hide most input fields. If they check "Category" then display the UI for filtering by one or more categories.
- Not necessarily a 1-to-1 match to WP_Query. Ex: Order By would have "Newest First" and "Oldest First", rather than selecting orderby = date / order = DESC.
- Include a few layouts built into core (List, Grid, Summary).
- Each layout type will have its own set of layout options. For instance, "List" layout will let you toggle title, author, date, excerpt, but will not include image or full content.
- Each layout will have pre-defined settings for layout options. Selecting "Grid" layout should automatically enable the image, title, and excerpt layout options.
- New layouts can be added by themes and plugins. We need the ability to easily register a list of available layout options and different input types (true/false toggle, dropdown, text field, checkboxes...).
- Each layout loads its own CSS file, only when used on that page (wp_enqueue_style in the block). A site with 20 layouts shouldn't load the styles for all layouts on all pages.
I think some form of layout builder would be very helpful. Many support requests are asking to move elements around in the output (ex: move date before post title).
In the layout dropdown, we could have "Build your own" or "Layout Builder" or something similar. A textarea would appear, pre-populated with some basic smart tags and a link to a tutorial with all available smart tags. Ex:
{{post_title}}
{{post_image size="medium"}}
{{post_date}} - {{post_excerpt}} ... {{read_more}}
Here's a rough mockup built using ACF. One feature incorrectly modeled here is when changing layouts, the checked boxes should change to reflect that layout's default settings
