Categories (Images in 4 columns)

Open
#182 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
wordpress
Domain
content, design

Research direction

Start with the issue's embedded WordPress block markup and accompanying screenshot. Review the proposed four-column image layout, category suggestion, and button treatment, then check the repository's pattern-submission guidance if available. Done means the pattern has an agreed category and meets the project's acceptance criteria.

Written by the indexing model from the issue text.

Description

I'm not sure how to categorize this on the pattern site - I think I'm going to put this in the "Images" category. I'm also gonna use the default button colors so that it blends better with different themes.

image

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"bottom":"60px"}}}} -->
<div class="wp-block-group alignfull" style="padding-bottom:60px"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"36px","fontWeight":"400"}}} -->
<h2 style="font-size:36px;font-weight:400">Browse Categories</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:buttons {"contentJustification":"right"} -->
<div class="wp-block-buttons is-content-justification-right"><!-- wp:button {"fontSize":"tiny","style":{"border":{"radius":"0px"}}} -->
<div class="wp-block-button has-custom-font-size has-tiny-font-size"><a class="wp-block-button__link" style="border-radius:0px"><strong><span class="uppercase">View All</span></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"1px","left":"0px"}}}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:1px;padding-left:0px"><!-- wp:image {"id":4225,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://dotcompatterns.files.wordpress.com/2021/07/eiliv-sonas-aceron-syef6richpe-unsplash.jpg?w=640" alt="" class="wp-image-4225"/><figcaption><strong>CUPCAKES</strong></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"1px","left":"0px"}}}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:1px;padding-left:0px"><!-- wp:image {"id":4226,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default","style":{"color":[]}} -->
<figure class="wp-block-image size-large is-style-default"><img src="https://dotcompatterns.files.wordpress.com/2021/07/heather-barnes-_tn1m5r1pfi-unsplash.jpg?w=639" alt="" class="wp-image-4226"/><figcaption><strong>CAKES</strong></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"1px","left":"0px"}}}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:1px;padding-left:0px"><!-- wp:image {"id":4227,"sizeSlug":"large","linkDestination":"custom","style":{"color":[]}} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2021/07/monika-grabkowska-jsgjtbor6jy-unsplash.jpg?w=640" alt="" class="wp-image-4227"/><figcaption><strong>DESSERTS</strong></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"1px","left":"0px"}}}} -->
<div class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:1px;padding-left:0px"><!-- wp:image {"id":4229,"sizeSlug":"large","linkDestination":"custom","style":{"color":[]}} -->
<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2021/07/heather-barnes-6ehege5m_ag-unsplash.jpg?w=640" alt="" class="wp-image-4229"/><figcaption><strong>MACARONS</strong></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Dominant language
No language data
Stars
7
Forks
2
PR merge metrics
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from Automattic/blockpatterns

All issues in Automattic/blockpatterns

Similar issues

More Content issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.