Extensions: Add block editor (Gutenberg) extensions source #11633

roccotripaldi · 2019-03-20T21:13:13Z

Fixes nothing, aside from developer headaches

Changes proposed in this Pull Request:

This PR copies the javascript from the wpcalypso repo, and into Jetpack, with the hopes of building the blocks from here in Jetpack, where their PHP code lives.

Testing instructions:

Does the file structure make sense?
Try building:
1. copy extensions/blocks folder into your local calypso at packages/jetpack-blocks/src/blocks
2. In packages/jetpack-blocks/src/blocks run npm install
3. In calypso root run npx lerna run build --stream --scope='@automattic/jetpack-blocks' -- -- --output-path /path-to-jetpack/_inc/blocks
4. Does it build ok?

Proposed changelog entry for your changes:

Adding source code for Jetpack blocks

jetpackbot · 2019-03-20T21:22:19Z

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: April 2, 2019.
Scheduled code freeze: March 26, 2019

Generated by 🚫 dangerJS against a59fb1f

jeherve

Not to throw a wrench into this or anything, but in #11312 we had discussed a somewhat different file organization:

12fa4fd#diff-bf97bdc65b5272e6bbde848e059bdd4eR14

I'm fine either way but wanted to point this out. Wouldn't it be cleaner / easier to handle/build to have the jsx in their own folders?Not to throw a wrench into this or anything, but in #11312 we had discussed a somewhat different file organization:

12fa4fd#diff-bf97bdc65b5272e6bbde848e059bdd4eR14

I'm fine either way but wanted to point this out. Wouldn't it be cleaner / easier to handle/build to have the jsx in their own folders?

simison · 2019-03-21T13:59:47Z

@jeherve @lezama @sirreal and I discussed folder structure and concluded to keep it as flat (opposed to splitting js+scss files to client/ and php files to backend/ folders.)

Gutenberg also has flat structure:

https://github.com/WordPress/gutenberg/tree/95642a40ca5dddbaf93a565d9a78a554974a3e0e/packages/block-library/src/search

Concern was that it would be confusing for complicated blocks with several files and that's also how Jetpack Dashboard files are split.

We can iterate once we do have more files/complex blocks (instead of optimizing early).

