Adds a 'Features or Services' block pattern #20898

enriquesanchez · 2020-03-13T22:14:01Z

Adds a 'Features or Services' block pattern for #20345.

github-actions · 2020-03-13T22:19:13Z

Size Change: +276 kB (24%) 🚨

Total Size: 1.11 MB

Filename	Size	Change
`build/annotations/index.js`	3.62 kB	+5 B (0%)
`build/block-directory/index.js`	6.93 kB	+342 B (4%)
`build/block-directory/style-rtl.css`	790 B	+26 B (3%)
`build/block-directory/style.css`	791 B	+27 B (3%)
`build/block-editor/index.js`	105 kB	+181 B (0%)
`build/block-library/editor-rtl.css`	7.22 kB	+31 B (0%)
`build/block-library/editor.css`	7.22 kB	+31 B (0%)
`build/block-library/index.js`	118 kB	+231 B (0%)
`build/blocks/index.js`	48.1 kB	-1 B
`build/components/index.js`	182 kB	+319 B (0%)
`build/components/style-rtl.css`	17.1 kB	+35 B (0%)
`build/components/style.css`	17.1 kB	+34 B (0%)
`build/compose/index.js`	6.67 kB	+2 B (0%)
`build/core-data/index.js`	11.4 kB	+3 B (0%)
`build/data-controls/index.js`	1.29 kB	-3 B (0%)
`build/data/index.js`	8.42 kB	+1 B
`build/dom-ready/index.js`	568 B	-1 B
`build/edit-navigation/index.js`	6.6 kB	+825 B (12%)	⚠️
`build/edit-navigation/style-rtl.css`	857 B	+148 B (17%)	⚠️
`build/edit-navigation/style.css`	856 B	+148 B (17%)	⚠️
`build/edit-post/index.js`	302 kB	+274 kB (90%)	🆘
`build/edit-post/style-rtl.css`	12.2 kB	-31 B (0%)
`build/edit-post/style.css`	12.2 kB	-31 B (0%)
`build/edit-site/index.js`	12.1 kB	+13 B (0%)
`build/edit-widgets/index.js`	7.73 kB	-138 B (1%)
`build/edit-widgets/style-rtl.css`	4.59 kB	-102 B (2%)
`build/edit-widgets/style.css`	4.59 kB	-102 B (2%)
`build/editor/index.js`	44.3 kB	-6 B (0%)
`build/element/index.js`	4.65 kB	+1 B
`build/format-library/index.js`	7.64 kB	+2 B (0%)
`build/list-reusable-blocks/index.js`	3.13 kB	-1 B
`build/media-utils/index.js`	5.29 kB	+1 B
`build/nux/index.js`	3.4 kB	-1 B
`build/primitives/index.js`	1.5 kB	+1 B
`build/rich-text/index.js`	14.8 kB	+3 B (0%)
`build/server-side-render/index.js`	2.68 kB	+1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.02 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-editor/style-rtl.css`	10.8 kB	0 B
`build/block-editor/style.css`	10.8 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/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom/index.js`	3.11 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/editor/editor-styles-rtl.css`	425 B	0 B
`build/editor/editor-styles.css`	428 B	0 B
`build/editor/style-rtl.css`	5.07 kB	0 B
`build/editor/style.css`	5.08 kB	0 B
`build/escape-html/index.js`	733 B	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/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/notices/index.js`	1.79 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/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 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}

mtias · 2020-03-28T19:14:53Z

How would this one look if we leave just placeholders for the images?

enriquesanchez · 2020-03-30T22:13:59Z

@mtias do you mean something like this?

enriquesanchez · 2020-04-08T22:47:09Z

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:41:30Z

It would be great to get Matias' feedback on this, but if the placeholder images aren't favorable, than maybe try gradient blocks? @enriquesanchez a cover block with a gradient might work well there.

mtias · 2020-04-13T10:45:14Z

I mean leaving the image block empty so it just display the placeholder (and you can drag an image into it).

enriquesanchez · 2020-04-14T21:57:28Z

I mean leaving the image block empty so it just displays the placeholder (and you can drag an image into it).

@mtias @mapk

Got it, thanks for the clarification. Here's how that would look:

In the editor

On the front end

enriquesanchez · 2020-04-14T22:08:07Z

We could also use a gradient background for the group blocks containing the image block placeholders:

mapk · 2020-04-30T00:19:34Z

The gradient one works well. Let's merge it.

mtias · 2020-04-30T11:25:56Z

Let's go with the gradient.

enriquesanchez · 2020-05-04T21:21:14Z

@mtias @mapk One thing we didn't consider is the pattern preview:

The image placeholders do show up in the preview.

enriquesanchez · 2020-05-05T16:09:04Z

