Add initial API to register patterns from themes and plugins #21074

youknowriad · 2020-03-23T09:34:10Z

The API looks like this:

register_pattern(
    'my-plugin/my-awesome-pattern',
    array(
        'title'   => __( 'Two buttons' ),
        'content' => "<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"backgroundColor\":\"very-dark-gray\",\"borderRadius\":0} -->\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-very-dark-gray-background-color no-border-radius\">Button One</a></div>\n<!-- /wp:button -->\n\n<!-- wp:button {\"textColor\":\"very-dark-gray\",\"borderRadius\":0,\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-very-dark-gray-color no-border-radius\">Button Two</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons -->",
    )
);

github-actions · 2020-03-23T09:38:28Z

Size Change: +545 B (0%)

Total Size: 857 kB

Filename	Size	Change
`build/block-directory/index.js`	6.02 kB	-1 B
`build/block-editor/index.js`	100 kB	+14 B (0%)
`build/block-library/index.js`	110 kB	+6 B (0%)
`build/components/index.js`	191 kB	-64 B (0%)
`build/core-data/index.js`	10.6 kB	+1 B
`build/data/index.js`	8.2 kB	+1 B
`build/edit-post/index.js`	91.2 kB	+8 B (0%)
`build/edit-site/index.js`	5.95 kB	+395 B (6%)	🔍
`build/edit-site/style-rtl.css`	2.69 kB	+68 B (2%)
`build/edit-site/style.css`	2.69 kB	+66 B (2%)
`build/editor/style-rtl.css`	4 kB	+26 B (0%)
`build/editor/style.css`	3.98 kB	+25 B (0%)
`build/html-entities/index.js`	622 B	+1 B
`build/is-shallow-equal/index.js`	710 B	-1 B
`build/list-reusable-blocks/index.js`	2.99 kB	-1 B
`build/media-utils/index.js`	4.84 kB	-1 B
`build/notices/index.js`	1.57 kB	-2 B (0%)
`build/plugins/index.js`	2.54 kB	-1 B
`build/priority-queue/index.js`	781 B	+1 B
`build/redux-routine/index.js`	2.84 kB	+1 B
`build/rich-text/index.js`	14.4 kB	+1 B
`build/server-side-render/index.js`	2.55 kB	+1 B
`build/url/index.js`	4.01 kB	+1 B

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	998 B	0 B
`build/annotations/index.js`	3.43 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-editor/style-rtl.css`	10.9 kB	0 B
`build/block-editor/style.css`	10.9 kB	0 B
`build/block-library/editor-rtl.css`	7.24 kB	0 B
`build/block-library/editor.css`	7.24 kB	0 B
`build/block-library/style-rtl.css`	7.41 kB	0 B
`build/block-library/style.css`	7.42 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	57.5 kB	0 B
`build/components/style-rtl.css`	15.8 kB	0 B
`build/components/style.css`	15.7 kB	0 B
`build/compose/index.js`	6.21 kB	0 B
`build/data-controls/index.js`	1.04 kB	0 B
`build/date/index.js`	5.37 kB	0 B
`build/deprecated/index.js`	771 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-post/style-rtl.css`	8.47 kB	0 B
`build/edit-post/style.css`	8.46 kB	0 B
`build/edit-widgets/index.js`	4.43 kB	0 B
`build/edit-widgets/style-rtl.css`	2.58 kB	0 B
`build/edit-widgets/style.css`	2.58 kB	0 B
`build/editor/editor-styles-rtl.css`	381 B	0 B
`build/editor/editor-styles.css`	382 B	0 B
`build/editor/index.js`	43.8 kB	0 B
`build/element/index.js`	4.44 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	6.95 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`	1.93 kB	0 B
`build/i18n/index.js`	3.49 kB	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.69 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/nux/index.js`	3.01 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/viewport/index.js`	1.61 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

mtias · 2020-03-23T10:42:49Z

docs/designers-developers/developers/block-api/block-patterns.md

@@ -0,0 +1,35 @@
+# Patterns
+


Let's add a disclaimer that this are is still under active development.

Thinking of adding __experimental prefix as well.

mtias · 2020-03-23T11:06:58Z

@simison @akirk can you take a look following #20867?

akirk

Nice, this allows translating these. Had two minor suggestions, looks good otherwise. Don't have an opinion of the overall code nor tested it.

docs/designers-developers/developers/block-api/block-patterns.md

Co-Authored-By: Alex Kirk <[email protected]>

docs/designers-developers/developers/block-api/block-patterns.md

Co-Authored-By: Alex Kirk <[email protected]>

aduth · 2020-03-27T17:29:56Z

lib/client-assets.php

+/*
+ * Register default patterns if not registered in Core already.
+ */
+if ( ! WP_Patterns_Registry::get_instance()->is_registered( 'text-two-columns' ) ) {
+	register_pattern( 'core/text-two-columns', gutenberg_load_block_pattern( 'text-two-columns' ) );
+	register_pattern( 'core/two-buttons', gutenberg_load_block_pattern( 'two-buttons' ) );
+	register_pattern( 'core/cover-abc', gutenberg_load_block_pattern( 'cover-abc' ) );
+	register_pattern( 'core/two-images', gutenberg_load_block_pattern( 'two-images' ) );
+}


This is problematic for the plugin build.

See:

Block-Editor: Missing DOMRect polyfill in 7.8 for IE11 #21185 (comment)

Framework: Guard WP_Patterns_Registry call by class_exists #21188

aduth · 2020-03-27T17:31:41Z

lib/class-wp-patterns-registry.php

+function register_pattern( $pattern_name, $pattern_properties ) {
+	return WP_Patterns_Registry::get_instance()->register( $pattern_name, $pattern_properties );
+}


Would it be better to have named this as specific to blocks: register_block_pattern ?

Same goes for:

unregister_pattern

WP_Patterns_Registry

When considering the WordPress function API broadly, it's not obvious by these names they have anything to do with blocks.

I think it was decided to name these "Patterns" and not "Block Patterns". cc @mtias

dovy · 2020-03-31T17:53:15Z

Few suggestions:

JS API parity please. ;)
Callback for fetching the template (storing all those in the DOM could become bad
Support the JS object representation

More on #3. You are using the html code from the command: wp.data.select('core/editor').getEditedPostContent() as the template. But I see many vendors choosing this approach: wp.data.select('core/editor').getEditorBlocks() to account for HTML changes. I suggest we support both methods.

JJJ · 2020-04-13T18:50:19Z

I am concerned about the names of the PHP functions being suggested.

Without a meaningful descriptor, they go against the function naming guidelines:

let the code be unambiguous and self-documenting

This is because, in WordPress, a "pattern" could be many things or it could be nothing.

https://make.wordpress.org/core/2020/03/26/whats-new-in-gutenberg-25-march/#comment-38306

There have already existed multiple different patterns in WordPress for almost 15 years. Permalinks, specifically, but also many different regular expression patterns for post types, taxonomies, and those kinds of things.

In short:

un/register_pattern() seems too vague for inclusion into WordPress core
un/register_block_pattern() seems better (for WordPress) but I think others should weigh in with their opinions before any decisions are made

youknowriad · 2020-04-14T10:09:44Z

I can't seem to find where this was discussed right now, but it was and I believe we settled on "Patterns" over "Block Patterns" and I believe the function names should follow the actual naming of the concepts in the UI otherwise it gets confusing, feel free to open an issue to rediscuss this more largely though.

mtias · 2020-04-14T11:53:58Z

I think calling the function register_design_pattern or register_block_pattern would be alright even if in the UI context it's referred to as just a "pattern".

youknowriad added [Type] New API New API to be used by plugin developers or package users. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels Mar 23, 2020

youknowriad requested review from ajitbohra, chrisvanpatten, mkaz and TimothyBJacobs as code owners March 23, 2020 09:34

youknowriad self-assigned this Mar 23, 2020

youknowriad requested a review from mtias March 23, 2020 09:34

youknowriad added the [Feature] Extensibility The ability to extend blocks or the editing experience label Mar 23, 2020

youknowriad requested a review from obenland March 23, 2020 09:34

Add initial API to register patterns from themes and plugins

a199ca5

youknowriad force-pushed the add/api-patterns branch from ca8fd6f to a199ca5 Compare March 23, 2020 09:38

mtias reviewed Mar 23, 2020

View reviewed changes

Clarify the experimental aspect of the patterns API

ad2656d

akirk reviewed Mar 23, 2020

View reviewed changes

docs/designers-developers/developers/block-api/block-patterns.md Outdated Show resolved Hide resolved

docs/designers-developers/developers/block-api/block-patterns.md Outdated Show resolved Hide resolved

Add translation domain

2c0168c

Co-Authored-By: Alex Kirk <[email protected]>

mtias reviewed Mar 23, 2020

View reviewed changes

docs/designers-developers/developers/block-api/block-patterns.md Outdated Show resolved Hide resolved

youknowriad and others added 2 commits March 23, 2020 14:00

Update code example

ab5383a

Co-Authored-By: Alex Kirk <[email protected]>

Fix manifest

2304534

simison mentioned this pull request Mar 23, 2020

FSE: Add block pattern infrastructure Automattic/wp-calypso#40105

Merged

3 tasks

ellatrix approved these changes Mar 23, 2020

View reviewed changes

ellatrix merged commit 5956aee into master Mar 23, 2020

ellatrix deleted the add/api-patterns branch March 23, 2020 17:20

github-actions bot added this to the Gutenberg 7.8 milestone Mar 23, 2020

aduth mentioned this pull request Mar 26, 2020

Block-Editor: Missing DOMRect polyfill in 7.8 for IE11 #21185

Closed

aduth reviewed Mar 27, 2020

View reviewed changes

JJJ mentioned this pull request Apr 13, 2020

Update the "patterns" to reflect "user interface" instead #21562

Merged

JJJ mentioned this pull request Apr 16, 2020

un/register_pattern() function names violate WordPress naming guidelines #21655

Closed

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

Add initial API to register patterns from themes and plugins #21074

Add initial API to register patterns from themes and plugins #21074

youknowriad commented Mar 23, 2020 •

edited

Loading

github-actions bot commented Mar 23, 2020 •

edited

Loading

mtias Mar 23, 2020

youknowriad Mar 23, 2020

mtias commented Mar 23, 2020

akirk left a comment

aduth Mar 27, 2020

aduth Mar 27, 2020 •

edited

Loading

youknowriad Mar 27, 2020

dovy commented Mar 31, 2020

JJJ commented Apr 13, 2020 •

edited

Loading

youknowriad commented Apr 14, 2020

mtias commented Apr 14, 2020

Add initial API to register patterns from themes and plugins #21074

Add initial API to register patterns from themes and plugins #21074

Conversation

youknowriad commented Mar 23, 2020 • edited Loading

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

mtias Mar 23, 2020

Choose a reason for hiding this comment

youknowriad Mar 23, 2020

Choose a reason for hiding this comment

mtias commented Mar 23, 2020

akirk left a comment

Choose a reason for hiding this comment

aduth Mar 27, 2020

Choose a reason for hiding this comment

aduth Mar 27, 2020 • edited Loading

Choose a reason for hiding this comment

youknowriad Mar 27, 2020

Choose a reason for hiding this comment

dovy commented Mar 31, 2020

JJJ commented Apr 13, 2020 • edited Loading

youknowriad commented Apr 14, 2020

mtias commented Apr 14, 2020

youknowriad commented Mar 23, 2020 •

edited

Loading

github-actions bot commented Mar 23, 2020 •

edited

Loading

aduth Mar 27, 2020 •

edited

Loading

JJJ commented Apr 13, 2020 •

edited

Loading