Add pricing table pattern #20644

enriquesanchez · 2020-03-05T01:14:01Z

Adds a Pricing table section block pattern for #20345.

⚠️ Waiting on https://core.trac.wordpress.org/ticket/49580 to update image URL paths.

<!-- wp:group {"customBackgroundColor":"#f2f2f2","align":"full"} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f2f2f2"><div class="wp-block-group__inner-container"><!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"customBackgroundColor":"#279bd1"} -->
<div class="wp-block-group has-background" style="background-color:#279bd1"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","customTextColor":"#222222","fontSize":"large"} -->
<p style="color:#222222" class="has-text-color has-text-align-center has-large-font-size"><strong>Tier 1</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"has-text-color has-background"} -->
<hr class="wp-block-separator has-text-color has-background"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Duis aute irure dolor in.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Reprehenderit in voluptate.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":220} -->
<div style="height:220px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Select</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"customBackgroundColor":"#279bd1"} -->
<div class="wp-block-group has-background" style="background-color:#279bd1"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","customTextColor":"#222222","fontSize":"large"} -->
<p style="color:#222222" class="has-text-color has-text-align-center has-large-font-size"><strong>Tier 2</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"has-text-color has-background"} -->
<hr class="wp-block-separator has-text-color has-background"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Duis aute irure dolor in.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Reprehenderit in voluptate.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Cillum dolore</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":135} -->
<div style="height:135px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link">Select</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"customBackgroundColor":"#279bd1"} -->
<div class="wp-block-group has-background" style="background-color:#279bd1"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","customTextColor":"#222222","fontSize":"large"} -->
<p style="color:#222222" class="has-text-color has-text-align-center has-large-font-size"><strong>Tier 3</strong></p>
<!-- /wp:paragraph -->

<!-- wp:separator {"className":"has-text-color has-background"} -->
<hr class="wp-block-separator has-text-color has-background"/>
<!-- /wp:separator -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Duis aute irure dolor in.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Reprehenderit in voluptate.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Cillum dolore</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"customBackgroundColor":"#ffffff"} -->
<p style="background-color:#ffffff" class="has-background">Dolore eu fugiat</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":50} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"align":"center"} -->
<div class="wp-block-button aligncenter"><a class="wp-block-button__link">Select</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:group -->