Made some tweaks to the copy to make the preview more balanced (thanks for the suggestion @mapk!)

lib/client-assets.php

enriquesanchez · 2020-05-13T18:41:34Z

@mapk @mtias This one is ready to merge, but I still like to hear your opinion on how the image placeholders look in the preview.

The too narrow issue can be fixed now that #22216 is merged, but how do you feel about the placeholder showing up on the preview?

mapk · 2020-05-13T23:57:59Z

I don't think the Image placeholder works. I'd rather we drop that.

enriquesanchez · 2020-05-15T19:26:02Z

@mapk Removed image placeholders and added viewportWidth

Preview:

Editor:

Front-end:

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

enriquesanchez requested a review from youknowriad March 13, 2020 22:14

enriquesanchez requested a review from TimothyBJacobs as a code owner March 13, 2020 22:14

enriquesanchez self-assigned this Mar 18, 2020

mapk mentioned this pull request Apr 13, 2020

Add Features/Services 01 pattern #20640

Closed

enriquesanchez mentioned this pull request Apr 14, 2020

Add 'Three features' pattern #21135

Closed

mtias approved these changes Apr 30, 2020

View reviewed changes

enriquesanchez force-pushed the add/Features-or-Services-block-pattern branch from f275208 to 8bad169 Compare May 4, 2020 21:01

mtias reviewed May 5, 2020

View reviewed changes

lib/client-assets.php Outdated Show resolved Hide resolved

enriquesanchez force-pushed the add/Features-or-Services-block-pattern branch from 6dc099a to 64d017b Compare May 12, 2020 20:46

enriquesanchez added 3 commits May 15, 2020 14:14

Adds a 'Features or Services' block pattern

34022b6

Fix font size

451ad42

Fix conflict

d46ddd7

enriquesanchez added 6 commits May 15, 2020 14:14

Change json to php

1395118

Register pattern

da99d19

Remove empty paragraph

2e5e44b

Tweaks to copy

50e811e

Fix pattern registry slug

d384137

Update to WP_Block_Patterns_Registry

9578010

enriquesanchez force-pushed the add/Features-or-Services-block-pattern branch from cf61cd5 to 9578010 Compare May 15, 2020 19:14

Update pattern styles and add viewportWidth

4a26cc9

enriquesanchez added 2 commits May 18, 2020 16:55

Fix alignment of array double arrow

54e688b

Change tabs for spaces :)

e002c3b

enriquesanchez merged commit 5c3c290 into master May 19, 2020

enriquesanchez deleted the add/Features-or-Services-block-pattern branch May 19, 2020 00:06

github-actions bot added this to the Gutenberg 8.2 milestone May 19, 2020

ellatrix mentioned this pull request Jun 16, 2020

WP 5.5: merge all PHP changes #23210

Closed

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds a 'Features or Services' block pattern #20898

Adds a 'Features or Services' block pattern #20898

enriquesanchez commented Mar 13, 2020 •

edited

Loading

github-actions bot commented Mar 13, 2020 •

edited

Loading

mtias commented Mar 28, 2020

enriquesanchez commented Mar 30, 2020

enriquesanchez commented Apr 8, 2020

mapk commented Apr 10, 2020

mtias commented Apr 13, 2020

enriquesanchez commented Apr 14, 2020

enriquesanchez commented Apr 14, 2020

mapk commented Apr 30, 2020

mtias commented Apr 30, 2020

enriquesanchez commented May 4, 2020

enriquesanchez commented May 5, 2020

enriquesanchez commented May 13, 2020 •

edited

Loading

mapk commented May 13, 2020 •

edited

Loading

enriquesanchez commented May 15, 2020

Adds a 'Features or Services' block pattern #20898

Adds a 'Features or Services' block pattern #20898

Conversation

enriquesanchez commented Mar 13, 2020 • edited Loading

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

mtias commented Mar 28, 2020

enriquesanchez commented Mar 30, 2020

enriquesanchez commented Apr 8, 2020

mapk commented Apr 10, 2020

mtias commented Apr 13, 2020

enriquesanchez commented Apr 14, 2020

In the editor

On the front end

enriquesanchez commented Apr 14, 2020

mapk commented Apr 30, 2020

mtias commented Apr 30, 2020

enriquesanchez commented May 4, 2020

enriquesanchez commented May 5, 2020

enriquesanchez commented May 13, 2020 • edited Loading

mapk commented May 13, 2020 • edited Loading

enriquesanchez commented May 15, 2020

enriquesanchez commented Mar 13, 2020 •

edited

Loading

github-actions bot commented Mar 13, 2020 •

edited

Loading

enriquesanchez commented May 13, 2020 •

edited

Loading

mapk commented May 13, 2020 •

edited

Loading