Enhance the initialisation of Query with a second step for setting attributes

[ntsekouras]

With this PR merged: #26378 we exposed a Placeholder in Query block in which you can select some block variations that affect the displayed Post Blocks (like Post Title + Post Date etc..).

We should enhance the initialisation of Query block by having a second step for easy setting of attributes, after selecting 'layout'(ex title + excerpt) variation in Placeholder.

[mapk]

I believe the most important setting in this step is selecting which Post Type. All other settings, if we use smart defaults, should be of lesser importance. With that in mind, I'd like to try just prompting the user to select the Post Type in this step only.

Mockup

Adding a "step 2" will require us to add verbiage about the first step being "step 1" so people can understand what's coming next.

BUT, based on some design feedback, the steps in this scenario should be switched. Step 1 should be about picking the content and Step 2 should be about selecting the layout. That would look something like this:

Prototype

[ntsekouras]

If we are going to add only one option here: post type, I'm wondering if this could be in a single step.. 🤔

[mapk]

Considering the option of combining the steps, it could look like this:

If the Post Type defaults to "Post" it can easily be skipped by the user, and the variation buttons would be the only trigger required to move on from the Placeholder screen to the actual block. This does allow ONE click to go from Placeholder to block instead of the two step process which requires TWO clicks.

[mapk]

While I like the one-click, everything in one screen scenario, it does feel like a lot of info presented, and the larger block placeholder takes up more space. As a site-builder, I have to discern my post type AND layout seemingly altogether. The particular mockup above doesn't provide a clear button to advance. Once we're placing more form fields into a placeholder, including a button to submit the settings and clearly advance is probably necessary.

For some of these reasons, I'd suggest we roll out with the 2 step, 2 screen, process for now. It also allows us to add any other settings we think would be beneficial in the setup process.

[paaljoachim]

I am a bit forth and back on the above concept.
On one side I really like having the option to select which Post type and variation I want to use in one screen.
Then on the other side it can feel a bit busy.

As I just read your comment above here.
I would say go with it. Whichever way it becomes we have to get used to a new block and the process it gives us.
Which for this block can work fine with a two step process.

1. Selecting the Post type.
2. Selecting the variation.

[manzwebdesigns]

What about using an accordion with the currently selected option as text showing in the closed postion to present them? That way the user could decide if they really need to change the default?

[shaunandrews]

Should this setup process allow me to choose things like author, category, count, or offset?

[mapk]

Should this setup process allow me to choose things like author, category, count, or offset?

Not necessarily. None of those settings are integral for getting the block onto the page. They're better suited for fine-tuning once content is displayed on the page. An exception here could be the count.

[shaunandrews]

I can see that. But I can also see setting most/all of the options when I first add the block, and then never having to touch them again. It seems like the setup state is the perfect place to set those options, rather than having to add and then update the defaults after the fact.

[ntsekouras]

I think we could add the display as grid|list option in the settings step. What do you think?

[mapk]

I think we could add the display as grid|list option in the settings step. What do you think?

This relates to the existing layouts icons. Right now those setting icons show the content in list view. I'd need to think this through a bit more to see how introducing a grid|list setting might impact those.

Questions

1. If I select grid on the first step, will step 2 show these same settings but with grid icons instead?
2. Do we minimize the content settings icons into a simple dropdown without icons? And then use List and Grid as the new icons to select from?
3. Do we just not include grid at all for now?

I'll mockup some ideas of how this can be done.

[ntsekouras]

If I select grid on the first step, will step 2 show these same settings but with grid icons instead?

I'm not sure.. I don't know if our current icons for the variations could be shown by representing a single post (?). Could this work? For example for Title+Date show an Icon which shows these 2 only and not represent them as a list?

Also should we take this into account now: #27128? The global query inherit?

I'll have more proposals soon that I'll get back to Query work... :)

[mapk]

I don't know if our current icons for the variations could be shown by representing a single post (?).

They might be more abstract, but it's worth exploring.

As I meandered down this flow, I put together this quick one.

It's just to show the exploration and doesn't feel quite right. I'm exploring a simplified icon set instead now.

Also should we take this into account now: #27128? The global query inherit?

Yes. I saw that one! It definitely feels like part of the setup placeholder screen.

[mapk]

Hey @ntsekouras, I'm iterating a bit more on those icons. Here they are as simple icons without any list/grid representation. I'm designing them to align nicely with the Column block's layout icons. This is why they include a strong border, and sit at 34x24 pixels.

[mapk]

Adding in the "Inherit from URL" option in the placeholder. This one's pretty important to include up front. With the toggle active, the user can click "Next" and lead right into the layout step. By toggling it "off", the user can select from a list of post types. This is essentially how it works in the sidebar now: #27128.

I like this direction best. Keeping the inheritance of the URL, the post type, and the layout in the placeholder screen works well and generally displays a feed that, by those choices, the user should be expecting.