Try implementing a built-in Gutenberg playground #14497

youknowriad · 2019-03-18T15:01:40Z

This PR adds a local built-in Gutenberg playground:

This playground allows us to test Gutenberg in a WordPress agnostic context
It surfaces a lot of shortcomings we have in several styles/components
This playground could grow over time to hold more than just a standalone version of the editor. (Thinking about components to test them in isolation...)

Testing instructions

npm install
npm run playground:start
open http://localhost:1234

youknowriad · 2019-03-18T18:16:20Z

package.json

@@ -103,6 +103,7 @@
 		"mkdirp": "0.5.1",
 		"node-sass": "4.11.0",
 		"node-watch": "0.6.0",
+		"parcel-bundler": "1.12.2",


I tried using wp-scripts but it's not usable at the moment for this kind of use-cases as it automatically uses wp.* globals. In this particular case I want to bundle the dependencies.

Should we add --webpack-no-externals flag to wp-scripts build?

We would have to add support for CSS as well. Does Parcel cover RTL support?

Parcel can support RTL through post-css plugins. That said, I'd prefer using wp-scripts but there are still things to figure out before:

Do we want an --webpack-no-externals. Is it something useful outside of this playground?

How do we build CSS with wp-scripts

That's a great question for Core JS chat today :)

We should also check with @front team since they have this create-clould-block tool which scaffolds cloud blocks:
https://github.com/front/create-cloud-block/blob/master/examples/1-simple-block/webpack.config.js

It uses different externals and bundles CSS as well.

packages/block-library/src/classic/editor.scss

youknowriad · 2019-03-18T18:18:39Z

playground/src/index.js

+ */
+import React from 'react';
+
+window.React = React;


Not certain why this is needed yet. Maybe a parcel thing.

Wasn't it an issue only because Babel config couldn't be loaded?

I'll have to check again.

So to solve this, I had to explicitely add the pragma config to the .babelrc. I'm not sure why this is needed though as in theory it's already done by the wordpress default preset. 🤔

youknowriad · 2019-03-18T18:19:04Z

playground/src/index.js

+/**
+ * WordPress dependencies
+ */
+import '@wordpress/editor'; // This shouldn't be necessary


We're still using core/editor in some places in the block editor, it should be refactored properly to avoid the need to import this.

youknowriad · 2019-03-18T18:19:38Z

playground/src/index.js

+import '@wordpress/block-editor/build-style/style.css';
+import '@wordpress/block-library/build-style/style.css';
+import '@wordpress/block-library/build-style/editor.css';
+import '@wordpress/block-library/build-style/theme.css';


I wonder if should have a simpler way to import all the required CSS styles for an npm package.

youknowriad · 2019-03-18T18:21:33Z

I noticed that Gutenberg requires some global styles we're including in edit-post. There are probably some CSS tweaks we can make to make sure these are not necessary to have sane defaults.

A lot of core blocks rely on the REST API... to work properly, if we can make them more generic, that would be a good win.

I like how this playground (and the fact that we can use it as part of our dev workflow) would allow us to detect issues related to the npm packages more easily.

draganescu · 2019-03-18T23:34:58Z

What is this playground for and how to use it? :)

youknowriad · 2019-03-19T07:10:29Z

This playground is to use/try Gutenberg in a context outside of WordPress. this PR is still very early but you can try it by running npm run playground:start and access http://localhost:1234

youknowriad · 2019-03-19T08:49:07Z

playground/src/common.scss

+
+// TODO: Extract these WP Global styles to a mixin
+// We can't apply these globally to html or body at the moment because of the WP sidebar/menu
+:root {


The content of this selector is a "reset" that is applied in Gutenberg but is not applied globally to WordPress as we don't want to mess with the sidebar/topbar. This could be extracted to a mixin as it's useful in edit-widgets as well.

youknowriad · 2019-03-19T08:49:45Z

playground/src/common.scss

+}
+
+a,
+div {


This is a WP-admin style assumed to exist in Gutenberg.

youknowriad · 2019-03-19T09:09:58Z

packages/block-editor/src/components/rich-text/format-toolbar/index.js

@@ -19,7 +19,7 @@ const FormatToolbar = ( { controls } ) => {
 					<Slot name={ `RichText.ToolbarControls.${ format }` } key={ format } />
 				) }
 				<Slot name="RichText.ToolbarControls">
