Add: Services - Two-column boxed pricing table #165

juanfra · 2024-08-30T15:42:59Z

Description

Fixes #78

Adding the two-column pricing pattern.
I haven't used the "ticks" for the pricing plan details, but instead I used a regular list. Not sure if we want to pursue the "tick", I believe that's not possible out of the box.
I'm also fixing the margin for the "Three column services" pattern that I noticed now that we have section styles.
I'm also adjusting the button font size if we decide not to proceed with this.

Screenshots

Screen.Recording.2024-08-30.at.17.34.38.mov

Testing Instructions

Create a page.
Add the pattern.
Confirm that the design is OK (spacing, border-color, font-size, etc).

github-actions · 2024-08-30T15:43:13Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: beafialho <beafialho@git.wordpress.org>
Co-authored-by: rejaulalomkhan <rejaulalomkhan@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

rejaulalomkhan · 2024-08-31T05:28:21Z

Thanks for the excellent PR @juanfra. I have tested it, The spacing, border, and border-radius, are perfect 👌

carolinan · 2024-09-01T14:02:42Z

patterns/cta-pricing.php

+			<h3 class="wp-block-heading" id="free">Free</h3>
+			<!-- /wp:heading -->
+
+			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|primary"}}}},"textColor":"primary","fontSize":"large"} -->


This text color needs to be removed to make it consistent with the second pricing option and to make it work with the section styles.

Thanks for reviewing, Carolina!

I followed the design, where that particular color is used for that element

It does not work with the style variations:

Yes, it does not look well. We may want to update the "secondary" in some variations, or not use it in this pattern. I'll defer this to @beafialho

Thank you! We can use the Primary color on the 0€

patterns/cta-pricing.php

carolinan · 2024-09-02T08:46:44Z

Twenty Twenty-Four has an example of how to add the custom bullets for the unordered list as a block style:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyfour/functions.php#L70

beafialho · 2024-09-02T10:00:25Z

Thank you @juanfra! The pricing boxes are not looking great on mobile:

Here's what I suggest instead, which looks good across screen sizes. I realize the approach of adding two extra columns with spacers inside may seem unnecessary, but the spacers are there to make it look perfect on mobile as well.

pricing.mp4

<!-- wp:group {"metadata":{"categories":["call-to-action","featured"],"patternName":"twentytwentyfive/cta-pricing","name":"Pricing two columns"},"align":"full","className":"is-style-default","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-default" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--30)"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">These are our membership options. You can cancel or pause anytime.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns {"align":"full","className":"is-style-default","style":{"spacing":{"margin":{"bottom":"0"},"padding":{"right":"var:preset|spacing|50","left":"var:preset|spacing|50","top":"0","bottom":"0"},"blockGap":{"top":"var:preset|spacing|40","left":"var:preset|spacing|50"}}}} -->
<div class="wp-block-columns alignfull is-style-default" style="margin-bottom:0;padding-top:0;padding-right:var(--wp--preset--spacing--50);padding-bottom:0;padding-left:var(--wp--preset--spacing--50)"><!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"border":{"width":"1px","color":"var:preset|color|opacity-20","radius":"10px"}}} -->
<div class="wp-block-column has-border-color" style="border-color:var(--wp--preset--color--opacity-20);border-width:1px;border-radius:10px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="free">Free</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">0€</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checkmark-list","style":{"spacing":{"padding":{"left":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"fontSize":"small"} -->
<ul style="padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)" class="wp-block-list is-style-checkmark-list has-small-font-size"><!-- wp:list-item -->
<li>Get access to our paid articles and weekly newsletter.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Join our IRL events.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Get a free tote bag.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>An elegant addition of home decor collection.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Join our forums.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Join</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","right":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50"}},"border":{"width":"1px","color":"var:preset|color|opacity-20","radius":"10px"}},"layout":{"type":"default"}} -->
<div class="wp-block-column has-border-color" style="border-color:var(--wp--preset--color--opacity-20);border-width:1px;border-radius:10px;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="single">Single</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">20€/month</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checkmark-list","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"fontSize":"small"} -->
<ul style="padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)" class="wp-block-list is-style-checkmark-list has-small-font-size"><!-- wp:list-item -->
<li>Get access to our paid articles and weekly newsletter.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Join our IRL events.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Get a free tote bag.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>An elegant addition of home decor collection.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Join our forums.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Join</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"8%"} -->
<div class="wp-block-column" style="flex-basis:8%"><!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

juanfra · 2024-09-02T12:27:59Z

Thanks @beafialho - The empty columns are a good trick for making it look good on mobile. I'll keep this in mind for future patterns as well.

