Updates 'Three buttons' pattern

[enriquesanchez]

Updates contents and style of the 'Three buttons' pattern. Also adds a description.

Before:

After:

[mapk]

The pattern preview looks like this. Can we get the three buttons to be on the same line for the Preview?

[github-actions]

Size Change: 0 B

Total Size: 1.15 MB

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.min.js	1.14 kB	0 B
build/annotations/index.min.js	3.67 kB	0 B
build/api-fetch/index.min.js	3.43 kB	0 B
build/autop/index.min.js	2.82 kB	0 B
build/blob/index.min.js	620 B	0 B
build/block-directory/index.min.js	7.63 kB	0 B
build/block-directory/style-rtl.css	953 B	0 B
build/block-directory/style.css	952 B	0 B
build/block-editor/index.min.js	125 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.63 kB	0 B
build/block-library/editor.css	7.63 kB	0 B
build/block-library/index.min.js	132 kB	0 B
build/block-library/style-rtl.css	7.83 kB	0 B
build/block-library/style.css	7.83 kB	0 B
build/block-library/theme-rtl.css	728 B	0 B
build/block-library/theme.css	729 B	0 B
build/block-serialization-default-parser/index.min.js	1.88 kB	0 B
build/block-serialization-spec-parser/index.min.js	3.1 kB	0 B
build/blocks/index.min.js	48.3 kB	0 B
build/components/index.min.js	200 kB	0 B
build/components/style-rtl.css	15.7 kB	0 B
build/components/style.css	15.6 kB	0 B
build/compose/index.min.js	9.68 kB	0 B
build/core-data/index.min.js	11.5 kB	0 B
build/data-controls/index.min.js	1.29 kB	0 B
build/data/index.min.js	8.45 kB	0 B
build/date/index.min.js	5.38 kB	0 B
build/deprecated/index.min.js	772 B	0 B
build/dom-ready/index.min.js	568 B	0 B
build/dom/index.min.js	3.23 kB	0 B
build/edit-navigation/index.min.js	10.8 kB	0 B
build/edit-navigation/style-rtl.css	1.08 kB	0 B
build/edit-navigation/style.css	1.08 kB	0 B
build/edit-post/index.min.js	304 kB	0 B
build/edit-post/style-rtl.css	5.61 kB	0 B
build/edit-post/style.css	5.61 kB	0 B
build/edit-site/index.min.js	16.9 kB	0 B
build/edit-site/style-rtl.css	3.06 kB	0 B
build/edit-site/style.css	3.06 kB	0 B
build/edit-widgets/index.min.js	9.37 kB	0 B
build/edit-widgets/style-rtl.css	2.45 kB	0 B
build/edit-widgets/style.css	2.45 kB	0 B
build/editor/editor-styles-rtl.css	537 B	0 B
build/editor/editor-styles.css	539 B	0 B
build/editor/index.min.js	45.3 kB	0 B
build/editor/style-rtl.css	3.78 kB	0 B
build/editor/style.css	3.78 kB	0 B
build/element/index.min.js	4.65 kB	0 B
build/escape-html/index.min.js	733 B	0 B
build/format-library/index.min.js	7.72 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.min.js	2.13 kB	0 B
build/html-entities/index.min.js	621 B	0 B
build/i18n/index.min.js	3.56 kB	0 B
build/is-shallow-equal/index.min.js	711 B	0 B
build/keyboard-shortcuts/index.min.js	2.51 kB	0 B
build/keycodes/index.min.js	1.94 kB	0 B
build/list-reusable-blocks/index.min.js	3.12 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.min.js	5.33 kB	0 B
build/notices/index.min.js	1.79 kB	0 B
build/nux/index.min.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.min.js	2.56 kB	0 B
build/primitives/index.min.js	1.4 kB	0 B
build/priority-queue/index.min.js	789 B	0 B
build/redux-routine/index.min.js	2.85 kB	0 B
build/rich-text/index.min.js	13.9 kB	0 B
build/server-side-render/index.min.js	2.71 kB	0 B
build/shortcode/index.min.js	1.7 kB	0 B
build/token-list/index.min.js	1.27 kB	0 B
build/url/index.min.js	4.06 kB	0 B
build/viewport/index.min.js	1.85 kB	0 B
build/warning/index.min.js	1.14 kB	0 B
build/wordcount/index.min.js	1.17 kB	0 B

_{compressed-size-action}

[enriquesanchez]

Thanks @mapk! I increased the viewportWidth and that should make it better.

[mapk]

Perfect. Much better now. Thanks.

[mapk]

Looking at this again, 600 seems like too much. I recommend just getting as close to 500 as possible so that they a close to the same size as the Two Button Pattern.