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

Revisit the bundled Query Block patterns #30508

Closed
kjellr opened this issue Apr 5, 2021 · 10 comments
Closed

Revisit the bundled Query Block patterns #30508

kjellr opened this issue Apr 5, 2021 · 10 comments
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced 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 Apr 5, 2021

@jasmussen and I worked on a few initial Query block patterns to be bundled with Gutenberg as part of #28891:

Large Medium Small
107961753-5487af80-6f74-11eb-886e-9cb84f330031 107961775-5782a000-6f74-11eb-9dc2-61815b06f104 107961784-5baebd80-6f74-11eb-8bb7-cbad36c9f45b

Those were always meant to be temporary to start with. Let's take another look at these, both to replace the current ones for now, but also so that we eventually have a nice set of WordPress community-designed query block patterns to add to the Pattern Directory at launch.

Let's use this thread to brainstorm possible designs. 🌟

@kjellr kjellr added [Type] Enhancement A suggestion for improvement. Needs Design Needs design efforts. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Discussion For issues that are high-level and not yet ready to implement. labels Apr 5, 2021
@kjellr
Copy link
Contributor Author

kjellr commented Apr 5, 2021

Here are a handful of explorations to start us off. Most of these are a bit non-traditional, so we'd want to balance with some more standard layouts too I imagine. Also, note that the bottom one would need some direction forward on #30380.

block-patterns-query

@paaljoachim
Copy link
Contributor

paaljoachim commented Apr 6, 2021

Here are lots to get inspired by....

https://www.harvestmagazine.no/

A Card View (somewhat similar to how Media&Text Block)

Harvestmagazine-post-preview-styles

A variation to the above Card view.

Image-Text-Custom-Post-Preview

Image view.
Image-view-alt-Custom-Post-Preview

Originally posted here:
MediaRon/post-type-archive-mapping#72


A few additions.

https://www.wired.com/

Wired-magazine

https://pixelgrade.com/themes/portfolio/gema/ref/3/

Gema-Blog-page

https://www.helpscout.com/blog/

Helpscout-blog

https://blog.hubspot.com/blog/tabid/6307/bid/34143/12-Inspiring-Examples-of-Beautiful-Blog-Homepage-Designs.aspx

http://www.fubiz.net/

fubiz-blog


fubiz-blog2

https://www.brit.co/

Brit-co-blog


Brit-co-blog2




Tesco-blog-old



https://johnnycupcakes.com/

Johnnycupcakes

@paaljoachim
Copy link
Contributor

Even more.

I searched for card view designs and happened to come across this site. Lots of nice designs there.
https://bashooka.com/cms/beautiful-card-based-wordpress-themes/

Grand

Beatstone

Bizly

La-Madone

Linetime

Home-grid

@beafialho
Copy link

Here are a few query block patterns I've been working on as well:

Captura de ecrã 2021-04-06, às 14 50 14

Captura de ecrã 2021-04-06, às 14 48 44

Captura de ecrã 2021-04-06, às 14 48 57

@melchoyce
Copy link
Contributor

A couple more generic ideas:

query blocks

@georgeolaru
Copy link

A while ago, we designed a block that uses a set of parametric variables to generate a variety of layouts and put cards together in a visual hierarchy. It might be outside the scope of this issue as it relates to the overall layout, but I leave it here as it could spark some ideas for someone.

Here is the full video with a demo:

Screenshot 2021-04-08 at 12-06

@aaditya704
Copy link

Here are some more ideas:
Frame 7Blue
Frame 8Orange
Frame 9Green

@ntsekouras
Copy link
Contributor

ntsekouras commented Apr 12, 2021

Hey 👋 - just keep in mind the the pattern integration is still experimental and is being worked on with the various issues/PRs about this, like patterns in Placeholder, transforms etc..

Latest update is that the experimental scope was removed and blockTypes has taken its place (#30471). The rationale behind this is that every pattern should be available in the Inserter.

See the PR's description for more details.

@markhowellsmead
Copy link

Not every post has a featured image; over half of our agency clients either don't have imagery or don't want to spend time trying to find stock imagery for their posts. It would be great if the layouts worked both with and without images in every post, either using a configurable fallback image, background color or pattern.

@mtias
Copy link
Member

mtias commented Jun 29, 2023

This has been revised already.

@mtias mtias closed this as completed Jun 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced 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

9 participants