-					{ ( fills ) => fills.length &&
+					{ ( fills ) => fills.length !== 0 &&


This renders 0 if there's no fills.

Now, I remember why I was using isEmpty in other places. I reviewed this code myself but I couldn't find a reason why it would be wrong 😅

/cc @ellatrix

This renders 0 if there's no fills.

See also #14579

gziolo

This PR is cool. I think this should be part of the repository as it helps to catch some bad practices like all those hacks with CSS imports :)

.babelrc

gziolo · 2019-03-19T10:21:14Z

package.json

@@ -103,6 +103,7 @@
 		"mkdirp": "0.5.1",
 		"node-sass": "4.11.0",
 		"node-watch": "0.6.0",
+		"parcel-bundler": "1.12.2",


Should we add --webpack-no-externals flag to wp-scripts build?

youknowriad · 2019-03-21T15:53:42Z

Here's the Gutenberg Playground at its current state.

I'd argue that sometimes it's easier to work and develop in this separate context, for this reason, I think we should ship it and iterate on it. What do you all think?

gziolo · 2019-03-22T14:30:45Z

package.json

@@ -190,7 +191,9 @@
 		"test-unit:update": "npm run test-unit -- --updateSnapshot",
 		"test-unit:watch": "npm run test-unit -- --watch",
 		"test-unit-php": "docker-compose run --rm wordpress_phpunit phpunit",
-		"test-unit-php-multisite": "docker-compose run -e WP_MULTISITE=1 --rm wordpress_phpunit phpunit"
+		"test-unit-php-multisite": "docker-compose run -e WP_MULTISITE=1 --rm wordpress_phpunit phpunit",
+		"playground:build": "npm run build:packages && parcel build playground/src/index.html -d playground/dist",


I have just figured out that we can also use wp-scripts build --config playground/webpack.config.js :)

As I said a lot of time now, I don't see the value of this, it's the same as webpack --config playground/webpack.config.js

Parcel does one more thing I didn't think about initially. It runs the server which is quite important in this particular case. Saying that I convinced myself that it is the best way to proceed as is 😅

gziolo · 2019-03-25T12:12:08Z

.babelrc