One aspect was to try match "single block plugin" proposal (https://make.wordpress.org/meta/2019/03/08/the-block-directory-and-a-new-type-of-plugin) but that's also something we might not want to optimize too early for, just keep it in mind:

To begin with, Single Block Plugins will contain a single PHP file containing plugin headers and initialization code only. Eventually, this should become unnecessary.

simison · 2019-03-21T14:01:04Z

This depends on including files to ignores in different places before this is merged: #11639

(we could just bring those changes over to this PR)

simison · 2019-03-21T14:06:21Z

We should update docs file: extensions/README.md

Maybe something from these files:

matticbot · 2019-03-21T19:33:26Z

Caution: This PR has changes that must be merged to WordPress.com
Hello roccotripaldi! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D25865-code before merging this PR. Thank you!

matticbot · 2019-03-21T19:34:31Z

roccotripaldi, Your synced wpcom patch D25865-code has been updated.

simison · 2019-03-21T20:04:16Z

extensions/README.md


 ```
 .
-└── blockname/
-	└── blockname.php ← PHP file where the block and its assets are registered.
+└── block-or-plugin-name/


In #11333 (unmerged) @ockham suggested separate folder for Plugins: extensions/plugins/seo/seo.php

Thoughts?

Suppose extension could be both plugins and blocks (and filters and whatnot) at the same time, so it might not make sense to optimize this way?

It may be easier for our build tools and for new contributors if everything was in one place?

Does /extensions/blocks then make sense and should we just have /extensions ?

I believe the things in /blocks are actually blocks.

#11640 includes additional extensions (the sidebar and category) that aren't blocks. They are not located under blocks.

roccotripaldi · 2019-03-21T20:11:38Z

We can ignore the failing wpcom sync and manually sync the file in a different phabricator.

kraftbj · 2019-03-22T15:19:19Z

Assigning to @jeherve for the review, scheduled for review today.

jeherve

The blocks seem to build nicely. I do have some questions though.

Should the imported blocks be free of eslint errors? I would assume so since we have Prettier running in Calypso. I can currently see errors like this one, in extensions/shared/frontend-management.js:

Import individual methods from the Lodash module.

Since switching from jsx to js, we also have a few errors like this one, in extensions/shared/help-message.js or in extensions/shared/jetpack-plugin-sidebar.js for example:

'React' must be in scope when using JSX

simison · 2019-03-22T17:10:27Z

We'll need to bring this change here when the PR merges: Automattic/wp-calypso#31690

jeherve · 2019-03-22T23:43:15Z

I would be tempted to close this PR in favor of #11639 now that the commits are included in that other PR as well, but there are still some questions above that I think would be worth discussing.

sirreal · 2019-03-25T08:21:52Z

I've pulled the jsx -> js rename commit 2cdb5b2 over from #11639

sirreal · 2019-03-25T08:55:27Z

I would be tempted to close this PR in favor of #11639 now that the commits are included in that other PR as well, but there are still some questions above that I think would be worth discussing.

I've cleaned up #11639 significantly so these should be independent again.

ockham

This seems to be working well for me. Let's get #11639 merged and this one soon afterwards to reduce the duplication (and confusion) for developers. I think it's fine to address lint errors etc after the fact.

sirreal · 2019-03-25T17:06:36Z

I've just updated and squashed this branch to include the latest Calypso master source (as of Automattic/wp-calypso@0f0ba7b).

Ready for review.

The source for block editor (Gutenberg) extensions was stored in the Calypso repository: https://github.com/Automattic/wp-calypso Move the source into this repository.

lezama

:partyparrot: 🚢 IT

This reverts commit a2bf967.

* Revert "Add source for Gutenberg extensions (#11633)" This reverts commit a2bf967. * Revert "Build: Prepare tooling for Gutenberg extensions in Jetpack (#11639)" This reverts commit 0d14622.

roccotripaldi added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Focus] Blocks Issues related to the block editor, aka Gutenberg, and its extensions developed in Jetpack labels Mar 20, 2019

roccotripaldi added this to the 7.2 milestone Mar 20, 2019

roccotripaldi requested review from a team March 20, 2019 21:13

jeherve reviewed Mar 20, 2019

View reviewed changes

simison mentioned this pull request Mar 21, 2019

Add Gutenpack as codeowners for Jetpack blocks and Calypso build scripts Automattic/wp-calypso#31630

Merged

matticbot added the Touches WP.com Files label Mar 21, 2019

roccotripaldi force-pushed the add/jetpack-blocks-src branch from e476f5a to 928a710 Compare March 21, 2019 19:34

roccotripaldi force-pushed the add/jetpack-blocks-src branch from 928a710 to 7b1d412 Compare March 21, 2019 19:47

simison mentioned this pull request Mar 21, 2019

Change spaces to tabs in json files #11646

Closed

simison reviewed Mar 21, 2019

View reviewed changes

simison changed the title ~~Extensions: Adds javascript / jsx for Jetpack blocks~~ Extensions: Adds Jetpack blocks JavaScript and Sass files Mar 22, 2019

sirreal mentioned this pull request Mar 22, 2019

Build: Prepare tooling for Gutenberg extensions in Jetpack #11639

Merged

simison mentioned this pull request Mar 22, 2019

Cleanup: Drop the Gutenpack i18n wrapper #11656

Closed

kraftbj assigned jeherve Mar 22, 2019

jeherve reviewed Mar 22, 2019

View reviewed changes

lezama force-pushed the add/jetpack-blocks-src branch from 3436b67 to e8aa49e Compare March 22, 2019 21:13

ockham previously approved these changes Mar 25, 2019

View reviewed changes

sirreal dismissed ockham’s stale review via c3847b9 March 25, 2019 17:04

sirreal force-pushed the add/jetpack-blocks-src branch from b5a1dc1 to c3847b9 Compare March 25, 2019 17:04

sirreal changed the title ~~Extensions: Adds Jetpack blocks JavaScript and Sass files~~ Extensions: Add block editor (Gutenberg) extensions source Mar 25, 2019

Add source for Gutenberg extensions

a59fb1f

The source for block editor (Gutenberg) extensions was stored in the Calypso repository: https://github.com/Automattic/wp-calypso Move the source into this repository.

sirreal force-pushed the add/jetpack-blocks-src branch from c3847b9 to a59fb1f Compare March 25, 2019 17:23

kraftbj unassigned jeherve Mar 25, 2019

kraftbj approved these changes Mar 25, 2019

View reviewed changes

kraftbj added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Mar 25, 2019

lezama approved these changes Mar 25, 2019

View reviewed changes

roccotripaldi merged commit a2bf967 into master Mar 25, 2019

ghost removed the [Status] Ready to Merge Go ahead, you can push that green button! label Mar 25, 2019

matticbot added the [Status] Needs Changelog label Mar 25, 2019

kraftbj deleted the add/jetpack-blocks-src branch March 25, 2019 18:51

kraftbj removed the [Status] Needs Changelog label Mar 25, 2019

kraftbj added a commit that referenced this pull request Mar 26, 2019

Revert "Add source for Gutenberg extensions (#11633)"

024f062

This reverts commit a2bf967.

kraftbj mentioned this pull request Mar 26, 2019

Extensions: Add block editor extensions source #11685

Merged

ockham mentioned this pull request Mar 28, 2019

Test: Building a Block from Jetpack #11559

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Extensions: Add block editor (Gutenberg) extensions source #11633

Extensions: Add block editor (Gutenberg) extensions source #11633

roccotripaldi commented Mar 20, 2019 •

edited by sirreal

Loading

jetpackbot commented Mar 20, 2019 •

edited

Loading

jeherve left a comment

simison commented Mar 21, 2019

simison commented Mar 21, 2019 •

edited

Loading

simison commented Mar 21, 2019

matticbot commented Mar 21, 2019

matticbot commented Mar 21, 2019

simison Mar 21, 2019

simison Mar 21, 2019 •

edited

Loading

jeherve Mar 22, 2019

simison Mar 22, 2019

sirreal Mar 22, 2019

roccotripaldi commented Mar 21, 2019

kraftbj commented Mar 22, 2019

jeherve left a comment

simison commented Mar 22, 2019

jeherve commented Mar 22, 2019

sirreal commented Mar 25, 2019

sirreal commented Mar 25, 2019

ockham left a comment

sirreal commented Mar 25, 2019

lezama left a comment

Extensions: Add block editor (Gutenberg) extensions source #11633

Extensions: Add block editor (Gutenberg) extensions source #11633

Conversation

roccotripaldi commented Mar 20, 2019 • edited by sirreal Loading

Changes proposed in this Pull Request:

Testing instructions:

Proposed changelog entry for your changes:

jetpackbot commented Mar 20, 2019 • edited Loading

jeherve left a comment

Choose a reason for hiding this comment

simison commented Mar 21, 2019

simison commented Mar 21, 2019 • edited Loading

simison commented Mar 21, 2019

matticbot commented Mar 21, 2019

matticbot commented Mar 21, 2019

simison Mar 21, 2019

Choose a reason for hiding this comment

simison Mar 21, 2019 • edited Loading

Choose a reason for hiding this comment

jeherve Mar 22, 2019

Choose a reason for hiding this comment

simison Mar 22, 2019

Choose a reason for hiding this comment

sirreal Mar 22, 2019

Choose a reason for hiding this comment

roccotripaldi commented Mar 21, 2019

kraftbj commented Mar 22, 2019

jeherve left a comment

Choose a reason for hiding this comment

simison commented Mar 22, 2019

jeherve commented Mar 22, 2019

sirreal commented Mar 25, 2019

sirreal commented Mar 25, 2019

ockham left a comment

Choose a reason for hiding this comment

sirreal commented Mar 25, 2019

lezama left a comment

Choose a reason for hiding this comment

roccotripaldi commented Mar 20, 2019 •

edited by sirreal

Loading

jetpackbot commented Mar 20, 2019 •

edited

Loading

simison commented Mar 21, 2019 •

edited

Loading

simison Mar 21, 2019 •

edited

Loading