Reusable Blocks: Add reusable blocks effects by noisysocks · Pull Request #3377 · WordPress/gutenberg

noisysocks · 2017-11-07T23:48:02Z

Adds the effects necessary for supporting reusable blocks. There are 4:

FETCH_REUSABLE_BLOCKS: Loads reusable blocks from the API and inserts
them into the store.
SAVE_REUSABLE_BLOCK: Persists a reusable block that's in the store to
the API.
MAKE_BLOCK_STATIC: Transforms a reusable block on the page into a
regular block.
MAKE_BLOCK_REUSABLE: Transforms a regular block on the page into a
reusable block.

youknowriad · 2017-11-08T09:16:38Z

lib/client-assets.php

+	// Ensure that we've got jQuery.
+	if ( ! wp_script_is( 'jquery', 'done' ) ) {
+		wp_enqueue_script( 'jquery' );
+	}


Why can't we just add a jquery dependency, something like this 255ef19

We can only pass dependencies into wp_enqueue_script, not wp_add_inline_script: https://developer.wordpress.org/reference/functions/wp_add_inline_script/

But wp_add_inline_script is tied to the original handle wp-editor, and we can define jQuery as a dependency for the enqueuing of wp-editor.

youknowriad · 2017-11-08T09:18:01Z

lib/client-assets.php