After applying the code you shared the only thing that needs adjustment, in my view, is that the pattern is taking full width, and on big screens the content is expanding and taking a width that's bigger than the site-wide. I wanted to double-check with you that this wasn't intentional so that I fix it before pushing the changes of the columns.

Screen.Recording.2024-09-02.at.14.24.33.mov

beafialho · 2024-09-02T14:43:37Z

After applying the code you shared the only thing that needs adjustment, in my view, is that the pattern is taking full width, and on big screens the content is expanding and taking a width that's bigger than the site-wide. I wanted to double-check with you that this wasn't intentional so that I fix it before pushing the changes of the columns.

Oh thanks, it's not intentional. Ideally the boxes inside that outer group are wide width.

juanfra · 2024-09-03T15:16:39Z

@beafialho can you please give this one another look when you have time? Thanks ✨

beafialho · 2024-09-03T15:24:17Z

@beafialho can you please give this one another look when you have time? Thanks ✨

Yes, sure. I'm still seeing the content a bit too tight, is it looking like this on your end as well? See recording:

pricing.mp4

I wonder if we could lose the left/right padding? It seems to look the same on desktop, but it looks much better on mobile.

Please ignore the bg color, it was just to have a view of the bg spacing.

juanfra · 2024-09-03T16:38:52Z

I removed the horizontal padding and changed the width of the fake columns to 9%, as we discussed.

juanfra added 3 commits August 30, 2024 17:36

Add the two-column pricing table pattern.

9beb0f5

Adjust the button font-size.

d062eb3

Fix margin for the services three-column pattern.

e3bfb25

juanfra added the [Component] Block Patterns label Aug 30, 2024

juanfra self-assigned this Aug 30, 2024

juanfra requested a review from carolinan August 30, 2024 15:43

carolinan reviewed Sep 1, 2024

View reviewed changes

carolinan reviewed Sep 2, 2024

View reviewed changes

patterns/cta-pricing.php Show resolved Hide resolved

Remove <strong>

55e633b

juanfra requested a review from carolinan September 2, 2024 07:59

juanfra added 2 commits September 2, 2024 11:05

Add checkmark for lists.

30a3d87

Add checkmark style for the pricing pattern lists.

f132eab

Merge branch 'trunk' into add/pricing-2-col-pattern

ee00d80

juanfra added 2 commits September 3, 2024 12:46

Merge branch 'trunk' into add/pricing-2-col-pattern

3373bfd

Add columns. Apply suggestions from code review.

d59a5e8

juanfra requested a review from beafialho September 3, 2024 10:53

Apply suggestions from the review.

4915b1a

juanfra merged commit a379a6c into trunk Sep 4, 2024
3 checks passed

juanfra deleted the add/pricing-2-col-pattern branch September 4, 2024 09:04

juanfra mentioned this pull request Sep 10, 2024

About: Overlap Images With Paragraph #252

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add: Services - Two-column boxed pricing table #165

Add: Services - Two-column boxed pricing table #165

juanfra commented Aug 30, 2024

github-actions bot commented Aug 30, 2024 •

edited

Loading

rejaulalomkhan commented Aug 31, 2024

carolinan Sep 1, 2024

juanfra Sep 2, 2024

carolinan Sep 2, 2024

juanfra Sep 2, 2024

beafialho Sep 2, 2024

carolinan commented Sep 2, 2024

beafialho commented Sep 2, 2024

juanfra commented Sep 2, 2024

beafialho commented Sep 2, 2024

juanfra commented Sep 3, 2024

beafialho commented Sep 3, 2024

juanfra commented Sep 3, 2024

Add: Services - Two-column boxed pricing table #165

Add: Services - Two-column boxed pricing table #165

Conversation

juanfra commented Aug 30, 2024

github-actions bot commented Aug 30, 2024 • edited Loading

rejaulalomkhan commented Aug 31, 2024

carolinan Sep 1, 2024

Choose a reason for hiding this comment

juanfra Sep 2, 2024

Choose a reason for hiding this comment

carolinan Sep 2, 2024

Choose a reason for hiding this comment

juanfra Sep 2, 2024

Choose a reason for hiding this comment

beafialho Sep 2, 2024

Choose a reason for hiding this comment

carolinan commented Sep 2, 2024

beafialho commented Sep 2, 2024

juanfra commented Sep 2, 2024

beafialho commented Sep 2, 2024

juanfra commented Sep 3, 2024

beafialho commented Sep 3, 2024

juanfra commented Sep 3, 2024

github-actions bot commented Aug 30, 2024 •

edited

Loading