github-actions · 2020-03-05T01:19:18Z

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.83 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.93 kB	0 B
`build/block-directory/style-rtl.css`	790 B	0 B
`build/block-directory/style.css`	791 B	0 B
`build/block-editor/index.js`	105 kB	0 B
`build/block-editor/style-rtl.css`	10.8 kB	0 B
`build/block-editor/style.css`	10.8 kB	0 B
`build/block-library/editor-rtl.css`	7.22 kB	0 B
`build/block-library/editor.css`	7.22 kB	0 B
`build/block-library/index.js`	119 kB	0 B
`build/block-library/style-rtl.css`	7.48 kB	0 B
`build/block-library/style.css`	7.48 kB	0 B
`build/block-library/theme-rtl.css`	683 B	0 B
`build/block-library/theme.css`	685 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	48.1 kB	0 B
`build/components/index.js`	182 kB	0 B
`build/components/style-rtl.css`	17.1 kB	0 B
`build/components/style.css`	17.1 kB	0 B
`build/compose/index.js`	6.68 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.42 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.11 kB	0 B
`build/edit-navigation/index.js`	6.6 kB	0 B
`build/edit-navigation/style-rtl.css`	857 B	0 B
`build/edit-navigation/style.css`	856 B	0 B
`build/edit-post/index.js`	302 kB	0 B
`build/edit-post/style-rtl.css`	12.2 kB	0 B
`build/edit-post/style.css`	12.2 kB	0 B
`build/edit-site/index.js`	12.8 kB	0 B
`build/edit-site/style-rtl.css`	5.22 kB	0 B
`build/edit-site/style.css`	5.22 kB	0 B
`build/edit-widgets/index.js`	7.73 kB	0 B
`build/edit-widgets/style-rtl.css`	4.59 kB	0 B
`build/edit-widgets/style.css`	4.59 kB	0 B
`build/editor/editor-styles-rtl.css`	425 B	0 B
`build/editor/editor-styles.css`	428 B	0 B
`build/editor/index.js`	44.3 kB	0 B
`build/editor/style-rtl.css`	5.07 kB	0 B
`build/editor/style.css`	5.08 kB	0 B
`build/element/index.js`	4.65 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.64 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	711 B	0 B
`build/keyboard-shortcuts/index.js`	2.51 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.13 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	5.29 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	14.8 kB	0 B
`build/server-side-render/index.js`	2.68 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/url/index.js`	4.02 kB	0 B
`build/viewport/index.js`	1.84 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

enriquesanchez · 2020-04-08T23:14:12Z

Hi @mtias 👋

Wondering if you have any comments about this pattern. Let me know if you think it can be improved or if we should close this PR instead.

mapk · 2020-04-10T01:12:42Z

I think this is close, but can use a bit more design adjustments.

Let's use real text.
Work on the colors a bit more. I think we can find some really beautiful tertiary or complimentary colors.
Maybe try using all caps in the buttons.

enriquesanchez · 2020-04-13T20:44:59Z

@mapk @mtias here's a revision:

enriquesanchez · 2020-04-14T21:51:15Z

@mapk Another iteration:

What do you think about the list block used for the plan features? It seemed like the most obvious block to use, but there's not much styling that can be applied to it.

Also, I'm using the spacer block to try and match the height of the three columns, which is why they don't have perfectly equal height.

mapk · 2020-04-30T00:18:32Z

This looks good for what we can currently achieve in Gutenberg. I like the direction. Let's merge it.

mapk · 2020-05-06T19:37:29Z

@enriquesanchez I noticed you did some more visual updates. Can you share a screenshot? One for the editor and one for the frontend. 🙏

enriquesanchez · 2020-05-06T22:44:29Z

@mapk

Inserter:

Editor:

Front-end:

Not sure what to do about the layout issue on the inserter. I can make the font smaller but that would obviously affect the front-end.

This may also be a case of fine-tuning how we render previews in the inserter. Most patterns feel very tall and narrow. Is there something that could be done @youknowriad?

mapk · 2020-05-07T02:33:43Z

This should be refined so that the preview is strong before we merge it. If we can't get it there, @enriquesanchez, I suggest we just not merge this one.

youknowriad · 2020-05-07T12:11:37Z

This may also be a case of fine-tuning how we render previews in the inserter. Most patterns feel very tall and narrow. Is there something that could be done @youknowriad?

Yes, @mtias opened this issue #22147 where we could choose a width per pattern solving this.

enriquesanchez · 2020-05-12T17:51:48Z

Looks like #22216 will let us fix the preview issues.

enriquesanchez · 2020-05-15T19:11:59Z

@mapk Now that viewportWidth can be set for each pattern, we can get the preview to display at better proportions:

(The missing separator on the 1st column is a preview artifact, but it is there).

I'm still not 100% satisfied with how the columns preview with uneven heights, but the output does look much better:

enriquesanchez requested a review from TimothyBJacobs as a code owner March 5, 2020 01:14

enriquesanchez requested a review from youknowriad March 5, 2020 01:14

enriquesanchez self-assigned this Mar 5, 2020

enriquesanchez added the [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced label Mar 5, 2020

enriquesanchez force-pushed the add/pricing-table-01-pattern branch from 96b2fb3 to c13f563 Compare May 4, 2020 20:41

enriquesanchez force-pushed the add/pricing-table-01-pattern branch from 47bf549 to 66510d9 Compare May 6, 2020 22:30

enriquesanchez added 8 commits May 15, 2020 13:56

Add pricing table pattern

7fc102d

Change json to php

b4ca534

Rename pattern file name

54c92f4

Add pattern to client-assets

fe05530

Remove empty paragraph block

909af7d

Update pricing table styles

2df7781

More visual updates

af0a5e3

Register pattern

e295668

enriquesanchez force-pushed the add/pricing-table-01-pattern branch from 51103f9 to e295668 Compare May 15, 2020 18:59

Update table styles and add viewportWidth

13daed6

enriquesanchez added 4 commits May 18, 2020 11:49

Merge branch 'master' into add/pricing-table-01-pattern

d8d207b

Fix alignment of Array double arrow

0b71eb0

Change tabs for spaces :)

e0a82ab

Merge branch 'master' into add/pricing-table-01-pattern

73855a2

enriquesanchez closed this Jul 10, 2020

youknowriad deleted the add/pricing-table-01-pattern branch July 13, 2020 08:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add pricing table pattern #20644

Add pricing table pattern #20644

enriquesanchez commented Mar 5, 2020 •

edited

Loading

github-actions bot commented Mar 5, 2020 •

edited

Loading

enriquesanchez commented Apr 8, 2020

mapk commented Apr 10, 2020

enriquesanchez commented Apr 13, 2020

enriquesanchez commented Apr 14, 2020 •

edited

Loading

mapk commented Apr 30, 2020

mapk commented May 6, 2020

enriquesanchez commented May 6, 2020

mapk commented May 7, 2020

youknowriad commented May 7, 2020

enriquesanchez commented May 12, 2020

enriquesanchez commented May 15, 2020

Add pricing table pattern #20644

Add pricing table pattern #20644

Conversation

enriquesanchez commented Mar 5, 2020 • edited Loading

github-actions bot commented Mar 5, 2020 • edited Loading

enriquesanchez commented Apr 8, 2020

mapk commented Apr 10, 2020

enriquesanchez commented Apr 13, 2020

enriquesanchez commented Apr 14, 2020 • edited Loading

mapk commented Apr 30, 2020

mapk commented May 6, 2020

enriquesanchez commented May 6, 2020

Inserter:

Editor:

Front-end:

mapk commented May 7, 2020

youknowriad commented May 7, 2020

enriquesanchez commented May 12, 2020

enriquesanchez commented May 15, 2020

enriquesanchez commented Mar 5, 2020 •

edited

Loading

github-actions bot commented Mar 5, 2020 •

edited

Loading

enriquesanchez commented Apr 14, 2020 •

edited

Loading