+	wp_add_inline_script(
+		'wp-editor',
+		(
+			'jQuery.when( wp.api.init(), wp.api.init( { versionString: \'gutenberg/v1/\' } ) ).done( function() {'


Is jQuery.when the same as Promise.all. It would be great if we can avoid jQuery

I expect init may be returning an instance of jQuery.Deferred. Unsure if Promise.all is capable of handling these.

It looks like that might work: https://codepen.io/noisysocks/pen/zPROqr?editors=0011

Ah, but we can't do this because IE 11 doesn't support promises: https://caniuse.com/#feat=promises

We use a promise polyfill :)

gutenberg/lib/client-assets.php

Line 141 in 6eec188

wp_add_inline_script(

Right you are! 😄 Changed in f5cd6cd.

youknowriad · 2017-11-08T09:19:04Z

lib/client-assets.php

+		'wp-editor',
+		(
+			'jQuery.when( wp.api.init(), wp.api.init( { versionString: \'gutenberg/v1/\' } ) ).done( function() {'
+			. 'wp.editor.createEditorInstance( \'editor\', window._wpGutenbergPost, ' . json_encode( $editor_settings ) . ' ); '


I guess we should drop this line? Probably a merge conflict?

Oops! Fixed in 5367b6e.

Adds the effects necessary for supporting reusable blocks. There are 4: - FETCH_REUSABLE_BLOCKS: Loads reusable blocks from the API and inserts them into the store. - SAVE_REUSABLE_BLOCK: Persists a reusable block that's in the store to the API. - MAKE_BLOCK_STATIC: Transforms a reusable block on the page into a regular block. - MAKE_BLOCK_REUSABLE: Transforms a regular block on the page into a reusable block.

codecov · 2017-11-20T03:19:29Z

Codecov Report

Merging #3377 into master will increase coverage by 2.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3377      +/-   ##
==========================================
+ Coverage    34.9%   36.92%   +2.01%     
==========================================
  Files         263      267       +4     
  Lines        6727     6663      -64     
  Branches     1227     1203      -24     
==========================================
+ Hits         2348     2460     +112     
+ Misses       3694     3551     -143     
+ Partials      685      652      -33

Impacted Files	Coverage Δ
editor/effects.js	`60.16% <100%> (+14.82%)`	⬆️
blocks/api/validation.js	`91.46% <0%> (-3.7%)`	⬇️
editor/components/inserter/menu.js	`85.54% <0%> (-1.79%)`	⬇️
editor/components/inserter/index.js	`0% <0%> (ø)`	⬆️
blocks/library/button/index.js	`9.3% <0%> (ø)`	⬆️
editor/components/block-settings-menu/index.js	`0% <0%> (ø)`	⬆️
editor/header/fixed-toolbar-toggle/index.js	`0% <0%> (ø)`	⬆️
blocks/block-alignment-toolbar/index.js	`33.33% <0%> (ø)`	⬆️
editor/utils/with-change-detection/index.js	`100% <0%> (ø)`	⬆️
editor/header/mode-switcher/index.js	`0% <0%> (ø)`	⬆️
... and 52 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1709207...e156849. Read the comment docs.

This unnecessary line probably came as a result of a bad merge conflict resolution.

`gutenberg_collect_meta_box_data` expected that `window._wpGutenbergEditor` would always be instantiated, but this is only true for when `wp.api.init()` returns quickly because of the API schema being cached. The fix is to use a Promise to store `window._wpGutenbergEditor`. (Well, a jQuery.Deferred, since we have to support IE 11 which doesn't support promises.)

Remove jQuery.Deferred and jQuery.when in our editor initialization in lieu of Promise and Promise.all.

youknowriad · 2017-11-21T08:20:16Z

lib/register.php

 	wp_add_inline_script(
 		'wp-editor',
-		'window._wpGutenbergEditor.initializeMetaBoxes( ' . wp_json_encode( $meta_box_data ) . ' )'
+		'window._wpGutenbergEditor.then( function( editor ) { editor.initializeMetaBoxes( ' . wp_json_encode( $meta_box_data ) . ' ) } );'


Good catch here! Potential bug fixed. Maybe we should rename the variable to make it clear that it's a promise and not the editor instance. Something like _wpLoadGutenbergEditor

👍 e156849

youknowriad

Nice work

Make it clear that this variable is a promise by giving it a non-noun name.

noisysocks mentioned this pull request Nov 8, 2017

Reusable Blocks: Add reusable blocks UI #3378

Merged

youknowriad reviewed Nov 8, 2017

View reviewed changes

mtias added [Feature] Block API API that allows to express the block paradigm. [Feature] Blocks Overall functionality of blocks Framework Issues related to broader framework topics, especially as it relates to javascript labels Nov 8, 2017

Remove extraneous createEditorInstance

5367b6e

This unnecessary line probably came as a result of a bad merge conflict resolution.

noisysocks changed the title ~~Add reusable blocks effects~~ Reusable Blocks: Add reusable blocks effects Nov 20, 2017

noisysocks added 2 commits November 20, 2017 16:19

Replace jQuery.Deferred with Promise

f5cd6cd

Remove jQuery.Deferred and jQuery.when in our editor initialization in lieu of Promise and Promise.all.

youknowriad reviewed Nov 21, 2017

View reviewed changes

youknowriad approved these changes Nov 21, 2017

View reviewed changes

Rename _wpGutenbergEditor -> _wpLoadGutenbergEditor

e156849

Make it clear that this variable is a promise by giving it a non-noun name.

noisysocks merged commit 981c22a into WordPress:master Nov 21, 2017

noisysocks deleted the add/reusable-blocks-effects branch November 21, 2017 22:15

georgeh mentioned this pull request Nov 27, 2017

Replace hard-coded API version with global config #3042

Closed

3 tasks

mkaz mentioned this pull request Nov 28, 2017

Switch method of matching post types to models #3683

Closed

aduth added the [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) label Dec 19, 2017

noisysocks mentioned this pull request Jun 4, 2018

Shared Blocks: Refactor fetching/saving/updating to avoid cycle dependency #7080

Closed

Conversation

noisysocks commented Nov 7, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noisysocks Nov 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

noisysocks Nov 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Nov 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

youknowriad left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

noisysocks Nov 20, 2017 •

edited

Loading

noisysocks Nov 20, 2017 •

edited

Loading

codecov bot commented Nov 20, 2017 •

edited

Loading