@@ -0,0 +1,8 @@
+{
+	"presets": ["@wordpress/babel-preset-default"],
+	"plugins": [


I figured out why we need it in the first place:

https://github.com/parcel-bundler/parcel/blob/060db2e2c56f08e223e9a9075035f0998e249763/packages/core/parcel-bundler/src/transforms/babel/jsx.js#L40-L49

Parcel tries to be smart and overrides our configuration.

gziolo

There is one blocker which I discovered, there is some JS errors which breaks some behaviors like removing blocks:

gziolo · 2019-03-25T12:12:41Z

.babelrc

@@ -0,0 +1,8 @@
+{


Can we move this config inside playground folder and maybe remove babel.config.js which is something wp-scripts build/start will use in the same form regardless?

There is no plan of supporting babel.config.js with Parcel:
parcel-bundler/parcel#2110 (comment)

youknowriad · 2019-03-25T12:23:20Z

@gziolo Actually, there are a lot of these issues and I don't consider them a blocker personally. These are related to the fact that we require plugins for the registry... some API fetch networks should be done only if the WP context... I consider these as separate issues that if solved will improve the reusability of the block editor module and the block library.

Related #14043

gziolo

Should we add a new label Playground?

Let's move forward and address those issues separately then. My biggest concerns was the fact that we would have 2 Babel configs in the root folders which would make it confusing to maintain them. It was addressed so let's 🚢

youknowriad · 2019-03-25T12:39:51Z

Thanks for the review @gziolo

aduth · 2019-03-25T16:29:45Z

Should this be highlighted in tomorrow's Core JS meeting?

Having a hard time surmising from the conversation: Is Parcel intended to become a permanent tool? My main thought would be on the impact on install time (I think I measured it around ~8000 new dependencies) and maintaining multiple build toolchains, though I guess the proposed benefit in the latter case is that there's not so much configuration around Parcel to be maintaining.

youknowriad · 2019-03-25T18:12:06Z

Yep, definitely worth highlighting.

Parcel itself is an implementation detail as if I wanted to do the same with webpack, it would have required a lot of config. The dependency overhead is a real issue though, If I were to choose I'd actually think we should see if our current usage of webpack could be replaced by parcel :) but I don't mind the opposite.

gziolo · 2019-03-26T06:29:27Z

Having a hard time surmising from the conversation: Is Parcel intended to become a permanent tool?

Yes, for the playground. It was way much simpler to proceed this way as @wordpress/scripts is optimized towards a WordPress-based environment:

WordPress globals and other libraries handled as externals
no default server support for standalone usage
no built-in integration with HTML files

The downside is that Parcel comes with its own set of development dependencies and does some magic with Babel config which caused some issues as we had to override the default config we use.

aduth · 2019-04-25T15:16:55Z

.gitignore

@@ -12,3 +12,6 @@ phpcs.xml
 yarn.lock
 docker-compose.override.yml
 /wordpress
+
+playground/dist
+.cache


Does this need to be in .eslintignore ? Ignored tests (#14997) ? I worry its presence could add some significant folder-scan overhead for some common tasks.

Is there a config for .eslintignore to automatically include .gitignore?

Is there a config for .eslintignore to automatically include .gitignore?

Not that I'm aware of, though I do sympathize with the goal to try to consolidate how we consider these "ignored" files.

Related: eslint/eslint#5848

comerc · 2019-10-01T16:20:43Z

/home/aka/gutenberg/playground/src/index.js:28:7: Cannot resolve dependency '@wordpress/components/build-style/style.css'

First time need command: npm run playground:build

landsman · 2020-02-13T19:12:45Z

This was killed? I do not see playground folder in master anymore.

aduth · 2020-02-13T20:18:41Z

@landsman As far as I know, it was integrated into the "Storybook" (storybook folder), where the editor is just one of many things that can be viewed in a standalone, static context.

You can view it (the block editor) online as well:

https://wordpress.github.io/gutenberg/?path=/story/playground-block-editor--default

(Not sure how frequently that is kept in sync with current master, otherwise you can run it from npm run storybook:dev)

gziolo · 2020-02-14T05:58:39Z

https://wordpress.github.io/gutenberg/?path=/story/playground-block-editor--default

(Not sure how frequently that is kept in sync with current master, otherwise you can run it from npm run storybook:dev)

When Travis works properly, then this Storybook instance should be updated to use the latest changes on every merge to master.

youknowriad force-pushed the try/playground branch from 5966c47 to 3a4863a Compare March 18, 2019 18:15

youknowriad commented Mar 18, 2019

View reviewed changes

packages/block-library/src/classic/editor.scss Outdated Show resolved Hide resolved

youknowriad commented Mar 18, 2019

View reviewed changes

youknowriad force-pushed the try/playground branch from da19b50 to 64ad307 Compare March 19, 2019 08:39

youknowriad self-assigned this Mar 19, 2019

youknowriad marked this pull request as ready for review March 19, 2019 08:47

youknowriad requested a review from chrisvanpatten as a code owner March 19, 2019 08:47

youknowriad requested a review from a team March 19, 2019 08:47

youknowriad commented Mar 19, 2019

View reviewed changes

playground/src/common.scss Outdated

}

a,

div {

Copy link

Contributor Author

youknowriad Mar 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a WP-admin style assumed to exist in Gutenberg.

youknowriad commented Mar 19, 2019

View reviewed changes

gziolo reviewed Mar 19, 2019

View reviewed changes

youknowriad force-pushed the try/playground branch 2 times, most recently from 561c8aa to 3549c93 Compare March 21, 2019 09:42

youknowriad added 5 commits March 21, 2019 13:52

Try implementing a built-in Gutenberg playground

c31b6fb

Fix basic editor styling

609aba2

Add google font

59d079b

Fix babel config

ecaaf8c

Use the reset mixin

8d965d2

youknowriad force-pushed the try/playground branch from 3549c93 to 8d965d2 Compare March 21, 2019 12:55

Tweak the playground design

c42945c

Documenting the Playground on the Contributing docs

696a229

youknowriad mentioned this pull request Mar 21, 2019

Follow-up tasks to polish the generic block editor module #14043

Closed

9 tasks

gziolo mentioned this pull request Mar 22, 2019

Enable extending webpack.config.js in packages/scripts/ #14560

Closed

gziolo reviewed Mar 22, 2019

View reviewed changes

Fix typo

2c16a8a

youknowriad requested a review from jorgefilipecosta as a code owner March 25, 2019 10:58

gziolo reviewed Mar 25, 2019

View reviewed changes

gziolo requested changes Mar 25, 2019

View reviewed changes

Move .babelrc to the playground folder

2be9b5b

gziolo added [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Type] Task Issues or PRs that have been broken down into an individual action to take labels Mar 25, 2019

gziolo approved these changes Mar 25, 2019

View reviewed changes

youknowriad merged commit 8625b82 into master Mar 25, 2019

youknowriad deleted the try/playground branch March 25, 2019 12:39

aduth mentioned this pull request Mar 25, 2019

Testing: Add ESLint restricted syntax for truthy length rendering #14579

Merged

youknowriad added this to the 5.4 (Gutenberg) milestone Mar 29, 2019

This was referenced Apr 1, 2019

Bump plugin version to 5.4.0-rc.1 #14735

Merged

Bump plugin version to 5.4.0 #14783

Merged

aduth reviewed Apr 25, 2019

View reviewed changes

aduth mentioned this pull request Jun 7, 2019

Fix: Playground build; Remove @babel/polyfill import from the playground #15947

Merged

chisan0501 mentioned this pull request Dec 30, 2019

Implementing Without WordPress #10352

Closed

+              }
+              a,
+              div {

Try implementing a built-in Gutenberg playground #14497

Try implementing a built-in Gutenberg playground #14497

Conversation

youknowriad commented Mar 18, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Mar 18, 2019

draganescu commented Mar 18, 2019

youknowriad commented Mar 19, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Mar 21, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo Mar 25, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented Mar 25, 2019

gziolo left a comment

Choose a reason for hiding this comment

youknowriad commented Mar 25, 2019

aduth commented Mar 25, 2019

youknowriad commented Mar 25, 2019

gziolo commented Mar 26, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

comerc commented Oct 1, 2019 • edited Loading

landsman commented Feb 13, 2020

aduth commented Feb 13, 2020

gziolo commented Feb 14, 2020

youknowriad commented Mar 18, 2019 •

edited

Loading

gziolo Mar 25, 2019 •

edited

Loading

comerc commented Oct 1, 2019 •

edited

Loading