Proof of concept: render a Gutenberg component in Calypso DevDocs #26088

mmtr · 2018-07-16T16:06:32Z

DO NOT MERGE

Work in progress

Summary

The next step of the current work for integrating the Gutenberg blocks in Calypso is to develop a proof on concept prototyping what a single Gutenberg block should look like in the new "Gutenberg Blocks" section in the DevDocs.

As the Gutenberg core-blocks package is not ready yet (WordPress/gutenberg#3955), this version of the POC will use the @wordpress/components package in order to move forward and identify potential blockers.

Notes

~~Built on top of DevDocs: add a Gutenberg blocks section #26065, so this PR contains files that have actually modified there.~~ DevDocs: show Gutenberg blocks #26064 merged
~~As the npm packages are not published yet, it's required to build them locally. I have included a git submodule for helping that~~ npm package published!

Tasks

Declare @wordpress/components as dependency
Add documentation for the Button Gutenberg component
Include the Button Gutenberg component in the Playground section
Check there are no issues with the @wordpress/compose, @wordpress/deprecated and @wordpress/dom sub deps.

Instructions

npm install
npm start
In a browser, go to the "Gutenberg blocks" section
The Button component from Gutenberg should be rendered

Blockers / Problems

~~@wordpress/utils is still used, so I needed to include a resolve in webpack.config.js handling it~~ Solved in Packages: Move the components module partially to the packages folder WordPress/gutenberg#7640

There is a SCSS file in one of the Gutenberg components (scroll-lock) that doesn't match the expected pattern for the styles (it should be style.scss instead of index.scss and it should be imported in packages/components/src/styles.scss instead of in packages/components/src/scroll-block/index.js). This is causing an error I have not been able to solve with any work-around, as I think it should be fixed on Gutenberg Solved in Packages: Move the components module partially to the packages folder WordPress/gutenberg#7640

~~Styles should be included either via a CSS loader in order to avoid the warning below.~~ It will be solved with the new node-sass version (Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass. sass/node-sass#2362)

@babel/runtime@7.0.0-beta.52 is required by the @wordpress/components. This can be be fixed either by updating Babel in Calypso or by declaring a @babel/runtine dependency in @wordpress/components. Any project using @wordpress/components will have the same issue if @babel/runtime is not installed or if the installed version doesn’t match the one used during the package build process. It should be added to the @wordpress/components package if we don't want to rely on the installed dependencies on a project using it, so the package works out-of-the-box. Solved in Add @babel/runtime as a dependency to @wordpress/components WordPress/gutenberg#8057

matticbot · 2018-07-16T16:06:34Z

Test live: https://calypso.live/?branch=try/gutenberg-devdocs-poc-component

gziolo · 2018-07-16T16:11:07Z

@wordpress/components shouldn't depend on @wordpress/utils anymore. I merged 2 PRs which contributed to that earlier today. You just need to rebase the Gutenberg branch against the latest master :)

gziolo · 2018-07-16T16:12:16Z

There is a SCSS file in one of the Gutenberg components (scroll-lock) that doesn't match the expected pattern for the styles (it should be style.scss instead of index.scss and it should be imported in packages/components/src/styles.scss instead of in packages/components/src/scroll-block/index.js). This is causing an error I have not been able to solve with any work-around, as I think it should be fixed on Gutenberg

@youknowriad, any ideas why it happens? Did we simply miss it?

youknowriad · 2018-07-16T16:22:18Z

There is a SCSS file in one of the Gutenberg components (scroll-lock) that doesn't match the expected pattern for the styles (it should be style.scss instead of index.scss and it should be imported in packages/components/src/styles.scss instead of in packages/components/src/scroll-block/index.js). This is causing an error I have not been able to solve with any work-around, as I think it should be fixed on Gutenberg

@mmtr @gziolo Good catch, the WordPress/gutenberg#7640 has been updated and should be ready for a final review before merging which hopefully will simplify the work being done here.

mmtr · 2018-07-16T16:48:34Z

Thanks both @gziolo @youknowriad! I'm no longer getting those errors :)

…g's api-request)

mmtr · 2018-07-17T10:10:51Z

@gziolo I'm trying to compile the @wordpress/components SCSS files in order to customize the styles using the SCSS variables defined in Calypso, but I'm getting this error:

Not sure why the react-datepicker package is not in the node_modules of @wordpress/components despite of being defined as dependency in the package.json file.

Did I skip any step for building the packages locally?

youknowriad · 2018-07-17T10:24:10Z

I'm trying to compile the @wordpress/components SCSS files in order to customize the styles using the SCSS variables defined in Calypso, but I'm getting this error:

While I understand the reasoning behind this change, I have some concerns about it. Sass files are not considered deliverables in our npm modules. Gutenberg is using them today but once we ship npm modules, I doubt you'll have access to them. Also, it's just an implementation detail, we could consider switching to CSS in JS for example in which case the Sass files won't exist anymore.

I tend to think we should reconsider this and only override styles with CSS. Sass files and sass variables are not an officially supported API in our npm packages.

mmtr · 2018-07-17T10:59:36Z

Thanks @youknowriad, I see your point.

But that would depend on how we want to deliver the @wordpress/components package. Do we want to offer flexibility so anyone can easily customize them in order to match a specific visual identity? If yes, I would reconsider to provide some mechanisms for doing that. If not, the current CSS approach will be enough. I guess this flexibility feature is not a high priority now.

So the question now is, do we want to customize the Gutenberg components in Calypso in order to match the Calypso visual identity or is ok to leave them as originally defined by Gutenberg. What do you think @ehg?

gziolo · 2018-07-17T11:11:05Z

@mmtr, we are merging @wordpress/components into Gutenberg master later today. We should publish it to npm tomorrow (hopefully - depends on a few cleanup PRs which are in review).

mmtr · 2018-07-17T11:18:42Z

Thanks for the update @gziolo! Do you you have any plan for start working on the core-blocks package?

gziolo · 2018-07-17T11:20:23Z

core-blocks depends on components, editor and blocks, so it's far on the list :)

…g's api-request)

… package

…ent' into try/gutenberg-devdocs-poc-component # Conflicts: # client/devdocs/design/gutenberg.jsx # npm-shrinkwrap.json # package.json

gziolo · 2018-07-18T11:01:31Z

For the record, @wordpress/components was published to npm and is now referenced in this PR 🎉

mmtr · 2018-07-18T14:16:39Z

I have just updated the description describing a new issue we have related to the @babel/runtime package

…cs-poc-component

gwwar · 2018-07-19T17:21:39Z

✨ This also ties in nicely as part of #26180

gwwar · 2018-07-19T17:33:05Z

~~@gziolo @youknowriad~~

@babel/runtime@7.0.0-beta.52 is required by the @wordpress/components

Since components is a library, would it be possible to move dependencies needed to build the js/css bundle to devDependencies? Once we publish to npm, the parent application doesn't need to build additional files from this module, right?

See #26088 (comment)

gwwar · 2018-07-19T17:36:15Z

webpack.config.js

-} else {
-	// jquery is only needed in the build for the desktop app
-	// see electron bug: https://github.com/atom/electron/issues/254
-	webpackConfig.externals.push( 'jquery' );


Does @wordpress/components still depend on jQuery?

yep. @wordpress/components needs @wordpress/api-fetch, and this one needs jQuery

Complete aside, but if you type y on a GitHub file view, it'll give you a permanent link to the file like so: https://github.com/WordPress/gutenberg/blob/348e463b7cbdd246cf0744f6fa1459fefd0f37a7/packages/components/package.json#L28 (so the highlighted line remains the same if folks click on it in the future)

Ah I totally misread the summary of WordPress/gutenberg#7566, they're starting to move away from jQuery but it's still a dep

gwwar · 2018-07-19T17:51:05Z

~~Hmm, taking a quick look, I had a little trouble seeing where the babel/runtime@7.0.0-beta.52 is coming from, I'll 🔍a bit later, and will make a PR if I find it.~~

I had a chat with @blowery and @mmtr, and the issue is that we don't declare @babel/runtime as a dependency in the package, but we do need it. Internally in the published package, we have calls like below, that are used to help polyfill calls, without adding a lot of additional code if the consuming parent is using babel/runtime as well.

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

Next steps to remove this blocker:

Land Upgrade Babel to version 7.0.0 beta 53 #26020
Make PRs in the Gutenberg project to add babel/runtime as a dependency ( Add @babel/runtime as a dependency to @wordpress/components WordPress/gutenberg#8057 )

gziolo · 2018-07-20T09:56:51Z

We landed WordPress/gutenberg#8057 and published updated packages to npm. You shouldn't need to provide babel/runtime as a dependency anymore. We still should look into how optimize distributed packages as it probably is far from ideal 😅

mmtr · 2018-07-23T18:51:19Z

everything looks good so far with the @wordpress/components package, so I'm closing this PR as we don't want to expose the Gutenberg components in Calypso for the moment.

the goal of this was to identify potential blockers and I think we're done with that :)

thanks everyone involved!

Proof of concept: render a Gutenberg component in Calypso DevDocs

684a3dc

mmtr added [Status] In Progress DevDocs DO NOT MERGE [Goal] Gutenberg Working towards full integration with Gutenberg labels Jul 16, 2018

mmtr self-assigned this Jul 16, 2018

mmtr requested review from ehg, gziolo and gwwar July 16, 2018 16:07

gziolo requested a review from youknowriad July 16, 2018 16:11

Removing not needed webpack config

8305096

mmtr added 2 commits July 16, 2018 19:22

jQuery bundled with webpack in all environments (required by Gutenber…

a79275a

…g's api-request)

importing @wordpress/components styles

8b3d5b5

compiling @wordpress/components SCSS files

c281d00

revert to @wordpress/components styles via CSS

e07c04e

mmtr mentioned this pull request Jul 17, 2018

DevDocs: show Gutenberg blocks #26064

Closed

9 tasks

mmtr added this to In progress in DevDocs: show Gutenberg blocks Jul 17, 2018

mmtr removed this from In progress in DevDocs: show Gutenberg blocks Jul 17, 2018

Proof of concept: render a Gutenberg component in Calypso DevDocs

e16e5e2

mmtr added 9 commits July 18, 2018 12:22

Removing not needed webpack config

fec7efd

jQuery bundled with webpack in all environments (required by Gutenber…

3a61a28

…g's api-request)

importing @wordpress/components styles

38fc59e

compiling @wordpress/components SCSS files

f18d4e1

revert to @wordpress/components styles via CSS

d5afb73

removing Gutenberg submodule and using the real @wordpress/components…

bf9d793

… package

Merge remote-tracking branch 'origin/try/gutenberg-devdocs-poc-compon…

4a95b26

…ent' into try/gutenberg-devdocs-poc-component # Conflicts: # client/devdocs/design/gutenberg.jsx # npm-shrinkwrap.json # package.json

removing unused file

67846cd

removing gutenberg git submodule

3ce7833

removing duplicated styles in components

7fe059b

Merge remote-tracking branch 'origin/master' into try/gutenberg-devdo…

63e49a9

…cs-poc-component

mmtr mentioned this pull request Jul 19, 2018

Gutenberg: test published packages #26180

Closed

27 tasks

gwwar reviewed Jul 19, 2018

View reviewed changes

adding documentation about how to use components from Gutenberg

775ecbb

mmtr added 4 commits July 20, 2018 17:03

adding Gutenberg components to playground

fa25d7c

checking @wordpress/compose with the Autocomplete Gutenberg component

87bd279

checking @wordpress/deprecated with the Popover Gutenberg component

c37fbe8

checking @wordpress/dom with the Popover Gutenberg component

9367745

mmtr closed this Jul 23, 2018

matticbot removed the [Status] In Progress label Jul 23, 2018

mmtr deleted the try/gutenberg-devdocs-poc-component branch August 9, 2018 21:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proof of concept: render a Gutenberg component in Calypso DevDocs #26088

Proof of concept: render a Gutenberg component in Calypso DevDocs #26088

mmtr commented Jul 16, 2018 •

edited

matticbot commented Jul 16, 2018

gziolo commented Jul 16, 2018

gziolo commented Jul 16, 2018 •

edited

youknowriad commented Jul 16, 2018

mmtr commented Jul 16, 2018

mmtr commented Jul 17, 2018

youknowriad commented Jul 17, 2018

mmtr commented Jul 17, 2018

gziolo commented Jul 17, 2018

mmtr commented Jul 17, 2018

gziolo commented Jul 17, 2018

gziolo commented Jul 18, 2018

mmtr commented Jul 18, 2018

gwwar commented Jul 19, 2018

gwwar commented Jul 19, 2018 •

edited

gwwar Jul 19, 2018

mmtr Jul 19, 2018 •

edited

gwwar Jul 19, 2018

gwwar Jul 19, 2018

gwwar commented Jul 19, 2018 •

edited by mmtr

gziolo commented Jul 20, 2018 •

edited

mmtr commented Jul 23, 2018

Proof of concept: render a Gutenberg component in Calypso DevDocs #26088

Proof of concept: render a Gutenberg component in Calypso DevDocs #26088

Conversation

mmtr commented Jul 16, 2018 • edited

DO NOT MERGE

Summary

Notes

Tasks

Instructions

Blockers / Problems

matticbot commented Jul 16, 2018

gziolo commented Jul 16, 2018

gziolo commented Jul 16, 2018 • edited

youknowriad commented Jul 16, 2018

mmtr commented Jul 16, 2018

mmtr commented Jul 17, 2018

youknowriad commented Jul 17, 2018

mmtr commented Jul 17, 2018

gziolo commented Jul 17, 2018

mmtr commented Jul 17, 2018

gziolo commented Jul 17, 2018

gziolo commented Jul 18, 2018

mmtr commented Jul 18, 2018

gwwar commented Jul 19, 2018

gwwar commented Jul 19, 2018 • edited

gwwar Jul 19, 2018

Choose a reason for hiding this comment

mmtr Jul 19, 2018 • edited

Choose a reason for hiding this comment

gwwar Jul 19, 2018

Choose a reason for hiding this comment

gwwar Jul 19, 2018

Choose a reason for hiding this comment

gwwar commented Jul 19, 2018 • edited by mmtr

gziolo commented Jul 20, 2018 • edited

mmtr commented Jul 23, 2018

mmtr commented Jul 16, 2018 •

edited

gziolo commented Jul 16, 2018 •

edited

gwwar commented Jul 19, 2018 •

edited

mmtr Jul 19, 2018 •

edited

gwwar commented Jul 19, 2018 •

edited by mmtr

gziolo commented Jul 20, 2018 •

edited