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

Query Block: Allow for alternating and irregular layouts #30380

Closed
kjellr opened this issue Mar 30, 2021 · 3 comments
Closed

Query Block: Allow for alternating and irregular layouts #30380

kjellr opened this issue Mar 30, 2021 · 3 comments
Labels
[Block] Query Loop Affects the Query Loop Block Needs Design Needs design efforts. [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.

Comments

@kjellr
Copy link
Contributor

kjellr commented Mar 30, 2021

While thinking through block patterns for the Query block, I quickly ran into the fact that the block currently requires every single post to have the same layout. This is fine for standard post lists, but it's not clear how irregular or alternating layouts would be made possible yet. For example:

Alternating Layout Irregular Layout
Screen Shot 2021-03-30 at 10 22 30 AM Frame 11
@kjellr kjellr added [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. [Block] Query Loop Affects the Query Loop Block labels Mar 30, 2021
@mtias
Copy link
Member

mtias commented Apr 2, 2021

The tradeoffs here are between flexibility, clarity, and ease of creation. For "irregular" layouts, the easiest would probably be to use separate queries with offsets, or even individual posts (latest post with offset 1, latest post with offset 2, etc). For "alternating" layout, it seems like it should be among the options you choose from (like grid or masonry).

We could also have a template per item, or per condition (like 2n), but it can get extremely convoluted quickly. Any operation like that feels like it would need a bit more of a focused environment like the one proposed in #26190.

cc @jeffersonrabb in case you have thoughts on what has felt most intuitive from your work on post-list-blocks.

@mtias mtias added the [Type] Discussion For issues that are high-level and not yet ready to implement. label Apr 2, 2021
@aristath
Copy link
Member

aristath commented Apr 2, 2021

Since alternative/irregular layouts like these will be pretty theme-specific, this could be a block-style...
The theme could for example do something like this:

register_block_style(
	'core/group',
	[
		'name'         => 'alternating-columns',
		'label'        => __( 'Alternating', 'my-theme' ),
		'inline_style' => '
			.wp-block-group.is-style-alternating > .wp-block-columns:nth-child(odd),
			.wp-block-group.is-style-alternating > .wp-block-group__inner-container > .wp-block-columns:nth-child(odd) {
				flex-direction: row-reverse;
			}',
	]
);

@mtias
Copy link
Member

mtias commented Apr 16, 2021

@kjellr this seems the same as #25462. Going to close so that we can consolidate conversation there.

@mtias mtias closed this as completed Apr 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Loop Affects the Query Loop Block Needs Design Needs design efforts. [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants